GSoC Menu Customizer Update: Live-previewing Menus

I’ve finished implementing menu-previewing in the Menu Customizer plugin, building on the scalable approach to saving menus that I discussed in my last update. The entire Menus experience is now consolidated into a Menus panel in the Customizer, where you can preview your menus as you make changes. It’s really nice to have Menus easily accessible alongside the rest of the site-appearance-management tools in the Customizer.

I only have about a week and a half left in my GSoC project, and I’m hoping to focus on improving the add-new-menu-item panel in my remaining time, making it scale and implementing the search functionality. I’m also planning on cleaning up the codebase and implementing the ability to manage menu hierarchy (submenus).

If you’re interested in testing the Menu Customizer, and live-previewing changes to your menus, you can get the plugin here. Please note that it currently requires PHP 5.3+, but it’s getting less and less alpha by the day.

Post-GSoC Plans

After the GSoC coding period is over, I’m planning on transitioning Menu Customizer development to the feature-plugin format, gathering a group of interested contributors and holding weekly meetings to coordinate our efforts. While it won’t be ready for core consideration by 4.1, and requires some more core Customizer infrastructure to really work well, we’ll continue working on the plugin until menus in the Customizer really shine, and are ready for core.

#customize, #gsoc, #gsoc2014, #menu-customizer, #menus

GSoC Menu Customizer Update: Scalable Menus

Since my last GSoC update, I’ve spent a fair amount of time helping prepare the Customizer for 4.0 beta 1. But I’ve also continued working on the Menu Customizer and have a lot of progress to report.

Add & Delete Menus

You can now add new menus, via the “+ New Menu” section. Added menus currently have some issues, though; you’ll probably need to reload the page before adding items works. The problems stem from the lack of a proper JS API for adding, deleting, and managing Sections and Settings (and Panels), and the incompleteness of the existing Control JS API. This will probably need to be resolved in core before the Menu Customizer can be considered for core integration, see #28709.

I’ve also implemented a menu-deletion mode, which can be toggled from the add-menu section. It’s too easy to delete menus otherwise, even with an AYS confirming the delete, because deleted menus cannot be restored, and are not “previewed” before being published to the db (added menus aren’t either). It’s probably worth augmenting the AYS to state the menu name being deleted, and to add an extra warning if it’s active in a theme location or a widget.

Saving Menus and Menu Item Data in a Scalable Way

In core, menus do not scale well at all. You don’t have to look very deep into the code to see why – massive amounts of data for each item are hidden on the admin screens (much of which never changes) and then must be updated every time a change is made.

Since one of the goals of this project is to experiment with new approaches, I’ve begun implementing a new approach for saving menu data, which is currently in use in the plugin. Thanks to my mentors @ethitter and @obenland for guiding me on the best approach to take here, and @westonruter for the way he implemented the Widget Customizer UI, which inspired this exact approach. Here’s how it works:

  • Each menu has a nav_menu Customizer control that contains an ordered array of numerical menu item ids (known throughout the core menus codebase as their db ids).
  • When an item is added, it is created as an orphaned draft via ajax, and its id is added to the nav_menu setting’s array.
  • When an item is deleted, its id is removed from the nav_menu setting’s array.
  • When menu items are reordered, the order of ids in the nav_menu id is updated to match.
  • When menu items are moved into and out of sub-menus, the parent menu item id is updated in the individual item’s data (not yet implemented).
  • When a menu item field is changed (by default, this would mean changing the label or, for custom items, url fileds; there are screen options for several others), the original item is cloned and the copy is updated with the new data, using a wrapper for wp_update_nav_menu_item() that doesn’t require passing all existing (unchanged) menu item data. The cloned item’s id is returned and replaces the original id in the nav_menu setting (thereby marking the original item for deletion). Additional changes are saved to the cloned item until the settings are saved, at which point all items are marked for a new clone to be created if changes are made (not yet implemented).
  • When the user saves their changes from the Customizer (via the customize_update_nav_menu action), the array of ids is compared to the currently-published menu’s items. If there are items that are no longer present, those are marked for deletion. For each of the new ids, the corresponding menu item (which already exists) is updated to be published, assigned to the corresponding menu (for the new items created as orphaned drafts), and the item’s menu_order is set to the id’s position in the nav_menus setting array. Finally, all of the removed items are deleted.

While menu previewing in the customizer is not yet implemented, it will also be able to use the nav_menu setting’s array of ids to display an augmented set of menu items. I’m also still working on ensuring that menu item data is not posted during the customize-save ajax, but the data isn’t needed so we’re most of the way there already.

