Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Revising WordPress Revisions

Revising WordPress Revisions

The story and code behind the Backbone.js based revisions interface introduced in WordPress 3.6. What goes into remaking a feature in WordPress?

Adam Silverstein

March 01, 2014
Tweet

Other Decks in Technology

Transcript

  1. Revising WordPress
    Revisions

    View full-size slide

  2. About Me
    • Save assembly code onto cassettes
    • Good at JavaScript & bug squashing
    • Love contributing to WordPress Core
    • Revisions Component Maintainer
    • Senior Web Engineer at 10up

    View full-size slide

  3. • Revisions are awesome!
    • Rewriting a feature in WordPress is hard
    • The Code is spiffy - PHP & JavaScript
    • Improvements are ongoing
    Main Points

    View full-size slide

  4. Revisions are Awesome!

    View full-size slide

  5. Use Cases
    • Single user, makes
    mistakes, goes back to
    find recent version
    • Two users, corrections
    and feedback
    • Multiple users - complex
    editorial workflow

    View full-size slide

  6. Revisions are Awesome!

    View full-size slide

  7. Code
    • JS interface Backbone & Underscores underlying libraries
    • PHP serves up data, uses original code
    • Code underwent major rework to arrive at final state

    View full-size slide

  8. PHP / AJAX Code
    • wp_ajax_get_revision_diffs - An Ajax function that takes
    a list of revisions and returns their diffs
    • wp_get_revision_ui_diff - Get a specific revision UI diff -
    the comparison between two particular revisions
    • wp_prepare_revisions_for_js - Used to ‘bootstrap’ the
    revisions data for the Javascript

    View full-size slide

  9. Bootstrap & Load
    • List of revisions with
    meta
    • Initial selected
    revision diff
    !
    • Initial Ajax Request

    View full-size slide

  10. Backbone Code
    • Backbone.Model - Base model is a single revision Diff
    • Backbone.Collection - Diffs is a collection of all Diffs that
    handles loading and syncing individual diffs
    • Backbone.Views - controls, tickmarks, metabox, tooltip,
    checkbox, buttons, slider, diff
    • Backbone.Router - keeps the urls consistent with the state
    • Templating engine adapted from media library,
    generalized into wp.template

    View full-size slide

  11. Tickmark View

    View full-size slide

  12. Compare Any Two Mode

    View full-size slide

  13. Its hard getting it right
    • Intense testing of single handle & two handled mode
    • Accessibility review - colors, keyboard only, screen readers
    • Browser testing - compatibility down to Internet Explorer 7!
    • Multiple users, autosaves & restoring a revision
    • Testing with several hundred revisions displayed
    • Testing in Right to Left mode (RTL)
    • Original ticket had over 140 comments (three months)

    View full-size slide

  14. Ongoing/Extending

    View full-size slide

  15. Extending
    • Revisioning of Post Meta - #24908 - http://core.trac.wordpress.org/ticket/24908
    • Revisions Plus - https://github.com/adamsilverstein/RevisionsPlus
    • Code Revisions - Google Summer of Code project by Alexander Hoereth -
    http://wordpress.org/plugins/code-revisions/

    View full-size slide

  16. A Little Fun

    View full-size slide

  17. Links
    • The original system - introduced in WordPress 2.5.1 http://
    core.trac.wordpress.org/ticket/6775
    • Codex Article - http://codex.wordpress.org/Revisions
    • Rewrite priorities - http://make.wordpress.org/core/2013/01/23/
    revisions-update-jan-22nd/
    • The big rewrite ticket - http://core.trac.wordpress.org/ticket/23497
    • Create many revisions test script - https://gist.github.com/
    ocean90/5586293
    • Revisioning of Post Meta - http://core.trac.wordpress.org/ticket/24908
    • Revisions component in Trac - http://make.wordpress.org/core/
    components/posts/revisions/

    View full-size slide

  18. Contact Me
    • Twitter @roundearth
    • Email: [email protected]
    • IRC: adamsilverstein
    • tunedin.net

    View full-size slide