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

Cover: Fix padding controls showing null units #24251

Merged
merged 3 commits into from
Jul 29, 2020
Merged

Cover: Fix padding controls showing null units #24251

merged 3 commits into from
Jul 29, 2020

Conversation

ItsJonQ
Copy link

@ItsJonQ ItsJonQ commented Jul 28, 2020

This update fixes the Padding controls that are available for the Cover block, specifically with the units not parsing correctly.

box-control

This happened if add_theme_support( 'experimental-custom-spacing' ); was activated (to enable the padding controls), but add_theme_support( 'custom-units' ); was not.

This was fixed by improving the invalid unit parsing in the logic of the UnitControl component.

Secondly, while testing this fix, I noticed that the Reset mechanism wasn't working correctly for padding controls.

This was resolved by improving state handling in the useControlledState hook used by the BoxControl component.

Unit tests have been written for the cases mentioned above.

Resolves: #24245

cc'ing @jffng

<3

How has this been tested?

  • Run npm run dev
  • Add add_theme_support( 'experimental-custom-spacing' ); to your theme's PHP file (functions.php)
  • Add a Cover block
  • Padding value should be empty, with a unit of px
  • Change the value
  • Cover padding should update
  • Click reset
  • Padding value should reset.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • [n/a] My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • [n/a] I've updated all React Native files affected by any refactorings/renamings in this PR.

@ItsJonQ ItsJonQ added [Type] Bug An existing feature does not function as intended [Package] Components /packages/components [Block] Cover Affects the Cover Block - used to display content laid over a background image labels Jul 28, 2020
@ItsJonQ ItsJonQ requested a review from kjellr July 28, 2020 19:51
@ItsJonQ ItsJonQ self-assigned this Jul 28, 2020
@github-actions
Copy link

Size Change: +30 B (0%)

Total Size: 1.16 MB

Filename Size Change
build/components/index.js 200 kB +30 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.44 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.93 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-editor/index.js 125 kB 0 B
build/block-editor/style-rtl.css 10.8 kB 0 B
build/block-editor/style.css 10.8 kB 0 B
build/block-library/editor-rtl.css 7.63 kB 0 B
build/block-library/editor.css 7.63 kB 0 B
build/block-library/index.js 133 kB 0 B
build/block-library/style-rtl.css 7.83 kB 0 B
build/block-library/style.css 7.83 kB 0 B
build/block-library/theme-rtl.css 728 B 0 B
build/block-library/theme.css 729 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.2 kB 0 B
build/components/style-rtl.css 15.7 kB 0 B
build/components/style.css 15.7 kB 0 B
build/compose/index.js 9.68 kB 0 B
build/core-data/index.js 11.8 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.45 kB 0 B
build/date/index.js 5.38 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.23 kB 0 B
build/edit-navigation/index.js 10.9 kB 0 B
build/edit-navigation/style-rtl.css 1.08 kB 0 B
build/edit-navigation/style.css 1.08 kB 0 B
build/edit-post/index.js 304 kB 0 B
build/edit-post/style-rtl.css 5.61 kB 0 B
build/edit-post/style.css 5.61 kB 0 B
build/edit-site/index.js 17 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/index.js 9.38 kB 0 B
build/edit-widgets/style-rtl.css 2.45 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/editor/index.js 45.3 kB 0 B
build/editor/style-rtl.css 3.8 kB 0 B
build/editor/style.css 3.79 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.72 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.11 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.33 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.71 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

kjellr
kjellr approved these changes Jul 29, 2020
View reviewed changes
Copy link
Contributor

@kjellr kjellr left a comment

Choose a reason for hiding this comment

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

Tested, and I can confirm this fixes the problem! No more NULL values. 👍

@ItsJonQ
Copy link
Author

ItsJonQ commented Jul 29, 2020

@kjellr Beautiful! Thank you 🙏

@ItsJonQ ItsJonQ merged commit 74c9065 into master Jul 29, 2020
@ItsJonQ ItsJonQ deleted the fix/box-control-unit-parsing-and-reset branch July 29, 2020 18:47
@github-actions github-actions bot added this to the Gutenberg 8.7 milestone Jul 29, 2020
@costasovo costasovo mentioned this pull request Jul 30, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kjellr kjellr kjellr approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra

@chrisvanpatten chrisvanpatten Awaiting requested review from chrisvanpatten

@youknowriad youknowriad Awaiting requested review from youknowriad

Assignees

@ItsJonQ ItsJonQ

Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
Gutenberg 8.7
Development

Successfully merging this pull request may close these issues.

Cover block spacing unit defaults to null
2 participants
@ItsJonQ @kjellr