What's New What's New WordPress 6.2 (r) (r)

WordPress 6.2 has been scheduled to release in March 28, 2023. It's now time to look at the potential in the initial version of 2023.

With WordPress 6.2 now in use, we are entering the final stage that is Phase 2 of the long Gutenberg development roadmap and the block editor finally quits the beta stage.

The main focus of this update is improving the user interface as well as improving the editing user experience.

A new approach to navigate between template and templates components has been added and it is possible to create blocks using widgets. The new writing mode which is free of distraction and the ability to change the size of block settings, and numerous small as well as major changes to the blocks currently in use in terms of function speeds, performance, and speed.

However, if anything advances in terms of functionality and ease of use, it's the Navigation block. Since it's first release it's seen a variety of variations that have significantly streamlined editing over the years. In WordPress 6.2, development is continuing as well as in this post we'll show you how easy you can now control a navigation menu.

Improved Editing Experience

WordPress 6.2 provides a better editing experience with all its structure located in the middle. It is now possible to navigate menus for navigation more efficiently as well as push the style change across a single block and later Global Styles, and effortlessly switch between templates and template components by using color-coded templates as well as blocks that can be reused.

However, there's more. Let's look at the major enhancements and modifications to editors' interface.

A Revamped Site Editor Interface and Browse Mode

In the wake of the launch of WordPress 6.2 along with WordPress 6.2 There are many enhancements to editors' interfaces have been integrated into the base. One of the most interesting improvements is the change to the Editor Interface. Editor interface. With the introduction of a Browse Mode that's readily available, you can browse through templates as well as other elements that comprise the design.

The new interface lets users to download a completely different template right from the sidebar of the editor using a simple clicking to the + (+) icon found to just left of the menu title.

It is based on Ryan Welcher Ryan Welcher Ryan Welcher, Contributor to WP Core and Documentation, "[T]he development of this feature is ongoing and will continue to improve when new Gutenberg versions become available."

The process has become smoother and more fluid. If you want to edit the template or template currently in use you need to click on the Edit button from the menu left or click on the preview of the template in the center on the screen.

Distraction Free Mode

WordPress 6.2 comes with a new Distraction edit mode that is free and removes clutter from the canvas and allows you to be only focused on the content of the page.

It's possible to enable this feature by navigating to the screen of options that appears by clicking on the 3 dots (three dots) icon located in the upper-right-hand corner.

When Distraction Free features are activated, the toolbars, along with other tabs, disappear and leave on the screen only what you're currently doing.

Tabbed Block Inspector

WordPress 6.2 introduces a completely new Block Inspector which aims to improve the organization of the sidebar by creating separate setting control panels.

Block settings have been separated into tabs to separate styles from each block setting.

If they are available In the event it's accessible the tabs of Block Inspector are displayed in the order in which they appear:

• View of List: View that includes various control options to manage the children of the block such as submenus and links inside the Navigation block
• Settings: includes configuration options not connected to the style of the block.
• Application: This includes options specifically related to the look of the present block, including typography and colors

It's a significant improvement in the ease of use for the user interface. It is particularly evident for advanced blocks with many choices to configure, like The Group Block or Navigation Block.

Take note of the following information:

• The new Inspector only shows the tabs when they contain elements to display.
• When the Settings tab only contains the Advanced tab, it's relocated to the tab for Appearance.
• When the Block Inspector has only one tab, it will display as it did before WordPress 6.2.

Read the notes from the developers for a more detailed overview of the latest Block Inspector.

Parts of Coloring Templates and Coloring as well as Blocks that can be reused

To help distinguish them from blocks and groupings, Template Parts and blocks that are reuseable have been highlighted with an distinct shade in the List Block Inserter View Block Toolbar on the Canvas Editor.

It is true for both the Site Editor and the Post Editor , as shown in this image.

A Revamped Block Inserter

Block Inserter Block Inserter can be modified by a variety of changes which greatly enhance your overall experience of editing.

The first is a brand modern interface that helps users switch between the pattern and media categories, as well as offering more visuals of media and patterns. objects.

If there are media on the site, if they are on the site, there is a media tab is displayed in the block inserter to make it easier to add media to the content of the website. It's possible to drag and drop images or media images, or click the image or media that you would like to include it in the text.

In the Block Inserter

Openverse is a program which aims to make available publicly licensed work that is accessible to all. With WordPress 6.2, Openverse is integrated into the Block Inserter.

To access this feature, click on the Media tab within the Block Inserter. The panel that appears features a search option and image previews directly taken directly from Openverse. Openverse repository.

For details on technical aspects, check out the Openverse Integration Pull Request.

Transfer Widgets to Block Themes

With WordPress 6.2 users who own an existing site that uses a traditional theme and decides to switch to a block-based theme can transfer their existing widgets to the new theme by converting the widget areas to template components.

Learn what it does.

The first step is to design a widget with a theme that's traditional. It is possible to, for example Install Twenty-Eleven, and then add the calendar into the area below. One.

The sidebar of the block is where you are able to select the widget's location to import from the Import Widget Area drop-down menu.

