Add NumberControl to support min/max font size for Tag Cloud Block

docs/reference-guides/core-blocks.md

@@ -789,7 +789,7 @@ A cloud of your most used tags. ([Source](https://github.com/WordPress/gutenberg
 -	**Name:** core/tag-cloud
 -	**Category:** widgets
 -	**Supports:** align, ~~html~~
--	**Attributes:** numberOfTags, showTagCounts, taxonomy
+-	**Attributes:** largestFontSize, numberOfTags, showTagCounts, smallestFontSize, taxonomy
 
 ## Template Part
 

packages/block-library/src/tag-cloud/block.json

@@ -20,6 +20,14 @@
 		"showTagCounts": {
 			"type": "boolean",
 			"default": false
+		},
+		"smallestFontSize": {
+			"type": "string",
+			"default": "8pt" 
+		},
+		"largestFontSize": {
+			"type": "string",
+			"default": "22pt"
 		}
 	},
 	"styles": [

packages/block-library/src/tag-cloud/edit.js

@@ -7,14 +7,23 @@ import { map, filter } from 'lodash';
  * WordPress dependencies
  */
 import {
+	Flex,
+	FlexItem,
 	PanelBody,
 	ToggleControl,
 	SelectControl,
 	RangeControl,
+	__experimentalUnitControl as UnitControl,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	useBlockProps,
+	useSetting,
+} from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -32,8 +41,26 @@ const MIN_TAGS = 1;
  */
 const MAX_TAGS = 100;
 
+const MIN_FONT_SIZE = 1;
+const MAX_FONT_SIZE = 100;
+
 function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
-	const { taxonomy, showTagCounts, numberOfTags } = attributes;
+	const {
+		taxonomy,
+		showTagCounts,
+		numberOfTags,
+		smallestFontSize,
+		largestFontSize,
+	} = attributes;
+
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || [
+			'%',
+			'px',
+			'em',
+			'rem',
+		],
+	} );
 
 	const getTaxonomyOptions = () => {
 		const selectOption = {
@@ -54,6 +81,33 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 		return [ selectOption, ...taxonomyOptions ];
 	};
 
+	const onFontSizeChange = ( fontSizeLabel, newValue ) => {
+		// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+		const [ quantity, newUnit ] = parseQuantityAndUnitFromRawValue(
+			newValue
+		);
+		if ( ! Number.isFinite( quantity ) ) {
+			return;
+		}
+		const updateObj = { [ fontSizeLabel ]: newValue };
+		// We need to keep in sync the `unit` changes to both `smallestFontSize`
+		// and `largestFontSize` attributes.
+		Object.entries( {
+			smallestFontSize,
+			largestFontSize,
+		} ).forEach( ( [ attribute, currentValue ] ) => {
+			const [
+				currentQuantity,
+				currentUnit,
+			] = parseQuantityAndUnitFromRawValue( currentValue );
+			// Only add an update if the other font size attribute has a different unit.
+			if ( attribute !== fontSizeLabel && currentUnit !== newUnit ) {
+				updateObj[ attribute ] = `${ currentQuantity }${ newUnit }`;
+			}
+		} );
+		setAttributes( updateObj );
+	};
+
 	const inspectorControls = (
 		<InspectorControls>
 			<PanelBody title={ __( 'Tag Cloud settings' ) }>
@@ -82,6 +136,32 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 					max={ MAX_TAGS }
 					required
 				/>
+				<Flex>
+					<FlexItem isBlock>
+						<UnitControl
+							label={ __( 'Smallest size' ) }
+							value={ smallestFontSize }
+							onChange={ ( value ) => {
+								onFontSizeChange( 'smallestFontSize', value );
+							} }
+							units={ units }
+							min={ MIN_FONT_SIZE }
+							max={ MAX_FONT_SIZE }
+						/>
+					</FlexItem>
+					<FlexItem isBlock>
+						<UnitControl
+							label={ __( 'Largest size' ) }
+							value={ largestFontSize }
+							onChange={ ( value ) => {
+								onFontSizeChange( 'largestFontSize', value );
+							} }
+							units={ units }
+							min={ MIN_FONT_SIZE }
+							max={ MAX_FONT_SIZE }
+						/>
+					</FlexItem>
+				</Flex>
 			</PanelBody>
 		</InspectorControls>
 	);

packages/block-library/src/tag-cloud/index.php

@@ -13,11 +13,17 @@
  * @return string Returns the tag cloud for selected taxonomy.
  */
 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' );
+
 	$args      = array(
 		'echo'       => false,
+		'unit'       => $unit,
 		'taxonomy'   => $attributes['taxonomy'],
 		'show_count' => $attributes['showTagCounts'],
 		'number'     => $attributes['numberOfTags'],
+		'smallest'   => floatVal( $attributes['smallestFontSize'] ),
+		'largest'    => floatVal( $attributes['largestFontSize'] ),
 	);
 	$tag_cloud = wp_tag_cloud( $args );
 

test/integration/fixtures/blocks/core__tag-cloud.json

@@ -5,7 +5,9 @@
 		"attributes": {
 			"numberOfTags": 45,
 			"taxonomy": "category",
-			"showTagCounts": false
+			"showTagCounts": false,
+			"smallestFontSize": "8pt",
+			"largestFontSize": "22pt"
 		},
 		"innerBlocks": []
 	}

test/integration/fixtures/blocks/core__tag-cloud__showTagCounts.json

@@ -5,7 +5,9 @@
 		"attributes": {
 			"numberOfTags": 45,
 			"taxonomy": "category",
-			"showTagCounts": true
+			"showTagCounts": true,
+			"smallestFontSize": "8pt",
+			"largestFontSize": "22pt"
 		},
 		"innerBlocks": []
 	}