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

amustaque97 · 2021-12-12T05:34:03Z

Description

Add NumberControl input to enter minimum and maximum font size value. It will help user to decide how they want tag cloud to look. Earlier it used to modify fontsize based on the number of post for a particular tag.

NOTE: When I reload the page these values reset to default values. 😞

How has this been tested?

Checkout to this branch
Create multiple tags here http://localhost:8888/wp-admin/edit-tags.php?taxonomy=post_tag
Create multiple different post and add tags created in the above step.
Create/edit a post and add /tag cloud block.
For /tag cloud block go to settings, there you can see 2 new input has been added to control font size.
Adjust/modify those numbers and save the post.
Open same post that has /tag cloud block and check its font size.

Screenshots

NumberControl
After post publish

Types of changes

Feature

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
I've tested my changes with keyboard and screen readers.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

ntsekouras

Thanks for your work @amustaque97! 💯

This works well code wise! I left a couple of notes about making the controls a bit more compact and it would be ready to land. After the changes we would just need a design approval of course maybe by @jasmussen?

packages/block-library/src/tag-cloud/edit.js

ntsekouras · 2022-01-27T14:42:31Z

You need to add the changes to block docs since you changed block attributes. Run npm run api-docs:ref and npm run api-docs:blocks.

jasmussen · 2022-01-28T08:36:49Z

Thank you for the PR! Here's how the tag cloud looks in trunk:

Here's this PR applied:

I thought about whether there was a better way to combine min/max font sizes into a singular control, but for comparison the paragraph font size looks like this:

So it's probably best to not diverge too far from this.

The following is a mockup that uses new components from the effort outlined in #27331, so it looks a bit different from what's shipping but it's what it could eventually look like:

But one single recommedation I'd make is to adopt the unit-selector input field. That would both let us remove the (pt) from the label, and pick other units. Is that feasible?

In smaller changes, if it isn't too much, I'd change the panel title from "Tag Cloud settings" to just "Settings" — there really isn't need for the redundancy.

Nice work!

amustaque97 · 2022-01-28T09:53:23Z

Thank you for the reply! I can change the units from pt to px but not sure how to add px keyword to the right side of the NumberControl input field. Maybe reviewers can suggest me something!

amustaque97 · 2022-01-28T10:33:52Z

I tried my best to implement UI as shown in the illustration. I testing it making mobile/ipad responsive. Here is the screenshot!

In order to implement this I have used InputControl instead of NumberControl

ntsekouras · 2022-02-01T10:51:02Z

Thanks for the iterations here @amustaque97!

In order to implement properly what @jasmussen suggests you should use UnitControl component. What this means in practice is that:

You should update the new attributes to being strings with default values in pt
This will also require extra handling (splitting) these values in (value/unit) in order to be passed properly in wp_tag_cloud (php part).

We can't change the default behavior to px because it will change the existing blocks appearance.

This is a bit more extra work but provides more flexibility.

packages/block-library/src/tag-cloud/block.json

packages/block-library/src/tag-cloud/edit.js

ntsekouras · 2022-02-01T20:24:47Z

What occurred to me right now is that with unit control we can set different units per size (smallest, largest), but there is no support for this in wp_tag_cloud. So we can't go this way as is a case I don't think we've encountered before(design wise).

Maybe a first iteration of this could be to support only the pt as it was before the updates in the PR with the px related changes and find a design about this? 🤔 What do you think @jasmussen ?

amustaque97 · 2022-02-01T20:58:35Z

@ntsekouras Again! this was too quick 😅 💨 . TBH I was not ready for the review yet. I was trying few things. Best thing to do right now is to wait for the reply from design team.

amustaque97 · 2022-02-01T21:06:12Z

I would suggest is to make both smallestFontSize and largestFontSize unit in sync. Example if we are updating unit for any one of it. It should set the same unit for the other one. I was trying to implement the same using useState hooks. Umm. for some reason it is not able to sync correctly! Not sure whether it will be useful or not!

Adding a link for sample example though it is not an actual implementation but the idea would be same.

jasmussen · 2022-02-02T07:16:14Z

Took this one for a spin:

This looks great to me! Thanks for the extra effort. I don't think we need to sync the two unit types, it adds only limited value and I could imagine in the future someone wanting a minimum font size in pixels, and a max font size in responsive vw units, so having the two unchained feels like a feature.

Honestly this one is good to go pending just a code sanity check. Is there a reason we limit support to px and pt or could we support the full range of font size units? This wouldn't be a blocker for the PR, just a question.

amustaque97 · 2022-02-02T10:06:05Z

wp_tag_cloud supports only single font size unit at any time. So if font size is not in sync. User will get confuse which font unit is currently in use. User may assume that there is a bug. This is another reason why initially I hardcoded pt.

jasmussen · 2022-02-02T10:08:46Z

wp_tag_cloud supports only single font size unit at any time. So if font size is not in sync. User will get confuse which font unit is currently in use. User may assume that there is a bug. This is another reason why initially I hardcoded pt.

