GSoC for WordPress – First Update – jQuery and mypageorder pluginJune 4, 2007
This year, I was one of the lucky students to be selected to work in Google Summer of Code (GSoC). Better yet, I will be working in a project for the mighty WordPress, this incredible open source blogging platform from which I write now. My project aims at adding “drag and drop” functionality to the page list in the administration area of WordPress, allowing users to easily change the order at which their static pages are displayed.
The program officially started in May 28th. This week I was still a little overwhelmed by some school work (in Brazil it is actually Winter of Code!) and with my final duties from my curricular internship at LocaWeb, where I was also working with the WordPress blog (it was a good warm up for GSoC).
Some ultra-compressed and badly explained technical talk follows (be prepared!).
At first I was worried that I wasn’t going to have all the neat UI elements Scriptaculous provides for Prototype, and would have to do it all by hand (specially the draggable element). As it turn out, there is Interface, which is Scriptaculous’ equivalent for jQuery, and it has Draggables and Sortables elements, that I will hopefully be able to use. It seems to have almost everything, if not more, that Scriptaculous does.
This example, posted in the Interface homepage, shows a draggable folder tree. It supports changing hierarchies, and we could use something similar to change the parent of a page. We could combine it with the Sortable element to change the order inside the same level of hierarchy.
One aspect of implementing the ability of dragging and dropping in the page list is that is that we don’t want the user to lose the functionality they already have, such as clicking on the “edit” link, or selecting the title of a page (to copy and paste, for instance). To avoid that I intend to use some sort of “dragging handle”, that the user should grab in order to move the item (as oposed to clicking anywhere in the item). I like the example of Todo-Lists in the Basecamp app, as shown in this podcast demo. jQuery’s Interface has built-in support for drag handles in its Draggable , so this should be easy to do.
Earlier this week I posted in the WordPress trac, under the ticket that reports the feature I am going to implement, announcing my project. Cpoteet replied and pointed the existence of the mypageorder plugin. I installed it in my test blog and took a quick pick at the code, which is very simple and straightforward. It provides the user with an extra page in the admin, with a list of pages sortable with drag and drop using the Sortable Scriptaculous element (basically in its unaltered state). To handle hierarchical pages, it allows the user select a page that has children and open a new page to order that hierarchy. The plugin is a great step foward, if compared to what is provided in WordPress to order the pages, and very useful. However, it is not integrated in the main page list (since it is a plugin, it couldn’t mess with this page) and doesn’t feel like a native functionality. The way it handles hierarchical pages doesn’t allow the user to view all pages in the list, is not very “ajaxian” and doesn’t allow the user to change the parent page of a subpage.
I still think I could reuse some of mypageorder’s code, specially the server part (if its license and author permits). It is no rocket science, though.
Next week I plan to take a look at the bbPress code that allows page ordering, begin to play with the Draggable and Sortable element in Interface and think on how should the drag handle be.