Join a discussion about Full Site Editing and the future of the Customizer

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/’s Full Site Editing project, or FSE, is progressing steadily, and while there’s much more to do, the core roadmap plans for FSE to be introduced into WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. later in 2020.

With Full Site Editing on the way, what does the future hold for 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. and for the core Customize component?

At 16:00 UTC Thursday, May 28, we’ll start to tackle this broad question with an hour of discussion in the #core-customize WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel that will include maintainers of the Customize component, members of the Gutenberg team, and you!

The primary focus of the discussion will be about contributing to the Customizer and to Gutenberg, guided by these questions:

  • First, a recap: What are the goals of the Full Site Editing project?
  • What can be done in the Customize component to help pave the way in core for Full Site Editing?
  • How can developers familiar with the Customizer best apply their experience to assist the Gutenberg team?
  • What’s the best use of time within Customize component for non-Gutenberg tasks? Is it worth patching bugs or pursuing enhancements?

Lastly, we’ll try to leave some time for an open floor.

If you have any questions about this discussion, or if you can’t attend but would like to add something to the agenda, please leave a comment. We’ll get to as many as we can.

I hope you can join us!

#customizer, #full-site-editing

Nav Menu Improvements in the Customizer in 4.9

In our usability tests with prior releases, we identified two common problems users encountered when trying to create a menu.

  1. Clicking the Add a Menu button in an attempt to add a page to their new menu.
  2. Forgetting to assign the menu to a location.

In WordPress 4.9, we’ve updated 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 creation flow to address these issues.

An Updated Menus Panel

The Menus panel layout and copy have been updated for clarity. The panel now shows menus first and locations second. This puts menus front and center and allows the panel to adjust more easily to specific scenarios. For example, when there are no menus, the panel asks users to create a menu and explains the steps to be taken.

Before After

Menu Creation

When the user clicks Create New Menu, the Customizer opens a dedicated menu creation section. Using a dedicated section allows us to guide the user through each step of menu creation. We start by inviting the user to provide a clear name for the menu and to select its new location. Once the menu is created, we guide them to add menu items and highlight the Add Items button if the user doesn’t find it after a short time.

Create a Menu for a Location

The locations section now allows the user to create a menu for a location that has not been assigned a menu. When the user clicks a location’s Create New Menu link, the Customizer opens the Menu Creation section with the location preselected.

Deprecated UIUI User interface Classes

With the addition of a dedicated menu creation section, a number of classes are no longer used and are being deprecated.

The following PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 classes have been deprecated along with their files:

  • WP_Customize_New_Menu_Control in
    wp-includes/customize/class-wp-customize-new-menu-control.php
  • WP_Customize_New_Menu_Section in
    wp-includes/customize/class-wp-customize-new-menu-section.php

The following JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. class has been deprecated (but not its containing file):

  • api.Menus.NewMenuControl in
    wp-admin/js/customize-nav-menus.js

Related Tickets

  • #40104 Customizer: Improve menu creation flow
  • #36279 Add an “add new menu” button to the menu locations section in the customizer
  • #42114 Customize Menus: UXUX User experience Improvements
  • #42116 Customize Menus: Add “It doesn’t look like your site has any menus yet” view
  • #42357 NewMenuControl class has been removed from 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.

#4-9, #customizer, #dev-notes

Customization Meeting Notes: January 16, 2017

