From 38a48ed49582db12933dce3df2801a8f54378c37 Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Sun, 12 Dec 2021 10:39:19 +0530 Subject: [PATCH 01/35] Add `NumberControl` to support min/max font size for `Tag Cloud Block` --- .../block-library/src/tag-cloud/block.json | 8 +++++++ packages/block-library/src/tag-cloud/edit.js | 23 ++++++++++++++++++- .../block-library/src/tag-cloud/index.php | 2 ++ 3 files changed, 32 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/tag-cloud/block.json b/packages/block-library/src/tag-cloud/block.json index 75975e28e8cdb3..0ec71838949a89 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": "number", + "default": 8 + }, + "largestFontSize": { + "type": "number", + "default": 22 } }, "styles": [ diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index b0118f28e87a2d..c26594b98d118a 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -11,6 +11,7 @@ import { ToggleControl, SelectControl, RangeControl, + __experimentalNumberControl as NumberControl, } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -33,7 +34,13 @@ const MIN_TAGS = 1; const MAX_TAGS = 100; function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { - const { taxonomy, showTagCounts, numberOfTags } = attributes; + const { + taxonomy, + showTagCounts, + numberOfTags, + smallestFontSize, + largestFontSize, + } = attributes; const getTaxonomyOptions = () => { const selectOption = { @@ -82,6 +89,20 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { max={ MAX_TAGS } required /> + + setAttributes( { smallestFontSize: value } ) + } + /> + + setAttributes( { largestFontSize: value } ) + } + /> ); diff --git a/packages/block-library/src/tag-cloud/index.php b/packages/block-library/src/tag-cloud/index.php index 0658998d4e8cb8..e7963fb0ee2f1f 100644 --- a/packages/block-library/src/tag-cloud/index.php +++ b/packages/block-library/src/tag-cloud/index.php @@ -18,6 +18,8 @@ function render_block_core_tag_cloud( $attributes ) { 'taxonomy' => $attributes['taxonomy'], 'show_count' => $attributes['showTagCounts'], 'number' => $attributes['numberOfTags'], + 'smallest' => $attributes['smallestFontSize'], + 'largest' => $attributes['largestFontSize'], ); $tag_cloud = wp_tag_cloud( $args ); From 09c1447d68f6f5d7f28e0a0041be0ff5753fa36b Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Sun, 12 Dec 2021 11:22:13 +0530 Subject: [PATCH 02/35] Regenerate fixtures for `tag-cloud` block --- test/integration/fixtures/blocks/core__tag-cloud.json | 4 +++- .../fixtures/blocks/core__tag-cloud__showTagCounts.json | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/test/integration/fixtures/blocks/core__tag-cloud.json b/test/integration/fixtures/blocks/core__tag-cloud.json index 7c40f69699493a..d2ee88a544ba30 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": 8, + "largestFontSize": 22 }, "innerBlocks": [] } diff --git a/test/integration/fixtures/blocks/core__tag-cloud__showTagCounts.json b/test/integration/fixtures/blocks/core__tag-cloud__showTagCounts.json index 2735d47403ca24..94da0b2e9f6334 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": 8, + "largestFontSize": 22 }, "innerBlocks": [] } From 13bb2260df491446254ff62385d6e2380e84352e Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Thu, 27 Jan 2022 19:53:27 +0530 Subject: [PATCH 03/35] 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 --- packages/block-library/src/tag-cloud/edit.js | 40 +++++++++++++------- 1 file changed, 26 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index c26594b98d118a..53bcc93d55cd9a 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -7,6 +7,8 @@ import { map, filter } from 'lodash'; * WordPress dependencies */ import { + Flex, + FlexItem, PanelBody, ToggleControl, SelectControl, @@ -89,20 +91,30 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { max={ MAX_TAGS } required /> - - setAttributes( { smallestFontSize: value } ) - } - /> - - setAttributes( { largestFontSize: value } ) - } - /> + + + + setAttributes( { smallestFontSize: value } ) + } + min={ 8 } + max={ 60 } + /> + + + + setAttributes( { largestFontSize: value } ) + } + min={ 8 } + max={ 60 } + /> + + ); From a02a21245089b7758d43df4f19d94eaee7d7b5fe Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Thu, 27 Jan 2022 20:00:42 +0530 Subject: [PATCH 04/35] Remove space in label Co-authored-by: Nik Tsekouras --- packages/block-library/src/tag-cloud/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index 53bcc93d55cd9a..226220f9757754 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -105,7 +105,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { setAttributes( { largestFontSize: value } ) From c54a671db2f2dceaf2b54c69e485d3b1023678d5 Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Thu, 27 Jan 2022 20:01:20 +0530 Subject: [PATCH 05/35] Remove space from label of smallest size input field Co-authored-by: Nik Tsekouras --- packages/block-library/src/tag-cloud/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index 226220f9757754..bf63f874c1bf94 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -94,7 +94,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { setAttributes( { smallestFontSize: value } ) From e130109ff3488a4b0eebbc39157e2397b17e6f61 Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Thu, 27 Jan 2022 20:20:19 +0530 Subject: [PATCH 06/35] add smallestFontSize and largestFontSize in core blocks docs --- docs/reference-guides/core-blocks.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 1b659e85cdf171..b121dfb4a4850b 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 From d55275757464dd1a01694405635121a626a52edf Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Thu, 27 Jan 2022 22:55:16 +0530 Subject: [PATCH 07/35] 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. --- packages/block-library/src/tag-cloud/edit.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index bf63f874c1bf94..955e33a89da212 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -96,9 +96,11 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { - setAttributes( { smallestFontSize: value } ) - } + onChange={ ( value ) => { + const newValue = + value && +value >= 8 ? +value : 8; + setAttributes( { smallestFontSize: newValue } ); + } } min={ 8 } max={ 60 } /> @@ -107,9 +109,11 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { - setAttributes( { largestFontSize: value } ) - } + onChange={ ( value ) => { + const newValue = + value && +value >= 8 ? +value : 60; + setAttributes( { largestFontSize: newValue } ); + } } min={ 8 } max={ 60 } /> From 476b9b55db5777686a7cceaf2cad05c9b09d3b2d Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Fri, 28 Jan 2022 14:58:51 +0530 Subject: [PATCH 08/35] change font size units from `pt` to `px` --- packages/block-library/src/tag-cloud/edit.js | 4 ++-- packages/block-library/src/tag-cloud/index.php | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index 955e33a89da212..7ef999e1f1fe5a 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -94,7 +94,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { { const newValue = @@ -107,7 +107,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { { const newValue = diff --git a/packages/block-library/src/tag-cloud/index.php b/packages/block-library/src/tag-cloud/index.php index e7963fb0ee2f1f..267ef216b4e6b5 100644 --- a/packages/block-library/src/tag-cloud/index.php +++ b/packages/block-library/src/tag-cloud/index.php @@ -15,6 +15,7 @@ function render_block_core_tag_cloud( $attributes ) { $args = array( 'echo' => false, + 'unit' => 'px', 'taxonomy' => $attributes['taxonomy'], 'show_count' => $attributes['showTagCounts'], 'number' => $attributes['numberOfTags'], From 9258ba4b127ba0f5735bae3b5dd584e3203b3cfb Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Fri, 28 Jan 2022 15:07:45 +0530 Subject: [PATCH 09/35] fix php lint error replace tabs with spaces during mid-line alignment --- packages/block-library/src/tag-cloud/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/tag-cloud/index.php b/packages/block-library/src/tag-cloud/index.php index 267ef216b4e6b5..c0abb126de123b 100644 --- a/packages/block-library/src/tag-cloud/index.php +++ b/packages/block-library/src/tag-cloud/index.php @@ -15,7 +15,7 @@ function render_block_core_tag_cloud( $attributes ) { $args = array( 'echo' => false, - 'unit' => 'px', + 'unit' => 'px', 'taxonomy' => $attributes['taxonomy'], 'show_count' => $attributes['showTagCounts'], 'number' => $attributes['numberOfTags'], From cbc3f2db2145b1dbed026a24e80b93751e6f5aba Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Fri, 28 Jan 2022 15:56:49 +0530 Subject: [PATCH 10/35] replace `NumberControl` with `InputControl` this is done to be in sync with the UI illustrations and UI design pattern --- packages/block-library/src/tag-cloud/edit.js | 32 +++++++++++++++++--- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index 7ef999e1f1fe5a..45edb32f8ce68e 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -13,7 +13,9 @@ import { ToggleControl, SelectControl, RangeControl, - __experimentalNumberControl as NumberControl, + __experimentalInputControl as InputControl, + __experimentalSpacer as Spacer, + __experimentalText as Text, } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -93,20 +95,33 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { /> - { const newValue = value && +value >= 8 ? +value : 8; - setAttributes( { smallestFontSize: newValue } ); + setAttributes( { + smallestFontSize: newValue, + } ); } } min={ 8 } max={ 60 } + suffix={ + + px + + } /> - { @@ -116,6 +131,15 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { } } min={ 8 } max={ 60 } + suffix={ + + px + + } /> From b48db09dd7bedee1be20160b8b83d33c8ce24dc2 Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Wed, 2 Feb 2022 00:12:47 +0530 Subject: [PATCH 11/35] 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 --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/tag-cloud/block.json | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index b121dfb4a4850b..6cb5cc98163699 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:** largestFontSize, numberOfTags, showTagCounts, smallestFontSize, taxonomy +- **Attributes:** fontSizeUnit, 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 0ec71838949a89..74e50e6c2abdd8 100644 --- a/packages/block-library/src/tag-cloud/block.json +++ b/packages/block-library/src/tag-cloud/block.json @@ -28,6 +28,10 @@ "largestFontSize": { "type": "number", "default": 22 + }, + "fontSizeUnit": { + "type": "string", + "default": "pt" } }, "styles": [ From f99b43bc34fe4a0d0f16a54c49231fd642424986 Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Wed, 2 Feb 2022 00:14:17 +0530 Subject: [PATCH 12/35] 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 --- packages/block-library/src/tag-cloud/edit.js | 56 +++++++++----------- 1 file changed, 24 insertions(+), 32 deletions(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index 45edb32f8ce68e..98f80518fc8d9c 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -13,9 +13,7 @@ import { ToggleControl, SelectControl, RangeControl, - __experimentalInputControl as InputControl, - __experimentalSpacer as Spacer, - __experimentalText as Text, + __experimentalUnitControl as UnitControl, } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -44,8 +42,14 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { numberOfTags, smallestFontSize, largestFontSize, + fontSizeUnit, } = attributes; + const units = [ + { label: 'px', value: 'px' }, + { label: 'pt', value: 'pt' }, + ]; + const getTaxonomyOptions = () => { const selectOption = { label: __( '- Select -' ), @@ -95,51 +99,39 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { /> - { + value = value.slice( 0, -2 ); const newValue = value && +value >= 8 ? +value : 8; setAttributes( { smallestFontSize: newValue, } ); } } - min={ 8 } - max={ 60 } - suffix={ - - px - - } + units={ units } + onUnitChange={ ( value ) => { + setAttributes( { fontSizeUnit: value } ); + } } /> - { + value = value.slice( 0, -2 ); const newValue = value && +value >= 8 ? +value : 60; - setAttributes( { largestFontSize: newValue } ); + setAttributes( { + largestFontSize: newValue, + } ); + } } + units={ units } + onUnitChange={ ( value ) => { + setAttributes( { fontSizeUnit: value } ); } } - min={ 8 } - max={ 60 } - suffix={ - - px - - } /> From 231433e511958e148ef88054f98748371ca3b0bc Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Wed, 2 Feb 2022 00:17:03 +0530 Subject: [PATCH 13/35] update `wp_tag_cloud` args to handle `fontSizeUnit` --- packages/block-library/src/tag-cloud/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/tag-cloud/index.php b/packages/block-library/src/tag-cloud/index.php index c0abb126de123b..a5ffef33e2037e 100644 --- a/packages/block-library/src/tag-cloud/index.php +++ b/packages/block-library/src/tag-cloud/index.php @@ -15,7 +15,7 @@ function render_block_core_tag_cloud( $attributes ) { $args = array( 'echo' => false, - 'unit' => 'px', + 'unit' => $attributes['fontSizeUnit'], 'taxonomy' => $attributes['taxonomy'], 'show_count' => $attributes['showTagCounts'], 'number' => $attributes['numberOfTags'], From 795a080d1ca2b15b4ed279a7eece94274fdd461f Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Wed, 2 Feb 2022 00:32:47 +0530 Subject: [PATCH 14/35] fix unit test test cases were failing because of new attribute `fontSizeUnit`. It is fixed now. --- test/integration/fixtures/blocks/core__tag-cloud.json | 3 ++- .../fixtures/blocks/core__tag-cloud__showTagCounts.json | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/test/integration/fixtures/blocks/core__tag-cloud.json b/test/integration/fixtures/blocks/core__tag-cloud.json index d2ee88a544ba30..13e65e7722e7b6 100644 --- a/test/integration/fixtures/blocks/core__tag-cloud.json +++ b/test/integration/fixtures/blocks/core__tag-cloud.json @@ -7,7 +7,8 @@ "taxonomy": "category", "showTagCounts": false, "smallestFontSize": 8, - "largestFontSize": 22 + "largestFontSize": 22, + "fontSizeUnit": "pt" }, "innerBlocks": [] } diff --git a/test/integration/fixtures/blocks/core__tag-cloud__showTagCounts.json b/test/integration/fixtures/blocks/core__tag-cloud__showTagCounts.json index 94da0b2e9f6334..19a88aae3b58ff 100644 --- a/test/integration/fixtures/blocks/core__tag-cloud__showTagCounts.json +++ b/test/integration/fixtures/blocks/core__tag-cloud__showTagCounts.json @@ -7,7 +7,8 @@ "taxonomy": "category", "showTagCounts": true, "smallestFontSize": 8, - "largestFontSize": 22 + "largestFontSize": 22, + "fontSizeUnit": "pt" }, "innerBlocks": [] } From fb7b01ffe5847f9562d97e9f200daa98cb5d8781 Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Tue, 8 Feb 2022 03:33:48 +0530 Subject: [PATCH 15/35] change `smallestFontSize` and `largestFontSize` attribute to string --- packages/block-library/src/tag-cloud/block.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/tag-cloud/block.json b/packages/block-library/src/tag-cloud/block.json index 74e50e6c2abdd8..1da57639643233 100644 --- a/packages/block-library/src/tag-cloud/block.json +++ b/packages/block-library/src/tag-cloud/block.json @@ -22,12 +22,12 @@ "default": false }, "smallestFontSize": { - "type": "number", - "default": 8 + "type": "string", + "default": "8pt" }, "largestFontSize": { - "type": "number", - "default": 22 + "type": "string", + "default": "22pt" }, "fontSizeUnit": { "type": "string", From d646f06a18b08f1f4f79924d0784c50c3577e542 Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Tue, 8 Feb 2022 03:35:36 +0530 Subject: [PATCH 16/35] add condition to update font unit --- packages/block-library/src/tag-cloud/edit.js | 31 +++++++++++++------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index 98f80518fc8d9c..8fecd631377ae1 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -42,7 +42,6 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { numberOfTags, smallestFontSize, largestFontSize, - fontSizeUnit, } = attributes; const units = [ @@ -101,37 +100,47 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { { + const unit = value.slice( -2 ); + if ( largestFontSize.indexOf( unit ) === -1 ) { + setAttributes( { + largestFontSize: + largestFontSize.slice( 0, -2 ) + + unit, + } ); + } value = value.slice( 0, -2 ); const newValue = value && +value >= 8 ? +value : 8; setAttributes( { - smallestFontSize: newValue, + smallestFontSize: newValue + unit, } ); } } units={ units } - onUnitChange={ ( value ) => { - setAttributes( { fontSizeUnit: value } ); - } } /> { + const unit = value.slice( -2 ); + if ( smallestFontSize.indexOf( unit ) === -1 ) { + setAttributes( { + smallestFontSize: + smallestFontSize.slice( 0, -2 ) + + unit, + } ); + } value = value.slice( 0, -2 ); const newValue = value && +value >= 8 ? +value : 60; setAttributes( { - largestFontSize: newValue, + largestFontSize: newValue + unit, } ); } } units={ units } - onUnitChange={ ( value ) => { - setAttributes( { fontSizeUnit: value } ); - } } /> From e50e654b21883462d68cdd3152ebd0c94cecb8b8 Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Tue, 8 Feb 2022 03:36:24 +0530 Subject: [PATCH 17/35] extract font unit from integer fontSize attribute --- packages/block-library/src/tag-cloud/index.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/tag-cloud/index.php b/packages/block-library/src/tag-cloud/index.php index a5ffef33e2037e..2fc9c023872449 100644 --- a/packages/block-library/src/tag-cloud/index.php +++ b/packages/block-library/src/tag-cloud/index.php @@ -15,12 +15,12 @@ function render_block_core_tag_cloud( $attributes ) { $args = array( 'echo' => false, - 'unit' => $attributes['fontSizeUnit'], + 'unit' => substr($attributes['smallestFontSize'], -2), 'taxonomy' => $attributes['taxonomy'], 'show_count' => $attributes['showTagCounts'], 'number' => $attributes['numberOfTags'], - 'smallest' => $attributes['smallestFontSize'], - 'largest' => $attributes['largestFontSize'], + 'smallest' => (int) substr($attributes['smallestFontSize'], 0, -2), + 'largest' => (int) substr($attributes['largestFontSize'], 0, -2), ); $tag_cloud = wp_tag_cloud( $args ); From 4f442adce09fa2647eb01facaec125dd6054d788 Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Tue, 8 Feb 2022 03:41:20 +0530 Subject: [PATCH 18/35] remove `fontSizeUnit` attribute --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/tag-cloud/block.json | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 6cb5cc98163699..b121dfb4a4850b 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:** fontSizeUnit, largestFontSize, numberOfTags, showTagCounts, smallestFontSize, 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 1da57639643233..15e744fcaca679 100644 --- a/packages/block-library/src/tag-cloud/block.json +++ b/packages/block-library/src/tag-cloud/block.json @@ -28,10 +28,6 @@ "largestFontSize": { "type": "string", "default": "22pt" - }, - "fontSizeUnit": { - "type": "string", - "default": "pt" } }, "styles": [ From ec927f36954518643978b3eaabdb72fc2a32b19d Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Tue, 8 Feb 2022 03:44:46 +0530 Subject: [PATCH 19/35] fix test cases after removing `fontSizeUnit` and str (smallest/largest)FontSize --- test/integration/fixtures/blocks/core__tag-cloud.json | 5 ++--- .../fixtures/blocks/core__tag-cloud__showTagCounts.json | 5 ++--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/test/integration/fixtures/blocks/core__tag-cloud.json b/test/integration/fixtures/blocks/core__tag-cloud.json index 13e65e7722e7b6..0b36665250e642 100644 --- a/test/integration/fixtures/blocks/core__tag-cloud.json +++ b/test/integration/fixtures/blocks/core__tag-cloud.json @@ -6,9 +6,8 @@ "numberOfTags": 45, "taxonomy": "category", "showTagCounts": false, - "smallestFontSize": 8, - "largestFontSize": 22, - "fontSizeUnit": "pt" + "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 19a88aae3b58ff..486d7fff27493f 100644 --- a/test/integration/fixtures/blocks/core__tag-cloud__showTagCounts.json +++ b/test/integration/fixtures/blocks/core__tag-cloud__showTagCounts.json @@ -6,9 +6,8 @@ "numberOfTags": 45, "taxonomy": "category", "showTagCounts": true, - "smallestFontSize": 8, - "largestFontSize": 22, - "fontSizeUnit": "pt" + "smallestFontSize": "8pt", + "largestFontSize": "22pt" }, "innerBlocks": [] } From aaa245a63d96b20d3a1cea78fa4438d1517e6030 Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Tue, 8 Feb 2022 10:19:55 +0530 Subject: [PATCH 20/35] fix php lint errors --- packages/block-library/src/tag-cloud/index.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/tag-cloud/index.php b/packages/block-library/src/tag-cloud/index.php index 2fc9c023872449..5c5d99b0114d6c 100644 --- a/packages/block-library/src/tag-cloud/index.php +++ b/packages/block-library/src/tag-cloud/index.php @@ -15,12 +15,12 @@ function render_block_core_tag_cloud( $attributes ) { $args = array( 'echo' => false, - 'unit' => substr($attributes['smallestFontSize'], -2), + 'unit' => substr( $attributes['smallestFontSize'], -2 ), 'taxonomy' => $attributes['taxonomy'], 'show_count' => $attributes['showTagCounts'], 'number' => $attributes['numberOfTags'], - 'smallest' => (int) substr($attributes['smallestFontSize'], 0, -2), - 'largest' => (int) substr($attributes['largestFontSize'], 0, -2), + 'smallest' => (int) substr( $attributes['smallestFontSize'], 0, -2 ), + 'largest' => (int) substr( $attributes['largestFontSize'], 0, -2 ), ); $tag_cloud = wp_tag_cloud( $args ); From b0a850423a65f0a3dca5c52b27c1a45d91a3e9fd Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Wed, 9 Feb 2022 00:15:01 +0530 Subject: [PATCH 21/35] implement `useCustomUnits` hooks to support different units --- packages/block-library/src/tag-cloud/edit.js | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index 8fecd631377ae1..feec554e5104ad 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -14,10 +14,15 @@ import { SelectControl, RangeControl, __experimentalUnitControl as UnitControl, + __experimentalUseCustomUnits as useCustomUnits, } 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'; @@ -44,10 +49,14 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { largestFontSize, } = attributes; - const units = [ - { label: 'px', value: 'px' }, - { label: 'pt', value: 'pt' }, - ]; + const units = useCustomUnits( { + availableUnits: useSetting( 'spacing.units' ) || [ + '%', + 'px', + 'em', + 'rem', + ], + } ); const getTaxonomyOptions = () => { const selectOption = { From 7d25c13dea444dcdecaa7440182bcea9284e44a3 Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Wed, 9 Feb 2022 01:29:42 +0530 Subject: [PATCH 22/35] add `addFontChange` common function for `(smallest/largest)FontSize` --- packages/block-library/src/tag-cloud/edit.js | 46 ++++++++------------ 1 file changed, 18 insertions(+), 28 deletions(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index feec554e5104ad..7bbd1a391deb8c 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -77,6 +77,22 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { return [ selectOption, ...taxonomyOptions ]; }; + const onFontChange = ( fontSize, value ) => { + const parsedValue = parseFloat( value ); + if ( isNaN( parsedValue ) && value ) return; + + const newUnit = value.replace( /\d+/, '' ); + if ( smallestFontSize.indexOf( newUnit ) === -1 ) { + const currentSize = parseFloat( smallestFontSize ); + setAttributes( { smallestFontSize: currentSize + newUnit } ); + } + if ( largestFontSize.indexOf( newUnit ) === -1 ) { + const currentSize = parseFloat( largestFontSize ); + setAttributes( { largestFontSize: currentSize + newUnit } ); + } + setAttributes( { [ fontSize ]: parsedValue < 0 ? '8pt' : value } ); + }; + const inspectorControls = ( @@ -111,20 +127,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { label={ __( 'Smallest size' ) } value={ smallestFontSize } onChange={ ( value ) => { - const unit = value.slice( -2 ); - if ( largestFontSize.indexOf( unit ) === -1 ) { - setAttributes( { - largestFontSize: - largestFontSize.slice( 0, -2 ) + - unit, - } ); - } - value = value.slice( 0, -2 ); - const newValue = - value && +value >= 8 ? +value : 8; - setAttributes( { - smallestFontSize: newValue + unit, - } ); + onFontChange( 'smallestFontSize', value ); } } units={ units } /> @@ -134,20 +137,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { label={ __( 'Largest size' ) } value={ largestFontSize } onChange={ ( value ) => { - const unit = value.slice( -2 ); - if ( smallestFontSize.indexOf( unit ) === -1 ) { - setAttributes( { - smallestFontSize: - smallestFontSize.slice( 0, -2 ) + - unit, - } ); - } - value = value.slice( 0, -2 ); - const newValue = - value && +value >= 8 ? +value : 60; - setAttributes( { - largestFontSize: newValue + unit, - } ); + onFontChange( 'largestFontSize', value ); } } units={ units } /> From 9832036faab993e3e719bf51a64e9f147428ca4e Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Wed, 9 Feb 2022 01:33:40 +0530 Subject: [PATCH 23/35] use `preg_replace` to handle font unit and pass integer font size `wp_tag_cloud` --- packages/block-library/src/tag-cloud/index.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/tag-cloud/index.php b/packages/block-library/src/tag-cloud/index.php index 5c5d99b0114d6c..9da8cdd9ebe7b0 100644 --- a/packages/block-library/src/tag-cloud/index.php +++ b/packages/block-library/src/tag-cloud/index.php @@ -15,12 +15,12 @@ function render_block_core_tag_cloud( $attributes ) { $args = array( 'echo' => false, - 'unit' => substr( $attributes['smallestFontSize'], -2 ), + 'unit' => preg_replace( '/\d+/', '', $attributes['smallestFontSize'] ), 'taxonomy' => $attributes['taxonomy'], 'show_count' => $attributes['showTagCounts'], 'number' => $attributes['numberOfTags'], - 'smallest' => (int) substr( $attributes['smallestFontSize'], 0, -2 ), - 'largest' => (int) substr( $attributes['largestFontSize'], 0, -2 ), + 'smallest' => floatVal( $attributes['smallestFontSize'] ), + 'largest' => floatVal( $attributes['largestFontSize'] ), ); $tag_cloud = wp_tag_cloud( $args ); From 22cc30ee100c12279bce501bad086322bc65ff9a Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Sun, 27 Feb 2022 22:20:55 +0530 Subject: [PATCH 24/35] refactor `onFontChange` function to `onFontSizeChange` function --- packages/block-library/src/tag-cloud/edit.js | 37 ++++++++++++-------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index 7bbd1a391deb8c..a8a7afaffcc0cc 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -15,6 +15,7 @@ import { RangeControl, __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, + __experimentalParseUnit as parseUnit, } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -77,20 +78,26 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { return [ selectOption, ...taxonomyOptions ]; }; - const onFontChange = ( fontSize, value ) => { - const parsedValue = parseFloat( value ); - if ( isNaN( parsedValue ) && value ) return; - - const newUnit = value.replace( /\d+/, '' ); - if ( smallestFontSize.indexOf( newUnit ) === -1 ) { - const currentSize = parseFloat( smallestFontSize ); - setAttributes( { smallestFontSize: currentSize + newUnit } ); - } - if ( largestFontSize.indexOf( newUnit ) === -1 ) { - const currentSize = parseFloat( largestFontSize ); - setAttributes( { largestFontSize: currentSize + newUnit } ); + const onFontSizeChange = ( fontSize, value ) => { + // eslint-disable-next-line @wordpress/no-unused-vars-before-return + const [ quantity, newUnit ] = parseUnit( value ); + if ( ! Number.isFinite( quantity ) || quantity < 0 || quantity > 100 ) { + return; } - setAttributes( { [ fontSize ]: parsedValue < 0 ? '8pt' : value } ); + const updateObj = { [ fontSize ]: value }; + // We need to keep in sync the `unit` changes to both `smallestFontSize` + // and `largestFontSize` attributes. + Object.entries( { + smallestFontSize, + largestFontSize, + } ).forEach( ( [ attribute, currentValue ] ) => { + const [ _value, _unit ] = parseUnit( currentValue ); + // Only add an update if the other font size attribute has a different unit. + if ( attribute !== fontSize && _unit !== newUnit ) { + updateObj[ attribute ] = `${ _value }${ newUnit }`; + } + } ); + setAttributes( updateObj ); }; const inspectorControls = ( @@ -127,7 +134,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { label={ __( 'Smallest size' ) } value={ smallestFontSize } onChange={ ( value ) => { - onFontChange( 'smallestFontSize', value ); + onFontSizeChange( 'smallestFontSize', value ); } } units={ units } /> @@ -137,7 +144,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { label={ __( 'Largest size' ) } value={ largestFontSize } onChange={ ( value ) => { - onFontChange( 'largestFontSize', value ); + onFontSizeChange( 'largestFontSize', value ); } } units={ units } /> From 27e4591eabdcd17cbd66c0a93ea5eeb63e1f972c Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Tue, 1 Mar 2022 01:29:17 +0530 Subject: [PATCH 25/35] `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`. --- packages/block-library/src/tag-cloud/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/tag-cloud/index.php b/packages/block-library/src/tag-cloud/index.php index 9da8cdd9ebe7b0..4ad05743d8a936 100644 --- a/packages/block-library/src/tag-cloud/index.php +++ b/packages/block-library/src/tag-cloud/index.php @@ -15,7 +15,7 @@ function render_block_core_tag_cloud( $attributes ) { $args = array( 'echo' => false, - 'unit' => preg_replace( '/\d+/', '', $attributes['smallestFontSize'] ), + 'unit' => preg_replace( '/^\d*\.?\d*/', '', $attributes['smallestFontSize'] ), 'taxonomy' => $attributes['taxonomy'], 'show_count' => $attributes['showTagCounts'], 'number' => $attributes['numberOfTags'], From a74ec71a67173e8d36f8825ac8340fb38e86fc32 Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Wed, 2 Mar 2022 11:05:59 +0530 Subject: [PATCH 26/35] write descriptive variables names Co-authored-by: Marco Ciampini --- packages/block-library/src/tag-cloud/edit.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index a8a7afaffcc0cc..5ed1bcfaceddb6 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -78,23 +78,23 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { return [ selectOption, ...taxonomyOptions ]; }; - const onFontSizeChange = ( fontSize, value ) => { + const onFontSizeChange = ( fontSizeLabel, newValue ) => { // eslint-disable-next-line @wordpress/no-unused-vars-before-return - const [ quantity, newUnit ] = parseUnit( value ); + const [ quantity, newUnit ] = parseUnit( newValue ); if ( ! Number.isFinite( quantity ) || quantity < 0 || quantity > 100 ) { return; } - const updateObj = { [ fontSize ]: value }; + 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 [ _value, _unit ] = parseUnit( currentValue ); + const [ currentQuantity, currentUnit ] = parseUnit( currentValue ); // Only add an update if the other font size attribute has a different unit. - if ( attribute !== fontSize && _unit !== newUnit ) { - updateObj[ attribute ] = `${ _value }${ newUnit }`; + if ( attribute !== fontSizeLabel && currentUnit !== newUnit ) { + updateObj[ attribute ] = `${ currentQuantity }${ newUnit }`; } } ); setAttributes( updateObj ); From aff4e19ff3100b93e0e898a343cc915c0595ccea Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Thu, 3 Mar 2022 14:15:58 +0530 Subject: [PATCH 27/35] rename `parseUnit` to `parseQuantityAndUnitFromRawValue` Co-authored-by: Marco Ciampini --- packages/block-library/src/tag-cloud/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index 5ed1bcfaceddb6..41c9f0af8df8fe 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -91,7 +91,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { smallestFontSize, largestFontSize, } ).forEach( ( [ attribute, currentValue ] ) => { - const [ currentQuantity, currentUnit ] = parseUnit( 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 }`; From 39b4fef784f8e26a846f181c46c182fac9cdcd1d Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Thu, 3 Mar 2022 14:16:39 +0530 Subject: [PATCH 28/35] rename `parseUnit` import name Co-authored-by: Marco Ciampini --- packages/block-library/src/tag-cloud/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index 41c9f0af8df8fe..9d314d9cc0978f 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -15,7 +15,7 @@ import { RangeControl, __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, - __experimentalParseUnit as parseUnit, + __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; From 31fb6b59e0861aec1d72cd49614f99958936d017 Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Thu, 3 Mar 2022 14:16:54 +0530 Subject: [PATCH 29/35] rename `parseUnit` to `parseQuantityAndUnitFromRawValue` Co-authored-by: Marco Ciampini --- packages/block-library/src/tag-cloud/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index 9d314d9cc0978f..5e1e6bf77b5e81 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -80,7 +80,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { const onFontSizeChange = ( fontSizeLabel, newValue ) => { // eslint-disable-next-line @wordpress/no-unused-vars-before-return - const [ quantity, newUnit ] = parseUnit( newValue ); + const [ quantity, newUnit ] = parseQuantityAndUnitFromRawValue( newValue ); if ( ! Number.isFinite( quantity ) || quantity < 0 || quantity > 100 ) { return; } From 95f6a19104938ee1dfa4d36028eb8e1b67ea837a Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 3 Mar 2022 10:11:02 +0100 Subject: [PATCH 30/35] Apply suggestions from code review Fix formatting --- packages/block-library/src/tag-cloud/edit.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index 5e1e6bf77b5e81..ae52d42f137a87 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -80,7 +80,9 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { const onFontSizeChange = ( fontSizeLabel, newValue ) => { // eslint-disable-next-line @wordpress/no-unused-vars-before-return - const [ quantity, newUnit ] = parseQuantityAndUnitFromRawValue( newValue ); + const [ quantity, newUnit ] = parseQuantityAndUnitFromRawValue( + newValue + ); if ( ! Number.isFinite( quantity ) || quantity < 0 || quantity > 100 ) { return; } @@ -91,7 +93,10 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { smallestFontSize, largestFontSize, } ).forEach( ( [ attribute, currentValue ] ) => { - const [ currentQuantity, currentUnit ] = parseQuantityAndUnitFromRawValue( 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 }`; From 02c11b7991a4bd819a3c4886011db7a91fe7e1ed Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Wed, 9 Mar 2022 22:31:24 +0530 Subject: [PATCH 31/35] fix: security vulnerability add validate unit method for `wp_tag_cloud` args --- packages/block-library/src/tag-cloud/index.php | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/tag-cloud/index.php b/packages/block-library/src/tag-cloud/index.php index 4ad05743d8a936..cee34cbde3eb4d 100644 --- a/packages/block-library/src/tag-cloud/index.php +++ b/packages/block-library/src/tag-cloud/index.php @@ -13,9 +13,12 @@ * @return string Returns the tag cloud for selected taxonomy. */ function render_block_core_tag_cloud( $attributes ) { + $smallestFontSize = $attributes['smallestFontSize']; + $unit = preg_match('/[0-9.]+([a-zA-Z%]+)$/', $smallestFontSize) ? preg_replace( '/^\d*\.?\d*/', '', $smallestFontSize ): 'pt'; + $args = array( 'echo' => false, - 'unit' => preg_replace( '/^\d*\.?\d*/', '', $attributes['smallestFontSize'] ), + 'unit' => $unit, 'taxonomy' => $attributes['taxonomy'], 'show_count' => $attributes['showTagCounts'], 'number' => $attributes['numberOfTags'], From db24fd36bc7a6120e48c368e82e51fd6f788ac30 Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Wed, 9 Mar 2022 23:39:28 +0530 Subject: [PATCH 32/35] fix php lint error using `composer format` command --- packages/block-library/src/tag-cloud/index.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/tag-cloud/index.php b/packages/block-library/src/tag-cloud/index.php index cee34cbde3eb4d..dbb63d5fdb584e 100644 --- a/packages/block-library/src/tag-cloud/index.php +++ b/packages/block-library/src/tag-cloud/index.php @@ -13,8 +13,8 @@ * @return string Returns the tag cloud for selected taxonomy. */ function render_block_core_tag_cloud( $attributes ) { - $smallestFontSize = $attributes['smallestFontSize']; - $unit = preg_match('/[0-9.]+([a-zA-Z%]+)$/', $smallestFontSize) ? preg_replace( '/^\d*\.?\d*/', '', $smallestFontSize ): 'pt'; + $smallest_font_size = $attributes['smallestFontSize']; + $unit = preg_match( '/[0-9.]+([a-zA-Z%]+)$/', $smallest_font_size ) ? preg_replace( '/^\d*\.?\d*/', '', $smallest_font_size ) : 'pt'; $args = array( 'echo' => false, From b821645d08b05c8ad5476de84b87f3087e734ad3 Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Mon, 21 Mar 2022 19:18:29 +0530 Subject: [PATCH 33/35] update regex for unit attribute in `wp_tag_cloud` function --- packages/block-library/src/tag-cloud/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/tag-cloud/index.php b/packages/block-library/src/tag-cloud/index.php index dbb63d5fdb584e..a7d121f7ca632b 100644 --- a/packages/block-library/src/tag-cloud/index.php +++ b/packages/block-library/src/tag-cloud/index.php @@ -14,7 +14,7 @@ */ function render_block_core_tag_cloud( $attributes ) { $smallest_font_size = $attributes['smallestFontSize']; - $unit = preg_match( '/[0-9.]+([a-zA-Z%]+)$/', $smallest_font_size ) ? preg_replace( '/^\d*\.?\d*/', '', $smallest_font_size ) : 'pt'; + $unit = ( preg_match( '/^[0-9.]+(?P[a-z%]+)$/i', $smallest_font_size, $m ) ? $m['unit'] : 'pt' ); $args = array( 'echo' => false, From faef8d8be9f8c583c0005a591cc1a740ca724818 Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Tue, 22 Mar 2022 20:13:09 +0530 Subject: [PATCH 34/35] Update UnitControl to have min/max check --- packages/block-library/src/tag-cloud/edit.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index ae52d42f137a87..23515f17644156 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -41,6 +41,9 @@ 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, @@ -83,7 +86,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { const [ quantity, newUnit ] = parseQuantityAndUnitFromRawValue( newValue ); - if ( ! Number.isFinite( quantity ) || quantity < 0 || quantity > 100 ) { + if ( ! Number.isFinite( quantity ) ) { return; } const updateObj = { [ fontSizeLabel ]: newValue }; @@ -142,6 +145,8 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { onFontSizeChange( 'smallestFontSize', value ); } } units={ units } + min={ MIN_FONT_SIZE } + max={ MAX_FONT_SIZE } /> @@ -152,6 +157,8 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { onFontSizeChange( 'largestFontSize', value ); } } units={ units } + min={ MIN_FONT_SIZE } + max={ MAX_FONT_SIZE } /> From 059357a96feb29556cddb43e93ed2f34288a303a Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Wed, 23 Mar 2022 14:52:38 +0530 Subject: [PATCH 35/35] change `MIN_FONT_SIZE` to 0.1 Co-authored-by: Nik Tsekouras --- packages/block-library/src/tag-cloud/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index 23515f17644156..01ed801618c411 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -41,7 +41,7 @@ const MIN_TAGS = 1; */ const MAX_TAGS = 100; -const MIN_FONT_SIZE = 1; +const MIN_FONT_SIZE = 0.1; const MAX_FONT_SIZE = 100; function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {