Allow blocks to use the role attribute

docs/reference-guides/core-blocks.md

@@ -275,7 +275,7 @@ Gather blocks in a layout container. ([Source](https://github.com/WordPress/gute
 
 -	**Name:** core/group
 -	**Category:** design
--	**Supports:** align (full, wide), anchor, ariaLabel, color (background, gradients, link, text), dimensions (minHeight), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align (full, wide), anchor, ariaLabel, color (background, gradients, link, text), dimensions (minHeight), position (sticky), role, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** tagName, templateLock
 
 ## Heading

packages/block-editor/src/hooks/index.js

@@ -20,6 +20,7 @@ import './layout';
 import './content-lock-ui';
 import './metadata';
 import './metadata-name';
+import './role';
 
 export { useCustomSides } from './dimensions';
 export { useLayoutClasses, useLayoutStyles } from './layout';

packages/block-editor/src/hooks/role.js

@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { hasBlockSupport } from '@wordpress/blocks';
+
+const ROLE_SCHEMA = {
+	type: 'string',
+	source: 'attribute',
+	attribute: 'role',
+	selector: '*',
+};
+
+/**
+ * Filters registered block settings, extending attributes with role.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Filtered block settings.
+ */
+export function addAttribute( settings ) {
+	// Allow blocks to specify their own attribute definition with default values if needed.
+	if ( settings?.attributes?.role?.type ) {
+		return settings;
+	}
+	if ( hasBlockSupport( settings, 'role' ) ) {
+		// Gracefully handle if settings.attributes is undefined.
+		settings.attributes = {
+			...settings.attributes,
+			role: ROLE_SCHEMA,
+		};
+	}
+
+	return settings;
+}
+
+/**
+ * Override props assigned to save component to inject the role attribute, if block
+ * supports roles. This is only applied if the block's save result is an
+ * element and not a markup string.
+ *
+ * @param {Object} extraProps Additional props applied to save element.
+ * @param {Object} blockType  Block type.
+ * @param {Object} attributes Current block attributes.
+ *
+ * @return {Object} Filtered props applied to save element.
+ */
+export function addSaveProps( extraProps, blockType, attributes ) {
+	if ( hasBlockSupport( blockType, 'role' ) ) {
+		extraProps.role = attributes.role === '' ? null : attributes.role;
+	}
+
+	return extraProps;
+}
+
+addFilter( 'blocks.registerBlockType', 'core/role/attribute', addAttribute );
+addFilter(
+	'blocks.getSaveContent.extraProps',
+	'core/role/save-props',
+	addSaveProps
+);

packages/block-library/src/group/block.json

@@ -59,6 +59,7 @@
 		"position": {
 			"sticky": true
 		},
+		"role": true,
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

schemas/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+-   Add new block support for the `role` attribute. ([#47868](https://github.com/WordPress/gutenberg/pull/47868/))
+
 -   Add new properties `settings.typography.fluid` and `settings.typography.fontSizes[n].fluidSize` to theme.json to enable fluid typography ([#39529](https://github.com/WordPress/gutenberg/pull/39529)).
 
 

schemas/json/block.json

@@ -335,6 +335,11 @@
 					"description": "A block may want to disable the ability of being converted into a reusable block. By default all blocks can be converted to a reusable block. If supports reusable is set to false, the option to convert the block into a reusable block will not appear.",
 					"default": true
 				},
+				"role": {
+					"type": "boolean",
+					"description": "Role attributes let you add semantic meaning to non-semantic HTML elements. This property allows enabling the definition of a role for the block, without exposing a UI field.",
+					"default": false
+				},
 				"lock": {
 					"type": "boolean",
 					"description": "A block may want to disable the ability to toggle the lock state. It can be locked/unlocked by a user from the block 'Options' dropdown by default. To disable this behavior, set lock to false.",