UI Aside

customize-header-bigflat-buttons-close

Quick aside: @DrewAPicture pointed out in IRC that the new Customizer close and panel-back icons don’t really match the save button. I’ve done some rough explorations of potential alternatives; if anyone’s interested in discussing them and possibly implementing a change here, feel free to ping me in IRC (@celloexpressions) and/or create a ticket and/or comment here.

Finally, I’m hoping to finish implementing menu previewing by the end of this week, fully utilizing the Customizer. Once this is done, I’ll essentially be at feature-complete stage (other than some little details and several known bugs) and ready to iterate (I’m already planning on working on the add-menu-items backend, as it currently doesn’t scale).

#customize, #gsoc, #gsoc2014, #menu-customizer, #menus

GSoC Menu Customizer Update

Since this is my first post here, a quick introduction. I’m a student at the University of Southern California studying Civil Engineering, Architecture, and Music Composition. I’ve been contributing to WordPress Core for just over a year and this summer I’m pleased to be working on WordPress full-time for my Google Summer of Code project.

Overview

The goal of the Menu Customizer project is to add Custom Menu management to the Customizer. Ideally, the project should be able to replace the existing Menus screen, with full feature parity, but that’s obviously a bigger discussion that would take place later. For more details, check out my initial proposal.

Current Status

I started six weeks ago and have built out most of the plugin’s UI and structure. However, I still need to build the menu-item previewing and saving components of the project. The UI closely resembles the Widgets-in-customizer UI, with sections for each menu and controls for each item. New menu items are added via a slide-out panel, where they’re currently grouped by post type/taxonomy, custom links, and a global search feature. The existing “Navigation” Customizer section has been re-branded to “Theme Locations,” and emphasizes the ability to add menus to widgets. Development is being done on the plugin repo, and you can download and play with it from there, but note that adding items creates orphaned draft menu items that are never published currently. Here’s a demo of the current plugin:

