Title: menus – Make WordPress Core

---

#  Tag Archives: menus

 [  ](https://profiles.wordpress.org/talldanwp/) [Daniel Richards](https://profiles.wordpress.org/talldanwp/)
9:11 am _on_ October 11, 2021     
Tags: [block-editor ( 144 )](https://make.wordpress.org/core/tag/block-editor/),
[feature-navigation-block-editor ( 4 )](https://make.wordpress.org/core/tag/feature-navigation-block-editor/),
[gutenberg ( 554 )](https://make.wordpress.org/core/tag/gutenberg/), menus   

# 󠀁[Navigation Editor and Block Hallway Hangout](https://make.wordpress.org/core/2021/10/11/navigation-editor-and-block-hallway-hangout/)󠁿

**Date:** [October 13, 2021, 10:00 UTC](https://www.timeanddate.com/worldclock/fixedtime.html?iso=20211013T1000)

**Format:** Zoom (recorded). A link will be shared in the [#feature-navigation-block-editor](https://wordpress.slack.com/archives/C01KDAZJMQ9)
slackSlack Slack is a Collaborative Group Chat Platform [https://slack.com/](https://slack.com/).
The WordPress community has its own Slack Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/)
channel shortly before the meeting is due to commence.

**Length:** 60mins.

**Goal:** Discuss Navigation Editor and BlockBlock Block is the abstract term used
to describe units of markup that, composed together, form the content or layout 
of a webpage using the WordPress editor. The idea combines concepts of what in the
past may have achieved with shortcodes, custom HTML, and embed discovery into a 
single consistent API and user experience. goals for 5.9 and beyond.

**Details: **There are some recent proposed changes to the Navigation Editor and
Block that would change some aspects of the project. See the post in slack for more
information ([https://wordpress.slack.com/archives/C01KDAZJMQ9/p1633512526250600](https://wordpress.slack.com/archives/C01KDAZJMQ9/p1633512526250600)).
This hallway hangout will be assembled to discuss how the project should proceed.

**Facilitator(s):** 

 * Dave Smith ([@get_dave](https://profiles.wordpress.org/get_dave/), [@getdave](https://profiles.wordpress.org/getdave/)).
 * Daniel Richards ([@talldan](https://profiles.wordpress.org/talldan/), [@danr](https://profiles.wordpress.org/danr/)).

**Intended Audience:** past and future contributors to the Navigation Editor and
Block. Contributors to other related parts of WordPress.

**Note Taker:** any volunteers to be the official note keeper?

**Agenda: **

 * Introduction
    - Facilitator and attendee introductions
    - Brief recap of Navigation Editor and Block projects to date
    - Recap of Navigation Editor goals to date
 * Discussion
    - Discuss the proposals for making the Navigation Block ‘reusable’. What are
      the block’s requirements for Full Site Editing?
    - How should the Navigation Block work with Classic Menu data for block-based
      themes (in a Full Site Editing context)?
    - How can the Navigation Editor can be made to work with this future Navigation
      Block?
       * Discuss the case of classic menu editing in the Navigation Editor for classic
         themes that do not support block-based menus.
          - Discuss backwards compatibility requirements and potential solutions.
       * Discuss the case of classic themes that could opt-in to showing block-based
         menus in their theme locations.
    - Have the goals for the Navigation Editor changed?
    - Discuss the proposed roadmap.
 * Summary
    - Briefly discuss next steps
       * Reworking the tracking issues / project board
       * Making WordPress post summarising results

[#block-editor](https://make.wordpress.org/core/tag/block-editor/), [#feature-navigation-block-editor](https://make.wordpress.org/core/tag/feature-navigation-block-editor/),
[#gutenberg](https://make.wordpress.org/core/tag/gutenberg/), [#menus](https://make.wordpress.org/core/tag/menus/)

 [  ](https://profiles.wordpress.org/talldanwp/) [Daniel Richards](https://profiles.wordpress.org/talldanwp/)
8:58 am _on_ August 19, 2021     
Tags: [block-editor ( 144 )](https://make.wordpress.org/core/tag/block-editor/),
[feature-navigation-block-editor ( 4 )](https://make.wordpress.org/core/tag/feature-navigation-block-editor/),
[gutenberg ( 554 )](https://make.wordpress.org/core/tag/gutenberg/), menus   

# 󠀁[Navigation Editor Hallway Hangout: compare/contrast the old and new screens](https://make.wordpress.org/core/2021/08/19/navigation-editor-hallway-hangout-compare-contrast-the-old-and-new-screens/)󠁿

**Date**: [August 24, 2021, at 09:00 UTC](https://www.timeanddate.com/worldclock/fixedtime.html?iso=20210824T0900)

**Format**: Zoom (_recorded_). A link will be shared in the [#feature-navigation-block-editor slack](https://wordpress.slack.com/archives/C01KDAZJMQ9)
channel shortly before the meeting is due to commence.

**Length**: 45 – 60mins. No more.

**Topic**: comparing and contrasting the classic menu screen with the experimental
blockBlock Block is the abstract term used to describe units of markup that, composed
together, form the content or layout of a webpage using the WordPress editor. The
idea combines concepts of what in the past may have achieved with shortcodes, custom
HTML, and embed discovery into a single consistent API and user experience.-based
navigation screen.

**Goal**: derive a list of tasks that are required in order for the two screens 
to have _feature parity_ (from both UXUX User experience and UIUI User interface
perspectives).

**Facilitator**(s): 

 * Dave Smith ([@get_dave](https://profiles.wordpress.org/get_dave/)/[@getdave](https://profiles.wordpress.org/getdave/)).
 * Daniel Richards ([@talldan](https://profiles.wordpress.org/talldan/), [@danr](https://profiles.wordpress.org/danr/)).
 * Javier Arce ([@javier](https://profiles.wordpress.org/javier/)).

**Intended Audience: **past and future contributors to the navigation editor and
block. Contributors to other related parts of WordPress.

**Note Taker:** any volunteers to be the official note keeper?

**Preparation**:

Please could participants test drive the old and new screens. Try creating the same
menus on both screens.

Then come prepared with features they feel are missing from the block-based Navigation
screen that are present in the classic Menu screen, or any bugs encountered.

[⌊Image showing both the new and current navigation experiences with text saying"
A new navigation editing experience is coming...". ⌉⌊Image showing both the new 
and current navigation experiences with text saying "A new navigation editing experience
is coming...". ⌉[

## Agenda

### Introduction

 * Facilitator introductions.
 * Welcome to attendees.
 * Recap hangout topic and goal.
 * Terminology – block-based vs classic Navigation screens.

### Format

 * Explain the format.
 * Facilitator will share screen to demonstrate which parts of the experience are
   being discussed.
 * Questions to consider about the new screen:
    - Where is it lacking polish?
    - What bugs are in evidence?
    - What steps are harder to achieve?
    - What steps are not possible to achieve?
    - What steps are easier to achieve?
    - What features are entirely missing?

### Summary

 * Brief summary of key discussion points from notetaker.
 * Summary of action points including Issues to be created or further explorations
   required.
 * Next steps.
 * Thanks.

[#block-editor](https://make.wordpress.org/core/tag/block-editor/), [#feature-navigation-block-editor](https://make.wordpress.org/core/tag/feature-navigation-block-editor/),
[#gutenberg](https://make.wordpress.org/core/tag/gutenberg/), [#menus](https://make.wordpress.org/core/tag/menus/)

 [  ](https://profiles.wordpress.org/audrasjb/) [Jb Audras](https://profiles.wordpress.org/audrasjb/)
3:46 pm _on_ February 25, 2020     
Tags: [5.4 ( 53 )](https://make.wordpress.org/core/tag/5-4/),
[dev-notes ( 648 )](https://make.wordpress.org/core/tag/dev-notes/), [menu-customizer ( 11 )](https://make.wordpress.org/core/tag/menu-customizer/),
menus   

# 󠀁[New hooks let you add custom fields to menu items](https://make.wordpress.org/core/2020/02/25/wordpress-5-4-introduces-new-hooks-to-add-custom-fields-to-menu-items/)󠁿

WordPress 5.4 gives you two new actions that let you add custom fields to menu items—
in the Menu screen and in the CustomizerCustomizer 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.’s menu editor.

## Menus adminadmin (and super admin) screen

The new `wp_nav_menu_item_custom_fields` action fires just before the move buttons
of a nav menu item in the menu editor.

You can assign five parameters:

 * `$item_id`: the menu item ID (integer)
 * `$item`: the menu item data object (object)
 * `$depth`: the depth of the menu item (integer)
 * `$args`: an object of menu item arguments (object)
 * `$id`: the Navigation MenuNavigation Menu A theme feature introduced with Version
   3.0. WordPress includes an easy to use mechanism for giving various control options
   to get users to click from one place to another on a site. ID (integer)

Here’s a simple example:

    ```notranslate
    function wporg_my_custom_field() {
    	esc_html_e( 'Howdy! WordPress 5.4 is coming!', 'wporg' );
    }
    add_action( 'wp_nav_menu_item_custom_fields', 'wporg_my_custom_field' );
    ```

And here’s the result (highlighted in green dashed border):

![](https://make.wordpress.org/core/files/2020/02/wp-54-nav-menu-item-custom-field.
png)

## The Customizer menu editor

The new `wp_nav_menu_item_custom_fields_customize_template` action fires at the 
end of the form-fields template for navigation menu items in the customizer.

The hook lets you render extra fields there and manage them with JavaScriptJavaScript
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. [https://www.javascript.com](https://www.javascript.com/).

This brings parity with the `wp_nav_menu_item_custom_fields` action.

## Compatibility with existing custom walkers

These new action hooksHooks In WordPress theme and development, hooks are functions
that can be applied to an action or a Filter in WordPress. Actions are functions
performed when a certain event occurs in WordPress. Filters allow you to modify 
certain functions. Arguments used to hook both filters and actions look the same.
can replace the custom walkers you’ve been using for your nav-menu fields. You’ll
want to check your existing code to see where that replacement makes sense.

For more, see the related TracTrac An open source project by Edgewall Software that
serves as a bug tracker and project management tool for WordPress. ticketticket 
Created for both bug reports and feature development on the bug tracker. [#47056](https://core.trac.wordpress.org/ticket/47056).

For more help managing duplication in custom fields, see Trac ticket [#49500](https://core.trac.wordpress.org/ticket/49500).
In plugins, you can avoid the issue entirely with a check for the WordPress version.

[#5-4](https://make.wordpress.org/core/tag/5-4/), [#dev-notes](https://make.wordpress.org/core/tag/dev-notes/),
[#menu-customizer](https://make.wordpress.org/core/tag/menu-customizer/), [#menus](https://make.wordpress.org/core/tag/menus/)

 [  ](https://profiles.wordpress.org/peterwilsoncc/) [Peter Wilson](https://profiles.wordpress.org/peterwilsoncc/)
11:04 pm _on_ November 7, 2016     
Tags: [4.7 ( 124 )](https://make.wordpress.org/core/tag/4-7/),
[dev-notes ( 648 )](https://make.wordpress.org/core/tag/dev-notes/), menus   

# 󠀁[Whitespace changes in navigation for 4.7](https://make.wordpress.org/core/2016/11/07/whitespace-changes-in-navigation-for-4-7/)󠁿

In [[38523]](https://core.trac.wordpress.org/changeset/38523) the argument `item_spacing`
was introduced for the functions `wp_nav_menu()`, `wp_list_pages()`, and `wp_page_menu()`
to:

 * ensure whitespace equivalent output when `wp_nav_menu()` falls back to `wp_list_pages()`,
   and,
 * allow theme authors to control how whitespace is output.

## Backward compatibility changes.

There is a backward compatibility breakage when `wp_nav_menu()` is empty and falls
back to using `wp_list_pages()`.

By default, `wp_nav_menu()` outputs markup with whitespace between each list item(`
</li> <li>`). Prior to WordPress 4.7 when falling back to `wp_list_pages()` there
would be no whitespace between list items (`</li><li>`). This caused layout to change
when certain styles were applied.

From WordPress 4.7 onward when falling back to a page list, `wp_nav_menu()` will
output markup with whitespace between each list item.

There is no change to the default behaviour when calling `wp_list_pages()` directly,
it will not have any whitespace between each item in the menu.

## Controlling how menus and page lists output whitespace.

From WordPress 4.7 onwards, theme authors will be able to control whether whitespace
in `wp_nav_menu()`, `wp_list_pages()` and `wp_page_menu()` with the `item_spacing`
argument.

The `item_spacing` argument accepts either `preserve` or `discard`. To discard the
whitespace in a menu, call the function with:

    ```notranslate
    wp_nav_menu( array(
    	'theme_location' => 'top',
    	'menu_id'        => 'top-menu',
    	'item_spacing'   => 'discard', // default 'preserve'
    ) );
    ```

The same argument can be used for `wp_list_pages()`, and `wp_page_menu()` although
the default is `discard`.

[#4-7](https://make.wordpress.org/core/tag/4-7/), [#dev-notes](https://make.wordpress.org/core/tag/dev-notes/),
[#menus](https://make.wordpress.org/core/tag/menus/)

 [  ](https://profiles.wordpress.org/celloexpressions/) [Nick Halsey](https://profiles.wordpress.org/celloexpressions/)
2:15 pm _on_ June 16, 2016     
Tags: [customize ( 67 )](https://make.wordpress.org/core/tag/customize/),
menus, [proposal ( 40 )](https://make.wordpress.org/core/tag/proposal/)   

# 󠀁[Feature Proposal: Content Authorship in Menus, with Live Preview](https://make.wordpress.org/core/2016/06/16/feature-proposal-content-authorship-in-menus-with-live-preview/)󠁿

The current navigation menus system is built around a paradigm that every menu item
must be associated with an existing piece of content. However, this is problematic
for new users, who may find themselves with the opportunity to build a menu before
creating any content. [#34923](https://core.trac.wordpress.org/ticket/34923) seeks
to improve this experience and eliminate this usability “dead end” by adding the
ability to create new post objects (most notably pages) within the menus interface
in the customizerCustomizer 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..

[⌊content-authorship-nav-menus⌉⌊content-authorship-nav-menus⌉[

## Purpose & Goals

While this feature is aimed primarily at new users setting up their site for the
first time, it may also be useful for users that are restructuring a site, or even
if they want to add a page here or there and add it to their menu before filling
out its contents. It’s important to note that posts and pages added here are stubs–
only their title is filled out, and the content will be added later via the post
editor. For that reason, most existing sites would probably maintain their existing
workflows to create new pages via the post editor, publish them, and then add them
to menus. This is of course still fully supported and the new proposal seeks to 
provide an alternative approach that may be better for different use cases such 
as new sites.

Because the feature is proposed to be located in the customizer, it also fully supports
live preview. The live preview component can build user trust and confidence by 
letting users preview and interact with their site as changes are made, before they’re
published.

## Technical Considerations

To allow new content to be created in the customizer, posts are created with the`
auto_draft `status. When the user saves & publishes in the customizer, these newly-
created posts are transitioned to be published. In the customizer preview, the status
is modified to protected to allow the posts to be previewed.

Ideally, term creation should also be a part of the menus UIUI User interface. Unfortunately,
terms to not currently have a status field, and implementing that or looking at 
alternative approaches is something that will take more thought. Thus, this feature
is being built with future support for terms in mind, but without support currently.

By default, the ability to add new content depends on the appropriate capabilitiescapability
A **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). and the `show_in_nav_menus `parameter
when registering post types. Additionally, a new filterFilter Filters are one of
the two types of Hooks [https://codex.wordpress.org/Plugin_API/Hooks](https://codex.wordpress.org/Plugin_API/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. is proposed to allow authorship in menus to be disabled on a per-post-type
basis.

## Testing

User testing has been requested and there are several tasks that could be tested:

 * Create a new menu for a brand new site by creating pages and adding them to a
   menu, assign the menu to a location and publish it.
 * On an existing site, create new pages to add to an existing menu.
 * On a complex site with multiple menus create a new page once then add it to multiple
   menus.
 * On sites with custom post types, create new custom posts for any of the scenarios
   above.

Test with the [latest patch](https://core.trac.wordpress.org/attachment/ticket/34923/34923.4.diff)
on [#34923](https://core.trac.wordpress.org/ticket/34923) and make sure the customize
posts pluginPlugin 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 [https://wordpress.org/plugins/](https://wordpress.org/plugins/)
or can be cost-based plugin from a third-party. is not activated (it has conflicts).
If anyone is able to conduct user tests that would be much appreciated.

## Customize Posts Plugin

Part of the inspiration for this feature comes from the Customize Posts plugin, 
which has the ability to live-preview posts and post metaMeta Meta is a term that
refers to the inside workings of a group. For us, this is the team that works on
internal WordPress sites like WordCamp Central and Make WordPress. in the customizer.
Only a very small portion of the plugin would make its way into coreCore Core is
the set of software required to run WordPress. The Core Development Team builds 
WordPress. as part of the nav menus content authorship feature. However, the proposal
is currently to establish the `wp.customize.Posts` namespace for future expansions
of post-related functionality in the customizer. The existing plugin would extend
this core namespace, and other plugins could do so as well.

There are currently no plans to consider the Customize Posts plugin for full merge
into core; however, stay tuned for an upcoming feature project kick-off that will
seek to explore the future of live preview in WordPress at a broader level.

## Feedback & Next Steps

The [latest patch](https://core.trac.wordpress.org/attachment/ticket/34923/34923.4.diff)
is currently seeking feedback for accessibilityAccessibility 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), design, code review, docs, and general comments. Please
test it and leave your feedback as comments on this post or the ticketticket Created
for both bug reports and feature development on the bug tracker., [#34923](https://core.trac.wordpress.org/ticket/34923).
Given current timing the ticket is likely to target the 4.7 milestone.

One remaining piece to implement is a mechanism to inform the user that their new
posts have been published and provide links to edit the posts in the adminadmin (
and super admin). This could take the form of a notifications area in the customizer
or preview, or happen inline within the menus UI as a notice using the customizer
setting validation feature that’s new in 4.6. UXUX User experience feedback and 
ideas for the potential approach here are needed, and it could also probably work
to ship without this part for now.

[#customize](https://make.wordpress.org/core/tag/customize/), [#menus](https://make.wordpress.org/core/tag/menus/),
[#proposal](https://make.wordpress.org/core/tag/proposal/)

 [  ](https://profiles.wordpress.org/westonruter/) [Weston Ruter](https://profiles.wordpress.org/westonruter/)
10:45 pm _on_ July 29, 2015     
Tags: [4.3 ( 65 )](https://make.wordpress.org/core/tag/4-3/),
[customize ( 67 )](https://make.wordpress.org/core/tag/customize/), [dev-notes ( 648 )](https://make.wordpress.org/core/tag/dev-notes/),
[feature plugins ( 122 )](https://make.wordpress.org/core/tag/feature-plugins/),
[feature-selective-refresh ( 4 )](https://make.wordpress.org/core/tag/feature-selective-refresh/),
[kickoff ( 4 )](https://make.wordpress.org/core/tag/kickoff/), [menu-customizer ( 11 )](https://make.wordpress.org/core/tag/menu-customizer/),
menus, [partial-refresh ( 2 )](https://make.wordpress.org/core/tag/partial-refresh/),
[proposal ( 40 )](https://make.wordpress.org/core/tag/proposal/)   

# 󠀁[Fast previewing changes to Menus in the Customizer](https://make.wordpress.org/core/2015/07/29/fast-previewing-changes-to-menus-in-the-customizer/)󠁿

The foundation of the CustomizerCustomizer 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. is built on the concept of the “setting”, an abstract representation
of anything in WordPress: options, theme mods, posts, terms, and so on. Settings
are linked to controls which are responsible for manipulating them. When a setting
is changed it gets pushed into the preview window so that the modification can be
reviewed before being published live.

There are two ways (transports) for how a setting can be pushed into the preview:`
refresh` and `postMessage`. The `refresh` transport does a full page refresh with
the modified settings applied, and so it relies on PHPPHP The web scripting language
in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher
to apply the setting changes. The `refresh` transport is designed to be compatible
with all themes, but for heavy sites `refresh` can be excruciating slow and taxing
on the server. For this reason, the `postMessage` transport was introduced for previewing
changes. This transport uses JavaScriptJavaScript 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. [https://www.javascript.com](https://www.javascript.com/)
to apply the changes instantly in the preview without any Ajax requests or PHP calls.
This is great, but themes have to opt-in to `postMessage` transport for settings
because they must also include JavaScript code which _duplicates_ the logic which
is already being executed on the server by PHP. The `postMessage` transport violates
the DRY principle.

With that background out of the way…

### Partial Refresh of Menus

In WordPress 4.3 menu management is being added to the Customizer, extending the
types of objects that the Customizer can manipulate to include `nav_menu` taxonomyTaxonomy
A taxonomy is a way to group things together. In WordPress, some common taxonomies
are category, link, tag, or post format. [https://codex.wordpress.org/Taxonomies#Default_Taxonomies](https://codex.wordpress.org/Taxonomies#Default_Taxonomies).
terms and `nav_menu_item` posts. We wanted this menu management experience to be
fast so it had to avoid the slow full-page `refresh` transport. Nevertheless, the`
postMessage` transport wasn’t possible to use either since we wouldn’t be able to
duplicate all of the PHP menu walker logic and theme/pluginPlugin 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 [https://wordpress.org/plugins/](https://wordpress.org/plugins/)
or can be cost-based plugin from a third-party. extensions for rendering menus purely
in JavaScript. We also wanted to enable fast previewing of menu changes by default.
So we implemented a `postMessage`/`refresh` hybrid approach which uses `postMessage`
to sync the menus settings to the preview, and then the preview does an Ajax request
to render just the contents of the menu container, and this Ajax response is then
inserted into the DOM to replace the previous menu container. The technical name
for this approach we have been calling “partial refresh”, but you can call it “fast
preview”.

When the Customizer determines it can’t do a partial refresh, it falls back to performing
a full page refresh. Conditions for why a menu change will get a full page refresh
include:

 * if the menu was just assigned to a location for the first time or removed from
   being assigned to a location, since the theme may have some changes to the layout
   that it may need to perform;
 * or if `wp_nav_menu()` is called with with `echo` being `false`, since the theme
   may be doing some string replacement in this case which we can’t replicate in
   the partial-refresh Ajax request;
 * or if `wp_nav_menu()` is called with with a non-JSONJSON JSON, or JavaScript 
   Object Notation, is a minimal, readable format for structuring data. It is used
   primarily to transmit data between a server and web application, as an alternative
   to XML. serializable `fallback_cb`, such as a closure or a object method—this
   arg has to be empty or a string;
 * or if `wp_nav_menu()` is called with with a `walker` object instance, as opposed
   to a class name string;
 * or if `wp_nav_menu()` is called without a `theme_location` arg and the menu arg
   is not an term ID or a menu object;
 * or if the menu selected in a Custom Menu widgetWidget A WordPress Widget is a
   small block that performs a specific function. You can add these widgets in sidebars
   also known as widget-ready areas on your web page. WordPress widgets were originally
   created to provide a simple and easy-to-use way of giving design and structure
   control of the WordPress theme to the user. is changed, since partial refresh
   for widgets is not yet supported (however, see [feature plugin](https://wordpress.org/plugins/customize-partial-refresh/))—
   subsequent changes to the menu will result in fast partial refreshes if the above
   conditions

When a menu is being updated via partial refresh, the menu container will receive
a classname `customize-partial-refreshing`, which by default changes the opacity
to 25%.

### Theme Support

The fast preview for menu changes is being _enabled by default_ so that theme authors
don’t have to opt-in to the functionality like they do for instant preview (`postMessage`
transport). In general this should be fine. However, if the theme includes some 
JavaScript which dynamically manipulates the rendered menu container, such as adding
event handlers for expanding/collapsing submenus, then the theme would need to include
some JSJS JavaScript, a web scripting language typically executed in the browser.
Often used for advanced user interfaces and behaviors. to re-apply the modifications
once the menu is partial-refreshed, as the old DOM for the menu container gets replaced.

The Twenty Fifteen theme actually uses JS to expand/collapse submenu items, so it
needed a patchpatch A special text file that describes changes to code, by identifying
the files and lines which are added, removed, and altered. It may also be referred
to as a **diff**. A patch can be _applied_ to a codebase for testing. in 4.3 to 
re-setup a partial-refreshed main nav menu. In addition to firing the menu container
DOM setup logic once at `jQuery.ready()`, it now invokes the functionality whenever
the menu is partial-refreshed. See the [`initMainNavigation()` JS function](https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentyfifteen/js/functions.js?rev=33491#L14).

So in general, if your theme needs to dynamically initialize menus with JavaScript,
the pattern for the initialization code should be:

    ```notranslate
    jQuery(function($) {
    	function initMainNavigation( container ) {
    		/* set up container... */
    	}
    	initMainNavigation( $( '.main-navigation' ) );

    	$( document ).on( 'customize-preview-menu-refreshed', function( e, params ) {
    		if ( 'primary' === params.wpNavMenuArgs.theme_location ) {
    			initMainNavigation( params.newContainer );
    			/* optionally sync a previous menu state from params.oldContainer... */
    		}
    	});
    });
    ```

The `params` being passed to the event handler consists of the following properties:

 * `newContainer`: jQuery object containing the new menu container element retrieved
   from Ajax; this is what you would manipulate to initialize.
 * `oldContainer`: the previous jQuery object holding the element for the replaced
   menu container; this is useful if there is any state in the old menu that should
   persist in the new menu, such as which submenus are expanded (as in Twenty Fifteen).
 * `wpNavMenuArgs`: The array of arguments passed to `wp_nav_menu()` in the template,
   such as `template_location`.
 * `instanceNumber`: The index for which `wp_nav_menu()` call being updated.

## The Future

Partial refresh is an “experimental transport” introduced here specifically for 
menus. In 4.4 we hope to generalize the framework so that any setting can be setup
for fast preview, starting with widgets (see [#27355](https://core.trac.wordpress.org/ticket/27355)).
There is a [Customize Partial Refresh](https://wordpress.org/plugins/customize-partial-refresh/)
feature pluginFeature Plugin A plugin that was created with the intention of eventually
being proposed for inclusion in WordPress Core. See [Features as Plugins](https://make.wordpress.org/core/handbook/about/release-cycle/features-as-plugins/)
that implements widget partial refresh in a betaBeta A pre-release of software that
is given out to a large group of users to trial under real conditions. Beta versions
have gone through alpha testing in-house and are generally fairly close in look,
feel and function to the final product; however, design changes often occur as part
of the process. state. This partial refresh functionality I’ve also [identified as being critical for Customizer Transactions](https://make.wordpress.org/core/2015/01/26/customizer-transactions-proposal/#partial-refresh).

[#4-3](https://make.wordpress.org/core/tag/4-3/), [#customize](https://make.wordpress.org/core/tag/customize/),
[#dev-notes](https://make.wordpress.org/core/tag/dev-notes/), [#feature-plugins](https://make.wordpress.org/core/tag/feature-plugins/),
[#feature-selective-refresh](https://make.wordpress.org/core/tag/feature-selective-refresh/),
[#kickoff](https://make.wordpress.org/core/tag/kickoff/), [#menu-customizer](https://make.wordpress.org/core/tag/menu-customizer/),
[#menus](https://make.wordpress.org/core/tag/menus/), [#partial-refresh](https://make.wordpress.org/core/tag/partial-refresh/),
[#proposal](https://make.wordpress.org/core/tag/proposal/)

 [  ](https://profiles.wordpress.org/ryan/) [Ryan Boren](https://profiles.wordpress.org/ryan/)
12:01 am _on_ July 15, 2015     
Tags: [accessibility ( 59 )](https://make.wordpress.org/core/tag/accessibility/),
bubbles, [comments ( 27 )](https://make.wordpress.org/core/tag/comments/), content-
overrun, [customize ( 67 )](https://make.wordpress.org/core/tag/customize/), edit-
site, [editor ( 223 )](https://make.wordpress.org/core/tag/editor/), [list-tables ( 3 )](https://make.wordpress.org/core/tag/list-tables/),
[media ( 93 )](https://make.wordpress.org/core/tag/media/), menus, [multisite ( 90 )](https://make.wordpress.org/core/tag/multisite/),
network-admin, right-now, [site-icons ( 3 )](https://make.wordpress.org/core/tag/site-icons/),
[today-in-the-nightly ( 3 )](https://make.wordpress.org/core/tag/today-in-the-nightly/)

# 󠀁[Today in the Nightly: Site icons in the customizer, editor patterns, more accessible comment bubbles, row toggle focus styling](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/)󠁿

[Install the nightly](https://make.wordpress.org/core/handbook/testing/beta/), and
try out this fresh batch of shiny.

### Site Icons in the CustomizerCustomizer 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.

I’ve long wanted site icons in the customizer alongside site title and tagline. 
The identity information that I always want to edit when first setting up a site
are now all together in the customizer.

  [](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/screen-shot-2015-07-14-at-2-36-49-pm/#main)
Macnchrome   [](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/site-icons-in-customizer-iphone6plus/#main)
iPhone 6+

For more visuals, see [these visual records](https://make.wordpress.org/flow/tag/site-icons+customize/).

See [#16434](https://core.trac.wordpress.org/ticket/16434).

### Editor Patterns

Create bulleted lists, ordered lists, and blockquotes using markdown like patterns.
I find this particularly handy on phones when the editor toolbar is offscreen.

[⌊Screen Shot 2015-07-14 at 4.39.12 PM⌉⌊Screen Shot 2015-07-14 at 4.39.12 PM⌉[

[https://make.wordpress.org/core/files/2015/07/Editor-patterns-4.3-Beta-2.mp4](https://make.wordpress.org/core/files/2015/07/Editor-patterns-4.3-Beta-2.mp4)

See [#31441](https://core.trac.wordpress.org/ticket/31441).

### Better focus styling for list table row toggles

  [](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/list-table-focus-styles-expanded-macnchrome/#main)
[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/list-table-focus-styles-collapsed-macnchrome/#main)

See [#32395](https://core.trac.wordpress.org/ticket/32395#comment:62).

### Better accessibilityAccessibility 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) and design for the comments bubble

The comments columns in our list tables were among the most confusing for screen
reader users. Accessibility and visuals are now improved.

  [](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/screen-shot-2015-07-14-at-3-37-56-pm/#main)
[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/tajmov16o3/#main)
[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/screen-shot-2015-07-14-at-4-03-22-pm/#main)

[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/screen-shot-2015-07-14-at-4-03-54-pm/#main)
[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/img_3727/#main)
[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/img_3728/#main)

See [#32152](https://core.trac.wordpress.org/ticket/32152).

### Eliminate content overruns on small screens

An audit of content overruns on small screens resulted in many fixes.

After:

  [](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/32846-after-add-network-user/#main)
[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/32846-after-add-site-user/#main)
[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/after-33165-network-themes-mobile/#main)

[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/after-33165-single-site-themes-mobile-2/#main)
[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/after-33165-site-themes-mobile/#main)
[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/after-33171-network-setup-ipad-landscape-2/#main)
[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/after-33171-network-setup-ipad-portrait-2/#main)
[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/iphone5-right-now-dashboard-after-2/#main)

Before:

  [](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/32846-before-add-network-user/#main)
[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/32846-before-add-site-user/#main)
[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/before-all-theme-screens-mobile/#main)

[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/iphone5-right-now-dashboard-before/#main)
[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/network-setup-ipad-landscape/#main)
[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/network-setup-ipad-portrait/#main)

See [#32846](https://core.trac.wordpress.org/ticket/32846).

### Styling improvements on small screens for Right Now in the networknetwork (versus site, blog) adminadmin (and super admin)

  [](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/iphone5-after-32962-diff/#main)
After   [](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/iphone5-before-32962-diff/#main)
Before

See [#32962](https://core.trac.wordpress.org/ticket/32962).

### Improved headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. information in Network Admin Edit Site tabs

 * Use the site’s name rather than URLURL A specific web address of a website or
   web page on the Internet, such as a website’s URL www.wordpress.org in the Edit
   Site header.
 * Provide “Visit” and “Dashboard” links for the site on all tabs.

After:

  [](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/after-32525-3-diff-small/#main)
[](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/after-32525-3-diff-large/#main)

Before:

  [](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/xpewlvvlne/#main)

See [#32525](https://core.trac.wordpress.org/ticket/32525).

### Disambiguate “Automatically add new top-level pages to this menu”

In the customizer, a menu’s auto-add pages option is now separated from the preceding
menu location checkboxes.

  [](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/nexus-5-chrome-emulated-screenshot/#main)
After   [](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/capture-2/#main)
Before

See [#32820](https://core.trac.wordpress.org/ticket/32820).

###  Passwords UIUI User interface Improvements

Passwords received a couple of improvements. The show/hide toggles look better, 
and passwords ui is on the install screen. Passwords on the install screen still
needs a little more flow work.

  [](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/small-screen-after/#main)
Better display of show/hide toggle   [](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/passwords-ui-on-install-screen/#main)
Passwords ui for the install screen, desktop   [](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/img_3736/#main)
Passwords ui for the install screen, phone 
  [](https://make.wordpress.org/core/2015/07/15/today-in-the-nightly-site-icons-in-the-customizer-editor-patterns-more-accessible-comment-bubbles-row-toggle-focus-styling/reset-password-after/#main)

See [#32589](https://core.trac.wordpress.org/ticket/32589) and [#32925](https://core.trac.wordpress.org/ticket/32925).

For more visuals, see [these visual records](https://make.wordpress.org/flow/tag/passwords/).

### Reduce link noise in media library list view

This is visually subtle but removes confusion for screen readers.

[⌊KL_7dmW58c⌉⌊KL_7dmW58c⌉[

See [#32254](https://core.trac.wordpress.org/ticket/32254).

 

Previously: [Today in the Nightly: Customize in the Toolbar, Passwords UI, List Tables on Phones, Dashicons](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/)

[#accessibility](https://make.wordpress.org/core/tag/accessibility/), [#bubbles](https://make.wordpress.org/core/tag/bubbles/),
[#comments](https://make.wordpress.org/core/tag/comments/), [#content-overrun](https://make.wordpress.org/core/tag/content-overrun/),
[#customize](https://make.wordpress.org/core/tag/customize/), [#edit-site](https://make.wordpress.org/core/tag/edit-site/),
[#editor](https://make.wordpress.org/core/tag/editor/), [#list-tables](https://make.wordpress.org/core/tag/list-tables/),
[#media](https://make.wordpress.org/core/tag/media/), [#menus](https://make.wordpress.org/core/tag/menus/),
[#multisite](https://make.wordpress.org/core/tag/multisite/), [#network-admin](https://make.wordpress.org/core/tag/network-admin/),
[#right-now](https://make.wordpress.org/core/tag/right-now/), [#site-icons](https://make.wordpress.org/core/tag/site-icons/),
[#today-in-the-nightly](https://make.wordpress.org/core/tag/today-in-the-nightly/)

 [  ](https://profiles.wordpress.org/ryan/) [Ryan Boren](https://profiles.wordpress.org/ryan/)
10:56 pm _on_ June 30, 2015     
Tags: [4.3 ( 65 )](https://make.wordpress.org/core/tag/4-3/),
[customize ( 67 )](https://make.wordpress.org/core/tag/customize/), [editor ( 223 )](https://make.wordpress.org/core/tag/editor/),
[image-editor ( 3 )](https://make.wordpress.org/core/tag/image-editor/), menus, 
[press this ( 11 )](https://make.wordpress.org/core/tag/press-this/), [site-icons ( 3 )](https://make.wordpress.org/core/tag/site-icons/),
[today-in-the-nightly ( 3 )](https://make.wordpress.org/core/tag/today-in-the-nightly/)

# 󠀁[Today in the Nightly: Site Icons, Text editor in Press This](https://make.wordpress.org/core/2015/06/30/today-in-the-nightly-site-icons-text-editor-in-press-this/)󠁿

Here are a few cool things that recently landed in trunktrunk 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.. They are
available right now in the nightly build. [Install the nightly](https://make.wordpress.org/core/handbook/beta-testing/),
and try them out.

### Site Icons

We’ve wanted site icons in coreCore Core is the set of software required to run 
WordPress. The Core Development Team builds WordPress. for a long time. [#16434](https://core.trac.wordpress.org/ticket/16434)
was opened four years ago and will be resolved as fixed for 4.3.

 

  [](https://make.wordpress.org/core/2015/06/30/today-in-the-nightly-site-icons-text-editor-in-press-this/screen-shot-2015-06-29-at-12-51-56-pm/#main)
Macnchrome   [](https://make.wordpress.org/core/2015/06/30/today-in-the-nightly-site-icons-text-editor-in-press-this/image-4/#main)
iPhone 6+

Our crop controls are not easy to use on my iPhone 6+. The images overflow the right
side of the screen. Horizontally and vertically scrolling an image bigger than the
screen while working a rubber band select that resets when the image is tapped is
not pleasant.

Provide feedback on [#16434](https://core.trac.wordpress.org/ticket/16434) or on
this post.

See [these visual records](https://make.wordpress.org/flow/tag/site-icons/) for 
more screenshots and flow storyboards.

### Text editor in Press This

Press This now has a Text editor for editing HTMLHTML HyperText Markup Language.
The semantic scripting language primarily used for outputting content in web browsers.,
just like the standard editor in post-new.php.

[⌊32706.1-wide⌉⌊32706.1-wide⌉[

Provide feedback on [#32706](https://core.trac.wordpress.org/ticket/32706), in [#core-pressthis](https://wordpress.slack.com/messages/core-pressthis/),
or on this post.

###  Padding for image settings

The Image Crop and Thumbnail Settings boxes received a little bottom padding.

  [](https://make.wordpress.org/core/2015/06/30/today-in-the-nightly-site-icons-text-editor-in-press-this/screen-shot-2015-06-30-at-5-20-50-pm/#main)
After   [](https://make.wordpress.org/core/2015/06/30/today-in-the-nightly-site-icons-text-editor-in-press-this/screen-shot-2015-06-30-at-5-21-25-pm/#main)
Before

And so that we are always aware of what our mobile experience looks like, here are
those settings boxes on an iPhone 6+.

  [](https://make.wordpress.org/core/2015/06/30/today-in-the-nightly-site-icons-text-editor-in-press-this/image-2/#main)
[](https://make.wordpress.org/core/2015/06/30/today-in-the-nightly-site-icons-text-editor-in-press-this/image-3/#main)

When you see a sidebarSidebar A sidebar in WordPress is referred to a widget-ready
area used by WordPress themes to display information that is not a part of the main
content. It is not always a vertical column on the side. It can be a horizontal 
rectangle below or above the content area, footer, header, or any where in the theme.
obscuring content on a phone, you can be pretty sure you’re witnessing lingering
[desktop bias](https://make.wordpress.org/flow/glossary/#desktop-bias). These screens
were designed for desktops where you have room to use  sidebars. You can’t make 
a screen responsive and call it ready for a phone. The [image flow effort](https://make.wordpress.org/design/tag/image-flow/)
is working on this.

Provide feedback on [#31845](https://core.trac.wordpress.org/ticket/31845) or on
this post.

### Manage in the CustomizerCustomizer 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.

Appearance > Menus received a “Manage in the Customizer” button to match Appearance
> Widgets.

[⌊Screen Shot 2015-06-30 at 3.16.57 PM⌉⌊Screen Shot 2015-06-30 at 3.16.57 PM⌉[

Next, fix up mobile.

[⌊image⌉⌊image⌉[

Provide feedback on [#32808](https://core.trac.wordpress.org/ticket/32808) or on
this post.

 

Previously: [Today in the Nightly: Inline link toolbar and Press This split button](https://make.wordpress.org/flow/2015/06/26/today-in-the-nightly-inline-link-toolbar-and-press-this-split-button/)

[#4-3](https://make.wordpress.org/core/tag/4-3/), [#customize](https://make.wordpress.org/core/tag/customize/),
[#editor](https://make.wordpress.org/core/tag/editor/), [#image-editor](https://make.wordpress.org/core/tag/image-editor/),
[#menus](https://make.wordpress.org/core/tag/menus/), [#press-this](https://make.wordpress.org/core/tag/press-this/),
[#site-icons](https://make.wordpress.org/core/tag/site-icons/), [#today-in-the-nightly](https://make.wordpress.org/core/tag/today-in-the-nightly/)

 [  ](https://profiles.wordpress.org/designsimply/) [Sheri Grey](https://profiles.wordpress.org/designsimply/)
10:47 pm _on_ June 27, 2015     
Tags: [call for testing ( 7 )](https://make.wordpress.org/core/tag/call-for-testing/),
[customize ( 67 )](https://make.wordpress.org/core/tag/customize/), menus, [needs testing ( 4 )](https://make.wordpress.org/core/tag/needs-testing/)

# 󠀁[Call for Testing: Customizer Menus](https://make.wordpress.org/core/2015/06/27/customizer-menus-call-for-testing/)󠁿

First, thank you so much if you help out by taking the time to test new features!

Customize > Menus will be one of the new features in WordPress 4.3. It is being 
added in addition to the Appearance > Menus page and the Appearance > Menus page
will not be changed as part of the new feature.

#### How to Setup for Testing

 1. Always backup first or test on a site that was made for testing (see warnings below).
 2. Go to Plugins > Add New and search for “WordPress BetaBeta A pre-release of software
    that is given out to a large group of users to trial under real conditions. Beta
    versions have gone through alpha testing in-house and are generally fairly close
    in look, feel and function to the final product; however, design changes often 
    occur as part of the process. Tester”
 3. Click the “Install Now” button for the WordPress Beta Tester pluginPlugin 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 [https://wordpress.org/plugins/](https://wordpress.org/plugins/)
    or can be cost-based plugin from a third-party.
 4. Go to Tools > Beta Testing
 5. Select the “Bleeding edgebleeding edge The latest revision of the software, generally
    in development and often unstable. Also known as [trunk](https://make.wordpress.org/core/tag/menus/?output_format=md#trunk).
    nightlies” option
 6. Click the “Save Changes” button
 7. Go to Dashboard > Updates
 8. Click the “Update Now” button

You should see the a message similar to this in the footer in wp-adminadmin (and
super admin) pages:
“You are using a development version (4.3-alpha-123456).”

#### Warning!

 * Do not use the WordPress Beta Tester plugin with a production siteProduction 
   Site A production site is a live site online meant to be viewed by your visitors,
   as opposed to a site that is staged for development or testing..
 * To test locally on your computer, [install a local server](https://make.wordpress.org/core/handbook/installing-a-local-server/),
   and then [install WordPress](https://codex.wordpress.org/Installing_WordPress).

#### How to Test CustomizerCustomizer 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. Menus

Test creating menus including adding, removing, and editing menus. You may just 
poke around and test on your own to see if you can find any bugs, or you can use
the following checklist as a guide:

Before you begin:

 * Create and publish some pages on your test site.
 * Consider an export/import from an existing site to get some unique data to test
   with.
 * Or import some sample testing data such as from [http://wptest.io/](http://wptest.io/)
   or [https://codex.wordpress.org/Theme_Unit_Test](https://codex.wordpress.org/Theme_Unit_Test)

Sample testing checklist (time estimate: ~20 minutes for new users):

 1.  Make sure you have installed the latest nightly WordPress release (see setup steps
     above).
 2.  Go to Appearance > Customize and then click on Menus.
 3.  Add a new menu named “Main Menu.”
 4.  Add all of the pages already saved on the site to the menu.
 5.  Save the changes you’ve made so far, exit the Customizer, then navigate back to
     the menu you just created in the previous step.
 6.  Set the “Main Menu” as the primary menu so it shows in the live preview.
 7.  Reverse the order of the menu items.
 8.  Add the “Travel” categoryCategory The 'category' taxonomy lets you group posts/
     content together that share a common bond. Categories are pre-defined and broad
     ranging. to the menu.
 9.  Move “Travel” so it is a child of the first item in the list.
 10. Add a link to Twitter and make it a submenu item next to Travel.
 11. Move Travel and Twitter from the first item so they are submenu items under the
     About page. Save changes.
 12. Create a new menu for social media with at least one social media link in it and
     find a way to make it show up in the live preview on the right.
 13. There is a way to use advanced menu settings to enable descriptions for menu items.
     Try to find it and add a description for the “About” page.

Other testing ideas:

 1. Test using a very large menu with a lot of items. (Also see [#32769](https://core.trac.wordpress.org/ticket/32769).)
 2. Test using a menu that is 10 levels deep.
 3. Test with various themes and other types of menus.
 4. Comment on this post with any other testing ideas!

If you want to dig in deeper and get involved with usability testing with others,
that would be so cool! Please comment on this post or in the [#core-customize](https://make.wordpress.org/core/tag/core-customize/)
[Slack](https://make.wordpress.org/chat/) channel if you’re interested in doing 
more.

**What to Look For**

Look for blockers! A blockerblocker A bug which is so severe that it blocks a release.
is a very bad bugbug A bug is an error or unexpected result. Performance improvements,
code optimization, and are considered enhancements, not defects. After feature freeze,
only bugs are dealt with, with regressions (adverse changes from the previous version)
being the highest priority. that blocks people from using the feature. At this stage,
the biggest problems are the top priority and you should look for those first and
foremost. Be aware of the known issues (see below).

If you do find a bug, [report it in Trac](https://make.wordpress.org/core/handbook/reporting-bugs/#before-you-report-a-bug)
or ask about it in the [#core-customize](https://make.wordpress.org/core/tag/core-customize/)
[Slack](https://make.wordpress.org/chat/) channel.

**Known Issues**

Here are a few key issues still being worked on:

 * [#32769](https://core.trac.wordpress.org/ticket/32769) – Performance issues for
   large menus
 * [#32760](https://core.trac.wordpress.org/ticket/32760) – Cannot save a menu with
   the same name as an existing menu
 * And a few more in the [4.3 milestone and Customizer component in Trac](https://core.trac.wordpress.org/query?status=!closed&component=Customize&milestone=4.3&desc=1&order=id).

/cc [@jimmysmutek](https://profiles.wordpress.org/jimmysmutek/) [@lisaleague](https://profiles.wordpress.org/lisaleague/)
[@kevinwhoffman](https://profiles.wordpress.org/kevinwhoffman/) [@dinamiko](https://profiles.wordpress.org/dinamiko/)

^((because you expressed interest in helping with testing somewhere along the way)
🙂)

[#call-for-testing](https://make.wordpress.org/core/tag/call-for-testing/), [#customize](https://make.wordpress.org/core/tag/customize/),
[#menus](https://make.wordpress.org/core/tag/menus/), [#needs-testing](https://make.wordpress.org/core/tag/needs-testing/)

 [  ](https://profiles.wordpress.org/ryan/) [Ryan Boren](https://profiles.wordpress.org/ryan/)
3:50 pm _on_ June 9, 2015     
Tags: [customize ( 67 )](https://make.wordpress.org/core/tag/customize/),
live-preview, menus, preview   

# 󠀁[Trust, Live Preview, and Menus in the Customizer](https://make.wordpress.org/core/2015/06/09/trust-live-preview-and-menus-in-the-customizer/)󠁿

One of the most important things in WordPress is users being able to feel confident
as they make changes to their content and more generally to their sites. Being able
to make non-destructive changes and preview them is an important component of building
that trust. This is perhaps most noticeable in the “save and surprise” approach 
of the widgets adminadmin (and super admin) screen – every time you add a new widgetWidget
A WordPress Widget is a small block that performs a specific function. You can add
these widgets in sidebars also known as widget-ready areas on your web page. WordPress
widgets were originally created to provide a simple and easy-to-use way of giving
design and structure control of the WordPress theme to the user., modify its settings,
or move one around, the changes are saved and appear live on your site, even if 
you’re not ready yet. The customizerCustomizer 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. is our framework for live previewing changes. We are
committed to providing live preview for all aspects of site customization and making
it usable on all devices from phones to large screens.

The customizer is the result of a tremendous amount of work over many releases. 
It was first introduced in [3.4](https://wordpress.org/news/2012/06/green/). In 
[3.9](https://wordpress.org/news/2014/04/smith/), it received its first big updates
in the form of widgets support and improved headerHeader The header of your site
is typically the first thing people will experience. The masthead or header art 
located across the top of your page is part of the look and feel of your website.
It can influence a visitor’s opinion about your content and you/ your organization’s
brand. It may also look different on different screen sizes. upload and cropping.
[4.0](https://wordpress.org/news/2014/09/benny/) brought [panels and contextual controls](https://make.wordpress.org/core/2014/07/08/customizer-improvements-in-4-0/).
Development really started to take off in [4.1](https://wordpress.org/news/2014/12/dinah/)
when [JS-templated customizer controls](https://make.wordpress.org/core/2014/11/17/jsunderscore-template-rendered-custom-customizer-controls-in-wordpress-4-1/)
and a [JS api](https://make.wordpress.org/core/2014/10/27/toward-a-complete-javascript-api-for-the-customizer/)
were introduced, making possible an ecosystem of live preview compatible plugins
and themes. [4.2](https://wordpress.org/news/2015/04/powell/) followed that up with
two important features, [theme switching](https://make.wordpress.org/core/2015/02/11/customizer-theme-switcher-feature-plugin-merge-proposal/)
and mobile support.

That brings us to today and the ongoing [4.3](https://make.wordpress.org/core/4.3/)
development effort. [Revamped navigation](https://core.trac.wordpress.org/ticket/31336)
for the customizer is already in trunktrunk 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. and the nightly builds.
The [menu customizer feature plugin](https://wordpress.org/plugins/menu-customizer/)
is a [merge candidate](https://make.wordpress.org/core/2015/06/03/feature-plugin-merge-proposal-menu-customizer/)
for 4.3 and could land soon. These marquee features further our commitment to live
preview and need all of the attention we can muster.

The customizer has come a long way, but it still lacks some features and needs time
to mature. We have many improvements planned and in-progress, including transactions,
partial refresh, theme installation, speedier loading, scaling to large screens,
and possibly even integration with front end editing. Our live preview framework
offers many possibilities.

Meanwhile, the Appearance screens will remain and will be maintained. Appearance
> Menus recently received some attention in the form of a [few fixes](https://core.trac.wordpress.org/query?component=Menus&resolution=fixed&milestone=4.3&col=id&col=summary&col=status&col=owner&col=type&col=priority&col=version&order=priority).
[More attention](https://make.wordpress.org/core/components/themes/menus/) is needed
and will be given. There are still differences in the flows each approach best enables,
whether it’s new site/theme setup, small maintenance tasks, or dedicated content
managers for heavy usage of widgets, menus, or other pieces of content that benefit
from having a preview mechanism. We should gather quantifiable metrics when it comes
to performance and time to completion for a given flow, as well as evaluating the
less-objectively-quantifiable perceived performance. There may come a time where
the worlds converge; however, that time is not now.

The feature pluginFeature Plugin A plugin that was created with the intention of
eventually being proposed for inclusion in WordPress Core. See [Features as Plugins](https://make.wordpress.org/core/handbook/about/release-cycle/features-as-plugins/)
merge window is currently [scheduled](https://make.wordpress.org/core/version-4-3-project-schedule/)
for June 17th. We have 8 days to get the Menu Customizer pluginPlugin 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 [https://wordpress.org/plugins/](https://wordpress.org/plugins/)
or can be cost-based plugin from a third-party. ready for merge. Feature plugins
must meet [several criteria](https://make.wordpress.org/core/handbook/how-the-release-cycle-works/features-as-plugins/)
to be considered for inclusion in a release. To meet this criteria, the [flow team](https://make.wordpress.org/flow/)
has started testing and [documenting](https://make.wordpress.org/flow/tag/customizer/)
flow and visuals for the menu customizer as well as the recently landed navigation
changes. Merge criteria include identifying flows through the customizer, creating
[visual records](https://make.wordpress.org/flow/glossary/#visual-record) of those
[flows](https://make.wordpress.org/flow/glossary/#flow), and creating [flow comparisons](https://make.wordpress.org/flow/glossary/#flow-comparison)
of existing flow through Appearance > Menus versus flow through the customizer. 
This is a great and necessary way to contribute that requires no coding. All you
need to do is take screenshots and publish them as a captioned gallery using the
tool we’re making together, WordPress. We endeavor to be an [Alan Lomax](https://en.wikipedia.org/wiki/Alan_Lomax)
of flow, capturing and cataloging real user scenarios. Please help us capture the
flows through Appearance > Menus used by you and your clients. We need this information
to ensure our new interfaces are mindful and aware of how WordPress is actually 
used. Information on how to test and contribute visual records is available on the
[4.3 development tracking page](https://make.wordpress.org/core/4.3/).

[@ryan](https://profiles.wordpress.org/ryan/), [@helen](https://profiles.wordpress.org/helen/),
[@designsimply](https://profiles.wordpress.org/designsimply/)

 

[#customize](https://make.wordpress.org/core/tag/customize/), [#live-preview](https://make.wordpress.org/core/tag/live-preview/),
[#menus](https://make.wordpress.org/core/tag/menus/), [#preview](https://make.wordpress.org/core/tag/preview/)

# Post navigation

[← Older posts](https://make.wordpress.org/core/tag/menus/page/2/?output_format=md)