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

#37311)

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

* Regenerate fixtures for `tag-cloud` block

* address review comment

In this commit, I have addressed following  comments:
1. fix label of the NumberControl field
2. add min and max value of NumberControl field
3. Wrap NumberControl fields inside flex to make UI consistent

* Remove space in label

Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>

* Remove space from label of smallest size input field

Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>

* add smallestFontSize and largestFontSize in core blocks docs

* fix NumberControl typecasting issue

This commit is done inorder to fix type issue since NumberControl returns
string and because of that It was not able to render font size properly.

* change font size units from `pt` to `px`

* fix php lint error replace tabs with spaces during mid-line alignment

* replace `NumberControl` with `InputControl`

this is done to be in sync with the UI illustrations and UI design pattern

* add new attribute `fontSizeUnit`

In this commit, a new attribute is introduced to select different font unit
example `px` or `pt`. Core blocks docs is also updated

* replace `InputControl` with `UnitControl`

In this commit, `UnitControl` component is used to configure smallestFontSize
and largestFontSize. UnitControl offers input field with a select html tag.
`fontSizeUnit` single attribute is used to keep unit in both the fields in sync

* update `wp_tag_cloud` args to handle `fontSizeUnit`

* fix unit test

test cases were failing because of new attribute `fontSizeUnit`. It is fixed now.

* change `smallestFontSize` and `largestFontSize` attribute to string

* add condition to update font unit

* extract font unit from integer fontSize attribute

* remove `fontSizeUnit` attribute

* fix test cases after removing `fontSizeUnit` and str (smallest/largest)FontSize

* fix php lint errors

* implement `useCustomUnits` hooks to support different units

* add `addFontChange` common function for `(smallest/largest)FontSize`

* use `preg_replace` to handle font unit and pass integer font size `wp_tag_cloud`

* refactor `onFontChange` function to `onFontSizeChange` function

* `tag-cloud` block php handle decimal values `unit` property

given a comment to handle decimal value case when passed to `unit`
property. I updated the regex to `/^\d*\.?\d*/`. This regex can parse
values like `123.3px` or `.33px` or `123px`.

* write descriptive variables names

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

* rename `parseUnit` to `parseQuantityAndUnitFromRawValue`

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

* rename `parseUnit` import name

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

* rename `parseUnit` to `parseQuantityAndUnitFromRawValue`

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

* Apply suggestions from code review

Fix formatting

* fix: security vulnerability add validate unit method for `wp_tag_cloud` args

* fix php lint error using `composer format` command

* update regex for unit attribute in `wp_tag_cloud` function

* Update UnitControl  to have min/max check

* change `MIN_FONT_SIZE` to 0.1

Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>

Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>
Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

docs/reference-guides/core-blocks.md

@@ -807,7 +807,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 = 0.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": []
 	}