Browse Mode: An easier way to navigate the Site Editor

With the release of WordPress 6.2, the Site Editor has been completely reimagined with the introduction of Browse Mode. This new way of interacting with the Site Editor provides a more intuitive navigation experience, making it simple to access and manage all templates and template parts. The addition of a sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme., allowing for the creation of new templates, further enhances this functionality.

With this new feature, WordPress sets the foundation for future developments like content editing, extended pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party options, and menu management. (36667, 46903, 46700, 46458)

Remove “beta” Label from Editor

The beta label in the Site Editor has finally been removed with the release of WordPress 6.2. This means that when you access the Site Editor through Appearance > Editor, you will no longer see the “(beta)” label. This decision was reached after extensive discussions and evaluations over several release cycles, starting with WordPress 5.9. Despite the removal of this label, the Site Editor will continue to receive enhancements and bug fixes like other parts of WordPress.

Template Parts & Reusable Blocks Colorization

Identifying template parts and reusable blocks within the Site Editor has become more intuitive. These synced blocks, which differ from other CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks, now stand out with a distinct color throughout the interface, including the List View, Block Toolbar, and Canvas. This improvement makes it easier to recognize when you’re working with these blocks, making the site creation process smoother and more efficient. (32163, 45473)

Split Block Settings Between “Settings” and “Styles”

Split Block Settings into two categories: “Settings” and “Styles”. This makes it easier to find the desired settings and styles, as they are clearly separated. Additionally, it reduces the amount of scrolling needed to locate the desired item. This change makes blocks with many controls, such as the Group block and Navigation block, easier to manage and customize. 

If you’re a plugin author, it’s a game-changer. It ensures that the options for your block appear where you want them to, making it easier for your users. As a consequence, the __experimentalGroup property was stabilized on the InspectorControls slots. 

You can now define which InspectorControls group to render controls into via the group prop.

In addition to stabilizing the __experimentalGroup property, a new styles group was added, so styles-related controls that do not fit conceptually under the block support panels — border, color, dimensions, typography, etc. — can be included under the “Styles” tab in the block inspector:

<InspectorControls group="styles">
  // Add your custom styles-related controls here.
</InspectorControls>

(40204, 47045, 47105)

Update Block Settings Icon

To accommodate the change in block settings, a new icon has been added to the block setting sidebar. This small change has a big impact, as it affects many documents, training videos, and more. To ensure everything is up-to-date, please proactively update relevant material. Further discussion about the change in the icon can be found in GitHub Issue 46851.

Distraction-Free Writing

The new Focus Mode offers a more concentrated writing experience by hiding unnecessary elements of the editor interface. When enabled, all sidebars are closed and toolbars become less visible, allowing your content to take the spotlight. You can switch this mode on/off as desired, depending on your needs. (41740)

To see a fuller demonstration of this feature, see this distraction-free mode video on YouTube.

Navigation Block UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it.

The Navigation block in WordPress 5.9 brought a new editing experience. Now, with the introduction of an editable view in the block settings sidebar, managing menus is even easier. This view works similarly to the List View but is specific to the current navigation being edited. Clicking the “Edit” button selects the menu item in the editor, allowing for inline editing. This option offers a balance between the prior experience and the new block editing paradigm.

Digging deeper into technical details, the Navigation block provides an additional option when locking to restrict editing of its inner blocks (links and submenus). This helps to curate the experience even more, especially if you’re taking advantage of the ability to use block template parts in classic themes. For a demonstration of the new locking features, see this locking the navigation video.

Moreover, the Navigation block has more room to grow. A location fallback for classic menus and an “open list view” button could be added to improve it further, and a new conversion panel with the Page List block to make it easier to switch to editable links. (46938, 45394, 44739, 45976, 46286, 46335, 46352)

Sticky Positioning

The Position block support now includes a “Sticky” option, allowing a block to stay within the viewport and remain at the top of the page when the content is scrolled. This is beneficial when an element, like a status message or promotion, needs to be visible regardless of the page’s scroll position. The feature works in both the block editor and the front end, providing a true WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. experience.

In WordPress 6.2, the team focused solely on the root level, as this reduces the complexity of dealing with sticky positioning and avoids the UX problem of applying sticky to a non-root-level block.

Testing Instructions

• In a theme that uses appearance tools (e.g. TT3) select a Group block that is nested within another block (i.e. it is not at the root level of the document in the post or site editors). Under the settings tab, there should be no Position panel available.
• Select a Group block at the root level of the document. Under the settings tab, there should be a Position panel available.

Note: The logic will still display the Position controls if a value has been set, even if the block is not at the root level. This is to support backward compatibility, since the Position feature has already been released in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/, and also allows users to turn off the Position if the block is moved to a non-root level of the document. You can learn about some follow-up tasks to this initial implementation in this issue. (46142, 47334)

Openverse Integration

Who doesn’t love Openverse? Millions of media items are now available right from your editor! WordPress 6.2 introduces this fantastic feature to simplify adding images directly from Openverse’s index of over 300 million public domain and openly licensed images.

