Way to WordPress 4.7: Customizing Sites Made Easier. Thanks to Visible Edit Shortcuts

Visible Edit Shortcuts in WordPress 4.7

Earlier in 2016, Automattic added visual icons to WordPress.com customizer after user testing showed users tried clicking on the parts of the page they wanted to edit, rather than looking through the menus in the customizer. Payton Swick open sourced Automattic’s work into a plugin in an effort to see if the same could be done for the self-hosted version of WordPress. He added the plugin to GitHub.

The plugin inserted persistent icons to show users which parts of a site can be customized when the customizer preview pane is open. After collaborating with Automatticians and the Customize component maintainers, the icons have now been added to WordPress 4.7 and are officially called visible edit shortcuts. The icons will visually inform users which elements can be edited in a theme.

When the customizer is opened, the icons will appear and direct 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 in extension of the Shift-click to edit keyboard shortcut that was added in WordPress 3.9.

Customizer Shortcut Buttons
Customizer Shortcut Buttons. Image Credit: WP Tavern

Nick Halsey, Customize component maintainer, describes in detail the history of the feature and what theme authors need to do to support it. “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.

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 comprehensive. Theme authors will need to add support for selective refreshselective refresh for widgets, and selective refresh for menus.

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 simply a button and the right customizer panel will open automatically with the settings you need. This can be especially handy for themes that have a lot of customizer sections.

Source: WP Tavern


Leave a Reply

Your email address will not be published. Required fields are marked *