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?

Fddbd6c3e1c3d971aa732b9346aeb433?s=128

Adam Silverstein

March 01, 2014
Tweet

Transcript

  1. Revising WordPress Revisions

  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
  3. • Revisions are awesome! • Rewriting a feature in WordPress

    is hard • The Code is spiffy - PHP & JavaScript • Improvements are ongoing Main Points
  4. Revisions are Awesome!

  5. Use Cases • Single user, makes mistakes, goes back to

    find recent version • Two users, corrections and feedback • Multiple users - complex editorial workflow
  6. Mockups

  7. None
  8. None
  9. None
  10. None
  11. Revisions are Awesome!

  12. Demo

  13. Code • JS interface Backbone & Underscores underlying libraries •

    PHP serves up data, uses original code • Code underwent major rework to arrive at final state
  14. 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
  15. Bootstrap & Load • List of revisions with meta •

    Initial selected revision diff ! • Initial Ajax Request
  16. None
  17. None
  18. 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
  19. Views

  20. None
  21. Tickmark View

  22. None
  23. None
  24. Compare Any Two Mode

  25. 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)
  26. Ongoing/Extending

  27. 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/
  28. A Little Fun

  29. 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/
  30. Contact Me • Twitter @roundearth • Email: adam@10up.com • IRC:

    adamsilverstein • tunedin.net