What's New in WordPress 6.2 - (r)

WordPress 6.2 has been scheduled for release on March 28, 2023 It's now time to see the possibilities for the first version of 2023.

With WordPress 6.2, we enter the final stage that is Phase 2 on the lengthy Gutenberg development roadmap and the block editor finally leaves the beta phase.

The focus of this release is optimizing the user interface and improving the editing experience.

A new approach to navigating between templates and template parts has been introduced, along with the capability to add blocks with widgets, the new writing mode that is free of distraction and a resized block settings experience, and numerous small and big changes to the blocks already in use functionality, speed, and performance.

But if there's anything that leaps forward in terms of functionality and user-friendliness It's the Navigation block. Since it was first released it has seen several variations which have greatly streamlined the editing process over time. In WordPress 6.2, development is continuing as well, and in this article, we'll demonstrate to you how easy it is to now manage a navigation menu.

Improved Editing Experience

WordPress 6.2 provides a better editing experience with all the structure of the site in the middle. It is now possible to manage navigation menus more easily, push style changes through a single block, and then Global Styles, and effortlessly move between template and templates components using color-coded template elements as well as reusable blocks.

However, there's more. We'll look at the main additions and changes in editors' interface.

A Revamped Site Editor Interface and Browse Mode

With the release of WordPress 6.2 and WordPress 6.2, a number of improvements in the editor's interface have been added into the core. One of the most intriguing change changes the Site Editor Interface. With the introduction of a Browse Mode that is available, it's easy to navigate templates and other parts of the template.

The updated interface allows users to upload a different template part right from the sidebar of the editor using a simple clicking the plus (+) icon found to just to the right of the menu title.

Based on Ryan Welcher Ryan Welcher, the Wp Core and Documentation contributor, "[T]he development of this feature is ongoing and will continue to improve as new Gutenberg versions are made available."

The process is now smoother and smoother. To start editing the current template/template part, just select the Edit button on the menu on the left or click on the template preview in the center of the page.

Distraction Free Mode

WordPress 6.2 includes a brand new Distraction free editing mode which removes clutter from the canvas and allows you to be focused on the content on the page.

It is possible to activate this option by navigating to the option screen that appears by clicking on the three dots (three dots) icon in the upper right-hand corner.

When Distraction Free feature is activated toolsbars and other sidebars disappearand leave on the screen only the information you're doing.

Tabbed Block Inspector

WordPress 6.2 introduces an entirely new Block Inspector that aims to bring order to the sidebar by creating separate settings control panels.

Block settings have been divided into tabs to separate style settings from the other block setting.

If they are available In the event that it is available, If available, the Block Inspector tabs will be presented in the order in which they are:

• List View: This view includes control options for controlling the children of a block like submenus, and links in the Navigation block
• Setting: includes configuration options which aren't related to the design of the block.
• Appearance: This includes options that are specifically related to the design of the current block, including typography and colors

This is a notable increase in the user-friendliness of the interface. This is especially true for advanced blocks with many choices for configuration, such as the Group Block or Navigation Block.

Please note the following:

• The new Inspector only shows the tabs when they contain components to show.
• If the Settings tab contains only the Advanced panel, it's moved to the tab of Appearance.
• If the Block Inspector shows just one tab, it will show as it did before WordPress 6.2.

Read the notes of the developer to see a more detailed overview of the new Block Inspector.

Coloring Templates Parts as well as Reusable Blocks

To make it easier to distinguish them from blocks and groups, Template Parts and blocks that can be reused have been highlighted with an distinct color in List View Block Inserter, Block Toolbar, and in the Editor Canvas.

This is the case in both the Site Editor as well as the Post Editor like the image below.

A Revamped Block Inserter

Block Inserter Block Inserter is affected by various changes that greatly improve your overall experience of editing.

The first is a brand new interface design makes it easier to navigate between pattern and media categories as well as providing greater visuals of patterns as well as media items.

If media are present on the website If they are on the site, there is a Media tab is displayed in the Block Inserter to make it easier for adding media in the site's content. It is possible to drag and drop media or images, or click the media you want to insert it into the content.

Openverse Integration in the Block Inserter

Openverse is a program which aims to make available openly licensed or public domain work that is accessible to anyone. Now, with WordPress 6.2, Openverse has been integrated into Block Inserter.

To use this feature, click on the Media tab within the Block Inserter. This shows a panel which includes a search feature and image previews directly taken directly from Openverse. Openverse repository.

For technical details, see the Openverse Integration Pull Request.

Migrate Widgets to Block Themes

