The WordPress coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. development team builds WordPress! Follow this site for general updates, status reports, and the occasional code debate. There’s lots of ways to contribute:
Found a bugbugA 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.?Create a ticket in our bug tracker.
These “CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvementtagtagA 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 GutenbergGutenbergThe 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/pluginPluginA 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 blockBlockBlock 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.
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.
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.
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.
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:
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.
These “CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvementtagtagA 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 CSSCSSCascading Style Sheets.. This post goes through each categoryCategoryThe '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 BlockBlockBlock 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
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 ExcerptExcerptAn 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
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
AvatarAvatarAn 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 imageA 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
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 filterFilterFilters 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
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 headerHeaderThe 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
Thisincludes 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 GutenbergGutenbergThe 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 valuesand 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!
These “CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvementtagtagA 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 GutenbergGutenbergThe 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.
Template parts power parts of your site like a headerHeaderThe 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:
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.
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.
These “CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvementtagtagA 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 categoryCategoryThe '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 GutenbergGutenbergThe 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:
Post templates: custom post typeCustom Post TypeWordPress 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 taxonomyTaxonomyA 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 blockBlockBlock 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 sidebarSidebarA 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:
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:
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-headerHeaderThe 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:
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:
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 WordCampWordCampWordCamps 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:
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 ticketticketCreated 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 UIUIUser 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.
These “CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvementtagtagA 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 GutenbergGutenbergThe 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 blockBlockBlock 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 UIUIUser interface, you can create layouts of your choosing and lock when you’re ready.
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 noteEach 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 sidebarSidebarA 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 pluginPluginA 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.
Start of the meeting on the Make WordPress CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel.
From GutenbergGutenbergThe 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 tagtagA 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 releaseA 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 blockBlockBlock 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 BetaBetaA 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 bugbugA 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-TriagetriageThe 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 backportbackportA 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)
GitHubGitHubGitHub 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.
@afragen: discussion re: pluginPluginA 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.
Request from @craigfrancis on TracTracAn 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 patchpatchA 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.
These “CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvementtagtagA 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 GutenbergGutenbergThe 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 blockBlockBlock 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:
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:
These “CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvementtagtagA 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 APIAPIAn 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 blockBlockBlock 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.
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 TypeWordPress 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 LoopLoopThe 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 imageA 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 categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. (or more).
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.
HeaderHeaderThe 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.
These “CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labelled with the #core-editor-improvementtagtagA 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 headerHeaderThe 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 GutenbergGutenbergThe 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 sidebarSidebarA 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!
Looking forward, this work will ultimately pave the path for a smooth transition into blockBlockBlock 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 widgetWidgetA 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 UXUXUser 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.
Improving accessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) requires ongoing effort and this post seeks to highlight some of the ways in which the project continues to make strides in this area. If you’re interested in helping with this work, please join the #accessibility channel in Make SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. and check out how you can get involved. There’s plenty of important work to be done including testing, giving accessibility feedback, and creating PRs to address feedback.
Ensuring accessibility from the start with the Navigation blockBlockBlock 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. [planned for 5.9]
The Navigation Block is a key milestone for the full site editing project that focuses on the experience of editing a site’s navigation menuNavigation MenuA theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site., both in terms of structure and design. This is a big effort that includes how to make it easy to add submenu items, how to create a responsive navigation experience, how to support multiple different inner blocks, and more. While work is underway to simplify the experience for all (ex: reducing the number of steps to add a page link), this section covers three big pieces of the work, thus far, that have had a particularly strong impact on accessibility:
The first is that when implementing submenus it was intentional that they would open on explicit click rather than focus, when navigating with a keyboard and/or screen reader. The changes made ensure that screen reader users are better informed when tabbing submenus, and can choose whether to enter them or not. Previously it was necessary to tab through every submenu item to get to the next parent item. For a deeper look into the behaviors of the navigation block and submenu items, check out these visualizations that provide more context but have not yet been fully implemented.
When building the responsive navigation feature in the navigation block, work was done to ensure the hamburger menu was built using proper modal behavior from the start. This means that when you open the responsive burger menu, the tab is kept inside the responsive menu experience until you press Escape. A quick demonstration is shown in the video displayed in this section.
Accessibility benefits with the Gallery Block Refactor [planned for 5.9]
Ahead of WordPress 5.9, an update to the Gallery Block was shipped that essentially allows you to have all of the tools you’re used to with an Image Block for each image in the Gallery Block. Thanks to this change, the Gallery Block now benefits from improved keyboard navigation and the ability to add alt text right within the block sidebarSidebarA 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.. This will make it easier to both produce accessibility friendly content and for those navigating what you create when viewing your site. To learn more about the Gallery Block Refactor, you can check out this WordPress News post dedicated to it.
Other noteworthy updates/fixes [in the GutenbergGutenbergThe 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/pluginPluginA 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 today]
There’s a lot of high-impact changes that can be overlooked when not shown altogether. To help capture additional accessibility improvements, here are high impact changes in the editing experience:
Thank you to @joen who helped provide wonderful insights about the navigation block, including the featured video. Thank you to @kellychoffman@priethor@daisyo for the content review. Thank you to @javiarce for the lovely Gallery Block refactor screenshot.
You must be logged in to post a comment.