It's that simple. Now you can manage your previous widget area like any other template part.

The List View as well as the Document Information Combined

Starting with WordPress 6.2 in the 6.2 version, the List View and Details feature has been moved to one Overview panel, which is divided into two tabs: List View and Outline.

This change should provide an easier method of managing documents.

Extended Block Capability

In WordPress 6.2 it's been able to expand the functions of various blocks types are being extended. Particularly, for navigation blocks. The navigation block. This block has been affected by a range of changes along with improvements to editing.

Let's take a look at the most significant modifications.

A List-Based Editing System to Navigation Block

In WordPress 6.2 It is now possible to modify the order of Navigation Block elements from a show view from the block's settings sidebar.

By clicking on the menu option, it will take you to the settings menu specific to the Page Link, where you are able to modify information about the hyperlink such as the URL, label, description hyperlink title, a description, hyperlink rel.

This update greatly streamlines the editing process for navigation menus. You can add, arrange and organize the items you want to eliminate from your menu, or even create New Navigation menus.

Lock Navigation

A further feature that was added to the navigation block is the ability to limit menu editing to more precision. It is now possible to restrict editing, or move. It is also possible to remove it or disable it. Prior to WordPress 6.1 the option of just Restrinct editing. the option to disable motion could be employed.

In addition, the options you select could also be used to the inner blocks (links as well as submenus).

Change or add Captions to the Block Toolbar

A new Add/Remove caption button permits users to change captions in the toolbar blocks. The toolbar can be used for different blocks (Audio Video, Audio, Image).

If you've already created an image caption, the caption is automatically added in the moment you upload the photo to your post.

A better page list has been added to the site. Block

Two improvements involve two improvements on page list block. Page List block.

Page List block Page List block can now be expanded to show the pages inside the List View panel.

A new option in the sidebar of blocks now lets users to make a starting page and show only the pages that are descending from it within the block.

New Placeholders for Group Blocks

The Group Block placeholder displays the possibility of selecting another option after the block has been added to the page's content.

Sticky Positioning Block Support

WordPress 6.2 includes a innovative feature to position blocks. The new function starts at sticky positioning.

The new feature is currently accessible only to blocks that are grouping that it's opted for by default.

Theme developers can enable sticky positioning of their themes by using 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 possibility of using sticky positioning is accessible when you enable sticky positioning on the Position Panel on the sidebar of control for Inspector.

If sticky positioning is turned on The HTML tag will be assigned a sticky-position 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; 

in

This feature is only available for individual blocks. It isn't available on Global Styles.

Other Improvements to the Block Editing Experience

Some other notable upgrades that block editing are these:

• Now, it is possible to drag and drop images into a paragraph that is empty in order to replace it with an Image block.
• Controls for typing have been panel-based, with the controls being organized in panels . This allows you to make it possible to make the Styles interface more compatible to the Settings interface, and enhances the functionality of it, since you are in a position to present the features you wish to keep hidden according to your preferences in the Block Settings interface.

• Now you can change the spacing between letters of block headings right through the Global Styles interface.
• Then you can change the background color as well as the link and text color in the calendar Block..
• Two fresh Banners and footers blocks designs are designed to reflect better the structure of web pages.
• It's now possible to autocomplete hyperlinks in all blocks making use of the [[ shortcut. Before this change, blocks had to explicitly declare support for link autocompletion using __experimentalSlashInserter.
• The updated controls as well as the option and 1-6 keyboard shortcut allows you to convert the text you're reading to a heading.
• This Page List block now supports all fonts. The font family comprises appearance, font size, line height, letter spacing ornaments, and the letters.

Enhanced Design Tools

Many of the improvements and new features that are introduced in WordPress 6.2 enhance WordPress' appearance and capabilities with regard to appearance and. This is a short overview of the best features of design included in 6.2 and we'll go over the various aspects in more detail.

Style Book

WordPress 6.2 adds a new Style Book feature that allows users to preview each block which can be utilized within their site without the need to add those blocks to templates or template components. It is possible to launch the Style Book by clicking on the Open Style Book button (the eye icon) It now displays under the styles heading in the global styles.

The interface will show the previews of every one of the third-party and core blocks by categories.

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

This same interface offers the possibility of previewing individual elements. As an example below there is the example of a customized calendar widget.

Developers may block from being placed and then viewed using two different methods. One method is changing supports.inserter to false in block.json:

 "supports": "inserter": false 

Another method to block this block from view is to utilize the examples property. The property creates some 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 make and edit shadows on specific blocks by using Global Styles or theme.json (as as of the time this article was written it can only be used on blocks that have an Button block).

The initial step is to select the themes that work to this choice, then it's possible 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 designers can apply shadows to blocks using theme.json. The following definition will add the shadow of black 4px shadow 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'll appear in your Shadow section of the block Styles.

You can also choose the value of a preset that you want to apply for the block's default value:

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

New Minimum Height Dimension Control

In WordPress 6.2 or later in WordPress 6.2 or later, the Dimensions panel on the sidebar settings for the Group and Post Content blocks is now equipped with the minimum height control enabled by default in themes with appearanceTools. appearanceTools feature.

