Core Editor Improvement: Advancing the Site Editor experience

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled 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. 

In the last few 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/ releases, a collection of work provides massive improvements to the Site Editor to scale the experience, provide clarity, and add new functionality with more planned. These features make it easier to get a complete view of your site and add more ways to make changes to it, from a new Navigation 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. experience to Custom CSSCSS Cascading Style Sheets.. The improved experience also addresses key pieces of feedback that have come up in places like the FSE Outreach Program: frustration with the navigation block, confusion around what pieces are globally editable, desire to add custom CSS, a sense of overwhelm with the number of block settings, and more. While iteration will always be required, this marks a substantial shift in refinement, functionality, and ease, paving the way for wrapping up phase 2

Providing clarity and ease

Previously, when making changes to your site, it was hard to know how those changes might impact other pieces. For example, if you opened up Styles and made changes to a block that wasn’t visible on the template you were on, it wasn’t clear how the changes might land. The same thing happened with Template Part blocks where changes made to one instance impacted all others. There was no indication in the interface that these blocks functioned differently. 

Now, with both the Style Book and built in previews of the Styles system, it’s far easier to know the impact of what you’re doing with Styles. The Style Book accomplishes this by providing a way to toggle a view of Styles that shows all blocks, separated into sections:

Meanwhile, the previews baked into Styles offer another way to see at a glance the changes you’re making without needing to fully enter the Style book. Each offers a specific way to engage with styling your site as you see fit. 

Finally, template parts and reusable blocks have been colorized both in the editor and in list view to clearly show how they are distinct blocks with different functionality compared to other blocks. The Navigation block is slated for the same treatment! This change in color adds visual friction that helps better conceptualize how the design of your site pieces together. 

List View with a Header template part in focus with purple coloring, showing off the new colorization feature.

Site navigation is an incredibly important part of building most sites and the Navigation block has often struggled to offer an experience that covered the majority use case of building a simple menu. While improved fallbacks in 6.1 provided a big step forward, the base usability still needed to be refined. Over the last few releases, as an experiment in Gutenberg > Experiments, an editable list view in block settings has been added to the Navigation block. This editable list view feels reminiscent of the prior menu editing experience but rooted in the world of blocks. You can follow this work in the project’s dedicated GitHub board or the current Navigation block tracking issue.

Scaling the experience

With more templates being added, more functionality, and more types of content in the Inserter, there are numerous situations where the interface needed to scale to accommodate the growing nature of the site editor. This ensures that, as more is added to the experience, the complexity is managed in a way that still makes building a site delightful and intuitive.

Rather than being in a more narrow yet important part of your site when opening the Site Editor, you can now explore it in its entirety and edit from there with Browse mode. This new mode reorganizes the site editor by providing a way to move between templates and template parts. You can add new templates or template parts directly from this interface or choose to edit whenever you’d like. This stands in contrast to the prior experience of opening the Site Editor and being dropped into the template powering the homepage, without necessarily knowing how to get to other templates or template parts.

The Inserter experience was leveled up for patterns, a key part of content and site creation which save time by relying on pre-built designs. The previous design required you to choose from a dropdown before viewing each categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. of patterns. The new design provides an easy way to see and click between each category before showing larger previews of each pattern, with the option to hover over a pattern to see its name. More work is underway to continue refinements by updating the category names and distinctions. When looking ahead to integration with the Pattern Directory and potential exposure to far more patterns, this iteration provides a strong foundation. 

With an immense number of new design tools introduced in 6.1, the block settings interface needed to adapt. To simplify and organize the experience, the block settings were split into different tabs, adapting based on the needs of each block. While this results in more steps to get to different settings, it provides a mental framework for customizing blocks that better reflects what each option does. This is particularly relevant for more complex blocks, like the Navigation or Group blocks. Room remains to improve this experience, particularly around how to best handle unset/inherited values, and it currently is listed as an experiment to enable in Gutenberg > Experiments. 

Isolated Group block settings, showing a split between styles and settings, on a yellow background.

Thinking longer term, more work is slated for scaling the UI for adding new templates as well

Adding functionality

While the site editor, launched in WordPress 5.9, initially started in a more contained state, each WordPress release brings new functionality to accomplish more. In some cases, this means old things done in new ways to customize your content, like with Custom CSS, and in other cases it has more to do with easing embracing the Site Editor, like with the ability to migrate widgets to block themes. 

Block themers and designers alike have long requested Custom CSS, even as design tools grow enabling you to use built in functionalitytools. For many, there are always going to be items that aren’t covered by Styles, As of Gutenberg 14.8, there’s now the option to add Custom CSS directly in the Style’s interface so you can customize directly while using the Site Editor and ensure those customization stick across themes. This is currently listed as an experiment in Gutenberg > Experiments with work underway to stabilize the feature. Alongside this effort, work is underway to add per block Custom CSS too so they can work in unison.  