Oh that's helpful context. 🤔

The unit selector you've implemented, though, is useful, and it would be nice to keep it. How hard would it be to keep those two in sync after all?

ntsekouras · 2022-02-02T14:33:16Z

I would suggest is to make both smallestFontSize and largestFontSize unit in sync. Example if we are updating unit for any one of it. It should set the same unit for the other one.

In order to do that I guess we would just handle this on onChange function of each input and conditionally update the other one (check the unit of both attributes).

Noting that changing the two attributes(smallest, largest) into type string is still needed and we will not need a third attribute of the unit.

amustaque97 · 2022-02-08T05:41:36Z

Addressed review comments. Code wise it is functional but on UI it doesn't update when we update font unit. I wanted to use something like unit so that it will be easy to update UI if we are changing units at code level.

Looking forward to your inputs Nik!

jasmussen · 2022-02-08T08:23:02Z

Took it for a quick spin, and I'm seeing this:

This looks great. Thank you for going the extra mile. This feels good to me.

I'd appreciate if Nik could give this one a quick code review, but the user experience is good! 👏

ntsekouras

Thanks for iterating on this one once again @amustaque97! Great work!

I've left some comments, but it's getting really close!

packages/block-library/src/tag-cloud/edit.js

packages/block-library/src/tag-cloud/index.php

packages/block-library/src/tag-cloud/edit.js

ntsekouras

Thanks for the iterations here @amustaque97!

The other thing that sometimes doesn't update the unit in the control, is something that seems to be internal to UnitControl. The values are updated properly in the block and when the controls are rerendered everything seems fine. --cc @ciampo for this issue.

I can reproduce sometimes when changing one font size and then change the unit of the other fontSize control.

Screen.Recording.2022-02-25.at.12.51.05.PM.mov

packages/block-library/src/tag-cloud/edit.js

packages/block-library/src/tag-cloud/index.php

ciampo · 2022-02-28T19:30:52Z

The other thing that sometimes doesn't update the unit in the control, is something that seems to be internal to UnitControl. The values are updated properly in the block and when the controls are rerendered everything seems fine. --cc @ciampo for this issue.

I can reproduce sometimes when changing one font size and then change the unit of the other fontSize control.

Hey @ntsekouras! Out of curiosity, are you able to reproduce that bug also in Storybook, or is it just happening in the context of the Tag Clouds settings?

ntsekouras · 2022-03-01T09:14:37Z

Hey @ntsekouras! Out of curiosity, are you able to reproduce that bug also in Storybook, or is it just happening in the context of the Tag Clouds settings?

If you add another UnitControl in the stories that update both values, you can reproduce as well. It has to do with updating both values in one onChange..

test cases were failing because of new attribute `fontSizeUnit`. It is fixed now.

…t)FontSize

…_tag_cloud`

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`.

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

Fix formatting

…d` args

ntsekouras

Thanks for all the iterations and your patience here @amustaque97! Great work! 💯

I've left a minor change to the min value, but tested and this looks good! Attribute sanitization looks good too.

packages/block-library/src/tag-cloud/edit.js

Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>

amustaque97 marked this pull request as ready for review December 12, 2021 06:31

amustaque97 requested a review from ajitbohra as a code owner December 12, 2021 06:31

mtias added [Block] Tag Cloud Affects the Tag Cloud Block Needs Design Feedback Needs general design feedback. labels Dec 15, 2021

ntsekouras reviewed Jan 27, 2022

View reviewed changes

packages/block-library/src/tag-cloud/edit.js Outdated Show resolved Hide resolved

packages/block-library/src/tag-cloud/edit.js Outdated Show resolved Hide resolved

packages/block-library/src/tag-cloud/edit.js Outdated Show resolved Hide resolved

ntsekouras requested a review from jasmussen January 27, 2022 10:35

ntsekouras reviewed Jan 27, 2022

View reviewed changes

packages/block-library/src/tag-cloud/edit.js Outdated Show resolved Hide resolved

ntsekouras reviewed Jan 27, 2022

View reviewed changes

packages/block-library/src/tag-cloud/edit.js Outdated Show resolved Hide resolved

amustaque97 requested a review from mkaz as a code owner January 27, 2022 14:51

ntsekouras reviewed Feb 1, 2022

View reviewed changes

packages/block-library/src/tag-cloud/block.json Outdated Show resolved Hide resolved

ntsekouras reviewed Feb 1, 2022

View reviewed changes

packages/block-library/src/tag-cloud/edit.js Outdated Show resolved Hide resolved

amustaque97 requested a review from ryanwelcher as a code owner February 7, 2022 22:12

ntsekouras reviewed Feb 8, 2022

View reviewed changes

ntsekouras reviewed Feb 25, 2022

View reviewed changes

packages/block-library/src/tag-cloud/edit.js Outdated Show resolved Hide resolved

packages/block-library/src/tag-cloud/index.php Outdated Show resolved Hide resolved

amustaque97 and others added 19 commits March 21, 2022 18:56

fix unit test

795a080

test cases were failing because of new attribute `fontSizeUnit`. It is fixed now.

change smallestFontSize and largestFontSize attribute to string

fb7b01f

add condition to update font unit

d646f06

extract font unit from integer fontSize attribute

e50e654

remove fontSizeUnit attribute

4f442ad

fix test cases after removing fontSizeUnit and str (smallest/larges…

ec927f3

…t)FontSize

fix php lint errors

aaa245a

implement useCustomUnits hooks to support different units

b0a8504

add addFontChange common function for (smallest/largest)FontSize

7d25c13

use preg_replace to handle font unit and pass integer font size `wp…