(If the embedded video doesn’t play for you, try this link: https://cloudup.com/cVJbk3u32QV)

The add-menu-item UI and implementation will be getting a lot of attention throughout the rest of my project. Items are added immediately, rather than the existing two-step checkboxes and adding several at once process, and menu items can now be deleted without having to open their settings, making deletion and addition more streamlined.

When editing menu items, changing the navigation label of an item instantly updates its drag-and-drop handle, and updating a menu name updates the corresponding Customizer section. Items can be reordered or moved into sub-menus via either drag-and-drop or a reordering mode similar to that of the Widget Customizer.

To minimalize the UI, given the limited space in the customizer, the “Title Attribute” field has been turned off by default, and all of the existing menu-item-field screen options are available, syncing with the existing Menus screen. I might look into building a core API for customizer screen options now that #27406 is in trunk, time permitting.

A good amount of my time in the past couple weeks has been dedicated to #27406, which is a prerequisite for the Menu Customizer to be realistic given the need to allow users to create new menus (and in turn, new Customizer sections). Committed to trunk yesterday, it introduces a “Panels” API to the Customizer. Panels are a way to group sections, adding a new layer of hierarchy to the Customizer. In the Widget Customizer, all widget areas are added to the Widgets panel, allowing widgets to take over the entire Customizer as needed. The Menu Customizer plugin does the same thing with Menus, and requires trunk accordingly.

Upcoming Work

My next steps are to implement menu-adding and deleting, to implement reorderability/sortability, and then to spend quite a bit of time developing a saving/previewing system that scales well (see #14134  and related). This will most likely involve creating clones of changed menu items (posts) and menus (taxonomy terms). Once all of that’s finished, the plugin should be feature-complete, and ready for iteration.

Core Patches

I’ve also taken the opportunity to spend a fair amount of time working on core patches related to either Menus or the Customizer, as this project is widely expanding my knowledge of both areas. A couple of examples that have made it into core include #27406 – Customizer Panels, and #23076 – which adds live menu-item label-updating to the existing Menu screen. I’m planning on continuing to work on Menus and the Customizer via tickets/patches throughout my project as time allows.

#customize, #gsoc, #gsoc2014, #menu-customizer, #menus

GSoC students announced http make wordpress org community…

GSoC students announced! https://make.wordpress.org/community/2014/04/21/gsoc-students-accepted/

(core projects are the minority this year, which is why I posted over on the community site under mentorship programs)

#gsoc, #gsoc2014

GSoC Chat Tomorrow

For those interested in Google Summer of Code, we’ll be holding a chat tomorrow on IRC in #wordpress-gsoc, March 20, at 18:00 UTC (2pm EDT, 11am PDT). Bring your proposal along and you’ll have five minutes to talk through your proposal with mentors. We’ll try to fit everyone.

If you haven’t already, be sure to submit your proposal as soon as possible. There’s not much time left to get feedback prior to the submission deadline! Keep in mind that you can modify your proposal up until the deadline.

See you all tomorrow!

#gsoc, #gsoc2014

GSoC IRC Chats

The application period opens today and closes on March 21. Between now and then, we’ll set up a handful of IRC chats starting this Wednesday (We’ll use #wordpress-gsoc so as not to distract from the beta work in -dev, and won’t get too close to the dev chat time-wise) to allow some real-time chatting with potential students about their project ideas.

All mentors should sign up for at least one time slot so the students will know which chat time will have appropriate mentors in the room. Everyone is welcome to attend these chats, not just mentors.

I’d like to pick 2 times of day and do the chats on Thursday the 13th, Saturday the 15th, Tuesday the 18th, and Thursday the 20th. 21:00 UTC seems to work well for dev chat, so I’m thinking that could be one of the times, but would like a 2nd time that we could do at least once or twice to make it easier on anyone on Australia/Russia side of the world.

Mentors: Please leave a comment with which days/times you can be available for chats in IRC. If anyone has an idea for a good 2nd chat time, suggestions welcome.

Thanks!

#gsoc, #gsoc2014

We’ve been accepted as a mentoring organization for…

We’ve been accepted as a mentoring organization for GSoC! Now comes the work of interacting with potential students on wp-hackers (let’s try to be responsive, and nice) and in #wordpress-dev and #wordpress-gsoc (I’ll set up a few scheduled chats soon, but idle in the channel if you can to field questions) during the application period. Mentors, I’ll contact you within the next couple of days to set up chat times and discuss the application review process.

Thanks to everyone who helped get our Ideas page filled!

#gsoc, #gsoc2014

GSoC 2014 Application Status

I’ve submitted our GSoC application. If anyone is interested in seeing the essay/short-answer questions they ask and how I answered them, I posted that part of the application over at https://make.wordpress.org/community/2014/02/13/gsoc-2014-application/

If you haven’t posted an idea to the codex page https://codex.wordpress.org/GSoC2014 but have time now, go ahead and add it. More ideas = more possible students applying for something that grabs their attention. Also, Google will be reviewing applications Feb 17-21, so adding more ideas (don’t forget to use the template and provide description) between now and the 17th is especially helpful. Not having enough ideas is why we didn’t get accepted in 2012.

Google will announce participating organizations on February 24.

#gsoc, #gsoc2014

GSoC: Now’s the Time

Hey all. I created our org profile for GSoC and have started filling out the application. Before I submit it, our ideas page needs to be bursting with project ideas and potential mentors. To that end, if you are interested in mentoring (co-mentoring a specific student, or just being a casual helper-outer in our gsoc channel when the time comes), let’s get you listed and get those project ideas posted.

Go to https://codex.wordpress.org/GSoC2014 and log in to the codex (your wordpress.org u/p). You will see that I’ve made a template for posting project ideas. Just click the Edit link next to Ideas or next to the template labeled “Project Idea (copy this section, paste below…”, and add your idea to the list below the ones that are there. I filled in one for the standard Full-throttle Trac Annihilation idea using the template so there would be at least one example there for the first poster.

Post as many good ideas for projects as you can think of. Make sure they are substantial enough to constitute a full-time summer job for the student, but not so grand that they won’t be able to finish in 3 months. Note that we always require their working prototype by midterm, so really they should be able to do the primary coding in 6 weeks, with the 2nd 6 weeks for revision, documentation, testing, merging, etc.

Mentors who volunteered on the last thread have been posted in the Mentors section, but you should go in and edit your description to give some info about you, your areas of interest, etc. All mentor names should link to their wordpress.org profiles, as you see with the ones I’ve already posted. If you’d like to link to your own personal site for more info, please do so in the description rather than linking your name there.

It says please don’t edit the mentors section without talking to me first. If you have been a previous mentor for GSoC (or have been listed as mentor before but didn’t wind up with a mentee), consider yourself as having talked to me and go ahead and add yourself to the list/edit your description. If you have never gone through the GSoC process before, please ping me in irc so I can review stuff with you (expectations, etc) before officially putting you on the list.

If folks could start adding to this page now and continue over the weekend, then by Monday we can do a review to see if there are big gaps where I need to go mentor-hunting before submitting the application.

Thanks!

#gsoc, #gsoc2014