Birgit Pauli-Haack 4:10 pm on October 10, 2022
Tags: , , ,   

Miscellaneous editor changes for WordPress 6.1

This dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. covers miscellaneous updates and changes made to the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor for WordPress 6.1.

Updated 10/14 (@bph)

  • removed useDisabled as it was already revamped and
  • removed “Dropping Enzyme” as it’s slated for 6.2
  • Added New withIllustration option for Placeholder component

Table of Contents

Allow defining an aria-label in group blocks

When there are multiple landmarks of the same type (for instance <nav>, <aside>, <section>) added to a template, assistive technologies cannot differentiate between them. Group blocks allow users to select the HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element they need, but in doing so, introduce an a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) issue.

With this update in WordPress 6.1, developer can add ARIA labels in their templates and blocks.

Example Code. 

<!-- wp:group {"tagName":"aside","layout":{"inherit":true}} -->
<aside aria-label="first aside" class="wp-block-group"><!-- wp:paragraph -->
<p>Aside 1</p>
<!-- /wp:paragraph --></aside>
<!-- /wp:group -->

<!-- wp:group {"tagName":"aside","layout":{"inherit":true}} -->
<aside aria-label="second aside" class="wp-block-group"><!-- wp:paragraph -->
<p>Aside 2</p>
<!-- /wp:paragraph --></aside>
<!-- /wp:group -->

Start content patterns for all post types

With WordPress 6.0, developers were able to add patterns that appear in a modal each time a new page was created, thus allowing the user to start from a set of pre-made patterns instead of a blank state. In WordPress 6.1, this feature is expanded to all the post types.
To use this feature, one should include core/post-content in the blockTypes array (same as what happened for pages) and include the desired postTypes where the modal should appear in a newly introduced postTypes property. If postTypes are specified, the pattern is only available on the post types that were set.
Example:

register_block_pattern( 'custom-pattern', array(
			'title'      => _x( 'Start post pattern', 'Block pattern title', 'gutenberg' ),
			'blockTypes' => array( 'core/paragraph', 'core/post-content' ),
			'postTypes' = array( 'product' ),
			'content'    => '<!-- wp:paragraph -->
<p>A start post pattern</p>
<!-- /wp:paragraph -->',
		) );

Props to @jorgefilipecosta for writing the dev note.

New option for Placeholder component supports illustrations

In WordPress 6.1 the Placeholder component used by blocks like Image or Cover supports a new property called withIllustration. When true this property will instruct the Placeholder component to display an outline SVG illustration when there is no content.

Details on PR #41605 / Documentation: Placeholder component

A set of Placeholder Component illustration examples

Props to @andraganescu for dev note

This update added a filter to navigation.php to provide the ability to modify navigation block menu items with code. Developers now can programmatically access the navigation block menu items of a block theme similar to the existing wp_nav_menu_items filter does for traditional themes.

A new filter, block_core_navigation_render_inner_blocks, passes WP_Block_List::$inner_blocks to the developer.

A skeletonized filter example follows.

add_filter(
	'block_core_navigation_render_inner_blocks',
	function( $inner_blocks ) {
		$menu_item = [
			'blockName'    => 'core/navigation-link',
			'attrs'        => [],
			'innerBlocks'  => [],
			'innerHTML'    => '',
			'innerContent' => [],
		];
    	$inner_blocks->offsetSet( null, $menu_item );

	return $inner_blocks;
	}
);

Props to @afragen for the code contribution and dev note.

Improvement of Cover Block

Markup changes

The markup has been changed to resolve the issue that duotone doesn’t work with fixed background. Previously, the background image was applied to the root of the block, but it is now applied to the inner div with the img role and .wp-block-cover__image-background class.

Current:

<div class="wp-duotone-xxxxxx-xxxxxx-x wp-block-cover has-parallax" style="background-image:url(http://example.com/wp-content/uploads/2022/10/cover.jpg)">
	<span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span>
	<div class="wp-block-cover__inner-container">
		<p>Inner Contents</pss=>
	</div>
</div>

New:

<div class="wp-duotone-xxxxxx-xxxxxx-x wp-block-cover has-parallax">
	<span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span>
	<div role="img" class="wp-block-cover__image-background wp-image-xx has-parallax" style="background-image:url(http://example.com/wp-content/uploads/2022/09/cover.jpg)"></div>
	<div class="wp-block-cover__inner-container">
		<p>Inner Contents</p>
	</div>
</div>

For more information visit #40554.

Keep the same position for both LTR and RTL languages

In the cover block, the content inside can be changed the content position, such as “Top Left” or “Center Right”. But when changed to RTL languages, the content position flips left to right as compared to the LTR language. However, content position determines “physical” placement and should not be affected by language direction.

To solve this problem, the same position is now kept for both LTR and RTL languages. Because of this change, the content within the existing cover block in RTL languages is flipped left to right (i.e., in its original position), but if this is not what you are looking for, you can re-position it.

For more information visit #43663.

Props to @wildworks for the code contribution and dev note.

Moving block CSSCSS Cascading Style Sheets. to JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.

Previous to WordPress 6.1, when themes developers wanted to override default blocks CSS styles using theme.json, a few issues arose due to higher specificity, convoluted selector choices or just quirky behavior.

With WordPress 6.1, it is now possible to express styles in the block.json file, using the same properties as a theme.json file. These styles are merged with the Global Styles settings, together with the theme and user style settings, with theme and user style settings taking priority over block styles. The background processing of all Styles (default, block, theme, and user) via the Style Engine also comes with a performance advantage.

Note: This feature is still experimental and therefore subject to change.

Developers can now add an __experimentalStyle property to their block.json file which defines style for the block. For example, the Pullquote block sets the following:

"__experimentalStyle": {
	"typography": {
		"fontSize": "1.5em",
		"lineHeight": "1.6"
	}
}

This will output the following CSS in the frontend:

.wp-block-pullquote{font-size: 1.5em;line-height: 1.6;}

Resources

Props for the dev note to @scruffian, for reviews to @bph and @webcommsat

Starting from WordPress 6.1, the Social Links block will automatically prepend emails with the mailto: if the protocol is missing.

For more information, visit #42186.

Example: 

<!-- wp:social-links -->
<ul class="wp-block-social-links">
<!-- wp:social-link {"url":"editor@example.com","service":"mail"} /-->

<!-- wp:social-link {"url":"mailto:editor@example.com","service":"mail"} /--></ul>
<!-- /wp:social-links -->

Props to @mamaduka for the dev note.

Deprecated APIs and Components

BlockColorsStyleSelector

WordPress 6.1 will deprecate the BlockColorsStyleSelector block editor component. Instead, use Supports 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. to signal that the block supports color-related properties. Visit pull request #40502.

Props to @mamaduka for the dev note.

Blocks: “children” and “node” attribute sources for RichText deprecated

These have been unofficially deprecated for 4 years now, there hasn’t been an official deprecation warning in the console.log.

If you are still using “children” or “node” sources in the block attribute definition, like in this example

content: {
 	type: 'array',
 	source: 'children',
 	selector: 'p',
 }

Use the HTML source instead to remove the deprecation warning:

content: {
 	type: 'string',
 	source: 'html',
 	selector: 'p',
 }

That’s it! Check the section Introducing Attributes and Editable Fields for more information.

Props to @ellatrix for the dev note.

Props to @webcommsat for review of this post.

#6-1, #dev-notes, #dev-notes-6-1, #editor