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.

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

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

Merged
Merged
Show file tree
Hide file tree
Changes from all 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
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
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
84 changes: 82 additions & 2 deletions packages/block-library/src/tag-cloud/edit.js
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 @@ -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 = {
Expand All @@ -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' ) }>
Expand Down Expand Up @@ -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>
);
Expand Down
6 changes: 6 additions & 0 deletions packages/block-library/src/tag-cloud/index.php
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
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
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