WordPress.org

Make WordPress Core

Opened 8 years ago

Last modified 3 months ago

#2702 new enhancement

Easier way to change page order (AJAX/jQuery?)

Reported by: FireMotion Owned by: mdawaffe
Milestone: Future Release Priority: normal
Severity: normal Version: 2.3
Component: Posts, Post Types Keywords: needs-patch good-first-bug
Focuses: ui, javascript, administration Cc:

Description

When having a lot of pages, they get harder to manage (see also Ticket #2004 [Pages page should page]).

When needing to change the page order, it's very inefficient to manually change the page order value, or whole series of page order values, just to move one page up or down the list. Suggestions for alternative ways to change the page order are:

In "Manage - Pages"
1) With up/down arrows (page goes one up or down when the button/link is clicked).
2) or: Drag+Drop (The post/page settings can be dragged and dropped, so why can't this, too?)

Attachments (1)

ajax sortable pages for wp.19-09-07.patch (70.4 KB) - added by berpasan 7 years ago.
This is the patch as of 19-september-2007. If you need it updated to the latest version of trunk just ask me and I will send it here.

Download all attachments as: .zip

Change History (44)

comment:1 ryanscheuermann8 years ago

+1 for page ordering w/ arrows (w/ AJAX too!)

I've thought about writing a patch for this myself. Keep in mind though, if doing up/down for page ordering, the patch also has to take into account page hierarchy.

Drag/Drop might be difficult with heirarchy issues

comment:2 FireMotion8 years ago

Right now, the only thing that can be changed on Manage Pages is deleting pages, which done through the Delete button.

The only useful thing that can be added that I can think of is the page order. So when doing it with drag-and-drop, Manage Pages could have a Apply Page Order button. Submitting/processing that wouldn't be too hard, even with permissions in mind. (But the drag-and-drop scripts would require some work).

On the other hand, when doing it with Move up and Move down buttons, this is easier to code (both displaying it, and submitting/processing it, permissions included.

comment:3 davidhouse8 years ago

Drag and drop would make a nice JS project. It's not impossible even with the hierarchy, see Firefox's bookmark manager for an example for how the interface might look.

Any takers?

comment:4 FireMotion8 years ago

  • Keywords ajax js list-manipulation? added
  • Summary changed from Easier way to change page order to Easier way to change page order (AJAX?)

Seems like doing it through Move up and Move down buttons is not really an options, as it will need to reload the page with each click. And people don't like that apparently: See also ticket #2561.

I guess AJAX is the way to go (but that's not my area, so I'll just be the submitter here :P)

However, it might be hard if #2004 checks out, since, if an item is at the bottom of the page, it can't be moved down (same with if it's the first item on the page, it can't be moved up. Or you can't move any item off a page to another).

Changed to summary to reflect the AJAX question, so it may be able to attract the AJAX guru mdawaffe :).

comment:5 ryanscheuermann8 years ago

For reference, check out the functional tests for Scriptaculous 1.6.1. He's implemented a Drag/Drop Sortable Tree function. I think it's still experimental though.

In regards to #2004, unless the Drag/Drop JS was REALLY kickass to scroll through the pages when you dragged the item over the "Next Page" and "Prev Page" links (AJAX ahoy!), this would nix paging on Pages page.

Also, I'm yet to see an implementation of Drag/Drop reordering that degrades and is accessible. If it's been done, link me, I'm really curious to see how. Or is admin accessibility just being thrown to the wayside these days?

Up/down arrows w/ AJAX list management would degrade nicely, but that presents a per-move page reload tradeoff, like you mentioned.

Or is this a matter of the JS-enabled get a cool new feature, and those without do it the old-fashioned way (Edit->Save, Edit->Save)?

comment:6 skeltoac8 years ago

Those without JS will always be stuck with edit, save, edit, save... That is all you can do with a non-JS browser. Drag-drop isn't possible with plain HTML. Take it up with Tim B-L if you don't like it ;-)

Scriptaculous is no stranger to WordPress. It is distributed in the Widgets plugin. It is not a good solution for this problem.

There is not presently any script known to us that can do all of the things on our wish list. The closest match is Brothercake's DBX, which is what we use for the Write pages. It is keyboard-accessible but it is not meant to work without Javascript.

To make a sortable list that degrades for non-JS users, we would have to put additional markup in the list (links to move each item up/down) and augment DBX to remove those vestigial links.

comment:7 mdawaffe8 years ago

This would be relatively straightforward using DBX and nested dbx_groups.