Previously when creativity struck in the Site Editor as you were styling an individual block, you’d have to copy what you came up with to the Styles system for that individual block at a global level. As of Gutenberg 14.9, that changes with the introduction of a “Push changes to Global Styles” button which automatically moves those changes to an individual block to Styles. This new functionality makes it easier to design on the go, knowing you can ensure consistency with a press of a button. Iterations are already underway to make this option even more user friendly.

Advanced settings of the Post Title block showing an option to apply changes made to that block to the overall styles system.

Switching to a Block theme needs to be as seamless as possible to help folks begin using the Site Editor. In Gutenberg 14.9, a way to import widgets from a Classic theme into the Site Editor was released, ensuring no content is lost when switching. 

Lastly, the Inserter now allows for media to be added directly so you can add blocks, patterns, and your recent media library items all from one place. Next up, Openverse integration is underway, meaning you’d soon have access to everything within Openverse to use as you create your site. 

What’s next?

More work remains to be done around each of these areas and you can follow along in this tracking issue on GitHub where updates are provided weekly for a main set of tasks. If you want to help shape what’s being worked on, know GitHub issues/PRs are always welcome and the FSE Outreach Program continues to facilitate explorations and calls for testing to explore each of these features. All are welcome to join, regardless of experience level with the Site Editor or WordPress in general. 

#core-editor-improvement, #gutenberg, #site-editor

Core Editor Improvement: Advancing the writing experience

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled 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. 

The experience of writing your latest post, whether as part of your weekly routine or out of excitement from a recent adventure, just got easier in many different ways. From a new mode that helps you focus on just writing to more keyboard shortcuts for quickly navigating content, there’s something for everyone, no matter how you approach writing your posts. 

For clarity, everything that will be included in the 6.1 release is explicitly noted below. Otherwise, it is available in the 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/ 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/ or can be cost-based plugin from a third-party

Select exactly what you want (available in WordPress 6.1)

After the introduction of multi-select, where you can select text across multiple blocks without selecting the blocks as a whole, new enhancements were introduced to balance against situations where you might want to select across blocks. Specifically, partial selection remains the default option until you select a 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. that can’t be combined, like an Image block. Tied to this, the animation and appearance of the overall experience were also updated to be clearer and smoother. You can see this at play in the visual below, where partial selection is used until an image is selected and the overlay selection color switches to every block.  This should make both the feeling of selecting blocks and the accuracy of doing exactly what you want much more cohesive. 

GIF showing text being selected at first across individual paragraph blocks before, when selecting an image block, all blocks being selected.

Move faster with keyboard shortcuts (available in Gutenberg 14.3)

Gutenberg 14.3 included support for alt + arrow keyboard combinations to make navigating blocks of text quick and easy:

  • If your cursor is at the end of a long paragraph, you can press the alt + up arrow to move to the beginning of that paragraph. 
  • If you are already at the beginning of a text block, you can press the alt + up arrow to move to the start of the previous paragraph. 
  • If you press alt + down arrow, it will move you to the end of a block of text.

Improved document settings (available in WordPress 6.1)

A revamped document settings experience improves legibility and resulting usability with a cleaner, more organized display. It should help you more readily access all the important information about your post/page, including the template picker and scheduler. Specifically, the fields for post format, slug, template, and authors are aligned and have the same width. The template displays ‘default template’ instead of none, and the Permalink link opens a popover to edit the slug when clicked. The result is a cleaner, more organized display so you can see exactly what you need to before sharing your next post. 

Before and after images next to each of changes to document settings with the after image showing more consistency.

Do more with the Quote & List blocks (available in WordPress 6.1)

The Quote block now allows you to add nested blocks, meaning you could add the new List block inside the new Quote block. Similarly, the List block uses inner blocks, meaning your list items can be easily sorted and indented with a much-improved user experience.

Quote block with multiple inner blocks listed, including image and list.

Opt in to fewer distractions and more focus (available in Gutenberg 14.4)

For those looking for an even more focused experience, enter distraction-free mode available as soon as Gutenberg 14.4 is released. It’s a more drastically reduced experience with the following settings in place, allowing you to focus on the creation experience as much as possible: 

  • Hides the top toolbar until one intentionally hovers over where it typically sits.
  • Removes many top toolbar buttons.
  • Automatically closes any open sidebars, from block settings to list view. 
  • Hides the insertion point indicator, reducing visual clutter. 
  • Hides the block toolbar. 

More work remains to be done to fully form this new mode but the promise of what it provides is exciting for those looking for a more contained writing experience.

Use the autocompletion for links anywhere you want (available in WordPress 6.1)