9832036

…_tag_cloud`

refactor onFontChange function to onFontSizeChange function

22cc30e

tag-cloud block php handle decimal values unit property

27e4591

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`.

write descriptive variables names

a74ec71

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

rename parseUnit to parseQuantityAndUnitFromRawValue

aff4e19

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

rename parseUnit import name

39b4fef

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

rename parseUnit to parseQuantityAndUnitFromRawValue

31fb6b5

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

Apply suggestions from code review

95f6a19

Fix formatting

fix: security vulnerability add validate unit method for `wp_tag_clou…

02c11b7

…d` args

fix php lint error using composer format command

db24fd3

amustaque97 force-pushed the feature/add-min-max-font-size-tag-cloud branch from 06437ea to db24fd3 Compare March 21, 2022 13:26

amustaque97 requested a review from juanmaguitar as a code owner March 21, 2022 13:26

amustaque97 added 2 commits March 21, 2022 19:20

update regex for unit attribute in wp_tag_cloud function

b821645

Update UnitControl to have min/max check

faef8d8

ntsekouras approved these changes Mar 23, 2022

View reviewed changes

packages/block-library/src/tag-cloud/edit.js Outdated Show resolved Hide resolved

change MIN_FONT_SIZE to 0.1

059357a

Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>

ntsekouras merged commit d2ab852 into WordPress:trunk Mar 23, 2022

github-actions bot added this to the Gutenberg 12.9 milestone Mar 23, 2022

amustaque97 deleted the feature/add-min-max-font-size-tag-cloud branch March 23, 2022 11:25

amustaque97 mentioned this pull request Aug 21, 2022

Tag Cloud: Add typography supports (except font size) #43452

Merged

carolinan mentioned this pull request Jul 3, 2024

Fix default unit issue for tag cloud block #59122

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

amustaque97 commented Dec 12, 2021 •

edited

Loading

ntsekouras left a comment

ntsekouras commented Jan 27, 2022

jasmussen commented Jan 28, 2022

amustaque97 commented Jan 28, 2022 •

edited

Loading

amustaque97 commented Jan 28, 2022 •

edited

Loading

ntsekouras commented Feb 1, 2022

ntsekouras commented Feb 1, 2022

amustaque97 commented Feb 1, 2022

amustaque97 commented Feb 1, 2022 •

edited

Loading

jasmussen commented Feb 2, 2022

amustaque97 commented Feb 2, 2022

jasmussen commented Feb 2, 2022

ntsekouras commented Feb 2, 2022

amustaque97 commented Feb 8, 2022

jasmussen commented Feb 8, 2022

ntsekouras left a comment

ntsekouras left a comment

ciampo commented Feb 28, 2022 •

edited

Loading

ntsekouras commented Mar 1, 2022

ntsekouras left a comment

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

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

Conversation

amustaque97 commented Dec 12, 2021 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

ntsekouras left a comment

Choose a reason for hiding this comment

ntsekouras commented Jan 27, 2022

jasmussen commented Jan 28, 2022

amustaque97 commented Jan 28, 2022 • edited Loading

amustaque97 commented Jan 28, 2022 • edited Loading

ntsekouras commented Feb 1, 2022

ntsekouras commented Feb 1, 2022

amustaque97 commented Feb 1, 2022

amustaque97 commented Feb 1, 2022 • edited Loading

jasmussen commented Feb 2, 2022

amustaque97 commented Feb 2, 2022

jasmussen commented Feb 2, 2022

ntsekouras commented Feb 2, 2022

amustaque97 commented Feb 8, 2022

jasmussen commented Feb 8, 2022

ntsekouras left a comment

Choose a reason for hiding this comment

ntsekouras left a comment

Choose a reason for hiding this comment

ciampo commented Feb 28, 2022 • edited Loading

ntsekouras commented Mar 1, 2022

ntsekouras left a comment

Choose a reason for hiding this comment

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

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

amustaque97 commented Dec 12, 2021 •

edited

Loading

amustaque97 commented Jan 28, 2022 •

edited

Loading

amustaque97 commented Jan 28, 2022 •

edited

Loading

amustaque97 commented Feb 1, 2022 •

edited

Loading

ciampo commented Feb 28, 2022 •

edited

Loading