From 80b1dc3919cfbe1a33159d9384c461c6048619dd Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Wed, 8 Feb 2023 11:17:21 +0100 Subject: [PATCH 1/8] Allow button and group blocks to use role attribute --- docs/reference-guides/core-blocks.md | 4 +- packages/block-editor/src/hooks/index.js | 1 + packages/block-editor/src/hooks/role.js | 61 ++++++++++++++++++++ packages/block-library/src/button/block.json | 1 + packages/block-library/src/group/block.json | 1 + schemas/json/block.json | 5 ++ 6 files changed, 71 insertions(+), 2 deletions(-) create mode 100644 packages/block-editor/src/hooks/role.js diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index d18ac79b8270c6..79ebb108f244b4 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -50,7 +50,7 @@ Prompt visitors to take action with a button-style link. ([Source](https://githu - **Name:** core/button - **Category:** design -- **Supports:** anchor, color (background, gradients, text), shadow, spacing (padding), typography (fontSize, lineHeight), ~~alignWide~~, ~~align~~, ~~reusable~~ +- **Supports:** anchor, color (background, gradients, text), role, shadow, spacing (padding), typography (fontSize, lineHeight), ~~alignWide~~, ~~align~~, ~~reusable~~ - **Attributes:** backgroundColor, gradient, linkTarget, placeholder, rel, text, textAlign, textColor, title, url, width ## Buttons @@ -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 diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 84b3ba3a95a33b..99ac30189d0ff0 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -19,6 +19,7 @@ import './layout'; import './content-lock-ui'; import './metadata'; import './metadata-name'; +import './role'; export { useCustomSides } from './dimensions'; export { useLayoutClasses, useLayoutStyles } from './layout'; diff --git a/packages/block-editor/src/hooks/role.js b/packages/block-editor/src/hooks/role.js new file mode 100644 index 00000000000000..1b5f36860a519b --- /dev/null +++ b/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 +); diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index f2d41a42e6dc2e..3eb10fb2a35bd4 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -83,6 +83,7 @@ } }, "reusable": false, + "role": true, "shadow": true, "spacing": { "__experimentalSkipSerialization": true, diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index 2b227a15847a27..83a93fd16b57af 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -23,6 +23,7 @@ "align": [ "wide", "full" ], "anchor": true, "ariaLabel": true, + "role": true, "html": false, "color": { "gradients": true, diff --git a/schemas/json/block.json b/schemas/json/block.json index 9e7d43470b180d..0ee7a5196e6172 100644 --- a/schemas/json/block.json +++ b/schemas/json/block.json @@ -324,6 +324,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.", From ada53f507fcfe498c010e578665740b6f3b65735 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 28 Feb 2023 10:36:44 +0100 Subject: [PATCH 2/8] Use a block attribute instead of block support --- docs/reference-guides/core-blocks.md | 4 +- packages/block-editor/src/hooks/index.js | 1 - packages/block-editor/src/hooks/role.js | 61 -------------------- packages/block-library/src/button/block.json | 7 ++- packages/block-library/src/button/edit.js | 14 ++++- packages/block-library/src/button/save.js | 2 + 6 files changed, 22 insertions(+), 67 deletions(-) delete mode 100644 packages/block-editor/src/hooks/role.js diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 79ebb108f244b4..5f4351f946a7fc 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -50,8 +50,8 @@ Prompt visitors to take action with a button-style link. ([Source](https://githu - **Name:** core/button - **Category:** design -- **Supports:** anchor, color (background, gradients, text), role, shadow, spacing (padding), typography (fontSize, lineHeight), ~~alignWide~~, ~~align~~, ~~reusable~~ -- **Attributes:** backgroundColor, gradient, linkTarget, placeholder, rel, text, textAlign, textColor, title, url, width +- **Supports:** anchor, color (background, gradients, text), shadow, spacing (padding), typography (fontSize, lineHeight), ~~alignWide~~, ~~align~~, ~~reusable~~ +- **Attributes:** backgroundColor, gradient, linkTarget, placeholder, rel, role, text, textAlign, textColor, title, url, width ## Buttons diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 99ac30189d0ff0..84b3ba3a95a33b 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -19,7 +19,6 @@ import './layout'; import './content-lock-ui'; import './metadata'; import './metadata-name'; -import './role'; export { useCustomSides } from './dimensions'; export { useLayoutClasses, useLayoutStyles } from './layout'; diff --git a/packages/block-editor/src/hooks/role.js b/packages/block-editor/src/hooks/role.js deleted file mode 100644 index 1b5f36860a519b..00000000000000 --- a/packages/block-editor/src/hooks/role.js +++ /dev/null @@ -1,61 +0,0 @@ -/** - * 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 -); diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index 3eb10fb2a35bd4..f657cb5ea94b28 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -9,6 +9,12 @@ "keywords": [ "link" ], "textdomain": "default", "attributes": { + "role": { + "type": "string", + "source": "attribute", + "selector": "a", + "attribute": "role" + }, "textAlign": { "type": "string" }, @@ -83,7 +89,6 @@ } }, "reusable": false, - "role": true, "shadow": true, "spacing": { "__experimentalSkipSerialization": true, diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 9eab35ff3c0076..c5736a90191c2b 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -77,8 +77,17 @@ function ButtonEdit( props ) { onReplace, mergeBlocks, } = props; - const { textAlign, linkTarget, placeholder, rel, style, text, url, width } = - attributes; + const { + textAlign, + linkTarget, + placeholder, + rel, + style, + text, + url, + width, + role, + } = attributes; function onToggleOpenInNewTab( value ) { const newLinkTarget = value ? '_blank' : undefined; @@ -192,6 +201,7 @@ function ButtonEdit( props ) { onReplace={ onReplace } onMerge={ mergeBlocks } identifier="text" + role={ role } /> diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js index a09ae59059f780..fccf2a910d4a5c 100644 --- a/packages/block-library/src/button/save.js +++ b/packages/block-library/src/button/save.js @@ -26,6 +26,7 @@ export default function save( { attributes, className } ) { title, url, width, + role, } = attributes; if ( ! text ) { @@ -73,6 +74,7 @@ export default function save( { attributes, className } ) { value={ text } target={ linkTarget } rel={ rel } + role={ role } /> ); From 911fc4aaf629e08df2ceb107da0db466f9d1cc00 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Wed, 1 Mar 2023 09:00:44 +0100 Subject: [PATCH 3/8] Add the role attribute to the group block --- docs/reference-guides/core-blocks.md | 4 ++-- packages/block-library/src/group/block.json | 7 ++++++- packages/block-library/src/group/edit.js | 11 ++++++++--- packages/block-library/src/group/save.js | 10 ++++++++-- schemas/json/block.json | 5 ----- 5 files changed, 24 insertions(+), 13 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 5f4351f946a7fc..e34551379f5188 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -275,8 +275,8 @@ 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), role, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ -- **Attributes:** tagName, templateLock +- **Supports:** align (full, wide), anchor, ariaLabel, color (background, gradients, link, text), dimensions (minHeight), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Attributes:** role, tagName, templateLock ## Heading diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index 83a93fd16b57af..f1ae8acd5ca151 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -15,6 +15,12 @@ "templateLock": { "type": [ "string", "boolean" ], "enum": [ "all", "insert", "contentOnly", false ] + }, + "role": { + "type": "string", + "source": "attribute", + "selector": "*", + "attribute": "role" } }, "supports": { @@ -23,7 +29,6 @@ "align": [ "wide", "full" ], "anchor": true, "ariaLabel": true, - "role": true, "html": false, "color": { "gradients": true, diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index 452da6e7f32386..76d9127ef56b39 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -89,7 +89,12 @@ function GroupEdit( { [ clientId ] ); - const { tagName: TagName = 'div', templateLock, layout = {} } = attributes; + const { + tagName: TagName = 'div', + templateLock, + layout = {}, + role, + } = attributes; // Layout settings. const defaultLayout = useSetting( 'layout' ) || {}; @@ -145,12 +150,12 @@ function GroupEdit( { /> ) } { layoutSupportEnabled && ! showPlaceholder && ( - + ) } { /* Ideally this is not needed but it's there for backward compatibility reason to keep this div for themes that might rely on its presence */ } { ! layoutSupportEnabled && ! showPlaceholder && ( - +
) } diff --git a/packages/block-library/src/group/save.js b/packages/block-library/src/group/save.js index 93815744a2b5cc..f84b6392b63a44 100644 --- a/packages/block-library/src/group/save.js +++ b/packages/block-library/src/group/save.js @@ -3,6 +3,12 @@ */ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor'; -export default function save( { attributes: { tagName: Tag } } ) { - return ; +export default function save( { attributes } ) { + const { tagName: Tag, role } = attributes; + return ( + + ); } diff --git a/schemas/json/block.json b/schemas/json/block.json index 0ee7a5196e6172..9e7d43470b180d 100644 --- a/schemas/json/block.json +++ b/schemas/json/block.json @@ -324,11 +324,6 @@ "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.", From a5ef6b6ad5aef138a766e3c17e58de7eb371e8e4 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Wed, 1 Mar 2023 13:32:20 +0100 Subject: [PATCH 4/8] Revert button block changes --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/button/block.json | 6 ------ packages/block-library/src/button/edit.js | 14 ++------------ packages/block-library/src/button/save.js | 2 -- 4 files changed, 3 insertions(+), 21 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index e34551379f5188..7696c2017dc66e 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -51,7 +51,7 @@ Prompt visitors to take action with a button-style link. ([Source](https://githu - **Name:** core/button - **Category:** design - **Supports:** anchor, color (background, gradients, text), shadow, spacing (padding), typography (fontSize, lineHeight), ~~alignWide~~, ~~align~~, ~~reusable~~ -- **Attributes:** backgroundColor, gradient, linkTarget, placeholder, rel, role, text, textAlign, textColor, title, url, width +- **Attributes:** backgroundColor, gradient, linkTarget, placeholder, rel, text, textAlign, textColor, title, url, width ## Buttons diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index f657cb5ea94b28..f2d41a42e6dc2e 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -9,12 +9,6 @@ "keywords": [ "link" ], "textdomain": "default", "attributes": { - "role": { - "type": "string", - "source": "attribute", - "selector": "a", - "attribute": "role" - }, "textAlign": { "type": "string" }, diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index c5736a90191c2b..9eab35ff3c0076 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -77,17 +77,8 @@ function ButtonEdit( props ) { onReplace, mergeBlocks, } = props; - const { - textAlign, - linkTarget, - placeholder, - rel, - style, - text, - url, - width, - role, - } = attributes; + const { textAlign, linkTarget, placeholder, rel, style, text, url, width } = + attributes; function onToggleOpenInNewTab( value ) { const newLinkTarget = value ? '_blank' : undefined; @@ -201,7 +192,6 @@ function ButtonEdit( props ) { onReplace={ onReplace } onMerge={ mergeBlocks } identifier="text" - role={ role } />
diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js index fccf2a910d4a5c..a09ae59059f780 100644 --- a/packages/block-library/src/button/save.js +++ b/packages/block-library/src/button/save.js @@ -26,7 +26,6 @@ export default function save( { attributes, className } ) { title, url, width, - role, } = attributes; if ( ! text ) { @@ -74,7 +73,6 @@ export default function save( { attributes, className } ) { value={ text } target={ linkTarget } rel={ rel } - role={ role } /> ); From 08f9476166ee4a284165d5654b877c1b26b0d591 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 2 Mar 2023 08:27:09 +0100 Subject: [PATCH 5/8] Revert the attribute again and use a block support --- docs/reference-guides/core-blocks.md | 4 +- packages/block-editor/src/hooks/index.js | 1 + packages/block-editor/src/hooks/role.js | 61 +++++++++++++++++++++ packages/block-library/src/group/block.json | 7 +-- packages/block-library/src/group/edit.js | 11 +--- packages/block-library/src/group/save.js | 10 +--- schemas/CHANGELOG.md | 2 + schemas/json/block.json | 5 ++ 8 files changed, 77 insertions(+), 24 deletions(-) create mode 100644 packages/block-editor/src/hooks/role.js diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 968279ee8402c8..dc7ec73d2ad94a 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -275,8 +275,8 @@ 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~~ -- **Attributes:** role, tagName, templateLock +- **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 diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 2077c143952f59..b04630ca80cb98 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/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'; diff --git a/packages/block-editor/src/hooks/role.js b/packages/block-editor/src/hooks/role.js new file mode 100644 index 00000000000000..1b5f36860a519b --- /dev/null +++ b/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 +); diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index f1ae8acd5ca151..77634bcaca5180 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -15,12 +15,6 @@ "templateLock": { "type": [ "string", "boolean" ], "enum": [ "all", "insert", "contentOnly", false ] - }, - "role": { - "type": "string", - "source": "attribute", - "selector": "*", - "attribute": "role" } }, "supports": { @@ -65,6 +59,7 @@ "position": { "sticky": true }, + "role": true, "typography": { "fontSize": true, "lineHeight": true, diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index 76d9127ef56b39..452da6e7f32386 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -89,12 +89,7 @@ function GroupEdit( { [ clientId ] ); - const { - tagName: TagName = 'div', - templateLock, - layout = {}, - role, - } = attributes; + const { tagName: TagName = 'div', templateLock, layout = {} } = attributes; // Layout settings. const defaultLayout = useSetting( 'layout' ) || {}; @@ -150,12 +145,12 @@ function GroupEdit( { /> ) } { layoutSupportEnabled && ! showPlaceholder && ( - + ) } { /* Ideally this is not needed but it's there for backward compatibility reason to keep this div for themes that might rely on its presence */ } { ! layoutSupportEnabled && ! showPlaceholder && ( - +
) } diff --git a/packages/block-library/src/group/save.js b/packages/block-library/src/group/save.js index f84b6392b63a44..93815744a2b5cc 100644 --- a/packages/block-library/src/group/save.js +++ b/packages/block-library/src/group/save.js @@ -3,12 +3,6 @@ */ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor'; -export default function save( { attributes } ) { - const { tagName: Tag, role } = attributes; - return ( - - ); +export default function save( { attributes: { tagName: Tag } } ) { + return ; } diff --git a/schemas/CHANGELOG.md b/schemas/CHANGELOG.md index 51d33d49707c27..443bd48324d031 100644 --- a/schemas/CHANGELOG.md +++ b/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)). diff --git a/schemas/json/block.json b/schemas/json/block.json index ad3bb45516b9ff..a8f202e9c5048d 100644 --- a/schemas/json/block.json +++ b/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.", From 085b9f75cee3e99ade770d7ed0e4f8ac14183d1b Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 2 Mar 2023 10:34:12 +0100 Subject: [PATCH 6/8] Update block-supports.md --- docs/reference-guides/block-api/block-supports.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index 2e5f509f6dc48e..d5a05daee30356 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -605,6 +605,19 @@ attributes: { } ``` +## role + +- Type: `boolean` +- Default value: `false` + +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. + +```js +supports: { + role: true, +} +``` + ## spacing - Type: `Object` From 0b8a93d12955b910599eeaf3c1a88fdf14f76c42 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 3 Mar 2023 07:15:44 +0100 Subject: [PATCH 7/8] register the new block support --- lib/block-supports/role.php | 69 +++++++++++++++++++++++++++++++++++++ lib/load.php | 1 + 2 files changed, 70 insertions(+) create mode 100644 lib/block-supports/role.php diff --git a/lib/block-supports/role.php b/lib/block-supports/role.php new file mode 100644 index 00000000000000..d1bcd77a15e50f --- /dev/null +++ b/lib/block-supports/role.php @@ -0,0 +1,69 @@ +supports, array( 'role' ), true ); + if ( ! $has_role_support ) { + return; + } + + if ( ! $block_type->attributes ) { + $block_type->attributes = array(); + } + + if ( ! array_key_exists( 'role', $block_type->attributes ) ) { + $block_type->attributes['role'] = array( + 'type' => 'string', + ); + } +} + +/** + * Add the role attribute to the output. + * + * @param WP_Block_Type $block_type Block Type. + * @param array $block_attributes Block attributes. + * + * @return array Block role attribute. + */ +function gutenberg_apply_role_support( $block_type, $block_attributes ) { + // Return early if the block doesn't have any attributes. + if ( ! $block_attributes ) { + return array(); + } + // Don't print the role in the block wrapper if its set to skip serilization. + if ( wp_should_skip_block_supports_serialization( $block_type, 'role' ) ) { + return array(); + } + // Return early if the block doesn't have support for role. + $has_role_support = _wp_array_get( $block_type->supports, array( 'role' ), true ); + if ( ! $has_role_support ) { + return array(); + } + // Return early if the block doesn't have a role attribute. + $has_role = array_key_exists( 'role', $block_attributes ); + if ( ! $has_role ) { + return array(); + } + + return array( 'role' => $block_attributes['role'] ); +} + +// Register the block support. +WP_Block_Supports::get_instance()->register( + 'role', + array( + 'register_attribute' => 'gutenberg_register_role_support', + 'apply' => 'gutenberg_apply_role_support', + ) +); diff --git a/lib/load.php b/lib/load.php index 03406015834eaa..634e3e947234d9 100644 --- a/lib/load.php +++ b/lib/load.php @@ -158,3 +158,4 @@ function gutenberg_is_experiment_enabled( $name ) { require __DIR__ . '/block-supports/duotone.php'; require __DIR__ . '/block-supports/anchor.php'; require __DIR__ . '/block-supports/shadow.php'; +require __DIR__ . '/block-supports/role.php'; From dace32b0fb9351806771ab890061f7863e00ffeb Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 3 Mar 2023 07:31:31 +0100 Subject: [PATCH 8/8] Fix CS spacing issues --- lib/block-supports/role.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/block-supports/role.php b/lib/block-supports/role.php index d1bcd77a15e50f..fc364b8d1f9d2e 100644 --- a/lib/block-supports/role.php +++ b/lib/block-supports/role.php @@ -20,7 +20,7 @@ function gutenberg_register_role_support( $block_type ) { if ( ! $block_type->attributes ) { $block_type->attributes = array(); } - + if ( ! array_key_exists( 'role', $block_type->attributes ) ) { $block_type->attributes['role'] = array( 'type' => 'string', @@ -52,7 +52,7 @@ function gutenberg_apply_role_support( $block_type, $block_attributes ) { } // Return early if the block doesn't have a role attribute. $has_role = array_key_exists( 'role', $block_attributes ); - if ( ! $has_role ) { + if ( ! $has_role ) { return array(); }