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": [] }