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 the bug tracker.
With the latest WordPress release out in the world, this post seeks to recap the performance improvements available for all sites. According to this analysis done by @flixos90 that you’re encouraged to dig into, WordPress 6.2 loads 14-18% faster for 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 and 2-5% faster for classic themes. Server-side performance is seeing a major boost of 17-23% for block themes and 3-5% for classic themes. These changes demonstrate WordPress’s continued commitment to ensuring that websites built on the platform are optimized for performance.
theme.jsonJSONJSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. APIs
Leading up to WordPress 6.2, theme.json related code received more performance related attention partially thanks to an understanding that this newer configuration file has an important role to play in the future of themes. This work aimed to improve Time To First Byte (TTFB), a metric related to server-side performance. It focused on three aspects:
According to this analysis, caching wp_get_global_settings had the most impact in the release, improving classic themes by 9% and block themes by 24%. For context, while wp_get_global_settings was introduced in WordPress 5.9, it’s usage expanded to cover many more use cases, including querying data for rendering front-end blocks. As a result, it benefitted immensely from caching the response.
Lazy-loading images for block themes
While Time To First Byte (TTFB) was a big focus of the 6.2 release, there was also a major change to Largest Contentful Paint, the main user-perceived performance metric: the first image or iframeiframeiFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. of the post will no longer be lazy loaded for block themes.
Outside of the work done to directly improve performance, there was also a focus on making front-end metrics readily available to all. The aim being to ensure developers have the necessary information to make new features performant and catch regressions earlier, all aiding in creating performant future major releases. All Pull Requests in the Gutenberg and wordpress-develop repositories now include front-end performance information. This information is also reported in the following places for a more comprehensive look:
Total: tracks server-side performance. Equivalent to TTFB 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/ dashboard.
Before template: tracks the time it takes to dispatch the template_redirect hook.
Template: the difference between total time and the time it took to dispatch the tempate_redirect hook.
Get involved
If you’re interested in working on improving performance across the project, make sure to join #core-editor, #core-performance, and attend meetings for both.
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.
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.
There are a variety of tools and methods for styling your site, from global edits via the Styles interface to more nuanced changes for individual blocks. Ahead of WordPress 6.2, there are new features that make it easier to create consistent designs, understand at a glance what impact changes will have, and customize more aspects of your site to your liking. There’s something for everyone, whether you’re creating your next 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, a designer seeking a pixel-perfect layout, or someone looking to reuse a design. Taken together, these changes create a clearer design process that is intuitive and efficient for modification and reuse.
Interfaces for creating your style
While expanding the tools and options for what you can style are incredibly important, so are the ways in which design changes are represented. The following interface updates help ensure you can more clearly see the impact of the changes you want to make:
Design blocks globally with the new Style Book that allows you to see all blocks on your site as you style them (44420).
Rely on an inline preview of blocks when working with Styles to better understand the impact of changes (42919).
See a broader view of your template when selecting a style variation (44987).
Tools to customize further
While some are content with relying on what a block theme or Core provides, others want more ways to get a design or layout just right. With the last few releases 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/, the following options have been added that allow for that exact kind of deeper customization folks are used to:
Add Custom CSSCSSCascading Style Sheets. for your entire site directly from the Styles interface (30142).
Add Custom CSS on a per block basis directly from the Styles interface (44412).
Edit block style variations, like with the Button or Image blocks, from the Styles interface (46343)
Options to create consistent designs
With a growing number of design tools in each WordPress release, designs can become both more complex and nuanced. To help streamline the design process and make it easier to reuse your work, take a look at these new options:
Take local changes from a single block and apply them globally across your entire site, with a new control within the Advanced block settings (44361, 46965).
Copy and paste block styles to create consistent designs in a few clicks (44418).
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 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, 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 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. experience to Custom CSSCSSCascading 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.
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 categoryCategoryThe '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.
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.
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.
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:
You must be logged in to post a comment.