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?

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
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
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
21. Tickmark View
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