Rewrite page_rows() such that the HTML reflects the page hierarchy. Pages without children wouild just be a draggable DBX element. Pages with children would be a draggable DBX element and would also contain a new dbx_group in which all its children were elements. You'd be able to to move each page (together with its children) within the list. Until DBX supports dragging items between different dbx_groups (apparently, this is in the works), you would not be able to change the hierarchy, just the ordering; you could only reorder children under their current parents.
DBX is an accessibility dream; I don't believe there would be any problems there.

Then just have a regular old button at the bottom of the screen "Save Page Orders" that would submit a regular old form populated by JS with the value of the DBX cookie. No AJAX needed. In fact, doing AJAX on every drag and drop would be a mess.

You'd have to be carefull with the hierarchical HTML so that list-manipulation would play nice. You wouldn't want to delete a parent page and have all its children disappear from the screen as well. Stick with tables; it should be a flat table (no nested tables) with nested *tbody* elements that define the dbx_groups and draggable elements. (I'm not sure if that'd be valid HTML... anyone know?).

comment:8 mdawaffe8 years ago

That was supposed to be "If you want to stick with tables...". Nested lists would work as well as long as you were careful. It'd be semantically better than the current implementation, but would be inconsistent with the Manage Posts table.

comment:9 FireMotion8 years ago

Another suggestion to make life easier:

In Edit Page maybe there could be the Move Up / Move Down buttons, in addition to the existing input box. Having those buttons is more user-friendly for anyone. Especially for clueless newbies.

comment:10 matt7 years ago

  • Milestone changed from 2.1 to 2.2

comment:11 johnbillion7 years ago

  • Type changed from defect to enhancement

comment:12 foolswisdom7 years ago

  • Milestone changed from 2.2 to 2.3

comment:13 FireMotion7 years ago

  • Summary changed from Easier way to change page order (AJAX?) to Easier way to change page order (AJAX/jQuery?)

Although the description is different, this issue has been mentioned in Google Summer of Code 2007 for the Wordpress Project as an idea: Hierarchical Page (list) Management using jQuery.

comment:14 berpasan7 years ago

  • Cc berpasan@… added
  • Owner changed from anonymous to berpasan

I will be working on this improvement as a Google Summer of Code project (just beginning). I will be happy to receive any comments or suggestions.

comment:16 berpasan7 years ago

This plugin has a lot of merit, but there are a few issues (in my opinion) that make it not usable to be included in the wordpress core and differ from what I am going to implement:

  • It adds another page in the admin are just for page ordering. The idea is to alter the page list itself to provide such functionality, and make it extendable (the javascript part) so that it can also be use in other parts of the wordpress admin.
  • The way it order subpages, even though it works, is somewhat "now ajaxian" and would be impossible to implement in the main page list.
  • It uses scriptaculous and prototype, and it is defined by the Wordpress team that jQuery is now the "oficial" javascript framework to be used in new implementations. Ok, if it was exactly what the wordpress team wanted I guess this wouldn't be a big problem, since what is done is done (like the widgets, that also use prototype), but it doesn't seem to be the case.

Anyway, this plugin does serve as an starting point and sheds a few ideas. I have overlooked its code, and seems pretty simple. Thanks a lot for the tip!

comment:17 froman1187 years ago

I'm the author of My Page Order (as well as My Link Order and My Category Order) and the intention of my plugins has always been to provide a quick and easy way of setting a manual display order for pages, post categories, link categories and links, something not easily done with WP out of the box.

One possible problem I see with adding the ability to order pages on the management panel is that none of the list pages are used to modify data except for marking records for deletion. Adding drag and drop ordering to this list would potentially open up all the list pages to more complexity (i.e. adding a category dropdown on each blogroll row ).

Also need to keep in mind that not everyone displays pages in their themes using the page order. For those that list by id, title, slug, creation date, modified date or author, will an option be provided to list the pages in their desired order like the dropdowns available on the Blogroll list?

If WP developers are ready to push functionality from the edit pages out onto the list pages then sure go for it. Through my experience developing and supporting my plugins (My Page Order being the least popular) I'm just not convinced there's that much demand for this out there. Only a subset of users use the page order in their themes and an even smaller number have enough pages that need to be reordered frequently where the built in functionality becomes cumbersome. Those people that demand more control over the order then have plugins like mine to turn to.

It's a good idea but I'm not sure if the increase in convenience outweighs the increase in complexity. Anyone else have thoughts on this, I'm new to the WP dev scene so some more experienced voices would be welcome.

comment:18 berpasan7 years ago

