Revising WordPress Revisions

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Revisions are Awesome!

Slide 5

Slide 5 text

Use Cases • Single user, makes mistakes, goes back to ﬁnd recent version • Two users, corrections and feedback • Multiple users - complex editorial workﬂow

Slide 6

Slide 6 text

Mockups

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Revisions are Awesome!

Slide 12

Slide 12 text

Demo

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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 speciﬁc revision UI diff - the comparison between two particular revisions • wp_prepare_revisions_for_js - Used to ‘bootstrap’ the revisions data for the Javascript

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Views

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Tickmark View

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Compare Any Two Mode

Slide 25

Slide 25 text

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)

Slide 26

Slide 26 text

Ongoing/Extending

Slide 27

Slide 27 text

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/

Slide 28

Slide 28 text

A Little Fun

Slide 29

Slide 29 text

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/

Slide 30

Slide 30 text

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