This control is a new option for users that lets them select the right height for the Group and Post Content blocks and can be used to show the footer at the bottom of the page having no content.

Together with the newly developed vertical alignment tool which lets you vertically align your inner elements to the bottom, the center, or the top.

Developers have the ability to provide support for minimum height in themes by adding minHeight into theme.json. minHeight setting in theme.json:

"minHeight" True

In addition, you may utilize this property to the appearanceTools property:

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

The new minHeight property is used to specify a certain amount inside theme.json:

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

Custom CSS can be found in the Styles Panel

It is possible to add custom style within the individual block style, from your blocks style panels after clicking the More Styles actions button in the Styles toolbar. The pop-up menu will appear that includes the added CSS element.

To enable modification of CSS in order to allow custom CSS A brand new styles.css property has been added 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" 

Additionally, you can utilize the operators & to nest elements, and pseudo-selectors.

To get a better understanding of this brand new feature , custom CSS, check out the Custom CSS feature to build blocks as well as global styles.

Pasting and copying styles between Blocks

The options menu in the toolbar of the block now shows two buttons that allow users to copy styles as well as paste styles. Prior to this update, it was easy to copy styles however it was difficult to determine what was best. copy styles.

For testing the new technique, you need to create a new block. This could be an advertisement. Modify the style, and then select Copy styles in the Block Options menu.

Select another block, then choose your paste design. The copied styles will then be applied immediately to the block that you have chosen.

Apply Block Changes globally

WordPress 6.2 adds an apply globally button within the Advanced panel of individual blocks and allows you to apply your block modifications to style to Global Styles and apply those changes across the entire websites.

This feature that allows the block's typography and spacing as well as dimensions , and color schemes for all blocks of this sort is as easy as pressing a button (see here for this pulling-request).

Enhanced Design Experience by Spacing Visualizers

Spacing Visualizers let you examine the margin or padding that is applying to a block. In WordPress 6.2 The is now a feature that has been upgraded with a couple of changes to the editing experience.

In the beginning, Spacing Visualizers are visible as soon as you hover above the margin control, or padding.

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

These changes aren't significant However, they're significant adjustments that affect a significant number of core blocks.

Development Changes

An HTML API that is brand new

The all-new API simplifies the ability to complete previously difficult tasks which often required regular expressions.

In the next example, we add the 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();

It would produce the following image tag:

"$p->next_tag"() method is used to locate the next tag. "$p->next_tag"() method proceeds to the next tag in the HTML. It may also use the name of the tag CSS classes, or both, to locate specific tags, as shown by the illustration above.

For editing HTML tags, you need first choose the tag:

$p->next_tag();

When you've chosen the target tag, once you've selected the tag, you're able to use API methods to perform several tasks:

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

You can set an attribute type:

$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 can also add or remove a class or an attribute. In the code below, we add a custom class to an tag called 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.

To get a better understanding of the latest HTML API look at this guide to PHP online composed by Adam Zielinski, WordPress Core committer.

Patterns API and a New Template Types Property Property

Jorge Costa highlights that this is it's a only a backend update that means there's not a similar UX feature. It is possible to be seeing the more sophisticated versions with this function within WordPress 6.3:

One of the first uses, looking at of WordPress 6.3 is to present to the user some pattern patterns that make sense on templates when the user begins making templates. The user can begin with templates 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 key aspects of the Concurrent Module in React is the fact that it's interruptible:

React makes sure that the user interface will be consistent even when the rendering process gets disrupted. For this reason it pauses the execution of DOM transformations until it is finished when the whole tree is checked. This means that React can prepare fresh screens that run within the background and not affect the primary thread. That means that the UI will respond quickly to input from users , even while it's in middle of a massive rendering process providing a smooth user experience.

The main benefit is the manner in which UI responds to inputs from the user instantly, and in conjunction with the program running in the background.

Concurrent mode, however, can also present pitfalls developers need to be aware. For a more in-depth overview of the Concurrent Mode feature available in React within WordPress 6.2 take a look at the sample code in the Notes for Developers.

Additional Changes for Developers

Some other notable modifications that developers should take note of include:

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

But that's not all. WordPress 6.2 includes a variety of functions, enhancements, as well as corrections to bugs that aren't listed here to make it easier for users to understand. To get a full outline, read the WordPress 6.2 field guide.

Summary

WordPress 6.2 brings us closer to the end on The second phase of the Gutenberg project, dubbed Customization. As Matias Ventura points out, this doesn't necessarily mean that customization work is done and will be available in subsequent versions. We can anticipate further improvements to the editor in response to feedback from our users.

• It's easy to create and maintain My dashboard. My dashboard
• 24/7 expert support
• The most efficient Google Cloud Platform hardware and network powered by Kubernetes to ensure the highest capacity
• A business-level Cloudflare integration to speed up and increase security
• The worldwide reach of the audience can be as wide as around 35 data centers and more than 275 PoPs spread across the globe

Article was first seen on here