- Backup Before Updating<\/a><\/li>
- Full Site Editing Features in WordPress 5.8<\/a>
- \n\t
- Template Editing Mode<\/a><\/li>\n\t
- Theme Blocks<\/a><\/li>\n\t
- The Query Loop Block<\/a><\/li>\n\t
- Persistent List View in the Post Editor<\/a><\/li>\n\t
- Block-Based Widgets Editor and Block Widgets in the Customizer<\/a><\/li>\n\t
- Block Widgets in the Customizer<\/a><\/li>\n\t<\/ul><\/li>
- Block Editor Features and Improvements<\/a>
- \n\t
- Media & Text Block Enhancements<\/a><\/li>\n\t
- Table Block Colors and Borders<\/a><\/li>\n\t
- Reusable Blocks Improvements<\/a><\/li>\n\t
- Duotone Block Support<\/a><\/li>\n\t
- Top Toolbar Improvements<\/a><\/li>\n\t
- Improvements to the Block Inserter<\/a><\/li>\n\t
- Normalized Block Toolbars<\/a><\/li>\n\t
- Embedded PDFs<\/a><\/li>\n\t
- Additional Block Editor Improvements<\/a>
- \n\t
- Drag and Drop Support in Cover Blocks<\/a><\/li>\n\t
- Enhanced Publishing UI<\/a><\/li>\n\t<\/ul><\/li>\n\t\n\t<\/ul><\/li>
- Block Settings and Styles With theme.json<\/a><\/li>
- Block API Enhancements<\/a>
- \n\t
- Changes to the register_block_type Function<\/a><\/li>\n\t<\/ul><\/li>
- WebP Support in WordPress 5.8<\/a><\/li>
- Additional Features for Developers<\/a>
- \n\t
- Block Supports API<\/a><\/li>\n\t
- Block Editor API Changes to Support Multiple Admin Screens<\/a><\/li>\n\t
- Site Health Custom Tabs<\/a><\/li>\n\t
- Additional Features and Enhancements<\/a><\/li>\n\t<\/ul><\/li>
- How to Update to WordPress 5.8<\/a><\/li><\/ul>\n\n\n\n
Backup Before Updating<\/h2>\n\n\n\n
There are tons of changes in WordPress 5.8. To prevent any unexpected conflicts with your theme and plugins, we urge everyone to run a backup of their website and test the new version in a staging environment before updating the live website. Your backup should include:<\/p>\n\n\n\n
- WordPress database;<\/li>
- WordPress files;<\/li>
- Media library;<\/li>
- Themes;<\/li>
- Plugins.<\/li><\/ul>\n\n\n\n
With FastComet, you get free daily backups. You can also opt to use a WordPress backup plugin such as BackupBuddy. The plugin can handle both complete backups of your WordPress site and automatic backups.<\/p>\n\n\n\n
Full Site Editing Features in WordPress 5.8<\/h2>\n\n\n\n
The idea behind Full Site Editing (FSE) is the provision of a collection of tools and features to allow WordPress users to build their entire websites by using blocks. With full site editing, you will find various blocks available to create any element for any page, from templates and sidebar widgets to navigation menus and site branding, and much more.<\/p>\n\n\n\n
However, keep in mind that FSE is still a work in progress, and the release of WordPress 5.8 opens a type of public beta phase. There will be many new things to come, just as it is with the ever-growing Block Editor. <\/p>\n\n\n\n
Full site editing is a collection of projects. Together, they represent a big change, which is too much for a single release. It\u2019s quite natural for such big projects to be boiled down to more than just a single update, and the most important thing to share here is that FSE is not shipping as the full experience for users. That cannot happen, mainly because there was not enough time for all agencies, theme authors, plugin devs, etc., to prepare for all the changes.<\/p>\n\n\n\n
Keeping that in mind, you should know that this merge process is not an on\/off switch. The focus here isn\u2019t on a full and nuanced user experience \u2014 you can look at it as an open public beta within WordPress 5.8. That\u2019s exactly why we should not expect a perfect FSE experience. We see new features added, and they will undoubtedly and naturally be improved over time. WordPress 5.8 is just the beginning. This version does not yet have a dramatic impact on the way we build our websites.<\/p>\n\n\n\n
Full Site Editing<\/a> comprises a wide range of separate sub-projects, including Site Editor, Global Styles<\/a>, Navigation block, Query block, block themes, Templates, and many more. However, the closest thing to Site Editing that you can see in WordPress 5.8 is the Template Editing Mode and the corresponding Theme Blocks<\/a> available to use in that mode.<\/p>\n\n\n\n
Now, let\u2019s go through some FSE features merged into Core with WordPress 5.8.<\/p>\n\n\n\n
Template Editing Mode<\/h3>\n\n\n\n
Template Editing Mode<\/a> offers you a way to create post\/page templates while using blocks. It\u2019s an exceptional way to reduce the complexity of site-building while allowing users to take advantage of several site editing features from outside of the site editor interface. You will get used to working with blocks even further. This can be great for people that don\u2019t implement block-based themes but are still looking for an easy way to create and edit templates from the block editor\u2019s UI.<\/p>\n\n\n\n
Customizing themes in WordPress is now easier than ever. With the new mode, you don\u2019t need to build a child theme to create your custom templates. WordPress 5.8 Template Editing is not limited to block themes but is also available for you to use with classic themes<\/a>. However, you have to opt-in to enable it for classic themes.<\/p>\n\n\n\n
If you want to create a new template, you have to enable Template Editing Mode in the Settings sidebar. There\u2019s a new Template panel<\/strong> available so you can switch editing mode (Gutenberg 10.5<\/a>).<\/p>\n\n\n\n
![\"The](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/opt-in-for-templates.png\")
<\/figure>\n\n\n\nFrom the Template<\/strong> panel, you can create a new template or edit an existing one.<\/p>\n\n\n\n
![\"Template](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/new-template.png\")
<\/figure>\n\n\n\nTo create a new template, click on New<\/strong>. Then enter a template name in the modal and click on Create<\/strong>:<\/p>\n\n\n\n
![\"Setting](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/create-landing-page-template.png\")
<\/figure>\n\n\n\nIn Template Editing Mode, you can build your templates using all the available blocks, including FSE blocks like Site Title, Site Tagline, Login\/out, and many more.<\/p>\n\n\n\n
Once you\u2019re happy with your edits, you can switch back to Post Editing<\/strong> mode and save the template separately from the post\/page content, as shown in the screenshot below:<\/p>\n\n\n\n
![\"Template](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/landing-page-template-modification.png\")
<\/figure>\n\n\n\nKeep note that templates are stored in your WordPress database as custom post types named
wp_template<\/code>. This allows you to edit a template from the editor interface while also making it easy to import\/export them at will. Additionally, you can use a template across various websites.<\/p>\n\n\n\nKeep in mind that when you set a block template for a page or a blog post, the regular PHP template will NOT be used to generate the page anymore. Instead, the block template will be used.<\/p>\n\n\n\n
![\"Exporting](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/export-all.png\")
<\/figure>\n\n\n\nBut all it takes is a little patience and waiting for the major issues<\/a> to be fixed to fully understand how Template Editing Mode will change the way you customize the look and feel of your websites.<\/p>\n\n\n\n
Users will no longer need developer skills to gain complete control over the layout and website\u2019s overall appearance.<\/p>\n\n\n\n
Template Editing Mode was at first available for both block themes and classic themes. After a thoughtful discussion in the 5.8 leads channel, it was decided to make the template editor opt-in for classic themes and opt-out for block themes.<\/p>\n\n\n\n
To opt-in in classic themes, now developers should add theme support:<\/p>\n\n\n\n
add_theme_support( 'block-templates' );<\/pre>\n\n\n\n
Classic themes using theme.json can opt-out by removing theme support:<\/p>\n\n\n\n
remove_theme_support( 'block-templates' );<\/pre>\n\n\n\n
For a more detailed overview of how Template Editing Mode works in WordPress 5.8 and some useful examples of usage, make sure to watch this video from Anne McCarty:<\/p>\n\n\n\n
Theme Blocks<\/h3>\n\n\n\n
As we mentioned earlier, FSE is not a single feature but a complete set of site-building features not solely related to the site editor. Template Editing Mode is just an example of that. Nevertheless, together with Template Editing, WordPress 5.8 also brings many theme blocks<\/a> that can show information dynamically retrieved from the database. You can also use some of these blocks in non-FSE contexts.<\/p>\n\n\n\n
Theme Blocks bring template tag functionalities to classic themes, and you can use them the same way as regular blocks. For instance, you can add post tags or the post\u2019s featured image anywhere in the post content or template. To get an idea of the number of theme blocks added to the core with WordPress 5.8, just type \/post in the block placeholder:<\/p>\n\n\n\n
![\"Suggested](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/use-post-in-the-block-placeholder.png\")
<\/figure>\n\n\n\nA helpful theme block available with WordPress 5.8 is the Login\/out block, which provides login and logout links. It can optionally display the login form instead of a link. Website admins can also customize the redirect target.<\/p>\n\n\n\n
For a closer look at FSE blocks, see the \u201cEnabling Full Site Editor blocks in classic themes\u201d issue on Github<\/a>.<\/p>\n\n\n\n
The Query Loop Block<\/h3>\n\n\n\n
You have tons of plugins to choose from for products, real estate, events, etc. However, the ability to create highly customized queries often requires developer skills to grapple with the WordPress Loop<\/a>.<\/p>\n\n\n\n
With the Query Loop block<\/a> being introduced in WordPress Core, website owners and admins can create lists of posts and CPTs without writing complex code or hiring developers, at least in the most common use cases.<\/p>\n\n\n\n
In short, it does the same work as the WordPress Loop, but in the visual context of the block editor. The Query Loop block performs a query based on the user\u2019s settings over the WordPress database, loops through each retrieved post, and displays data on the page.<\/p>\n\n\n\n
After intensive development<\/a>, this block has reached its current structure and now consists of two nested blocks<\/a>: the Query and Post Template blocks:<\/p>\n\n\n\n
![\"List](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/webp-support.png\")
<\/figure>\n\n\n\nBecause it\u2019s an advanced feature, the Query Loop block requires some configurations. First, you can choose between different block patterns listed in Carousel<\/strong> and Grid<\/strong> view. Once you have picked your pattern, all you need to do is click on Choose<\/strong>, and the Query Loop block will generate your custom list of posts.<\/p>\n\n\n\n
![\"Grid](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/query-block-grid-view.jpg\")
<\/figure>\n\n\n\nIf you click on Start blank, you will see a list of four Core block variations: Title & Date; Title & Excerpt; Title, Date & Excerpt; and Image, Date & Title (Offering Patterns on Block setup<\/a>).<\/p>\n\n\n\n
![\"Query](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/query-loop-variations-1.png\")
<\/figure>\n\n\n\nOnce in place, selecting the Query Loop block will display the block settings sidebar, where you can build your query. You can either inherit the query from the URL or customize the query arguments: the type of posts to be included in the list, the display order, and whether or not to have sticky posts.<\/p>\n\n\n\n
You can also set several filters, choosing from categories, authors, and keywords.<\/p>\n\n\n\n
![\"Sidebar](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/query-block-2048x983-1.jpg\")
<\/figure>\n\n\n\nAdditionally, a Display settings button in the block toolbar provides more settings to control the number of items per page, the offset, and the maximum number of pages to show.<\/p>\n\n\n\n
![\"Display](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/query-block-settings.png\")
<\/figure>\n\n\n\nYes, the Query Loop block is a powerful tool, allowing site owners to create highly customized lists of posts and custom post types. But if you walk through the WP_Query<\/a> class parameters, it\u2019s clear that the level of customization possible using the code is far more granular than what is possible using the Query Loop block. Nevertheless, it is indeed a valuable and flexible tool that lends itself to many use cases, and we\u2019ll most likely see further enhancements in the future.<\/p>\n\n\n\n
The Query Loop and Post Template blocks have been renamed several times in the past weeks. The final naming has been reached with Gutenberg 10.9<\/a>.<\/p>\n\n\n\n
Persistent List View in the Post Editor<\/h3>\n\n\n\n
Another FSE feature extended to the Post Editor is the Persistent List View. Before WordPress 5.8 (and Gutenberg 10.7<\/a>), the List View was displayed in a popover. When moving the focus outside the popover, the list would disappear. Conversely, the Site Editor displayed the List View in a sidebar containing the entire block tree. With WordPress 5.8, the List View is now displayed in a sidebar in the Post Editor, allowing users to navigate the block tree more quickly and precisely.<\/p>\n\n\n\n
![\"The](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/persistent-list-view.png\")
<\/figure>\n\n\n\nClicking on an item in the List View highlights the list item and moves the focus to the corresponding block in the Post Editor canvas. Additionally, if you hover over the items in the List View, both the item and the corresponding block in the Post Editor get highlighted.<\/p>\n\n\n\n
![\"Hovering](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/heading-paragraph.png\")
<\/figure>\n\n\n\nAdding an anchor to a block will also appear next to the corresponding item in the list view.<\/p>\n\n\n\n
![\"Adding](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/adding-anchors-to-blocks.png\")
<\/figure>\n\n\n\nWith all these enhancements to the List View, navigating complex documents should be a lot easier.<\/p>\n\n\n\n
Block-Based Widgets Editor and Block Widgets in the Customizer<\/h2>\n\n\n\n
The block-based widgets editor is a wide project<\/a> aiming to bring the block editor\u2019s interface to classic-theme widgets<\/a>.<\/p>\n\n\n\n
The new widgets editor offers many advantages to the vast majority still using classic themes. At the same time, it allows them to get acquainted with the block interface before it becomes standard for all WordPress users<\/a>.<\/p>\n\n\n\n
![\"Block](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/block-widgets-2048x1195-1.jpg\")
<\/figure>\n\n\n\nBlock-based widgets provide several advantages, including:<\/p>\n\n\n\n
- You can create layouts in sidebars, headers, and footers using columns, separators, spacers, and other design blocks.<\/li>
- Widgets support rich text editing by default, without the need for users to add custom code or embed a third-party HTML editor with a plugin.<\/li>
- Many shortcode-based widgets are now available as blocks, streamlining the editing experience.<\/li><\/ul>\n\n\n\n
The main benefit of upgrading the widgets\u2019 functionality to blocks comes from directly editing widgets using the familiar block interaction that you use when editing a page or post on your site. Using blocks opens up tons of new creative possibilities, from no-code mini layouts to tapping into the vast library of core and 3rd party blocks to create content.<\/p>\n\n\n\n
You don\u2019t have to worry that your widgets could stop working with WordPress 5.8 because the community has worked hard<\/a> to ensure backward compatibility<\/a> so that \u201cexisting widgets and third-party widgets will continue to work and can be used alongside blocks\u201d (Block-based widgets editor in WordPress 5.8<\/a>).<\/p>\n\n\n\n
However, to prevent any compatibility issues on your existing WordPress installation, don\u2019t forget to test the new version in a staging environment<\/a> before updating your live site. For those of you who opt out of using the block-based widgets editor right now, it\u2019s still possible to restore the classic widgets screen in three different ways:<\/p>\n\n\n\n
- You can install the official Classic Widgets plugin<\/a>, which restores the previous interface of the widgets screen. The plugin \u201cwill be supported and maintained until at least 2022, or as long as is necessary\u201d.<\/li>
- Theme developers can disable the block-based widgets editor by removing theme support as usual:<\/li><\/ul>\n\n\n\n
remove_theme_support( 'widgets-block-editor' );<\/pre>\n\n\n\n
- A new use_widgets_block_editor filter can be used as well:<\/li><\/ul>\n\n\n\n
add_filter( 'use_widgets_block_editor', '__return_false' );<\/pre>\n\n\n\n
Take a look at Restoring the classic widgets editor<\/a> in Widget Block Editor Overview<\/a>.<\/p>\n\n\n\n
Block Widgets in the Customizer<\/h3>\n\n\n\n
As part of the same project, WordPress 5.8 brings block widgets to the customizer.<\/p>\n\n\n\n
![\"Block](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/welcome-to-block-widgets.jpg\")
<\/figure>\n\n\n\nAdding a block-based widget in the customizer is pretty straightforward. You can launch the customize widgets inserter by clicking on the plus icon in the top right corner of the widgets panel.<\/p>\n\n\n\n
![\"Customize](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/customized-widget-inserter.png\")
<\/figure>\n\n\n\nYou can also launch the quick inserter from the bottom of the widgets panel, as shown in the following image.<\/p>\n\n\n\n
![\"Customize](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/customize-widgets-quick-inserter.jpg\")
<\/figure>\n\n\n\nBasically, starting with WordPress 5.8, you have the power of the block editor in the customizer, and you\u2019ll be able to build highly customized sidebars easily.<\/p>\n\n\n\n
The block-based widgets editor dev-note<\/a> provides a more in-depth overview of the block-based widgets editor, along with examples and resources for developers.<\/p>\n\n\n\n
Block Editor Features and Improvements<\/h2>\n\n\n\n
In addition to the first FSE implementation, WordPress 5.8 also brings new features and enhancements to several elements of the block editor, which significantly improve the overall editing experience.<\/p>\n\n\n\n
Those changes include:<\/p>\n\n\n\n
- Media & Text Block Enhancements;<\/li>
- Table Block Colors and Borders;<\/li>
- Reusable Blocks Improvements;<\/li>
- Duotone Block Support;<\/li>
- Top Toolbar Improvements;<\/li>
- Improvements to the Block Inserter<\/li>
- Normalized Block Toolbars;<\/li>
- Embedded PDFs;<\/li>
- Additional Block Editor Improvements<\/li><\/ul>\n\n\n\n
Media & Text Block Enhancements<\/h3>\n\n\n\n
Transforming a block into a columns block has been possible for a while now. However, all blocks transformed into columns blocks with a single column. This could lead to suboptimal results for the media & text block, for which a single column is usually not suitable.<\/p>\n\n\n\n
Starting with WordPress 5.8 (Gutenberg 10.2<\/a>), transforming the media & text block into a columns block automatically adds two columns: one for the image and another for the text.<\/p>\n\n\n\n
Table Block Colors and Borders<\/h3>\n\n\n\n
WordPress 5.8 also brings a couple of enhancements to the Table block<\/a>, including better control over table background and foreground colors. Another addition to the Table block is the border block support, which gives users the ability to control border color, style, and width.<\/p>\n\n\n\n
If the active theme supports the new feature, a new border settings panel provides three new controls for user customizations.<\/p>\n\n\n\n
Developers can add border block support<\/a> to their themes by adding the following code to the theme.json file:<\/p>\n\n\n\n
\"border\": {\n \"customColor\": true,\n \"customStyle\": true,\n \"customWidth\": true\n}<\/pre>\n\n\n\nReusable Blocks Improvements<\/h3>\n\n\n\n
Reusable blocks allow the user to save a block or a group of blocks to reuse later in any post or page of a website. This is useful mostly for users who repeatedly include the same block or group of blocks into different posts\/pages. With WordPress 5.8, reusable blocks are visually clearer, making them easier for WordPress users to manage.<\/p>\n\n\n\n
Here\u2019s a quick list of reusable block improvements users will find after updating their websites to WordPress 5.8:<\/p>\n\n\n\n
- When creating a reusable block, a modal now allows users to assign a name to the block.<\/li>
- The reusable block\u2019s name is now displayed in the block toolbar, navigation list, and breadcrumbs.<\/li>
- When a child block is selected, reusable blocks are now outlined. This marks a significant improvement in usability as it allows you to easily identify the parent block and its content.<\/li>
- It\u2019s now possible to modify the block name in the sidebar inspector.<\/li><\/ul>\n\n\n\n
Duotone Block Support<\/h3>\n\n\n\n
One of the most interesting features merged into Core with WordPress 5.8 is the duotone filter, first introduced with Gutenberg 10.6.<\/p>\n\n\n\n
Available as a \u201cblock supports\u201d feature<\/a>, the duotone filter is enabled by default in core image<\/a> and cover blocks. In the cover block, though, it doesn\u2019t work with fixed backgrounds<\/a>.<\/p>\n\n\n\n
Top Toolbar Improvements<\/h3>\n\n\n\n
With top toolbar mode enabled in previous WordPress versions, the top toolbar and the block toolbar were displayed side by side.With WordPress 5.8, enabling the top toolbar view will fix the block toolbar at the editor\u2019s top, just below the top toolbar. This happens independently from the browser width and should significantly improve the user experience.<\/p>\n\n\n\n
This enhancement also brings changes for developers as it unifies toolbar APIs under the <BlockTools \/> component.<\/p>\n\n\n\n
Improvements to the Block Inserter<\/h3>\n\n\n\n
In WordPress 5.8, the block inserter has been enhanced with several additions<\/a>:<\/p>\n\n\n\n
- Two-dimensional keyboard navigation on the block inserter. Now we can navigate between blocks more precisely and intuitively.
- Pressing arrow up (\u2191) and arrow down (\u2193) moves the focus to the row above or below.<\/li>
- Pressing Tab or Shift + Tab allows moving the focus between the search box, the tab list, and the first item of each category.<\/li><\/ul><\/li>
- A new \u201cTheme\u201d category for template parts and variations now appears in the inserter in Full Site Editing.<\/li>
- Multiple words in the autocomplete phrase matcher are now allowed.<\/li><\/ul>\n\n\n\n
Normalized Block Toolbars<\/h3>\n\n\n\n
Several block toolbars have been rearranged to provide a consistent UI across blocks<\/a> and improve the user experience. Now, toolbar controls are grouped following the \u201cmeta, block-level, inline\u201d semantic order.<\/p>\n\n\n\n
![\"Heading](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/heading-block-toolbar.png\")
<\/figure>\n\n\n\nSince Gutenberg 10.1<\/a> and Gutenberg 10.3<\/a>, a whole set of block toolbars has been normalized. These include an image<\/a>, button, buttons, list, heading, paragraph, quote, audio, file, media & text, video, and more.<\/p>\n\n\n\n
The semantic groupings we have in the toolbar \u2014 meta, block level, inline \u2014 should also have a visual representation with the borders. <\/p>\n\n\n\n
So, since WordPress 5.8, the block toolbar groups controls in segments<\/a> surrounded by borders. In addition:<\/p>\n\n\n\n
- The Meta segment contains block-type controls, such as the block switcher, the drag handle, and the mover control.<\/li>
- The Block level segment contains specific block tools affecting the whole content, such as alignment in a paragraph block or linking in an image block.<\/li>
- The Inline level\/Other segment contains inline transformation tools, such as inline formatting in a text block.<\/li>
- The More menu includes additional tools.<\/li><\/ul>\n\n\n\n
Embedded PDFs<\/h3>\n\n\n\n
When a PDF file is added to the document through the file block, a new sidebar toggle allows you to enable\/disable an embedded PDF version<\/a>.<\/p>\n\n\n\n
You can either drag the file directly onto the editor canvas or simply select it from the library. It\u2019s also possible to manually adjust the height of the PDF viewer or by using the sidebar control.<\/p>\n\n\n\n
All major web browsers support the PDF viewer, except for mobile browsers.<\/p>\n\n\n\n
Additional Block Editor Improvements<\/h3>\n\n\n\n
WordPress 5.8 brings tons of additional small and medium changes worth a few lines here. Among these enhancements, we\u2019d mention the following:<\/p>\n\n\n\n
Drag and Drop Support in Cover Blocks<\/h4>\n\n\n\n
Now you can drag and drop images from your desktop to replace a cover block\u2019s background (Gutenberg 10.3<\/a>).<\/p>\n\n\n\n
Enhanced Publishing UI<\/h4>\n\n\n\n
Since WordPress 5.8, the publishing UI shows the site icon and title to make it clearer where you\u2019ll publish your posts or pages (Gutenberg 10.4<\/a>).<\/p>\n\n\n\n
This enhancement<\/a> is beneficial, especially if you\u2019re working in full-screen mode or on mobile devices.<\/p>\n\n\n\n
Block Settings and Styles With
theme.json<\/code><\/h2>\n\n\n\nWith WordPress 5.8, the theme.json file<\/a> becomes \u201ca central point of configuration,\u201d providing a new way for theme developers to customize editor settings and styles.<\/p>\n\n\n\n
Using a theme.json file, themes can set custom presets and\/or add support for new features, such as duotone and table borders (Global Settings & Styles<\/a>).<\/p>\n\n\n\n
This new mechanism aims to take over and consolidate all the various add_theme_support calls that were previously required for controlling the editor.<\/p>\n\n\n\n
For example, you can globally set a custom duotone preset with the following code:<\/p>\n\n\n\n
{\n \"version\": 1,\n \"settings\": {\n \"color\": {\n \"duotone\": [\n {\n \"colors\": [ \"#000\", \"#0FF\" ],\n \"slug\": \"black-cyan\",\n \"name\": \"Black Cyan\"\n }\n ],<\/pre>\n\n\n\nThis would overwrite default presets, and you\u2019ll see only one duotone option.<\/p>\n\n\n\n
The new mechanism provides a way to control settings either globally or on a per-block basis. For example, you can add a custom 12px font-size globally by adding the following preset to your theme.json file:<\/p>\n\n\n\n
{\n \"version\": 1,\n \"settings\": {\n \"typography\": {\n \"customLineHeight\": true,\n \"fontSizes\": [\n {\n \"slug\": \"extra-extra-small\",\n \"size\": \"12px\",\n \"name\": \"Extra extra small\"\n },\n {...}<\/pre>\n\n\n\nThis results in a new font size available for users to utilize with any text in their content.<\/p>\n\n\n\n
![\"A](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/extra-extra-small-font-size-settings.png\")
<\/figure>\n\n\n\n{\n \"version\": 1,\n \"settings\": {\n \"blocks\": {\n \"core\/paragraph\": {\n \"typography\": {\n \"fontSizes\": [\n {\n \"slug\": \"extra-extra-small\",\n \"size\": \"12px\",\n \"name\": \"Extra extra small\"\n },\n {\n \"slug\": \"extra-small\",\n \"size\": \"16px\",\n \"name\": \"Extra small\"\n },\n {\n \"slug\": \"small\",\n \"size\": \"18px\",\n \"name\": \"Small\"\n },\n {\n \"slug\": \"normal\",\n \"size\": \"20px\",\n \"name\": \"Normal\"\n },\n {\n \"slug\": \"large\",\n \"size\": \"24px\",\n \"name\": \"Large\"\n }\n ]\n }\n }\n }\n }\n}<\/pre>\n\n\n\nWith that done, you\u2019ve just managed to set your custom font size presets to the paragraph block.<\/p>\n\n\n\n
![\"A](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/07\/paragraph-block-custom-settings-862x1024.png\")
<\/figure>\n\n\n\nCore blocks have been updated to follow the new mechanism, while third-party blocks can adapt to the new mechanism using the React
useSetting<\/code> hook (read more about this function in the dev-note<\/a> and API documentation<\/a>):<\/p>\n\n\n\nconst isEnabled = useSetting( 'spacing.margin' );<\/pre>\n\n\n\n
The settings declared in theme.json will take precedence over settings declared via add_theme_support.<\/p>\n\n\n\n
The new mechanism based on the theme.json file does not apply only to block settings. In fact, starting with WordPress 5.8, it will no longer be necessary to create editor styles and enqueue them. It will be enough to declare presets inside the theme.json file; the engine will generate the classes and automatically enqueue them both to the editor and the frontend.<\/p>\n\n\n\n
The engine will also generate the corresponding CSS Custom Properties<\/a>.<\/p>\n\n\n\n
In the previous example, we set five
fontSizes<\/code> presets for the paragraph block. For those presets, the following CSS Custom Properties will be generated:<\/p>\n\n\n\np {\n --wp--preset--font-size--extra-extra-small: 12px;\n --wp--preset--font-size--extra-small: 16px;\n --wp--preset--font-size--small: 18px;\n --wp--preset--font-size--normal: 20px;\n --wp--preset--font-size--large: 24px;\n}<\/pre>\n\n\n\nOnce you have set the paragraph font size in your
theme.json<\/code> file, the correspondingp element<\/code> takes the has-{preset-slug}-{preset-category}<\/code> class.<\/p>\n\n\n\nThis means that a paragraph with an extra-extra-small font size will get the has-extra-extra-small-font-size class:<\/p>\n\n\n\n
<p class=\"has-extra-extra-small-font-size\">Lorem ipsum dolor...<\/p><\/pre>\n\n\n\n
And here is the CSS declaration block:<\/p>\n\n\n\n
p.has-extra-extra-small-font-size {\n font-size: var(--wp--preset--font-size--extra-extra-small) !important;\n}<\/pre>\n\n\n\nFor a closer view of the setting and styles with theme.json, make sure to check the dev-note<\/a> and API documentation<\/a>.<\/p>\n\n\n\n
Also, check Anne McCarty\u2019s FSE call for testing<\/a> for more useful reading and an exciting challenge for developers who want to explore the new theme.json features.<\/p>\n\n\n\n
Block API Enhancements<\/h2>\n\n\n\n
Block API enhancements<\/a> coming with WordPress 5.8 deserve special attention from plugin developers.<\/p>\n\n\n\n
Using the block.json file is now encouraged as the canonical way to register block types<\/a> and provides several advantages:<\/p>\n\n\n\n
- Regarding performance, if the theme supports lazy loading of assets, registering block types through the block.json file will automatically optimize resource enqueueing. That\u2019s because the resources specified by the style and script properties will be enqueued on the frontend only when the block is detected. This allows for the development of more efficient plugins and reducing page size.<\/li>
- The block.json file simplifies server-side block registration by allowing the Block Types<\/a> REST API Endpoint<\/a> to list the block.<\/li>
- The block.json file is also required if you decide to submit your block plugin to the WordPress Plugins Directory.<\/li><\/ul>\n\n\n\n
Changes to the
register_block_type<\/code> Function<\/h3>\n\n\n\nSince WordPress 5.8, the
register_block_type<\/code> function has been enhanced to read metadata from theblock.json<\/code> file. Now, the first parameter<\/a> accepts the path to the folder where theblock.json<\/code> file is located.<\/p>\n\n\n\nThe function can be used as shown in the following example:<\/p>\n\n\n\n
function create_custom_block_init() {\n register_block_type( __DIR__ );\n}\nadd_action( 'init', 'create_custom_block_init' );<\/pre>\n\n\n\nIt returns the registered block type or false on failure.<\/p>\n\n\n\n
As you may notice, the function register_block_type is now used the same way as the
register_block_type_from_metadata<\/code> function, which previously was the only function available to register a block type<\/a> by reading the metadata from the block.json file.<\/p>\n\n\n\nOnce the block is registered on the server, you only need to register settings<\/a> on the client using the same block name in your index.js file.<\/p>\n\n\n\n
For a more in-depth overview of block API enhancements introduced by WordPress 5.8, go ahead and check the dev-note by Greg Zi\u00f3\u0142kowski<\/a>.<\/p>\n\n\n\n
WebP Support in WordPress 5.8<\/h2>\n\n\n\n
WebP format support in WordPress 5.8 is truly exciting for people obsessed with website speed.<\/p>\n\n\n\n
- The block.json file is also required if you decide to submit your block plugin to the WordPress Plugins Directory.<\/li><\/ul>\n\n\n\n
- Two-dimensional keyboard navigation on the block inserter. Now we can navigate between blocks more precisely and intuitively.
- Theme developers can disable the block-based widgets editor by removing theme support as usual:<\/li><\/ul>\n\n\n\n
- You can install the official Classic Widgets plugin<\/a>, which restores the previous interface of the widgets screen. The plugin \u201cwill be supported and maintained until at least 2022, or as long as is necessary\u201d.<\/li>
- Block Editor API Changes to Support Multiple Admin Screens<\/a><\/li>\n\t
- WebP Support in WordPress 5.8<\/a><\/li>
- Enhanced Publishing UI<\/a><\/li>\n\t<\/ul><\/li>\n\t\n\t<\/ul><\/li>
- Table Block Colors and Borders<\/a><\/li>\n\t
- Theme Blocks<\/a><\/li>\n\t
- Full Site Editing Features in WordPress 5.8<\/a>