diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 4db90e9b2f8142..0cd1bbbc5f2d28 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -912,8 +912,8 @@ A cloud of popular keywords, each sized by how often it appears. ([Source](https
- **Name:** core/tag-cloud
- **Category:** widgets
-- **Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (lineHeight), ~~html~~
-- **Attributes:** largestFontSize, numberOfTags, showTagCounts, smallestFontSize, taxonomy
+- **Supports:** align, ariaLabel, interactivity (clientNavigation), spacing (margin, padding), typography (lineHeight), ~~html~~
+- **Attributes:** ariaLabel, largestFontSize, numberOfTags, showTagCounts, smallestFontSize, taxonomy
## Template Part
diff --git a/packages/block-library/src/tag-cloud/block.json b/packages/block-library/src/tag-cloud/block.json
index 044bc0c5333768..14c833dd8c485b 100644
--- a/packages/block-library/src/tag-cloud/block.json
+++ b/packages/block-library/src/tag-cloud/block.json
@@ -28,6 +28,10 @@
"largestFontSize": {
"type": "string",
"default": "22pt"
+ },
+ "ariaLabel": {
+ "type": "string",
+ "default": "Tag Cloud"
}
},
"styles": [
@@ -52,6 +56,7 @@
"interactivity": {
"clientNavigation": true
},
+ "ariaLabel": true,
"__experimentalBorder": {
"radius": true,
"color": true,
diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js
index eeb568e7a89ef1..b5fb549cb60fb5 100644
--- a/packages/block-library/src/tag-cloud/edit.js
+++ b/packages/block-library/src/tag-cloud/edit.js
@@ -13,6 +13,7 @@ import {
__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
__experimentalVStack as VStack,
Disabled,
+ TextControl,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
@@ -48,6 +49,7 @@ function TagCloudEdit( { attributes, setAttributes } ) {
numberOfTags,
smallestFontSize,
largestFontSize,
+ ariaLabel,
} = attributes;
const [ availableUnits ] = useSettings( 'spacing.units' );
@@ -107,6 +109,10 @@ function TagCloudEdit( { attributes, setAttributes } ) {
setAttributes( updateObj );
};
+ const onChangeAriaLabel = ( value ) => {
+ setAttributes( { ariaLabel: value } );
+ };
+
// Remove border styles from the server-side attributes to prevent duplicate border.
const serverSideAttributes = {
...attributes,
@@ -117,79 +123,92 @@ function TagCloudEdit( { attributes, setAttributes } ) {
};
const inspectorControls = (
-
-
-
-
- setAttributes( { taxonomy: selectedTaxonomy } )
- }
- />
-
-
- {
- onFontSizeChange(
- 'smallestFontSize',
- value
- );
- } }
- units={ units }
- min={ MIN_FONT_SIZE }
- max={ MAX_FONT_SIZE }
- size="__unstable-large"
- />
-
-
- {
- onFontSizeChange(
- 'largestFontSize',
- value
- );
- } }
- units={ units }
- min={ MIN_FONT_SIZE }
- max={ MAX_FONT_SIZE }
- size="__unstable-large"
- />
-
-
-
- setAttributes( { numberOfTags: value } )
- }
- min={ MIN_TAGS }
- max={ MAX_TAGS }
- required
- />
-
- setAttributes( { showTagCounts: ! showTagCounts } )
- }
- />
-
-
-
+ <>
+
+
+
+
+ setAttributes( { taxonomy: selectedTaxonomy } )
+ }
+ />
+
+
+ {
+ onFontSizeChange(
+ 'smallestFontSize',
+ value
+ );
+ } }
+ units={ units }
+ min={ MIN_FONT_SIZE }
+ max={ MAX_FONT_SIZE }
+ size="__unstable-large"
+ />
+
+
+ {
+ onFontSizeChange(
+ 'largestFontSize',
+ value
+ );
+ } }
+ units={ units }
+ min={ MIN_FONT_SIZE }
+ max={ MAX_FONT_SIZE }
+ size="__unstable-large"
+ />
+
+
+
+ setAttributes( { numberOfTags: value } )
+ }
+ min={ MIN_TAGS }
+ max={ MAX_TAGS }
+ required
+ />
+
+ setAttributes( {
+ showTagCounts: ! showTagCounts,
+ } )
+ }
+ />
+
+
+
+
+
+
+ >
);
return (
diff --git a/packages/block-library/src/tag-cloud/index.php b/packages/block-library/src/tag-cloud/index.php
index f42f2bfbf42532..692dc3c309aee6 100644
--- a/packages/block-library/src/tag-cloud/index.php
+++ b/packages/block-library/src/tag-cloud/index.php
@@ -17,6 +17,7 @@
function render_block_core_tag_cloud( $attributes ) {
$smallest_font_size = $attributes['smallestFontSize'];
$unit = ( preg_match( '/^[0-9.]+(?P[a-z%]+)$/i', $smallest_font_size, $m ) ? $m['unit'] : 'pt' );
+ $aria_label = isset( $attributes['ariaLabel'] ) ? $attributes['ariaLabel'] : 'Tag Cloud';
$args = array(
'echo' => false,
@@ -40,9 +41,12 @@ function render_block_core_tag_cloud( $attributes ) {
$wrapper_attributes = get_block_wrapper_attributes();
+ $aria_label_attribute = 'aria-label="' . esc_attr( $aria_label ) . '" ';
+
return sprintf(
- '',
+ '',
$wrapper_attributes,
+ $aria_label_attribute,
$tag_cloud
);
}