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

…trols
WordPress · Jan 8, 2025 · 0c7e7f9 · 0c7e7f9
1 parent 4fe8949
commit 0c7e7f9
Show file tree

Hide file tree

Showing 4 changed files with 145 additions and 114 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -922,8 +922,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 {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	Disabled,
+	TextControl,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -53,6 +54,7 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 		numberOfTags,
 		smallestFontSize,
 		largestFontSize,
+		ariaLabel,
 	} = attributes;
 
 	const [ availableUnits ] = useSettings( 'spacing.units' );
@@ -113,6 +115,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,
@@ -123,125 +129,141 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 	};
 
 	const inspectorControls = (
-		<InspectorControls>
-			<ToolsPanel
-				label={ __( 'Settings' ) }
-				resetAll={ () => {
-					setAttributes( {
-						taxonomy: 'post_tag',
-						showTagCounts: false,
-						numberOfTags: 45,
-						smallestFontSize: '8pt',
-						largestFontSize: '22pt',
-					} );
-				} }
-				dropdownMenuProps={ dropdownMenuProps }
-			>
-				<ToolsPanelItem
-					hasValue={ () => taxonomy !== 'post_tag' }
-					label={ __( 'Taxonomy' ) }
-					onDeselect={ () =>
-						setAttributes( { taxonomy: 'post_tag' } )
-					}
-					isShownByDefault
-				>
-					<SelectControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						label={ __( 'Taxonomy' ) }
-						options={ getTaxonomyOptions() }
-						value={ taxonomy }
-						onChange={ ( selectedTaxonomy ) =>
-							setAttributes( { taxonomy: selectedTaxonomy } )
-						}
-					/>
-				</ToolsPanelItem>
-				<ToolsPanelItem
-					hasValue={ () =>
-						smallestFontSize !== '8pt' || largestFontSize !== '22pt'
-					}
-					label={ __( 'Font size' ) }
-					onDeselect={ () =>
+		<>
+			<InspectorControls>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
 						setAttributes( {
+							taxonomy: 'post_tag',
+							showTagCounts: false,
+							numberOfTags: 45,
 							smallestFontSize: '8pt',
 							largestFontSize: '22pt',
-						} )
-					}
-					isShownByDefault
-				>
-					<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>
-				</ToolsPanelItem>
-				<ToolsPanelItem
-					hasValue={ () => numberOfTags !== 45 }
-					label={ __( 'Number of tags' ) }
-					onDeselect={ () => setAttributes( { numberOfTags: 45 } ) }
-					isShownByDefault
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
 				>
-					<RangeControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
+					<ToolsPanelItem
+						hasValue={ () => taxonomy !== 'post_tag' }
+						label={ __( 'Taxonomy' ) }
+						onDeselect={ () =>
+							setAttributes( { taxonomy: 'post_tag' } )
+						}
+						isShownByDefault
+					>
+						<SelectControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Taxonomy' ) }
+							options={ getTaxonomyOptions() }
+							value={ taxonomy }
+							onChange={ ( selectedTaxonomy ) =>
+								setAttributes( { taxonomy: selectedTaxonomy } )
+							}
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						hasValue={ () =>
+							smallestFontSize !== '8pt' ||
+							largestFontSize !== '22pt'
+						}
+						label={ __( 'Font size' ) }
+						onDeselect={ () =>
+							setAttributes( {
+								smallestFontSize: '8pt',
+								largestFontSize: '22pt',
+							} )
+						}
+						isShownByDefault
+					>
+						<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>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						hasValue={ () => numberOfTags !== 45 }
 						label={ __( 'Number of tags' ) }
-						value={ numberOfTags }
-						onChange={ ( value ) =>
-							setAttributes( { numberOfTags: value } )
+						onDeselect={ () =>
+							setAttributes( { numberOfTags: 45 } )
 						}
-						min={ MIN_TAGS }
-						max={ MAX_TAGS }
-						required
-					/>
-				</ToolsPanelItem>
-				<ToolsPanelItem
-					hasValue={ () => showTagCounts !== false }
-					label={ __( 'Show tag counts' ) }
-					onDeselect={ () =>
-						setAttributes( { showTagCounts: false } )
-					}
-					isShownByDefault
-				>
-					<ToggleControl
-						__nextHasNoMarginBottom
+						isShownByDefault
+					>
+						<RangeControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Number of tags' ) }
+							value={ numberOfTags }
+							onChange={ ( value ) =>
+								setAttributes( { numberOfTags: value } )
+							}
+							min={ MIN_TAGS }
+							max={ MAX_TAGS }
+							required
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						hasValue={ () => showTagCounts !== false }
 						label={ __( 'Show tag counts' ) }
-						checked={ showTagCounts }
-						onChange={ () =>
-							setAttributes( { showTagCounts: ! showTagCounts } )
+						onDeselect={ () =>
+							setAttributes( { showTagCounts: false } )
 						}
-					/>
-				</ToolsPanelItem>
-			</ToolsPanel>
-		</InspectorControls>
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show tag counts' ) }
+							checked={ showTagCounts }
+							onChange={ () =>
+								setAttributes( {
+									showTagCounts: ! showTagCounts,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			</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
 	);
 }