feat: Add aria label textcontrol for tag cloud block in inspector con…

…trols
WordPress · Dec 6, 2024 · 2eabb52 · 2eabb52
1 parent 8455082
commit 2eabb52
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 76 deletions.
diff --git 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
@@ -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
@@ -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 = (
-		<InspectorControls>
-			<PanelBody title={ __( 'Settings' ) }>
-				<VStack
-					spacing={ 4 }
-					className="wp-block-tag-cloud__inspector-settings"
-				>
-					<SelectControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						label={ __( 'Taxonomy' ) }
-						options={ getTaxonomyOptions() }
-						value={ taxonomy }
-						onChange={ ( selectedTaxonomy ) =>
-							setAttributes( { taxonomy: selectedTaxonomy } )
-						}
-					/>
-					<Flex gap={ 4 }>
-						<FlexItem isBlock>
-							<UnitControl
-								label={ __( 'Smallest size' ) }
-								value={ smallestFontSize }
-								onChange={ ( value ) => {
-									onFontSizeChange(
-										'smallestFontSize',
-										value
-									);
-								} }
-								units={ units }
-								min={ MIN_FONT_SIZE }
-								max={ MAX_FONT_SIZE }
-								size="__unstable-large"
-							/>
-						</FlexItem>
-						<FlexItem isBlock>
-							<UnitControl
-								label={ __( 'Largest size' ) }
-								value={ largestFontSize }
-								onChange={ ( value ) => {
-									onFontSizeChange(
-										'largestFontSize',
-										value
-									);
-								} }
-								units={ units }
-								min={ MIN_FONT_SIZE }
-								max={ MAX_FONT_SIZE }
-								size="__unstable-large"
-							/>
-						</FlexItem>
-					</Flex>
-					<RangeControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						label={ __( 'Number of tags' ) }
-						value={ numberOfTags }
-						onChange={ ( value ) =>
-							setAttributes( { numberOfTags: value } )
-						}
-						min={ MIN_TAGS }
-						max={ MAX_TAGS }
-						required
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Show tag counts' ) }
-						checked={ showTagCounts }
-						onChange={ () =>
-							setAttributes( { showTagCounts: ! showTagCounts } )
-						}
-					/>
-				</VStack>
-			</PanelBody>
-		</InspectorControls>
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings' ) }>
+					<VStack
+						spacing={ 4 }
+						className="wp-block-tag-cloud__inspector-settings"
+					>
+						<SelectControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Taxonomy' ) }
+							options={ getTaxonomyOptions() }
+							value={ taxonomy }
+							onChange={ ( selectedTaxonomy ) =>
+								setAttributes( { taxonomy: selectedTaxonomy } )
+							}
+						/>
+						<Flex gap={ 4 }>
+							<FlexItem isBlock>
+								<UnitControl
+									label={ __( 'Smallest size' ) }
+									value={ smallestFontSize }
+									onChange={ ( value ) => {
+										onFontSizeChange(
+											'smallestFontSize',
+											value
+										);
+									} }
+									units={ units }
+									min={ MIN_FONT_SIZE }
+									max={ MAX_FONT_SIZE }
+									size="__unstable-large"
+								/>
+							</FlexItem>
+							<FlexItem isBlock>
+								<UnitControl
+									label={ __( 'Largest size' ) }
+									value={ largestFontSize }
+									onChange={ ( value ) => {
+										onFontSizeChange(
+											'largestFontSize',
+											value
+										);
+									} }
+									units={ units }
+									min={ MIN_FONT_SIZE }
+									max={ MAX_FONT_SIZE }
+									size="__unstable-large"
+								/>
+							</FlexItem>
+						</Flex>
+						<RangeControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Number of tags' ) }
+							value={ numberOfTags }
+							onChange={ ( value ) =>
+								setAttributes( { numberOfTags: value } )
+							}
+							min={ MIN_TAGS }
+							max={ MAX_TAGS }
+							required
+						/>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show tag counts' ) }
+							checked={ showTagCounts }
+							onChange={ () =>
+								setAttributes( {
+									showTagCounts: ! showTagCounts,
+								} )
+							}
+						/>
+					</VStack>
+				</PanelBody>
+			</InspectorControls>
+			<InspectorControls group="advanced">
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Tag Cloud Name' ) }
+					value={ ariaLabel }
+					onChange={ onChangeAriaLabel }
+				/>
+			</InspectorControls>
+		</>
 	);
 
 	return (

diff --git 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<unit>[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(
-		'<nav %1$s>%2$s</nav>',
+		'<nav %1$s %2$s>%3$s</nav>',
 		$wrapper_attributes,
+		$aria_label_attribute,
 		$tag_cloud
 	);
 }