With WordPress 6.2 Users who have a site using a classic theme that decides to change to a block-based theme are able to transfer their existing widget areas to the new theme, converting the widget areas to template components.

Learn what it does.

The first step is to create a widget area using a theme that is classic. You could, for instance, install Twenty-Eleven and include the calendar into the footer Area One.

The block's sidebar is where you can select the widget area to import by using in the Import Widget Area drop-down menu.

And that's it. You can now manage your previous widget area like any other template part.

List View and Document Details Combined

Starting with WordPress 6.2, the List View and Details have been relocated to one document Overview panel divided in two tabs: List View and Outline.

This change should provide an easier way to manage the documents.

Extended Block Capabilities

With WordPress 6.2 it has expanded the functionality of various block types are being expanded. This is particularly true for navigation block. Navigation block. This block has been subject to a variety of changes as well as improvements on the editing process.

Let's look over the most significant changes.

A List-Based Editing System for Navigation Block

With the release of WordPress 6.2, it's possible to change the arrangement of Navigation Block elements from a display view within the block settings sidebar.

By clicking on the menu item, you brings you to the settings bar for the particular Page Link, where you are able to modify the link details, including label, URL, description, link title, and hyperlink rel.

This change greatly simplifies editing navigation menus. It allows you to insert, organize the items you want to delete from your menu, or even create new Navigation menus.

Lock Navigation

Another feature added to the Navigation block is the possibility to restrict menu editing with greater granularity. Now you can Restrinct editing or movement. You can also disable it and prevent removal. Previously, with WordPress 6.1, there was only Restrinct editing, and Disable motion options could be used.

Additionally, the chosen choices may also be applied to the internal blocks (links or submenus).

Remove or Add Captions to the Block Toolbar

A brand new Add/Remove caption button permits users to edit captions on the toolbar of blocks for a variety of blocks (Audio, Video, Image).

If you've already added a caption, it will be automatically included when you add the image to your post.

Improved page List Block

Two enhancements involve two improvements to the Page List block.

The Page List block can now be expanded to show the page list in the List View panel.

In addition, a new option in the block sidebar now allows you to create a start page and display only pages that are descending from it inside the block.

New Placeholders for Group Blocks

Now the Group Block placeholder displays the option to select a different variant when the block is placed on the page's content.

Sticky Positioning Block Support

WordPress 6.2 adds a brand new function for positioning blocks, starting with sticky positioning.

The new feature is currently available exclusively to group blocks to which it is opted for by default.

Theme developers can enable sticky positioning for their themes with their appearanceTools feature of theme.json. If you want more granular control over appearance tools, you can also set the settings.position.sticky prop to true.

The option to use sticky positioning is available by enabling sticky positioning in the Position Panel of the Inspector control sidebar.

If sticky positioning is enabled The HTML tag gets an position-sticky class, and certain CSS rules will apply to that element.

.wp-container-6 
 top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
 position: sticky;
 z-index: 10;
 

... when test by hand, the feedback revealed that in the absence of further UI or UX effort, the feature could become confusing for users trying to design sticky headers, if they mistakenly set a non-root block to sticky, or for example, a block inside the header template to become sticky. The solution was to limit the feature to the block that is the root for 6.2 to give more time to explore the best solution for blocks that are nested.

The position feature is only available for individual blocks. You won't see it in Global Styles.

Other Improvements to the Block Editing Experience

Some other notable upgrades to block editing include these:

• It is now possible to drag and drop images onto an empty paragraph, to substitute it by the Image block.
• Controls for typing have been    Panels are organized into panels   . This helps make it possible to make the Styles interface more compatible with the Settings interface, and enhances the usability of it, since you are now able to display the controls you want to hide as per the Block Settings interface.

