diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 1b659e85cdf17..b121dfb4a4850 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/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
diff --git a/packages/block-library/src/tag-cloud/block.json b/packages/block-library/src/tag-cloud/block.json
index 75975e28e8cdb..15e744fcaca67 100644
--- a/packages/block-library/src/tag-cloud/block.json
+++ b/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": [
diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js
index b0118f28e87a2..01ed801618c41 100644
--- a/packages/block-library/src/tag-cloud/edit.js
+++ b/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 = (
@@ -82,6 +136,32 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
max={ MAX_TAGS }
required
/>
+
+
+ {
+ onFontSizeChange( 'smallestFontSize', value );
+ } }
+ units={ units }
+ min={ MIN_FONT_SIZE }
+ max={ MAX_FONT_SIZE }
+ />
+
+
+ {
+ onFontSizeChange( 'largestFontSize', value );
+ } }
+ units={ units }
+ min={ MIN_FONT_SIZE }
+ max={ MAX_FONT_SIZE }
+ />
+
+
);
diff --git a/packages/block-library/src/tag-cloud/index.php b/packages/block-library/src/tag-cloud/index.php
index 0658998d4e8cb..a7d121f7ca632 100644
--- a/packages/block-library/src/tag-cloud/index.php
+++ b/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[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 );
diff --git a/test/integration/fixtures/blocks/core__tag-cloud.json b/test/integration/fixtures/blocks/core__tag-cloud.json
index 7c40f69699493..0b36665250e64 100644
--- a/test/integration/fixtures/blocks/core__tag-cloud.json
+++ b/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": []
}
diff --git a/test/integration/fixtures/blocks/core__tag-cloud__showTagCounts.json b/test/integration/fixtures/blocks/core__tag-cloud__showTagCounts.json
index 2735d47403ca2..486d7fff27493 100644
--- a/test/integration/fixtures/blocks/core__tag-cloud__showTagCounts.json
+++ b/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": []
}