Thanks for the great advice, froman118 (and also for the plugin!). I agree with a lot of the points you mentioned, specially the one about the user having the possibility to choose how to order the pages in the page list, similar to the Blogroll. I think it definitely needs to be done. To simplify the interface, if the user was not using the page order number to order the pages, the drag and drop control could disappear or be deactivated.

I agree that this is not a functionality that people would "die for", but I believe it adds a lot to the perceived quality of Wordpress as a product. The solution of changing the page order by number inside the editing panel felt like a dirty patch from the first time I used it.

People won't change the page order so frequently and will generally only mess with it when they are initially creating the pages, so downloading and installing a plugin just for this would apply only to users who have really special needs and manage a lot of pages frequently (the vast minority). Most users will figure out how it is done, get a little pissed of how laborious it is, do it and move on, not even thinking there would be a plugin to improve that. Perhaps this might even be one of the reasons why people don't use page ordering that much (although I see it on most of new themes). You also can't ignore the fact that the natural evolution of Wordpress is to become more and more a complete CMS, and pages are very important in this context.

The idea in this project is to try to create something that could be reused in other places of the admin, where ordering is needed or could be used. Just like the other plugins you designed for categories and links.

If complexity in the user perspective is what you are talking about, I agree it is really important to try to minimize it and I think it can be done in this case. You can't forget that in the page editing the "Page Order" field would go away, and things would be neater there (and more intuitive in general).

I agree that this is a detail, but I think attention to details does pay a big role in something's success (I believe Wordpress' success is in great way due to how well thought most of its details are). I like to mention the example of the new Apple's MacBook power adapter: it has a minimal impact on what the user generally does with a notebook, but it is one of the first things people notice and say about their Macs. The "Woow" effect and attention to details definitely play a major role on how much people will love or hate to use a product.

I will be giving details on the project in this blog: http://bitsinashortbit.wordpress.com

comment:19 Nazgul7 years ago

  • Milestone changed from 2.3 (trunk) to 2.4 (future)

comment:20 berpasan7 years ago

I have finished my GSoC project. Please, check this post for more information and to be able to see the demos and download the patches.

comment:21 berpasan7 years ago

  • Owner changed from berpasan to mdawaffe
  • Version changed from 2.0 to 2.3

berpasan7 years ago

This is the patch as of 19-september-2007. If you need it updated to the latest version of trunk just ask me and I will send it here.

comment:22 berpasan7 years ago

  • Keywords has-patch added

comment:23 froman1187 years ago

Turned out pretty good, looking forward to seeing it included in Wordpress so I can finally retire my plugin.

comment:24 DavidSzp6 years ago

+1 As a user who is using or helping others use WordPress as a CMS for three different websites, page order is extremely important to me when using it in this context! It is currently a very frustrating thing to change with the current solution. Even having a row of textboxes you could fill in order numbers in on the Manage Pages page would be nice, but drag and drop would be much better! I would love it if this patch were applied to core!

Additionally, moving from a "page order number" concept to at least a dropdown on the page edit form saying "this page is after: x" with a list of pages to select from would make this at least a little more simple than the way it currently is. Now, I have to edit the pages before and after a particular page just to see what their order numbers are before I edit the actual page I want to change. See the In Series plugin for what I'm talking about, the way it lets you pick where in a series a post goes.

I'll stop drooling over this patch now :-)

comment:25 Jairus6 years ago

  • Keywords dev-feedback added

Are the devs interested in adding this to the core? It's been sitting here for a few months, and it's great code.

comment:26 bentrem6 years ago

berpasan's documentation was updated 13NOV07:
http://code.google.com/p/nestedsortables/wiki/NestedSortableWidgetDocumentation

And his blogpost about snags w/jQuery is dated 17OCT07:
http://bitsinashortbit.wordpress.com/2007/10/17/new-minor-version-of-nestedsortable/

cpoteet's suggestion, "My Page Order" plugin, was updated 30SEP07 ("Checked compatibility with WP 2.3"):
http://geekyweekly.com/mypageorder

GSoC2007 "Hierarchical Page (list) Management" apparently wasn't updated after the summer ... last changed MAY07.

Hierarchical Page (list) Management using jQuery
by Bernardo de Pádua dos Santos, mentored by Michael D Adams (no date) at code.google is a good description of WTBD, but leads to no resolution.

comment:28 pishmishy6 years ago

  • Milestone changed from 2.5 to 2.6

Bumping milestone for feature freeze.

comment:29 follow-up: youngmicroserf5 years ago

  • Milestone changed from 2.9 to 2.8
  • Priority changed from low to normal

