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.
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
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 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.
While the Block Widgets Editor was released with WordPress 5.8, the work to improve the experience hasn’t stopped to help even more folks use blocks to build out 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 in an endless number of ways. The latest in a series of improvements comes with the launch of Gutenberg 11.5 that introduces a Widget Group block. This 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. replicates the familiar experience of being able to add a title to a group of blocks and allows you to group any block, making it easier to move and layout content however you’d like. This both helps with compatibility for older themes when migrating over to the new editor and enables a more cohesive experience for building out widget areas.
For example, before this update, it was tricky to get the spacing right for adding 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. above another set of blocks. Now, you can do that with ease:
Video showing how to use the Widget Group Block.
This also makes it a breeze to move collections of blocks into new widget areas:
Video showing how you can drag and drop a collection of blocks within the Widget Group Block.
As always, you can also make these changes in the CustomizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.! For more general information about the Block Widgets Editor, check out the Dev note and the user documentation. To get involved in this work, head to #feature-widgets-block-editor and explore the GitHub tracking project to see what’s next.
When a new feature is added, it’s easy to see what the feature does right now rather than the many things it allows you to do, particularly when combined with other tools. This is especially true as design tools continue to evolve! This post offers a quick dive into how improvements to the 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.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. lead to more possibilities for content creation.
Greater control of posts layout
Thanks to some recent changes to the Featured Image block, the 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 just got even more powerful. As a reminder, the Query Loop block is an advanced block that allows you to display posts based on various parameters and was released in WordPress 5.8. Within the Query Loop block, different blocks, like the Featured Image block, can be placed within it to show the Featured Images for each post listed. While you’ve been able to control the general placement of the Featured Image, until 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.3, you couldn’t control the basics of the resulting image. This came up a few times during testing with the FSE Outreach Program as a pain point with folks wanting deeper customization options. Now, you can control the sizing and scale of the image to your liking opening up the beginnings of a new world of layout options!
Video showing the new Featured Image Block options within the Query Loop block.
More options when creating templates
This change also impacts anyone using the Template Editor as you can now customize how the Featured Image shows up in a template you created. This is just a start too with more size tooling planned for the Featured Image block. Most recently too, the ability to add duotone filters to spruce up your images with endless color options was included in Gutenberg 11.4. Just like with the Query Loop block example above, this allows you to add a Featured Image block with a 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. added and then apply that to any post or page you’d like so all posts have the same duotone shading:
Video showing the new Featured Image Block options within the Template Editor.
As blocks increase, patterns emerge, and content creation gets easier, new solutions are needed to make complex content easy to navigate. List View is the latest and greatest to add to your toolbox when it comes to jumping between layers of content and nested blocks. It’s currently visible in the Top Toolbar and will remain open as you navigate through your content. This makes it easy to bounce between the exact pieces of content you want to alter, whether that’s an individual Paragraph 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. at the very end of a post or a Columns block that contains a beautiful selection of products to choose from. Think of it as the ultimate tool to navigate block complexity, select exactly what you need, and easily view all of the blocks that make up your content at once. Better yet, you can toggle it on/off as you need. Check out how it works in action in the video below:
Video showing someone selecting various blocks with the List View and making changes.
Going a step further, if a block has an ID/anchor set, it’s displayed in List View so it’s easier to distinguish between other blocks and reference as you want. Here’s an example with a portfolio anchor:
While it was originallyimagined for the Site Editor where you’re dealing with even more layers of content, it quickly became apparent that the Post Editor would benefit from this tool too and it was incorporated into 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/ 10.7. Keep in mind that more improvements are planned and you’ll have access to this feature in WordPress 5.8, so stay tuned and get excited!
We’ve all been there. Staring at a blank page sometimes with an idea of what you want to create and sometimes with a mind as blank as the page. To make the creation process easier and to leap into the pattern filled future, work is underway to suggest 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. patterns based on the block one is working with. Tied to this, when using the block inserter, block patterns will be suggested where possible. In the long run as this work continues and spreads to more blocks, it will be easier to create content and get inspired without leaving the editor.
Exploring integrated patterns
For now with 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/ 10.6.2, you can see how this flow works with a few blocks including the Heading Block, Query Block, Social Icon Block, Buttons Block, and Paragraph Block. In particular, lots of work has been done around the Query Block to make it easier to create beautiful layouts in a few clicks with this powerful block. Here’s a quick visual showing this experience with the Quote Block:
Video showing how the block patterns can be found in the transforms options
You can begin to explore these patterns in three ways:
Browse through them in the Patterns tab of the Block Inserter.
Select directly from the Quick Inserter.
Navigate to them in the transform menu of individual blocks.
Integrate your custom block patterns
On the flip side, if you’re creating your own custom block patterns, there’s a new experimental blockTypes property being worked on that will allow your patterns to show up in the transform menu. Here’s an example of how this works currently. This is still in the early stages though as it’s utilizing experimental components and might need changes down the road so stay tuned! If you do try this out and run into any bugs/feature requests, feel free to share them in the Gutenberg repo.
You must be logged in to post a comment.