• You can now modify the letter spacing of the heading blocks directly from the Global Styles interface.
• Now you can set the background as well as the link and text color in the Calendar block..
• Two brand new Banners and Footers blocks patterns have been created to reflect better the structure of web pages.
• It is now feasible to autocomplete hyperlinks in any block using the [[ shortcut. Before this change, blocks had to explicitly declare support for link autocompletion using __experimentalSlashInserter.
• The new controls and option and 1-6 keyboard shortcut allows you to convert the paragraph you are reading into an heading.
• The Page List block now    Supports all font options    The font family includes appearance, size of font, line height, letter spacing, decorations, and letter case.

Enhanced Design Tools

A lot of the enhancements and features introduced in WordPress 6.2 increase the WordPress' appearance and capabilities in design. The following is a brief list of the top aspects of design that are included in 6.2 and we'll discuss each of them further.

Style Book

WordPress 6.2 introduces a new Style Book feature that allows users to preview every block which can be utilized in their sites without needing to add those blocks to templates or template parts. It is possible to launch the Style Book by clicking on the Open Style Book button (the eye icon) it now appears within the Styles heading within the global styles.

This opens an interface showing the previews of each of the core and third-party block by category.

The brand new Style Book interface simplifies the designing process by providing all the block styles' previews available in a single centralized site.

The same interface also provides the possibility of previewing individual blocks. As an example below, you can see an example of a custom calendar widget.

Developers can hide a block from being placed and viewed by two methods. The first is to alter supports.inserter to false in block.json:

 "supports": 
 "inserter": false
 
 

Another way to hide the preview block is to not use the examples property. This property will create one of the blocks in the Inspector Help Panel (read more here).

Shadows are a feature of Global Styles

With WordPress 6.2 It is possible to add and customize shadows on certain blocks with Global Styles or theme.json (as of this writing, the shadow feature is only available for blocks that have the Button block).

The first step is to select themes that are compatible with this option, you'll be able to apply shadows using in the Global Styles interface.

The Shadow pop-up lets you select a shadow from the themes presets.

Advanced users and theme developers can add shadows on blocks by using theme.json. The following definition adds the shadow of a black 4px on Button blocks:

"styles": 
 "blocks": 
 "core/button": 
 "shadow": "4px 4px #000000"
 
 
 ,

"settings": 
 "shadow": 
 "presets": [
 
 "shadow": "4px 4px #FF0000",
 "name": "Red",
 "slug": "red"
 ,
 
 "shadow": "4px 4px #00FF00",
 "name": "Green",
 "slug": "green"
 ,
 
 "shadow": "4px 4px #0000FF",
 "name": "Blue",
 "slug": "blue"
 
 ]
 ,
 

After you have defined your preferences, they will appear in your Shadow panel of the block Styles.

It is also possible to select the value of a preset to use as the default block value:

"styles": 
 "blocks": 
 "core/button": 
 "shadow": "var(--wp--preset--shadow--blue)"
 
 
 

New Minimum Height Dimension Control

With WordPress 6.2 and later, the Dimensions panel of the sidebar settings for the Group and Post Content blocks is now equipped with the New Minimum Height control enabled by default in themes that use appearanceTools. appearanceTools feature.

This control is a new option that lets users set an appropriate height for Group and Post Content blocks and can be used to show the footer on the bottom of the page, even with little content.

In conjunction with the brand new vertical alignment tool that allow you to vertically align the inner elements on the bottom, center or top of the page.

Developers are able to add support for minimum height to themes by adding minHeight to theme.json. minHeight setting in theme.json:

"minHeight": true

Additionally, you can use this property in conjunction with the appearanceTools property:

 "settings""settings": 
 "appearanceTools": true
 
 

The brand new minHeight property is also used to specify a certain value in theme.json:

 "styles": 
 "blocks": 
 "core/post-content": 
 "dimensions": 
 "minHeight": "80vh"
 
 
 
 
 

Custom CSS in the Styles Panel

You can add custom styles in the individual basis, from your block style panel and clicking on the More Styles actions button on the Styles toolbar. This displays a pop-up menu with an additional CSS element.

To allow customization of CSS to support custom CSS, a brand updated styles.css property has been included in theme.json.

You can also add per-block custom CSS in theme.json using the styles.blocks.block.css property:

"styles": 
 "blocks": 
 "core/button": 
 "css": "background: #FF0000"
 
 
 

You can also make use of the & to nest elements, and pseudo-selectors.

To get a better understanding of the brand new feature of custom CSS check out Custom CSS to create blocks and global styles.

Copying and Pasting Styles Between Blocks

A new group in the Options menu on the toolbar of the block now shows two buttons that allow you to copy styles as well as paste styles. Before this addition it was feasible to copy styles but there was no way to know what to do. copy styles.

To test the new method, you need to create a new block. It could be an ad. Change the style and choose Copy styles in the Block Options menu.

Select another block, and choose the paste style. The copied styles will then be immediately applied to the new block.

Apply Block Changes Globally

WordPress 6.2 also introduces the Apply globally button within the Advanced panel for individual blocks which allows you to apply your block style changes into Global Styles and apply those modifications across all of the website.

With this feature using block typography and spacing, dimensions and color styles to all blocks of that kind is as simple as pressing a button (see here for this pull-request).

Enhanced Design Experience with Spacing Visualizers

Spacing Visualizers permit you to look at the amount of margin or padding that is applying to a block. With WordPress 6.2 This feature has been enhanced with a couple of improvements to the editing experience.

First, Spacing Visualizers now show up as soon when you hover over the margin control or padding.

The Spacing Visualizer will now instantly blocks the toolbar for block as soon as you hover over the space setting, so you are able to preview the latest margin and padding setting free of the block toolbar clutter.

The changes are not significant, but they are changes that affect a good quantity of core blocks.

Changes for Developers

An HTML API that is New

The brand new API makes it easy to perform previously complex tasks that often needed regular expressions.

In the following example in the following example, we just apply an alt attribute to an image tag:

$html = '';
 
 $p = new WP_HTML_Tag_Processor( $html );
 
 if ( $p->next_tag() ) 
 $p->set_attribute( 'alt', 'Hello WordPress 6.2' );
 
 
 echo $p->get_updated_html();

This would result in the following img tag:

The "$p->next_tag"() method moves onto the next tag in the HTML. It can also take the name of the tag, a CSS class, or both, to locate particular tags as illustrated in the example above.

To edit HTML tags, you need first to select the target tag:

$p->next_tag();

When you've chosen the target tag Once you have selected the tag, you are able to use API methods to perform several operations:

•    $p->get_tag()  
•    $p->set_attribute()  
•    $p->get_attribute()  
•    $p->remove_attribute()  
•    $p->add_class()  
•    $p->remove_class()  

You can set an attribute style:

$html = 'example.com';
 
 $p = new WP_HTML_Tag_Processor( $html );
 
 if ( $p->next_tag( 'a' ) ) 
 $p->set_attribute( 'style', 'text-decoration: wavy underline purple;' );
 
 
 echo $p->get_updated_html();

You may also include or remove a class or an attribute. In the code below, we add a custom class to an h1 tag:

$html = 'Page Title';
 
 $p = new WP_HTML_Tag_Processor( $html );
 
 if( $p->next_tag( 'h1' ) ) 
 $p->add_class( 'title' );
 
 
 echo $p->get_updated_html();

You can then echo or return the updated tag using the $p->get_updated_html() method.

For a closer view at the latest HTML API look at this online PHP guide written by Adam Zielinski, WordPress Core committer.

Patterns API and a New Template Types Property Property

Jorge Costa highlights that this is it's a backend-only update which means there's no corresponding UX feature. We can however expect to see more advanced versions that utilize this functionality in WordPress 6.3:

The first usage, in considering the WordPress 6.3 is to present the user some patterns that make sense on templates once the user starts making the template. Users can start from patterns instead of "blank" or the default template.

On the technical side, the register_block_pattern() function has been modified to include a new template_types parameter, which is an array of strings containing the names of the templates the block pattern is intended for.

React v18.0 and Concurrency Mode

One of the most important features of Concurrent Module in React is the fact that it's interruptible:

React ensures that the user interface will appear consistent even if the rendering process is disrupted. To do this, it waits to perform DOM transformations until it is finished when the whole tree has been evaluated. This means that React can prepare fresh screens that run within the background, without affecting the main thread. This means the UI will respond quickly to user input , even if it's in the middle of an enormous rendering process providing a smooth user experience.

The primary benefit lies in the way that UI responds to user input immediately, in concurrence with the application that's doing in the background.

Concurrent mode, however, also presents potential pitfalls that developers should be aware of. For a more in-depth overview of the Concurrent Mode feature in React in WordPress 6.2, check out the sample code in the notes for developers.

Further Changes to Developers

Some other notable modifications that developers should take note of comprise the following:

• A new skipBlockSupportAttributes prop has been introduced to exclude attributes and styles related to block supports in the ServerSideRender component.
• The new theme.json API now permits you to style existing core block versions using theme.json.

But that's not all. WordPress 6.2 introduces many functions, enhancements, and bug fixes that were not mentioned here in order to be concise. To see a complete overview, check out this WordPress 6.2 Field Guide.

Summary

WordPress 6.2 gets us closer to the end on Phase 2 of the Gutenberg project dubbed Customization. But, as Matias Ventura points out, this doesn't necessarily mean that customization work is complete and in future versions. We can anticipate further improvements to the editor based on suggestions from users.

• It is easy to set up and manage My dashboard. My dashboard
• 24/7 expert support
• The most efficient Google Cloud Platform hardware and network that is powered by Kubernetes to ensure maximum capacity
• An enterprise-level Cloudflare integration to speed up as well as security
• The reach of the global audience is as high as up to 35 data centers and more than 275 PoPs across the globe