While the [[ shortcut was introduced a while ago, it can now be used anywhere you want to add any internal link you’d like. Previously, it was isolated to just the blocks that explicitly opted in, and as you can see in the video below, you can now take advantage of this feature no matter what you’re editing:

Transform blocks with ease with improved organization (available in WordPress 6.1)

The transforms menu offers a shortcut to switch to different blocks, depending on your content. As the number of blocks has grown and the reliance on this menu has increased, the menu’s organization has evolved to emphasize content blocks. Specifically, blocks that support paragraph, heading, list, and quote transforms, are now weighted over other more structural blocks, like a Group or Column. This should help common pathways be easier to find as more common transformations. 

Heading block transform menu open showing prioritized content blocks.

Keep List View open by default (available in WordPress 6.1)

For any List View fans, Gutenberg 13.3 introduced the option to have List View open by default. This makes navigating complex content, like a long post sharing every detail of a big adventure, much easier. Rather than needing to open it every single time you enter the editor, it’ll be waiting for you with every new post you write:

Preferences modal open showing "always open list view" checked off.

Enjoy improvements to the various inserters (available in Gutenberg 14.2)

The inserters are a big part of the base experience of using the block editor. An update to the animation effect for the sibling and in-line inserters now offers a more natural and responsive feel. On the flip side, when you’re typing, the block inserter is now hidden to reduce visual noise and allow more of a focus on the writing experience itself: 

Taken together, these enhancements will allow you to engage with the inserters better only when you need them. 

Control image captions from the block toolbar (available in Gutenberg 14.4)

You can now add or remove a caption for an image directly from the block toolbar. If a caption has already been set, it will be included by default when the image is added to your content, saving you time and giving you options.

More to come

Ensuring the base editing experience is excellent is always a work in progress and a focus, especially as work is underway to bring the block editing experience to more parts of the site for more people. As you run into bugs, feature requests, or feedback, please remember to share in GitHub so the experience can continue to be refined. 

#core-editor-improvement, #gutenberg

Core Editor Improvement: Catalyst for creativity and control

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled 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. 

Alongside the addition of more blocks to edit more parts of your site, more design tools are being added across all blocks to both ensure consistency in the experience and to allow folks to customize their site even more, without needing to use CSSCSS Cascading Style Sheets.. This post goes through each categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. of design tools, what blocks they are available in, the progress made, and some fun examples showing off what you can now do. The result is a catalyst for creativity, with more to come on the horizon. 

Typography 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. Support

Visual listing out all of the block with typography support in four columns with a green color scheme.

These settings include font size, line height, font style, font weight, text transform, letter spacing, font family, and text decoration. When combined, these allow you to have new ways to differentiate your content, whether by making something stand out more or less. At a high level, various combinations of these options are available in the following blocks with many added for the 6.1 release cycle: 

  • Column/Columns
  • Categories
  • Code
  • Comment Author Name
  • Comments Content
  • Comment Date
  • Comment Edit Link
  • Comments Reply Link
  • Comment Template
  • Paragraph
  • Comments
  • Comments Pagination
  • Comments Pagination Next
  • Comments Pagination Numbers
  • Comments Pagination Previous
  • Comments Title
  • Cover
  • Home Link
  • Group
  • Latest Comments
  • List
  • Media & Text
  • Page List
  • Post Author
  • Post Author Biography
  • Post Author Name
  • Post Comments Count
  • Post Comments Link
  • Post Content
  • Post Date
  • Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox.
  • Post Template
  • Post Terms
  • Post Navigation Link
  • Preformatted
  • Pullquote
  • Search
  • Table of Contents – not available in 6.1
  • Latest Posts
  • Navigation
  • Query No Results
  • Query Pagination
  • Query Pagination Next
  • Query Pagination Numbers
  • Query Pagination Previous
  • Query Title
  • Quote
  • Term Description
  • Verse
  • Button/Buttons
  • Archives
  • Calendar
  • Site Title
  • Site Tagline
  • Table
  • Heading
  • Navigation Link
  • Read More

      To see the power of these supports in action, here’s an example of using them to personalize a button: 

      The audit for this set of design tools is 85.71% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue

      Dimensions and Spacing Block Support

      Visual listing out all of the block with dimension and spacing support in four columns with a blue color scheme.

      These supports include padding, margin, block gap, height, width, and min height. As the name suggests, they give you exact control over the layout of blocks both in relation to inner blocks (like the layout of a List or Gallery) and in relation to blocks nearby. At a high level, various combinations of these options are available in the following blocks with many added for the 6.1 release cycle: 

      • Archives
      • Audio
      • Tag Cloud
      • Table of contents – not available in 6.1
      • Table
      • Term Description
      • Spacer
      • Post Date
      • Heading
      • Paragraph
      • Query Title
      • Post Title
      • Video
      • List
      • Media & Text
      • Verse
      • Categories
      • Comment Edit Link
      • Comment Date
      • Comment Reply Link
      • AvatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name.
      • Site Logo
      • Social Links
      • Gallery
      • Button/Buttons
      • Code
      • Column/Columns
      • Comment Author Name
      • Comment Content
      • Comments Title
      • Cover
      • Group
      • Heading
      • Navigation
      • Post Author
      • Post Author Biography
      • Post Author Name
      • Post Excerpt
      • Post 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.
      • Read More
      • Separator
      • Site Tagline
      • Site Title

      To show how you can use these tools to refine your work, here’s an example of just using the block gap option to manage the layout of social links: 

      The audit for this set of design tools is 54.76% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue

      Colors Block Support

      Visual listing out all of the block with color support in four columns with an orange color scheme.

      This includes text color, background color, link color, gradient options, and duotone filters. These options allow you to do everything from add a custom duotone filterFilter Filters are one of the two types of 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. to all featured images in a display of posts to picking unique color combinations for your social links. At a high level, various combinations of these options are available in the following blocks with various ones added for the 6.1 release cycle: 

      • Social Links
      • Gallery
      • Calendar
      • Table of Contents – not available in 6.1
      • Social Links
      • Button
      • Avatar – Duotone only
      • Code
      • Column/Columns
      • Comment Author Avatar – Background only
      • Comment Author Name
      • Comment Content
      • Comment Date
      • Comment Edit Link
      • Comment Reply Link
      • Comments
      • Comments Pagination
      • Comments Pagination Next
      • Comments Pagination Previous
      • Comments Title
      • Cover – Duotone only
      • Gallery – Background only
      • Group
      • Heading
      • Image – Duotone only
      • List
      • Media & Text
      • Navigation
      • Paragraph
      • Post Author
      • Post Author Biography
      • Post Author Name
      • Post Comments Count
      • Post Comments Form
      • Post Comments Link
      • Post Date
      • Post Excerpt
      • Post Featured Image – Duotone only
      • Post Navigation Link
      • Post Terms
      • Post Title
      • Preformatted
      • Pullquote
      • Query
      • Query No Results
      • Query Pagination
      • Query Pagination Next
      • Query Pagination Numbers
      • Query Pagination Previous
      • Query Title
      • Quote
      • Read More
      • Search
      • Separator
      • Site Logo – Duotone only
      • Site Tagline
      • Site Title
      • Social Links
      • Table
      • Table of Contents
      • Term Description
      • Verse

      To see these supports in action, here’s an example of providing your own colors for social link icons that match with the branding on your site: 

      The audit for this set of design tools is 65.47% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue

      Layout Block Support

      Visual listing out all of the block with layout support in one columns with a blue color scheme.

      Of note, this support only applies to container blocks (buttons, columns, gallery, etc) since it impacts the layout of blocks within each.  At a high level, various combinations of these options are available in the following blocks. Note that no new supports were added for the 6.1 cycle: 

      • Buttons
      • Column
      • Columns
      • Comments Pagination
      • Gallery
      • Group
      • Navigation
      • Post Content
      • Post Template
      • Query
      • Query Pagination
      • Social Links

      To see these specific container related options in play, here’s an example with the navigation block where you can quickly switch between different configurations as you find which best fits with the 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. of your choosing:

      The audit for this set of design tools is 52.17% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue

      Border Block Support

      This includes the ability to control color, radius, style, and width on each side of the border. These powerful set of tools allows for some neat ways to decorate everything from individual images to overall columns of content. At a high level, various combinations of these options are available in the following blocks with a few added for the 6.1 release cycle: 

      • Post Featured Image
      • Column/Columns
      • Image
      • Avatar
      • Button
      • Code
      • Column/Columns
      • Comment Author Avatar
      • Comments Title
      • Group
      • Pullquote
      • Read More
      • Search

      To see how borders can transform a block, here’s an example showing how a theme author can customize a featured image block to make it stand out even more: 

      The audit for this set of design tools is 14.28% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue

      The power of combining tools

      While this post sectioned out the various design tools to make it easy to catch up on all that’s happened, remember that the true power in these tools comes when they are combined altogether. For a simple yet powerful and common example, here’s a video showing how with some very quick changes you can make a paragraph pop to better call attention to a part of your post:

      For a more complex example, here’s a video showing how you can customize your featured image block with various borders and a duotone filter, long before you select the image of your choosing: 

      More to come

      The above simply captures the initial set of work to create consistency across blocks, with tons more planned to offer an increasingly intuitive default experience for all blocks and to stabilize the underlying block support APIs. This has been a massive effort involving a flurry of PRs across multiple different 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/ releases ahead of 6.1. As these tools grow, the question of how best to scale the interface becomes more important, with explorations already underway for a better way to reset values and clarify inherited styles. Tied to this, it’s also important that any omission of support is deliberate in order to ensure a more cohesive experience. 

      Props to @markoserb for the design help with the visuals you see above and @beafialho for help with the video demos!

      #core-editor, #core-editor-improvement

      Core Editor Improvement: Refining the template creation experience

      These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled 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. 

      Alongside more template options comes some exciting refinements to the overall experience that should allow you to move faster with more accuracy to do what you want to do. In isolation, these enhancements might not catch your attention but, when viewed collectively, it’s clear that the template experience has been greatly improved. These will all be available in the future WordPress 6.1 but you can explore now in the Gutenberg plugin.

      Start a new template with a strong foundation

      Previously when creating a new template, you were met with an empty page. As of 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/ 13.9, you’re now given content from the closest related template in what’s called the template hierarchy. This addresses some long standing feedback around how frustrating and underwhelming it was to start from scratch each time, with some opting to copy/paste contents from other templates into their new creations. 

      As a bonus, when Gutenberg 14.0 comes out, you’ll be notified right away about the new template being created upon entering the editor.

      Find the exact template part you need

      Template parts power parts of your site 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 and make up some of the building blocks for templates. You can create your own, use the ones provided by your theme, and even customize the ones your theme offers. Previously, when searching the Inserter, your options were limited based on the groupings of template parts. This meant you still needed to select the template part you wanted, even after adding in an option like “Header”:

      Now, you can search and add the exact template part you want directly from the inserter, saving a few clicks. It also allows you to have a nice preview before adding a template part in so you have a sense of what you’re adding ahead of time:

      Going a step further, the ability to search template parts was also added to the template part setup state so you can find your favorite template part quickly:

      A modal showing the option to search for a template part.

      Move with accuracy

      As folks make a site their own, there are two additional quality of life improvements to mention that help make it more obvious to see the impact of your actions. The first is a View Site link directly from the Site Editor so that, after saving some changes, you can quickly get a sense of how your site is coming together. While this is an interim step before something more comprehensive like a browse mode can be implemented, it’s still a step in the right direction. 

      Toolbar showing new view site option in the Site Editor on a blue background

      Finally, if you want to start over after making some changes, the experience to do so has had a nice copy update to make it clearer what actions you’re going to be taking. Rather than being presented with an option to clear customization, it’s now clarified that you’ll be using what’s provided directly by the theme by deleting the customized template. This aims to help ensure that important decisions made by folks lead to the outcomes they want. 

      More to come

      Expect work to continue here, especially as more templates are added and refinements to the experience at scale become more apparent. To learn more about what’s to come and get inspired, check out the Site Editor & Templates Roadmap overview issue.

      #core-editor-improvement, #gutenberg

      Core Editor Improvement: Deeper customization with more template options

      These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled 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 the last few releases of WordPress expanding what’s possible to edit on your site, from templates to theme blocks, Gutenberg 13.7 continues this work with more templates that theme authors and end-users can create directly from the site editor. If you’ve ever wanted to have a customized experience of a categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. of posts, like your recipes or latest book reviews, or to have a unique template for a special post, you’ll enjoy what’s now possible. Here are the following templates that the last few 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/ releases have unlocked for editing directly:

      • Page templates: page-specific templates.
      • Post templates: custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. and post-specific templates.
      • Custom templates: user-selectable custom templates for all post types.
      • Taxonomy templates can be specific to a 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. (e.g., category, tag) or to a specific term within a taxonomy (e.g., category-slug).

      Keep in mind that WordPress has supported these types of 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. templates since version 5.8 if developers manually bundled them in their themes. However, these changes allow users and extenders to create them directly from the new site editor interface. It also brings us one step closer to building more complex WordPress themes without writing code.

      There are tons of use cases for these types of templates, only limited by what their creators want to build. For example, a user might want to show a grid of posts for a specific “photography” category but not change the default list style for others. A restaurant owner might remove the site’s default 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. on the “menu” page to let photos of the dishes take center stage.

      To ensure third-party plugins can properly take advantage of this system too, work was done to clarify taxonomy-specific templates labels. Specifically, some custom taxonomies from third-party plugins share the same label (e.g., post categories and product categories both using the “Categories” term). In 13.7, the taxonomy slug is added in parentheses for additional clarity.

      Custom Template Examples

      To add custom post type or taxonomy templates, visit Appearance > Editor in the WordPress adminadmin (and super admin). Clicking the WordPress icon/button in the corner of the screen will open the sidebar panel. From there, select the Templates option.

      At the top of the new page, click the “Add New” button to open the template dropdown as shown in the following screenshot:

      WordPress admin screen that displays a list of the current templates.  The "Add New" dropdown button is selected in the top right with a list of new templates to create.

      There should be several options listed with a default WordPress install with customization options:

      • Page
      • Category
      • Tag
      • Single item: Post
      • Custom template

      Creating a Custom Page Template

      To create a custom page template, select the “Page” option from the Templates > Add New button’s dropdown menu. A new overlay will appear on the screen for selecting a specific page to apply the template to, as shown in the following screenshot:

      Overlay popup for selecting a page to create a template for, showing a list of pages.

      The overlay lists the site’s pages and a search field for quickly looking up a specific page. Creating a new template is a matter of selecting the page. WordPress then redirects to the editor for building out the template’s block content.

      The Page, Post, and Custom template options are all similar in scope. However, there are some slight differences:

      • Page allows creating individual templates that can be applied to a specific page on the site or as the default page template (if not already defined by the theme).
      • Single item: Post allows users to create post-specific templates or the default template for all posts.
      • Custom template is for creating a custom template that can be assigned to any post, page, or custom post type.

      All three types of templates essentially allow you to define a custom template for a post. The primary difference is that “page” and “single item: post” are assigned automatically to their respective page or post. However, the “custom template” is not assigned to until a post/page author selects it from the template dropdown on the post-editing screen.

      These templates are often used to change the outer layout instead of the content for a specific post. For example, you could create a “custom template” that uses a Cover block for a featured-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. area. Then, assign it to posts or pages when you want a large banner image to stretch across the screen, as shown in the following screenshot:

      WordPress site editor with a cover image behind the site header and post title. The "use featured image" option is selected for the cover block.

      There are no limits on how to design a template’s layout. Another common situation is adding or removing a sidebar for specific pages, depending on what the theme’s default is.

      Creating a Custom Category Template

      To create a new category template, select the “Category” option from the Templates > Add New button’s dropdown menu. The overlay will offer two choices, as shown in the following screenshot:

      Overlay popup that displays two options:  one for a default category template and one for a specific category.

      The first option is for creating the default category template. This is used as a fallback when a more specific category template does not exist. Selecting this option will immediately create the template and move you to the editor for customization.

      The second option is for creating a custom template for an individual category. For example, perhaps you write posts about each WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. you attend and want to have a specific template that adds some additional context when folks look at all of your WordCamp posts. Selecting this option opens a new set of choices for selecting the category, as shown in the following screenshot:

      Overlay popup that displays a category selection list.

      Like creating a page-specific template earlier, the process is the same. Select the category and edit the new template from the site editor.

      Tag and custom taxonomy templates work the same as above for ease of use.

      A Look at What’s Next

      Expanding what templates can be added continues on with only a few additional use cases to cover. Beyond that overarching work, there are a few open tickets related to custom templates that folks can follow if they are keen to see how this experience will continue to improve. One such ticketticket Created for both bug reports and feature development on the bug tracker. discusses pre-populating new templates from a fallback template within the template hierarchy. This means you would be presented with content already in the template rather than starting from scratch, greatly saving time.

      Another PR focuses on improving the experience of clearing customizations when a user has customized a theme’s template. Currently, the description reads “Restore template to default state” whereas the update would offer clarification by changing it to “Use the template as supplied by the theme.”

      Taken together all of these should help users and extenders alike embrace these new ways to customize your site.

      Notes

      The Custom template option cannot currently be assigned to specific post types. Templates created via this option are available for all posts, regardless of type. For example, the UIUI User interface does not account for creating a template that users can assign to only pages and/or products (custom post type). This is supported via the template hierarchy, and theme authors can still manually create them.

      Custom templates are also not defined in the theme.json when exporting the theme ZIP file via the site editor.

      Props to @annezazu for co-writing, proofreading, and outlining the scope for this post.

      #core-editor, #core-editor-improvement, #gutenberg

      Core Editor Improvement: Creating & containing containers

      These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled 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. 

      In the last few versions of 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/ set to be included in WordPress 6.0, a collection of changes were made to simplify the discovery, use, and optionality of container blocks. When combined with the new 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. locking UIUI User interface, you can create layouts of your choosing and lock when you’re ready. 

      Improved discoverability

      When you select multiple blocks, the toolbar shows each variation of the Group block so you can quickly choose between the different variations while directly creating content. 

      Of note, you can always ungroup blocks after you’ve done this if you’d like by using the ellipsis menu in the block toolbar and selecting Ungroup. 

      More variations

      Blocks are now easily grouped into either a Stack layout (vertical) or a Row layout (horizontal) with a single click. These flex-based containers allow for responsiveness at default for your content, especially when combined. From the 6.0 dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. on Block markup updates for image, quote, list and group blocks:

      It’s a flex container, meaning it has access to content justifications and block spacing. If combined with the Row block and its ability to optionally wrap onto new lines, it can enable basic responsive behaviors, such as two columns that stack to a single column on smaller displays.

      You can switch between them in the 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. settings too after your initial selection to get a feel for what you want. The video below brings the entire experience together:

      More design options

      To customize things more, you can play with gap support, margin, typography options, and more. For margin and padding, thanks to Gutenberg 13.2 (not coming to 6.0), you can more readily visualize your changes too. Here’s a video from the release notes:

      Lock when done 

      When you have things exactly as you want them, you can lock whatever pieces you’d like of your creation to prevent removal or movement from the overall container blocks discussed above to individual blocks within. This is a great way to preserve your layout. Here’s a quick visual from a previous release post


      If you’ve explored these new options in the release cycle for 6.0 or via the Gutenberg 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/ or can be cost-based plugin from a third-party, feel free to share your creations below in the comments or even in the Pattern Directory. If you haven’t just yet, get excited to explore for WordPress 6.0.

      #core-editor, #core-editor-improvement, #gutenberg

      Dev Chat summary, March 9, 2022

      (Update March 11, 2022: 6.0 Planning Update )

      Start of the meeting on the Make WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds 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.

      Dev Chat agenda, March 9, 2022

      Dev Chat summary, March 2, 2023

      1. Announcements

      The Performance Team has released its first plugin!

      2. Blogblog (versus network, site) posts of note

      • From @audrasjbA Week in Core, March 7, 2022
      • From @annezazuA Core Editor Improvement: Choose your Style
      • From 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/ Times: Introducing the Museum of Block Art
      • Really helpful series on improvements to the core editor thanks to @annezazu and others. Choose your style. This is part of a series dedicated to highlighting new features, improvements, and more to discover the various Core Editor related projects. Just click on the 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.) #core-editor-improvement tag in the Make WordPress core blog to keep up-to-date on this.

      3. Upcoming releases

      a) Next major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope. 6.0

      A great source of information about the next release is the 6.0 release development cycle section on the Make WordPress core.

      Release co-ordinators: @annezazu has agreed to be a co-release coordinator this week alongside @priethor.

      Progress for 6.0: the biggest pieces are moving along for the core editor including Styles engine, pattern integration, improvements to 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. theme creation process, and improvements in the works for switching to block themes.

      Editor Tech Lead: @jeffpaul: any traction on confirming the Editor Tech Lead? @annezazu advised the core editor tech lead is known and in progress of being resolved. She will update in dev chat and agreed it is critical to have this role in place.

      Bug scrubs for 6.0

      • Five weeks out from 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. 1, query on 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. scrubs. Suggestion to add a bug scrub schedule to the 6.0 development cycle page when it is available. @annezazu to follow up on what is missing on bug scrubs.
      • Update post dev chat: @costdev is joining as a co-Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. lead. The change has been updated on the release page. It allows us to have great timezone coverage for the squad in a very important role. Next step: to get a bug scrub schedule in place (more context).

      @webcommsat: On March 14, 2022, at 20:00 UTC, bug scrubs on the About Page and Quick/ Bulk Edit components will begin. Requested to @marybaumand @audrasjb for these to be added to the bug scrub schedule.

      b) 5.9.2 Next Maintenance Release Update:

      • Trac tickets (1 already backported and 4 ready for backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch., on 22 tickets)
      • GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issues (22 fixed, on 69 issues): https://github.com/WordPress/gutenberg/projects/63

      @audrasjb and @mamaduka will publish a release schedule on Make/Core for the next maintenance release in the next couple of days.

      c) Gutenberg

      Released Gutenberg 12.8 RC1 in the #core-editor channel.

      4. Open Floor

      Tickets/ PRs

      • @clorith asked if there was an editor lead for 5.9.2? @annezazu will try to follow up.
      • Discussion on @clorith 5.9 regression ticket with some potential solutions (Gutenberg issue 39155). @audrasjb: moved it to 5.9.x todo.
      • @afragen: discussion re: 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/ or can be cost-based plugin from a third-party dependencies in the issues https://github.com/WordPress/wp-plugin-dependencies/issues/ Mostly around architecture and design initially.
      • Highlighting PRs from @getdave for anyone who enjoys exploring things early – Slack link.
        Two interesting PRs on the Navigation Menus system to allow menus to be manipulated in isolation from the Navigation block: Dedicated Navigation sidebar.
      • Request from @craigfrancis on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets #52506 and #54042 to get them ready for 6.0, and thanks to @peterwilsoncc for some tweaks on the former
      • Request for anyone able to also test the 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 Trac ticket 42916 ahead of bug scrub on Monday on Quick Edit. 

      Gutenberg updates in dev chat

      • @webcommsat: Request to be able to better highlight Gutenberg updates in dev chat in the blog posts or release sections of the meeting? @annezazu: to think through if there could be an async update to share to tie in with the 6.0 update.

      Update post dev chat on March 10, 2022:
      Light Process for 6.0 Updates for Core Dev Meetings
      @annezazu chatted with @priethor and @peterwilsoncc about how best to handle updates for 6.0, partially due to timezone spread. To make things easier, we are going to embrace async updates for the win that can then be shared in the meeting. This matches an approach the Core Editor meeting has taken for project updates. As a result, expect the following:

      • An async thread started each Tuesday (a day before core dev meetings) where release leads can share their updates at some point before the core dev meeting.  @annezazu and @priethor will expect to usually hear from the Core Tech, Core Editor Tech and release coordinator leads but all are welcome to share anything relevant. For core editor, aim to summarize what’s shared earlier in the day for the core editor meeting (example).
      • From there, those updates can be re-shared by @marybaum /@webcommsat during meetings.

      Volunteer for dev chat notes

      If you could volunteer for dev chat summary in the future, reach out to @marybaum and @audrasjb, the Core Team Reps. It’s a great way to keep up with all the moving parts of a release, and with the things that happen in between!

      Props to: @marybaum for the agenda and leading the meeting, and to @webcommsat for co-facilitating and the dev chat summary. Thanks for review by: @marybaum and @annezazu.

      #5-9-2-2, #6-0, #dev-chat, #summary

      Core Editor Improvement: Choose your Style

      These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled 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 Gutenberg 12.5 and the soon to be released 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/ 12.8, a 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. theme author can now bundle multiple sets of Styles with their theme, allowing anyone using the theme to quickly switch between them as shortcuts for customization. These different Style presets can change both settings available, like turning on/off font weight, and style options, like the default color palette. For a practical example of what this looks like, check out the quick demo below showing off how a theme could offer both light and dark Style presets:

      You can experience this for yourself locally by using the Twenty Twenty Two theme, creating a new styles folder in the root of the twentytwentytwo theme folder, and dropping this gist in there. 

      This Styles feature gets even more exciting when it’s paired with new enhancements like the fonts API in theme.json coming to Gutenberg 12.8. That opens the door for a wide range of styles per theme — look for more and more themes to leverage this in the coming months. The following video shows off some new creative possibilities that are opened up by these new features in combination: 

      If you’re a block theme author looking to take advantage of this new feature, dig into the documentation now to learn how to create different style presets and align with the necessary theme structure

      Thank you to @kjellr for the demos and help writing this post. 

      #block-themes, #core-editor, #full-site-editing

      Core Editor Improvement: Curated experiences with locking APIs & theme.json

      These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled 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. 

      A new API was released in WordPress 5.9 that offers more control for locking blocks to build on the current foundation of locking. When combined with the existing template locking 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. and newer tools like theme.json, it will be able to closely curate the editing experience. This post seeks to explore some practical ways you can perhaps apply these locking options to your individual projects to both provide some guardrails and still allow users to make things their own. Keep in mind you could always take this further in either direction, by limiting options more or opening options up!

      Let presets and limitations guide the experience

      Sometimes you want to allow users to be able to make some choices without getting overwhelmed or getting too far away from the overall design of a site. This might be a situation where you’ve agreed on a color scheme! In this case, you can lean on the various granular options provided by theme.json to limit choice in a way that guides someone in their decision-making while still providing a solid user experience. 

      In the quick video below, you’ll see an example where both the options to customize are removed and some presets remain. Specifically, the Post Title 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. and Post Date block don’t have options for custom font sizes, line height, font-weight, and colors. They both do still provide a few default options for font sizes and the ability to edit the blocks in other ways, like alignment. Color options are paired down to offer a few simple options in duotone, with the option to set custom colors removed.

      Post Title and Post Date blocks with custom presets and limited design options. Here’s a copy of the theme.json used inside a very basic theme generated from these steps.

      Protect the important pieces while unleashing creativity 

      Since locking can apply to templates and blocks now, you can easily combine those abilities to lock down what you need while still leaving room for customization. For this demonstration, you’ll see a locked template in a custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. that has a “related posts” section. This section is powered by a Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. block that doesn’t allow users to remove the Post Title and 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. blocks. Within the entire template too, only a few blocks can be removed and moved around within the Query Loop block to allow for some customization while also ensuring someone doesn’t delete the important pieces: the content and key parts of the Query Loop block. The outcome is a customized posts section that enables users to highlight what they want at the bottom of their post, whether it’s their latest posts or posts from a specific categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. (or more).

      Locked template preventing Post Title and Featured Image blocks from being removed from a Query Loop. Check out @welcher’s repo to use his plugin that powered this experience.

      Preserving patterns without losing too many options

      With certain custom patterns, you are sometimes going to have key elements that you don’t want moved or removed, since it might break the integrity of the design. Inspired by this pattern in the Pattern Directory, the following video shows how you can maintain the integrity of a pattern design with specific blocks locked (header and button blocks) using the block locking API introduced in 5.9. Keep in mind that you could also curate the experience even more using the same approaches shown above, both locking patterns and customizing its blocks’ presets and available design options at the same time! Note that even though the experience is locked down in a few ways, it doesn’t hamper the ability to make the pattern your own.

      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. and Button blocks locked inside a pattern. Here’s a copy of the pattern used to create the above video. 

      Take advantage of theme.json while limiting template editor access

      If you’re looking for a way to use theme.json in a Classic Theme in some of the ways described above but don’t want to allow access to the template editor, just add remove_theme_support( `block-templates`); to your functions.php file. This is one of the many ways you can have the best of both worlds – presets and supports powered by theme.json without opening up too much access.

      Additionally, when you add theme.json to your Classic Theme, some controls for color and typography are enabled by default. This can be managed by using this theme.json setup that disables all features to allow you to opt-in to the ones your theme uses.

      What have you tried? How have you approached allowing the right amount of access for different situations?

      These are just a few examples of many. Share below what you’ve tried so we can all learn together and so we can help shape the documentation on each of these features around possible real-world applications. On the flip side, if there’s something you’re itching to see possible, share too! Feature requests are always welcome.

      Expect more to come in the future, especially when collaborative editing work gets underway for phase 3, and follow along in the meantime in the next iteration of this work in this broader issue.

      Props to @welcher for collaborating on this post and @talldanwp for feedback.

      #core-editor, #core-editor-improvement

      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