Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 35 commits into from
Mar 23, 2022
Merged

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

Show file tree
Hide file tree
Changes from 33 commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
38a48ed
Add `NumberControl` to support min/max font size for `Tag Cloud Block`
amustaque97 Dec 12, 2021
09c1447
Regenerate fixtures for `tag-cloud` block
amustaque97 Dec 12, 2021
13bb226
address review comment
amustaque97 Jan 27, 2022
a02a212
Remove space in label
amustaque97 Jan 27, 2022
c54a671
Remove space from label of smallest size input field
amustaque97 Jan 27, 2022
e130109
add smallestFontSize and largestFontSize in core blocks docs
amustaque97 Jan 27, 2022
d552757
fix NumberControl typecasting issue
amustaque97 Jan 27, 2022
476b9b5
change font size units from `pt` to `px`
amustaque97 Jan 28, 2022
9258ba4
fix php lint error replace tabs with spaces during mid-line alignment
amustaque97 Jan 28, 2022
cbc3f2d
replace `NumberControl` with `InputControl`
amustaque97 Jan 28, 2022
b48db09
add new attribute `fontSizeUnit`
amustaque97 Feb 1, 2022
f99b43b
replace `InputControl` with `UnitControl`
amustaque97 Feb 1, 2022
231433e
update `wp_tag_cloud` args to handle `fontSizeUnit`
amustaque97 Feb 1, 2022
795a080
fix unit test
amustaque97 Feb 1, 2022
fb7b01f
change `smallestFontSize` and `largestFontSize` attribute to string
amustaque97 Feb 7, 2022
d646f06
add condition to update font unit
amustaque97 Feb 7, 2022
e50e654
extract font unit from integer fontSize attribute
amustaque97 Feb 7, 2022
4f442ad
remove `fontSizeUnit` attribute
amustaque97 Feb 7, 2022
ec927f3
fix test cases after removing `fontSizeUnit` and str (smallest/larges…
amustaque97 Feb 7, 2022
aaa245a
fix php lint errors
amustaque97 Feb 8, 2022
b0a8504
implement `useCustomUnits` hooks to support different units
amustaque97 Feb 8, 2022
7d25c13
add `addFontChange` common function for `(smallest/largest)FontSize`
amustaque97 Feb 8, 2022
9832036
use `preg_replace` to handle font unit and pass integer font size `wp…
amustaque97 Feb 8, 2022
22cc30e
refactor `onFontChange` function to `onFontSizeChange` function
amustaque97 Feb 27, 2022
27e4591
`tag-cloud` block php handle decimal values `unit` property
amustaque97 Feb 28, 2022
a74ec71
write descriptive variables names
amustaque97 Mar 2, 2022
aff4e19
rename `parseUnit` to `parseQuantityAndUnitFromRawValue`
amustaque97 Mar 3, 2022
39b4fef
rename `parseUnit` import name
amustaque97 Mar 3, 2022
31fb6b5
rename `parseUnit` to `parseQuantityAndUnitFromRawValue`
amustaque97 Mar 3, 2022
95f6a19
Apply suggestions from code review
ciampo Mar 3, 2022
02c11b7
fix: security vulnerability add validate unit method for `wp_tag_clou…
amustaque97 Mar 9, 2022
db24fd3
fix php lint error using `composer format` command
amustaque97 Mar 9, 2022
b821645
update regex for unit attribute in `wp_tag_cloud` function
amustaque97 Mar 21, 2022
faef8d8
Update UnitControl to have min/max check
amustaque97 Mar 22, 2022
059357a
change `MIN_FONT_SIZE` to 0.1
amustaque97 Mar 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
8 changes: 8 additions & 0 deletions packages/block-library/src/tag-cloud/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,14 @@
"showTagCounts": {
"type": "boolean",
"default": false
},
"smallestFontSize": {
"type": "string",
"default": "8pt"
},
"largestFontSize": {
"type": "string",
"default": "22pt"
}
},
"styles": [
Expand Down
77 changes: 75 additions & 2 deletions packages/block-library/src/tag-cloud/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -33,7 +42,22 @@ 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 units = useCustomUnits( {
availableUnits: useSetting( 'spacing.units' ) || [
'%',
'px',
'em',
'rem',
],
} );

const getTaxonomyOptions = () => {
const selectOption = {
Expand All @@ -54,6 +78,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 ) || quantity < 0 || quantity > 100 ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With #39186 merged, would you be able to rebase on on top of latest trunk and see if the manual quantity < 0 || quantity > 100 check can now swapped with event.target?.validity.valid (see docs)?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oooh, I believe this is not required. In one of the review comment I was asked to use UnitControl instead of NumberControl. Thank you for sharing it 😄

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

UnitControl uses NumberControl under the hood — what I'm trying to say is that we should now able to use min/max instead of this manual check:

Click to expand 
diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js
index ae52d42f13..23515f1764 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 }
 						/>
 					</FlexItem>
 					<FlexItem isBlock>
@@ -152,6 +157,8 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 								onFontSizeChange( 'largestFontSize', value );
 							} }
 							units={ units }
+							min={ MIN_FONT_SIZE }
+							max={ MAX_FONT_SIZE }
 						/>
 					</FlexItem>
 				</Flex>

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sorry I misunderstood your point. Let me try this ☝️

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' ) }>
Expand Down Expand Up @@ -82,6 +133,28 @@ 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 }
/>
</FlexItem>
<FlexItem isBlock>
<UnitControl
label={ __( 'Largest size' ) }
value={ largestFontSize }
onChange={ ( value ) => {
onFontSizeChange( 'largestFontSize', value );
} }
units={ units }
/>
</FlexItem>
</Flex>
</PanelBody>
</InspectorControls>
);
Expand Down
6 changes: 6 additions & 0 deletions packages/block-library/src/tag-cloud/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );

Expand Down
4 changes: 3 additions & 1 deletion test/integration/fixtures/blocks/core__tag-cloud.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
"attributes": {
"numberOfTags": 45,
"taxonomy": "category",
"showTagCounts": false
"showTagCounts": false,
"smallestFontSize": "8pt",
"largestFontSize": "22pt"
},
"innerBlocks": []
}
Expand Down
4 changes: 3 additions & 1 deletion test/integration/fixtures/blocks/core__tag-cloud__showTagCounts.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
"attributes": {
"numberOfTags": 45,
"taxonomy": "category",
"showTagCounts": true
"showTagCounts": true,
"smallestFontSize": "8pt",
"largestFontSize": "22pt"
},
"innerBlocks": []
}
Expand Down