The
Customizer team
is proposing to merge the
Menu Customizer plugin
into
core
Core is the set of software required to run WordPress. The Core Development Team builds WordPress.
for WordPress 4.3. In this post, I’ll outline the purpose and history of this project, as well as highlighting the improvements that we have made.
Purpose & Goals
The purpose of the Menu
Customizer
Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.
project is to
move
navigation menu management from the WordPress
admin
(and super admin)
to the Customizer. In the process, we hope to offer an updated design with improved user flow, a mobile-first interface, improved
Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)
, rebuild the administration
UI
User interface
from the ground up to be
JavaScript
JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser.
-driven, solve long-standing problems with the current implementation (
#14134
), and clarify the purposes and
capabilities
capability
is permission to perform one or more types of task. Checking if a user has a capability is performed by the
current_user_can
function. Each user of a WordPress site might have some permissions but not others, depending on their role. For example, users who have the Author role usually have permission to edit their own posts (the “edit_posts” capability), but not permission to edit other users’ posts (the “edit_others_posts” capability).
of the menus feature. Additionally, Menu Customizer contributes significantly to the long-term goal to move all appearance functionality and, really, everything that could benefit from live previewing, from the admin to the Customizer.
Background
Menu Customizer started out as my Google Summer of Code 2014 Project. The
initial proposal
and
revised schedule
highlight the initial goals and provide good perspective for where we’ve come in the past year. See also the
periodic posts here on make/core
for updates. Development has happened on
GitHub
since the project opened to the community.
Core
API
An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.
Improvements
As I began developing this feature in
plugin
A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory
or can be cost-based plugin from a third-party.
form, it became clear that the core Customizer API would need a lot of improvements to support something as complex as menus. Countless tickets have worked towards this goal over the past year, from the addition of the concept of Panels (
#27406
) to
JS
JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.
/Underscore-templated controls (
#29572
), and now, full support for dynamically-added sections and controls (
#30737
#30738
, and
#30741
).
Developers are still realizing the full potential of the Customizer API, and Menu Customizer pushes the boundaries of what can be done here pretty far. One of the goals with our approach is to bring as much functionality that should be natively available in the API into core as possible. With the improvements made here already, as well as the future potential to continue abstracting functionality like the add-menu-items fly-out panel or the ability to add screen options in Customizer Panels, Menu Customizer broadens the potential for developers to extend the Customizer to do anything, in core, plugins, and themes.
Contributors
In the initial GSoC project, I (
celloexpressions
) developed the plugin from scratch, using Widgets in the Customizer as the design basis, with
ethitter
and
obenland
serving as my mentors. When the project was opened to the community for contributions, several designers and developers stepped up to help. Code contributors to date include
westonruter
valendesigns
voldemortensen
adamsilverstein
, and
kucrut
designsimply
and
folletto
have also put in a tremendous amount of time helping with design and usability.
Plugin Overview
I highly recommend trying
the plugin
, which currently requires the latest version of 4.3 alpha.
designsimply
has prepared a video demo:
I’ve posted a comparison of the mobile menus flow
in the admin
and the Customizer on make/flow, and
designsimply
has also
posted flows
there (more flows with more recent versions of the plugin on
trunk
A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.
are still needed). Usability testing has been conducted on usertesting.com, with
results posted on make/design
. As further refinements are made, additional testing and feedback can be incorporated to make the new experience as polished as possible.
A couple of technical details: each menu is a Customizer section, and new menus can be added (dynamically adding new Customizer sections and controls in the process). Menu items are Customizer controls. To maximize scalability, menu items are all rendered using a single JS template, only when their containing menu section is expanded. The add-menu-item panel loads available menu items on an as-needed basis via ajax. The plugin uses several custom Customizer objects including a custom panel that implements screen options, two custom sections (menus, for lazy-loading of menu items, and new menus, which is rendered as a button toggle), and several custom controls. But everything is built off of the core
Customizer API
A summary of some key improvements that the plugin includes:
Modernized, simplified, and more compact UI
Mobile-first design that leverages the Customizer
Scalable, JavaScript-driven and avoids performance issues (
#14134
All menus easily accessible in one place, without page reloads
Live previews of active menus as they are edited
Menu locations that can be set from the main panel or while editing
Global search that includes all post types and terms in all taxonomies
Quick-delete for deleting several items sequentially
“Original” item links open directly into the live preview
The Customizer API can be used to hook into the experience in countless ways with plugins. Support for additional menu item fields can be added much more easily now in a future release, potentially leveraging the
Fields API
Core Tickets Fixed
Menu Customizer fixes numerous tickets on core
trac
An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress.
. This is not an exhaustive list, but covers many bigger ones:
#14134
: Menus item are limited to 16 item and will not save more than that
#28138
: Updating menu item requires passing all of a menu item’s data to wp_update_nav_menu_item() (T
he plugin steps around this, we can actually fix it in core on merge)
#32218
: Remove title attribute option in Menu Editor
(off by default)
#19272
: Add
Filter
Filters are one of the two types of Hooks
. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output.
to Nav Menu Support Themes Text
(can modify via Customizer API)
#21603
: Add ability to delete multiple menu items
#16828
: Add filter on initial_meta_boxes for nav menu
Probably fixed, all are shown currently, which could use improvement but it will default to more being shown at least
#19464
: Auto add do_action for menu in admin
(can use Customizer API)
#31391
: Make the list of registered nav menus (locations) filterable
(can use Customizer API)
#32440
: on Menu page, turn posts by default on “view options”
#18517
: Visual Feedback for Nav Menu UI
The Plan for the Menus Component
This project has a very explicit goal of not just adding menu management to the Customizer, but also removing the existing admin page in the process. The menu management screen has significant, fundamental problems in its implementation and will never scale (see
#14134
) without a significant refactoring along the lines of what we’ve done with the Customizer. Additionally, the new UI in the Customizer is considerably more polished than the admin screen and already includes numerous features and bugfixes proposed for core (see above). Ultimately, the new UI provides a much better experience for all users, including desktop, mobile, accessibility, etc.
The plan for the “removal” of the old menus admin screen is as follows:
Immediately and officially “deprecate” it: wind down any ongoing development efforts and focus all new administration-focused Menus component work on the new UI in the Customizer. Update trac tickets accordingly, and add a “Manage in Customize” link to the existing screen. Any existing tickets proposing enhancements or new features for menu administration would be required to be adapted to the Customizer version, with the (discouraged) option of also making changes to the old screen.
Point the “Menus” link in the admin bar to Menus in the Customizer in 4.3. Remove that menu from the admin bar in 4.4 in favor of a top-level Customize link, and put something more useful in its place (as all of its core links will point to the Customizer now).
Retain the admin screen codebase, along with existing links to it throughout the admin.
In WordPress 4.5 or 4.6, remove all core links (including admin menu) to the Menus admin screen, or point them to the Customizer. This would likely coincide with a similar change for Widgets and Themes to use the Customizer versions exclusively, once full feature-parity is achieved with the Customizer versions of the other features (Menus has it now). At this point the admin screen would be accessible only by plugin-added links or for users who cannot access the Customizer (no-js, IE7, IE8&9 with domain mapping, a very small percentage of users overall).
The admin screen and related code would likely not be removed entirely from core in the foreseeable future, and critical bugs or security issues would still be addressed. New feature development and enhancements would be restricted to the Customizer version.
The above plan is fairly aggressive, to eliminate any ambiguity about future plans and intentions and to avoid the potential for mass trac
ticket
Created for both bug reports and feature development on the bug tracker.
rot. The fact that the Menus component has no maintainers and has not received significant attention since the 3.6 release indicates that there is a general lack of developer interest in dealing with the mess that the current system is. I am willing to step up as a component maintainer for Menus if the above plan is implemented.
Ongoing Work
We have a few issues left that work working on. Notably,
westonruter
has proposed refactoring the way menu item settings are handled, along with menu creation and deleted, and has begun work there, but wouldn’t finish until after a core merge due to time constraints and integration with core code.
adamsilverstein
is working on improving drag & drop to work with sub menus. There are also several minor
issues remaining on GitHub
, which would either be handled in the next couplle days or after merge (many issues have been punted to after a potential merge already).
customize
feature-plugins
menu-customizer
menus
merge
proposal