Why milestone 2.9 and not 2.8? JS flexibility has improved 2.7 to an enourmous extent, why not keep improving the system in this direction as soon as possible? There are plugins like Joel Starnes' page mash (which is written for mootools, though, I think) that demonstrate the immense usefulness of reordering with AJAX. Page mash has been downloaded more than 10,000 times, according to the author's home page. Not millions, but clearly not a fringe proposal. Thanks for consideration for 2.8!

comment:30 in reply to: ↑ 29 filosofo5 years ago

Replying to youngmicroserf:

Why milestone 2.9 and not 2.8?

That's because patches are usually set to the next version for tickets that have current patches (this patch is quite outdated), and the one after that for proposed new features that don't.

comment:32 ShaneF5 years ago

  • Cc ShaneF added
  • Keywords needs-patch added; has-patch removed
  • Milestone changed from 2.8 to 2.9

Patch is again outdated. Please update and notify and I will test. Being moved to 2.9 as well since this a major change to the system. If there is enough time to test this, I think it can be in 2.8, but right now it's really close to release.

Also create the .js files to to follow the .js file conventions in the script-loader.php file. dev and have one of them be the uncompressed version.

comment:33 berpasan5 years ago

I can update the patch to the current version of WordPress, if there is real interest in applying this to core.

It probably won't be so easy since it was designed to use the interface.js plugin for jQuery, which only works well with jQuery upto version 1.1.4, and I see you are already using 1.2.6 (at least in WP 2.7.1). I can do some testing to see if I can get it to work flawlessly with jQuery 1.2.6, but I guess it won't (it didn't with jQuery 1.2.1). I will probably have to port my script to use jQuery UI (ui.sortable.js), it will be some work but it is feasible, so I will only do it if there is real interest.

If you are guessing why I didn't use jQuery UI intead of Interface in the first place, it's because it didn't exist back then (almost 2 years ago).

comment:34 Denis-de-Bernardy5 years ago

  • Component changed from Administration to Editor
  • Keywords dev-feedback removed
  • Milestone changed from 2.9 to Future Release

comment:35 bryan8684 years ago

This could really use some attention for 3.0. The current "Page Order" via numbering has been janky for far too long.

comment:36 strider724 years ago

Anyone interested in working on a patch for this might also take a look at the PageMash plugin. It has a pretty solid Ajax page re-order interface.

comment:37 WraithKenny4 years ago

Starting from PageMash sounds like a great idea, the plugin is very useful. Perhaps re-skinning it to match the rest of the WP UI, kind of like how the widgets drag-n-drap look.

Other considerations:

  1. A collapsible panel functionality (jQueryUI) for hiding child pages would be nice
  2. I don't know how to handle accessibility. Tab order selecting, with a button link for toggling the move function, then arrow keys for reordering? I don't have any experience with this. (Not sure if the widgets drag-n-drop is accessible either.)

comment:38 scribu4 years ago

I would like to direct your attention to a closely-related feature that has been scheduled for WP 3.0:

#11817 Better Menu Management

Please provide feedback there.

comment:39 johnbillion4 years ago

See also the Page Manager plugin which gives a really nice drag and drop interface for pages and handles nested pages very well.

A note on accessibility/non-JS - it might be sufficient to display a column for the menu_order field (as a small text area). This would be dynamically replaced by the drag and drop handler for users with JS.

comment:40 sillybean3 years ago

  • Cc steph@… added

The Simple Page Ordering plugin works with 3.2.1 and 3.3 trunk (as of this moment) and solves the problem more neatly than any of the other solutions. (It even works with Sidekick, which astonishes me.)

comment:41 ocean903 months ago

  • Component changed from Editor to Posts, Post Types
  • Focuses administration added
  • Keywords ajax js list-manipulation? removed

comment:42 helen3 months ago

#14333 was marked as a duplicate.

comment:43 helen3 months ago

  • Focuses ui javascript added
  • Keywords good-first-bug added

Bringing over my last comment from #14333:

Would still love to see what we could do to have a better page ordering interaction - wouldn't be surprised if there are some other duplicate tickets kicking around. Maybe no-JS support is as simple as keeping the field and hiding it when JS is available, and we can look into accessibility links like the menus system has. The checkbox column has some vertical space, could do arrows, maybe.

I guess there are some base issues with drag-and-drop, though, like what you do over a page break in the list table. Anybody want to explore this some more? The plugin is a great start (and not just saying that out of bias).

Also marking as a good-first-bug - not necessarily a walk in the park, but pretty self-contained.

Note: See TracTickets for help on using tickets.