Earlier this year, Automattic added visual icons to the WordPress.com customizer after user testing showed users tried clicking on the parts of the page they wanted to edit, rather than searching through the menus in the customizer. In an effort to see if the same could be done for the self-hosted version of WordPress, Payton Swick open sourced Automattic’s work into a plugin and placed it on GitHub.
The plugin added persistent icons to show users which parts of a site can be customized when the customizer preview pane is open. After months of collaboration between Automatticians and the Customize component maintainers, the icons were merged into WordPress 4.7 and are officially called visible edit shortcuts. The icons visually inform users which elements can be edited in a theme.
The icons appear when the customizer is open and directs users to settings that control an element. For example, clicking the icon next to the site tagline in the image below opens the Site Identity section of the customizer and makes the Tagline field active. Visible shortcuts are an extension of the Shift-click to edit keyboard shortcut that was added in WordPress 3.9.
The icon approach was largely inspired by WordPress.com which has a similar feature in its customizer. Nick Halsey, Customize component maintainer, describes in detail the history of the feature and what theme authors need to do to support it.
Unlike many of the theme specific updates in the past where developers can add support by using add_theme_support, supporting visible edit shortcuts is more complicated. Theme authors will need to add support for selective refresh, selective refresh for widgets, and selective refresh for menus.
“Edit shortcuts will be enabled by default for all themes, but are contingent on themes supporting selective refresh,” Halsey said. Additionally, a small amount of CSS may be required to properly position the icons.
Adding visual elements that connect parts of a theme to the customizer should take some of the guesswork out of editing themes. Instead of spending time browsing through various customizer panels to edit a part of a site, users can click a button and the right customizer panel will open automatically with the settings you need. This can be especially useful for themes that have a lot of customizer sections.
I tested visible edit shortcuts using the Twenty Seventeen theme in WordPress 4.7 beta 4 and didn’t encounter any issues. The team is strongly encouraging users to test with as many themes as possible. If you use a theme where the shortcut icons are not displayed, please contact the theme author, request that they add support, and refer them to the make core blog post which explains how to do so.
Curious if there is a way to disable this?