We had a meeting today in #core-customize to kick off the customization focus in 2017. Here’s a summary of what we chatted about:

    • Check out https://make.wordpress.org/design/2017/01/13/what-makes-a-great-customization-experience/ and https://make.wordpress.org/design/2017/01/11/what-makes-a-great-editor/ for some great discussion, and share your own thoughts.
    • What are your biggest customization pain points?
      • WordPress doesn’t help you setup your site according to your goals.
      • What’s a featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.? What’s a 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. image?
      • Moving (“dancing”) in and out of panels hunting for what you’re trying to edit is difficult.
      • Why can I click on one thing to edit it but not another thing?
      • User expectations from @ianstewart: https://wordpress.slack.com/archives/core-customize/p1484590206000728
      • If you can’t see it, how can you edit it?
      • We need an improved flow for content editing as part of customization that better ties that together with the surface-level tools.
      • Moving, adding, and deleting chunks of content and “features” in a design should be possible.
    • What if 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. panel is blank, and stuff shows up only when the user clicks something in the preview? Would they be able to do everything they need?
      • We made a step towards this with Edit Shortcuts in 4.7.
      • But, Edit Shortcuts is a bandaid.
      • Need a balance of contextual tools and global controls.
    • How many tickets can we close by iterating on a whole flow?
    • What are the drawbacks of direct manipulation?
      • (Direct manipulation = I see it, I tap/click it to edit.)
      • Focused on what you see in front of you right now, rather than your whole site across multiple screen sizes.
      • It’s easy to mess up the site layout and design if you can control everything.
        • This is where “undo” could be handy.
        • Hard to tell if you’re customizing something locally or something globally.
      • Should we separate content, layout, and design?
    • @karmatosed is going to be leading user research and testing:
      • Have a series of posts on here on make/design asking for input, focusing on how people are using the Customizer to build sites for themselves and for clients.
      • Have people test the Customizer and report bugs to TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress..
      • Frequent Trac triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. of Customization component.
      • Have a public “call for testing” for every new feature or flow iteration. Would be good to integrate these into local WordCamps and meetups as well.
    • We need to continue working on the technical architecture of the Customizer in preparation for future features and customization flows:
      • Changesets: #31089.
      • REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. for Changesets: #38900.
      • Customize Snapshots: GitHub PR.
      • Bigger features we know we want to support in the future need to be scoped and architected now, while we’re designing, so they’re ready to be implemented later.
        • I think it’s important to identify the big picture technical stuff, the things we’ll know we need for sure to support implementing the fuzzy design that will come clearer into view. It will take many months to implement. We can’t wait for design to be “finished” before we start development. It needs to be iterative. — @westonruter
    • Potential wins in the 3 months?:
      • Merging edited starter content on theme switch: https://core.trac.wordpress.org/ticket/38624.
      • Pain points with lost widgets and menus when switching themes.
    • Many of the features and flows we want to build out in the future (drafting changes, revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision., content blocks) need to be worked on in collaboration with the Editor team.

We also continued the discussion past the meeting time. The conversations were a bit too long to summarize, but you can catch up starting here.

If you’re interested in getting involved, please add your input to the “What makes a great customization experience?” thread and join us in Slack.

#customizer

Focus Tech and Design Leads

There are three main focuses this year: the REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/., the editor, and 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..

For the REST API we’re going to work on getting first party wp-adminadmin (and super admin) usage of the new endpoints, and hopefully replace all of the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. places where we still use admin-ajax.

The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers., or “mystery meat” embed discovery.

The customizer will help out the editor at first, then shift to bring those fundamental building blocks into something that could allow customization “outside of the box” of post_content, including sidebars and possibly even an entire theme.

Each focus will have a tech lead, and a design lead, and I’ll be working closely with each to make sure we’re aligned and moving diligently in the right direction even though we don’t have the normal release 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.. These starting leads will be:

REST API: Ryan McCue and KAdam White.

Editor: Matias Ventura and Joen Asmussen.

Customizer: Weston Ruter and Mel Choyce.

Given there is no set timeline for releases that would normally set a term, these leads are free to bow out at any time they feel they can’t contribute fully and we’ll find a replacement.

You might be wondering what each lead is responsible for. The REST team gave some thought to this for their focus, and this is the list they came up with:

Tech Lead responsibilities:

  • identify and ensure implementation of first-class REST API usage within WP-Admin,
  • replacing/refactoring admin-ajax use.
  • overall REST API architecture
  • infrastructure and endpoint performance
  • security at an infrastructure and endpoint (data-exposure) level
  • improving authentication options and documentation
  • working with the Design Lead to build new, or expand on existing, endpoints
  • working with the Design Lead to address usability feedback for the infrastructure and endpoints

Design Lead responsibilities:

  • usability of endpoints for internal or external clients
  • usability of the infrastructure from the perspective of a APIAPI 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. client
  • working with the Editor and Customizer focus teams to collect requirements and gather feedback
  • identifying ways to improve the overall experience for folks building clients or consuming endpoints (like documentation)

#customizer, #editor, #rest-api