Core Editor Improvement: Introducing template part focus mode

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labelled with the #core-editor-improvement tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects. 

With more tools to edit your entire site, this new view was created to allow folks to have a space to focus specifically on editing a single template part, like 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. or footer. At a high level, this focused mode helps eliminate distractions when editing template parts, provide a pathway for backwards compatibility, and opens up new possibilities around permissions.

You will be able to access this mode in a few ways once 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/ 11.9 is released and, if all goes well, in WordPress 5.9: 

• Select the template part in the Site editor > Click on the three dot menu > Select “Edit Header” or the respective template part name. 
• Select the template part in List View > Click on the three dot menu > Select “Edit Header” or the respective template part name. 
• From the Browsing 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. > Navigate to Template Parts > Select the template part you want to customize.
• From the Top Toolbar > Click on the three dot menu under “Areas” next to the template part you want to customize.

Keep in mind that some of these flows may change as the site editing flows get prepared for 5.9!

As you explore this mode, you’ll notice a few extra touches too, including the visual background similar to the template editor mode to indicate that you’re in a new editing environment and the ability to resize the editing field horizontally with drag handles. There’s always more to be done though, particularly around clarifying when different edits are global vs local.

Looking forward, this work will ultimately pave the path for a smooth transition into 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. themes by turning existing 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. areas into block template parts. It also creates the ability to have only folks with certain permissions the ability to edit a template part directly, building on the work around template locking. The UXUX User experience lessons learned from this effort will inevitably benefit future projects like the Navigation Editor too!

For a deep dive of all that went into this project, check out this overview issue. To be on the cutting edge, use Gutenberg 11.9 when it’s released or check out the current version today to get a sense of what it can do without the latest and greatest PRs. If you’re game to wait a bit longer, expect to see it in WordPress 5.9 coming in December. 

Thank you to @jameskoster for the video and @priethor @bph @kevin940726 for reviewing the content.

#core-editor, #gutenberg