Testing Instructions

1. From WP admin, navigate to Posts > Add New.
2. Click the block inserter (the plus icon at the top of the editor).
3. Select the new Media tab, and then Openverse.
4. Search, scroll, and select an image to insert it into the post.

Pattern Inserter Redesign

A new design provides a split view between categories and patterns, enhancing navigation and providing larger previews for patterns. This improves the drag-and-drop experience when building top-level sections; enables quick browsing between categories; and provides the ability to save, import, and manage patterns. (44028, 41379, 44501, 46419)

Testing Instructions

• Open the inserter.
• Open the patterns Tab.
• Open Explore all patterns, search insert, and play around with it.

Register Patterns for Templates 🛠

A new approach to associating patterns with templates has been developed, where extenders can register patterns for specific template types to limit where they appear. For example, an Error 404 pattern should only be used with the 404 templates. (45814, 42325)

Testing Instructions

The new patterns registration APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. property templateTypes accepts an array whose values define template slugs where the pattern makes sense. For example: 404, single-post, home, page, archive, or single-product.

1. Activate the Twenty Twenty-One theme.
2. In the theme’s inc/block-patterns.php file, after the existing calls to register_block_pattern(), add the sample test pattern with the snippet below. Save the file.
3. Open the post editor, and then the browser developer tools console.
4. In the console enter the following to retrieve the registered patterns: wp.apiFetch( { path: '/wp/v2/block-patterns/patterns' } ).then( console.log );
5. Verify that the API response includes the pattern query/template-type-test, and template_types has 404 listed.

register_block_pattern(
	'query/template-type-test',
	array(
		'title'      => __( 'Template type test', 'twentytwentyone' ),
		'templateTypes' => array( '404' ),
		'content'    => '<!-- wp:paragraph {"align":"center","fontSize":"x-large"} -->
						<p class="has-text-align-center has-x-large-font-size">404</p>
						<!-- /wp:paragraph -->',
	)
);

New Style Book

The goal of the Style Book is to make creating consistent designs simpler, help users quickly understand the effects of changes, and enable more customization to suit their preferences. For block theme authors, this is a major shift. These changes create a clearer design process that is intuitive and efficient for modification and reuse. (44420)

Inline Preview for Global Block Styles

To enhance the editing experience, Core Team added a block preview component to the global styles panel. This component displays a preview of the selected block at the top of the sidebar panel, allowing you to see the block example and how it’s affected by the settings in real time. (42919)

This is particularly useful because global styles allow you to edit blocks that might not be present on the current page being previewed. With the block preview component, you can now easily see the changes you make to the block’s global settings and how they will appear on your website.

Apply Block Style Globally

This feature allows you to update all blocks across the site with just one click. By clicking the “publish” button in the “Advanced” section, you’ll be able to see an option to “publish” the styles that were pushed. This new feature will simplify the process of updating styles across the site, making your workflow even more efficient. Be sure to check out the video to see how it works! (44361)

Copy Block Styles

Now you can copy styles from one block and paste them onto another. Previously, the only way to do this was to duplicate the entire block, which was often inconvenient, or to manually copy each tool/setting, which was incredibly tedious for blocks with many styles. (44418)

Custom Global CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.

Now you have the ability to add custom CSS to your entire site through Global Styles. This new feature provides designers with even more control over the look and feel of their website, allowing them to make precise adjustments to their design.

Add Shadow Presets and UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. Tools in Global Styles

Gutenberg 14.9, launched on January 4, 2023, brought a highly anticipated design tool to theme authors: shadows. WordPress 6.2 Beta 1 has finally arrived, bringing support for both default and theme-specific shadow presets. The update includes 4 default shadow presets: Natural, Crisp, Sharp, and Soft. (46502)

Testing Instructions

You can add custom shadows via the settings.shadow.palette array in theme.json.

1. Activate any block theme (e.g. Twenty Twenty-Three).
2. Add shadow presets to theme.json. For example, the snippet below is inspired by Tailwind CSS’s box-shadow.
3. Open Global Styles -> Blocks -> Button -> Border & Shadow -> Drop Shadow.
4. The above-defined shadows should appear in the selected panel.
5. Choose any shadow and save the changes.
6. Open the front end, and verify the button for the given shadow.

"settings": {
	"shadow": {
		"palette": [
			{
				"name": "Natural",
				"slug": "theme-natural",
				"shadow": "5px 5px 0px -2px #FFFFFF, 5px 5px #000000"
			},
			{
				"name": "Crisp",
				"slug": "theme-crisp",
				"shadow": "5px 5px #000000"
			},
			{
				"name": "Sharp",
				"slug": "theme-sharp",
				"shadow": "5px 5px 0 0 #999999"
			},
			{
				"name": "Soft",
				"slug": "theme-soft",
				"shadow": "5px 5px 10px 0 #999999"
			}
		]
	}
}