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

Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides #44141

Merged
merged 8 commits into from
Sep 29, 2022

Conversation

glendaviesnz
Copy link
Contributor

@glendaviesnz glendaviesnz commented Sep 14, 2022

What?

Modifies CSS on spacing presets control to better differentiate which side a control relates to. Also adds a slight indent to better indicate which dimension setting they relate to

Why?

Currently the control is equidistant from the above and below labels so hard to tell which one it relates to.
Fixes: #44121

How?

Adds some additional margins and padding

Testing Instructions

  • Add a Group and set unlinked Padding and Margins and check that controls display as expected for both preset and custom values

Screenshots or screencast

Before:

before

After:

Screen Shot 2022-09-29 at 4 01 15 PM

@glendaviesnz glendaviesnz added [Type] Bug An existing feature does not function as intended Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) labels Sep 14, 2022
@glendaviesnz glendaviesnz self-assigned this Sep 14, 2022
@github-actions
Copy link

github-actions bot commented Sep 14, 2022

Size Change: +453 B (0%)

Total Size: 1.27 MB

Filename Size Change
build/block-editor/index.min.js 167 kB +63 B (0%)
build/block-editor/style-rtl.css 15.4 kB +21 B (0%)
build/block-editor/style.css 15.4 kB +19 B (0%)
build/block-library/blocks/post-featured-image/editor-rtl.css 586 B +52 B (+10%) ⚠️
build/block-library/blocks/post-featured-image/editor.css 584 B +52 B (+10%) ⚠️
build/block-library/blocks/post-terms/style-rtl.css 96 B +23 B (+32%) 🚨
build/block-library/blocks/post-terms/style.css 96 B +23 B (+32%) 🚨
build/block-library/editor-rtl.css 11.2 kB +51 B (0%)
build/block-library/editor.css 11.2 kB +51 B (0%)
build/block-library/index.min.js 191 kB -1 B (0%)
build/block-library/style-rtl.css 12.2 kB +8 B (0%)
build/block-library/style.css 12.2 kB +8 B (0%)
build/blocks/index.min.js 49.8 kB +18 B (0%)
build/components/index.min.js 199 kB +38 B (0%)
build/edit-post/index.min.js 31.1 kB +19 B (0%)
build/edit-site/index.min.js 57.6 kB +4 B (0%)
build/list-reusable-blocks/index.min.js 1.74 kB -1 B (0%)
build/style-engine/index.min.js 1.46 kB +5 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 982 B
build/annotations/index.min.js 2.76 kB
build/api-fetch/index.min.js 2.26 kB
build/autop/index.min.js 2.14 kB
build/blob/index.min.js 475 B
build/block-directory/index.min.js 7.09 kB
build/block-directory/style-rtl.css 990 B
build/block-directory/style.css 991 B
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 126 B
build/block-library/blocks/audio/theme.css 126 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 84 B
build/block-library/blocks/avatar/style.css 84 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 482 B
build/block-library/blocks/button/editor.css 482 B
build/block-library/blocks/button/style-rtl.css 523 B
build/block-library/blocks/button/style.css 523 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 100 B
build/block-library/blocks/categories/style.css 100 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 103 B
build/block-library/blocks/code/style.css 103 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 187 B
build/block-library/blocks/comment-template/style.css 185 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 834 B
build/block-library/blocks/comments/editor.css 832 B
build/block-library/blocks/comments/style-rtl.css 632 B
build/block-library/blocks/comments/style.css 630 B
build/block-library/blocks/cover/editor-rtl.css 605 B
build/block-library/blocks/cover/editor.css 607 B
build/block-library/blocks/cover/style-rtl.css 1.57 kB
build/block-library/blocks/cover/style.css 1.55 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 253 B
build/block-library/blocks/file/style.css 254 B
build/block-library/blocks/file/view.min.js 346 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 948 B
build/block-library/blocks/gallery/editor.css 950 B
build/block-library/blocks/gallery/style-rtl.css 1.53 kB
build/block-library/blocks/gallery/style.css 1.53 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 384 B
build/block-library/blocks/group/editor.css 384 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 327 B
build/block-library/blocks/html/editor.css 329 B
build/block-library/blocks/image/editor-rtl.css 884 B
build/block-library/blocks/image/editor.css 882 B
build/block-library/blocks/image/style-rtl.css 627 B
build/block-library/blocks/image/style.css 630 B
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 463 B
build/block-library/blocks/latest-posts/style.css 462 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 507 B
build/block-library/blocks/media-text/style.css 505 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 705 B
build/block-library/blocks/navigation-link/editor.css 703 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation-submenu/view.min.js 423 B
build/block-library/blocks/navigation/editor-rtl.css 2 kB
build/block-library/blocks/navigation/editor.css 2.01 kB
build/block-library/blocks/navigation/style-rtl.css 2.17 kB
build/block-library/blocks/navigation/style.css 2.16 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 443 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 363 B
build/block-library/blocks/page-list/editor.css 363 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 317 B
build/block-library/blocks/paragraph/editor.css 317 B
build/block-library/blocks/paragraph/style-rtl.css 260 B
build/block-library/blocks/paragraph/style.css 260 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 493 B
build/block-library/blocks/post-comments-form/style.css 493 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/style-rtl.css 315 B
build/block-library/blocks/post-featured-image/style.css 315 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 282 B
build/block-library/blocks/post-template/style.css 282 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 326 B
build/block-library/blocks/pullquote/style.css 325 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 282 B
build/block-library/blocks/query-pagination/style.css 278 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 439 B
build/block-library/blocks/query/editor.css 439 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 409 B
build/block-library/blocks/search/style.css 406 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 464 B
build/block-library/blocks/shortcode/editor.css 464 B
build/block-library/blocks/site-logo/editor-rtl.css 488 B
build/block-library/blocks/site-logo/editor.css 488 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 322 B
build/block-library/blocks/spacer/editor.css 322 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 494 B
build/block-library/blocks/table/editor.css 494 B
build/block-library/blocks/table/style-rtl.css 611 B
build/block-library/blocks/table/style.css 609 B
build/block-library/blocks/table/theme-rtl.css 190 B
build/block-library/blocks/table/theme.css 190 B
build/block-library/blocks/tag-cloud/style-rtl.css 239 B
build/block-library/blocks/tag-cloud/style.css 239 B
build/block-library/blocks/template-part/editor-rtl.css 235 B
build/block-library/blocks/template-part/editor.css 235 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 678 B
build/block-library/blocks/video/editor.css 681 B
build/block-library/blocks/video/style-rtl.css 174 B
build/block-library/blocks/video/style.css 174 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 162 B
build/block-library/classic.css 162 B
build/block-library/common-rtl.css 1.02 kB
build/block-library/common.css 1.02 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/theme-rtl.css 719 B
build/block-library/theme.css 722 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/components/style-rtl.css 11.5 kB
build/components/style.css 11.5 kB
build/compose/index.min.js 12.5 kB
build/core-data/index.min.js 15.5 kB
build/customize-widgets/index.min.js 11.3 kB
build/customize-widgets/style-rtl.css 1.38 kB
build/customize-widgets/style.css 1.38 kB
build/data-controls/index.min.js 653 B
build/data/index.min.js 8.08 kB
build/date/index.min.js 32.1 kB
build/deprecated/index.min.js 507 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.7 kB
build/edit-navigation/index.min.js 16 kB
build/edit-navigation/style-rtl.css 3.99 kB
build/edit-navigation/style.css 4 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-post/style-rtl.css 6.94 kB
build/edit-post/style.css 6.94 kB
build/edit-site/style-rtl.css 8.36 kB
build/edit-site/style.css 8.34 kB
build/edit-widgets/index.min.js 16.5 kB
build/edit-widgets/style-rtl.css 4.34 kB
build/edit-widgets/style.css 4.34 kB
build/editor/index.min.js 41.6 kB
build/editor/style-rtl.css 3.62 kB
build/editor/style.css 3.61 kB
build/element/index.min.js 4.68 kB
build/escape-html/index.min.js 537 B
build/experiments/index.min.js 868 B
build/format-library/index.min.js 6.77 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.64 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.77 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.78 kB
build/keycodes/index.min.js 1.83 kB
build/list-reusable-blocks/style-rtl.css 835 B
build/list-reusable-blocks/style.css 835 B
build/media-utils/index.min.js 2.93 kB
build/notices/index.min.js 963 B
build/nux/index.min.js 2.06 kB
build/nux/style-rtl.css 732 B
build/nux/style.css 728 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.22 kB
build/preferences/index.min.js 1.3 kB
build/primitives/index.min.js 933 B
build/priority-queue/index.min.js 1.58 kB
build/react-i18n/index.min.js 696 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.74 kB
build/reusable-blocks/index.min.js 2.21 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.6 kB
build/server-side-render/index.min.js 1.61 kB
build/shortcode/index.min.js 1.53 kB
build/token-list/index.min.js 644 B
build/url/index.min.js 3.61 kB
build/vendors/react-dom.min.js 38.5 kB
build/vendors/react.min.js 4.34 kB
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.18 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.19 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@jasmussen
Copy link
Contributor

Nice, a big improvement, thanks for working on this:

Screenshot 2022-09-14 at 10 27 36

I don't think we should do the indent, though, as it breaks the vertical grid we're aiming for. Can we update the labels to be the new all-caps style as well? I tried myself replacing the Text component used for labels at the moment, with the StyledLabel version instead, but I ran into a wall with the component import. Possible?

@glendaviesnz
Copy link
Contributor Author

glendaviesnz commented Sep 14, 2022

@jasmussen thanks for reviewing, will look at implementing the suggested changes tomorrow - can you point me to a control that has the all caps style already?

@glendaviesnz
Copy link
Contributor Author

glendaviesnz commented Sep 14, 2022

@jasmussen I have made the suggested changes.

Screen Shot 2022-09-15 at 11 41 29 AM

I just copied the font control and used BaseControl.VisualLabel to get the uppercase as it looks like StyledLabel is not exported from components yet.

@jasmussen
Copy link
Contributor

Nice, thank you. I'd love a quick review by @jameskoster as he has the metrics on mind.

The icon looks bottom-aligned compared to the label, can it be centered vertically with it?

@jameskoster
Copy link
Contributor

Better, thank you! But there are a few bolts to tighten.


Screenshot 2022-09-15 at 10 39 53

The range doesn't seem to occupy the full container width – there's a gap between the grey track and the right-hand edge.


Screenshot 2022-09-15 at 10 42 55

Range height is 36px, can we make it 40px, with a 16px bottom margin?


Screenshot 2022-09-15 at 10 44 17

When you switch to a custom value, a gap appears on the left/right.


The label container has a 30px min-height. It should instead wrap the label (and consequently have an inherent height of 16px), then have a bottom margin of 8px to create the correct space between label + range.

Screenshot 2022-09-15 at 10 46 36


Screenshot 2022-09-15 at 10 49 10

The 'custom' icon for block spacing isn't aligned with the others.

@glendaviesnz
Copy link
Contributor Author

@jameskoster I think I have covered all those things off. There seems like quite a bit of white space now, but maybe that is how you want, or maybe I have missed something:

Screen Shot 2022-09-16 at 4 14 32 PM

@jameskoster
Copy link
Contributor

Thanks Glen.

The label is still a bit too tall:

Screenshot 2022-09-20 at 10 19 44

The spacing is based on a scheme @jasmussen has shared before:

Screenshot 2022-09-20 at 10 17 04

It looks a bit large here because the range visually occupies a relatively small vertical space. I don't think it's a deal-breaker, but I'll let Joen decide :)

@glendaviesnz
Copy link
Contributor Author

I think it is a bit closer:

Screen Shot 2022-09-23 at 2 42 38 PM

I had to do it without adding a bottom margin to the label though as this threw out the vertical alignment with the custom value icon on the right.

@jameskoster
Copy link
Contributor

@jasmussen How are you feeling about this? Visually it's better, but the spacing doesn't align to the grid correctly. I suspect it's tricky to get right due to the grid layout.

Screenshot 2022-09-23 at 10 04 08

@glendaviesnz I don't know if it's helpful but here's a Figma with everything spaced according to the grid.

@glendaviesnz
Copy link
Contributor Author

Thanks @jameskoster, yeh the grid layout makes it a bit trickier, but I should be able to get it much closer with this extra detail you have provided - public holiday here Monday though, but should be able to sort first thing Tuesday

@glendaviesnz
Copy link
Contributor Author

glendaviesnz commented Sep 26, 2022

@jameskoster I had to use some margins to get the spacing rather than the grid gaps as it isn't possible to specify different gaps on a per row basis (as far as I am aware). It it pretty close to the Figma design now - the following is the current layout on this PR pasted over the figma one:

figma

The range is about 0.5 pixels out, but this is the closest I could get it.

Copy link
Contributor

@jameskoster jameskoster left a comment

Choose a reason for hiding this comment

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

Thanks for your perseverance with this one Glen, it's nicely aligned to the grid now :)

I left a few comments, perhaps we can use variables for some of the values?

The last thing we need to decide on from the design perspective is whether to pursue the 40px control height for the ranges here. It does create a large gap. But if we reduce the height it will likely require tweaking other spacing values. What do you think @jasmussen ?

justify-content: left;
height: 16px;
Copy link
Contributor

Choose a reason for hiding this comment

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

$grid-unit-20.

@@ -82,8 +95,8 @@

.components-spacing-sizes-control__range-control {
grid-column: span 3;
padding-right: $grid-unit-10;
height: 30px;
height: 40px;
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we use $grid-unit-50 here? Unsure how the other control updates have specified their height.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

At the moment color indicator is the only component using that var, and it does a *0.5 on it to get 20px.

Copy link
Contributor

Choose a reason for hiding this comment

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

Perhaps it doesn't matter too much at this point. The Spacing Range component may need to be refactored a bit to align with other controls? cc @ciampo @mirka

Copy link
Contributor

Choose a reason for hiding this comment

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

Let's not use $grid-unit-50 — it's not something that we've been using much in @wordpress/components (color indicator is a legacy component and in this case a bit of an exception)

Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

Had a quick look at this PR and this file, noticed a few things:

  • We should use the __nextHasNoMarginBottom prop on RangeControl — this way the RangeControl component doesn't add any bottom margin by default, and it makes it easier to add spacing around it
  • The labelling situation of composite range controls + unit controls looks a bit messy, we should probably start allocating resources for working on Components: label multiple / composed inputs correctly #42630 (comment)
  • It looks like we're applying a few style overrides to RangeControl (most importantly, setting a 40px height) — these changes/necessities ideally should be discussed in a separate issue and applied directly to RangeControl instead of as a style override (cc'ing @mirka who has been working on updating control component sizes in the past months)

@@ -82,8 +95,8 @@

.components-spacing-sizes-control__range-control {
grid-column: span 3;
padding-right: $grid-unit-10;
height: 30px;
height: 40px;
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's not use $grid-unit-50 — it's not something that we've been using much in @wordpress/components (color indicator is a legacy component and in this case a bit of an exception)

@glendaviesnz
Copy link
Contributor Author

We should use the __nextHasNoMarginBottom prop on RangeControl

I have done this and adjusted things to maintain the same layout as before. The Range control adjustments were only ever temporary while @aaronrobertshaw was working on the new version of the control. I think we should merge this in as is if we want to get it into 6.1 and follow up on other things in separate issues as suggested

@priethor priethor added Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta and removed Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) labels Sep 28, 2022
Copy link
Member

@ramonjd ramonjd left a comment

Choose a reason for hiding this comment

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

Here's what I see in the post/site editors:

Screen Shot 2022-09-29 at 12 22 48 pm

The spacing between the label and above + below unlinked controls seems to be the same and not like the "After" image in the description.

Screen Shot 2022-09-29 at 12 31 35 pm

@ramonjd
Copy link
Member

ramonjd commented Sep 29, 2022

I have done this and adjusted things to maintain the same layout as before.

Or does this mean that my above comment isn't valid?

@glendaviesnz
Copy link
Contributor Author

Sorry @ramon the before and after had not kept up with the ongoing changes - have updated to

Screen Shot 2022-09-29 at 4 01 15 PM

which matches the Figma layout requested:

Screen Shot 2022-09-29 at 4 03 14 PM

Copy link
Member

@ramonjd ramonjd left a comment

Choose a reason for hiding this comment

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

LGTM
Thanks for the update @glendaviesnz !

@glendaviesnz glendaviesnz merged commit e8c1805 into trunk Sep 29, 2022
@glendaviesnz glendaviesnz deleted the fix/spacing-presets-layout branch September 29, 2022 03:36
@github-actions github-actions bot added this to the Gutenberg 14.3 milestone Sep 29, 2022
@ciampo
Copy link
Contributor

ciampo commented Sep 29, 2022

The Range control adjustments were only ever temporary while @aaronrobertshaw was working on the new version of the control. I think we should merge this in as is if we want to get it into 6.1 and follow up on other things in separate issues as suggested

Sure, my comments weren't mean to be a blocker — but still, it would be good to discuss any tweaks to RangeControl's design (like a new 40px height and any other vertical spacing adjustment) in a separate issue and apply those changes directly to the component (RangeControl and/or the new SliderControl that aaron has been working on)

Same goes for

The labelling situation of composite range controls + unit controls looks a bit messy, we should probably start allocating resources for working on #42630 (comment)

As we build more complex composite controls, we should really have a solid way of labelling such controls consistently across the editor

michalczaplinski pushed a commit that referenced this pull request Oct 3, 2022
…inked mode in order to better differentiate sides (#44141)
@michalczaplinski michalczaplinski removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 3, 2022
@michalczaplinski
Copy link
Contributor

Cherry-picked for the 6.1 release in #44656

ockham pushed a commit that referenced this pull request Oct 4, 2022
…inked mode in order to better differentiate sides (#44141)
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Oct 4, 2022
Package updates for bug and regression fixes:

* @wordpress/annotations: 2.17.3
* @wordpress/block-directory: 3.15.4
* @wordpress/block-editor: 10.0.4
* @wordpress/block-library: 7.14.4
* @wordpress/blocks: 11.16.4
* @wordpress/components: 21.0.4
* @wordpress/core-data: 5.0.4
* @wordpress/customize-widgets: 3.14.4
* @wordpress/data: 7.1.3
* @wordpress/data-controls: 2.17.3
* @wordpress/edit-post: 6.14.4
* @wordpress/edit-site: 4.14.5
* @wordpress/edit-widgets: 4.14.4
* @wordpress/editor: 12.16.4
* @wordpress/format-library: 3.15.4
* @wordpress/interface: 4.16.3
* @wordpress/keyboard-shortcuts: 3.15.3
* @wordpress/list-reusable-blocks: 3.15.4
* @wordpress/notices: 3.17.3
* @wordpress/nux: 5.15.4
* @wordpress/preferences: 2.9.4
* @wordpress/reusable-blocks: 3.15.4
* @wordpress/rich-text: 5.15.3
* @wordpress/server-side-render: 3.15.4
* @wordpress/style-engine: 1.0.3
* @wordpress/viewport: 4.15.3
* @wordpress/widgets: 2.15.4

References:
* [WordPress/gutenberg#44634 Gutenberg PR 44634] – Quote block: stop slash inserter popup showing in citation
* [WordPress/gutenberg#44630 Gutenberg PR 44630] – Query Loop: Fix condition for displaying 'parents' control
* [WordPress/gutenberg#44554 Gutenberg PR 44554] – Hide the Classic block in the Site Editor
* [WordPress/gutenberg#44594 Gutenberg PR 44594] – Fix navigation block console error
* [WordPress/gutenberg#44555 Gutenberg PR 44555] – Theme export: Fix broken spacingScale export
* [WordPress/gutenberg#44580 Gutenberg PR 44580] – Code Block: Add box-sizing to fix inconsistent layout
* [WordPress/gutenberg#44556 Gutenberg PR 44556] – Remove border from Global Styles previews
* [WordPress/gutenberg#44141 Gutenberg PR 44141] – Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides
* [WordPress/gutenberg#44453 Gutenberg PR 44453] – Preserve the generic signature of getEntityRecord and getEntityRecords through currying
* [WordPress/gutenberg#44504 Gutenberg PR 44504] – Theme.json: fix some outline properties doesn't work properly on the editor
* [WordPress/gutenberg#44516 Gutenberg PR 44516] – Add style engine to editor tsconfig references
* [WordPress/gutenberg#44523 Gutenberg PR 44523] – Query Loop Block: Rename Query Loop variations allowControls to allowedControls
* [WordPress/gutenberg#44520 Gutenberg PR 44520] – Post Featured Image: Fix application of default border style in editor
* [WordPress/gutenberg#44286 Gutenberg PR 44286] – Post Featured Image: Fix borders after addition of overlay feature
* [WordPress/gutenberg#44482 Gutenberg PR 44482] – Template Editor: Fix crashes due to undefined variables
* [WordPress/gutenberg#44480 Gutenberg PR 44480] – Template Parts: Prevent adding block in post editor or inside post template or content blocks
* [WordPress/gutenberg#44425 Gutenberg PR 44425] – Fix rotated image crop area aspect ratio
* [WordPress/gutenberg#44485 Gutenberg PR 44485] – Fix padding/margin visualizer accuracy
* [WordPress/gutenberg#44569 Gutenberg PR 44569] – Theme.json: Fix some shadow properties that do not work properly in the site editor
* [WordPress/gutenberg#44575 Gutenberg PR 44575] – ToggleGroupControl: Fix unselected icon color
* [WordPress/gutenberg#44526 Gutenberg PR 44526] – TokenInput Field: Try alternative approach to fix screen reader focus issue
* [WordPress/gutenberg#44506 Gutenberg PR 44506] – Edit Post: Optimize legacy post content layout
* [WordPress/gutenberg#44258 Gutenberg PR 44258] – Add layout styles from Post Content block to post editor

Follow-up to [54257] and [54335].

Props czapla, isabel_brison, wildworks, bernhard-reiter, hellofromTonya.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54383 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Oct 4, 2022
Package updates for bug and regression fixes:

* @wordpress/annotations: 2.17.3
* @wordpress/block-directory: 3.15.4
* @wordpress/block-editor: 10.0.4
* @wordpress/block-library: 7.14.4
* @wordpress/blocks: 11.16.4
* @wordpress/components: 21.0.4
* @wordpress/core-data: 5.0.4
* @wordpress/customize-widgets: 3.14.4
* @wordpress/data: 7.1.3
* @wordpress/data-controls: 2.17.3
* @wordpress/edit-post: 6.14.4
* @wordpress/edit-site: 4.14.5
* @wordpress/edit-widgets: 4.14.4
* @wordpress/editor: 12.16.4
* @wordpress/format-library: 3.15.4
* @wordpress/interface: 4.16.3
* @wordpress/keyboard-shortcuts: 3.15.3
* @wordpress/list-reusable-blocks: 3.15.4
* @wordpress/notices: 3.17.3
* @wordpress/nux: 5.15.4
* @wordpress/preferences: 2.9.4
* @wordpress/reusable-blocks: 3.15.4
* @wordpress/rich-text: 5.15.3
* @wordpress/server-side-render: 3.15.4
* @wordpress/style-engine: 1.0.3
* @wordpress/viewport: 4.15.3
* @wordpress/widgets: 2.15.4

References:
* [WordPress/gutenberg#44634 Gutenberg PR 44634] – Quote block: stop slash inserter popup showing in citation
* [WordPress/gutenberg#44630 Gutenberg PR 44630] – Query Loop: Fix condition for displaying 'parents' control
* [WordPress/gutenberg#44554 Gutenberg PR 44554] – Hide the Classic block in the Site Editor
* [WordPress/gutenberg#44594 Gutenberg PR 44594] – Fix navigation block console error
* [WordPress/gutenberg#44555 Gutenberg PR 44555] – Theme export: Fix broken spacingScale export
* [WordPress/gutenberg#44580 Gutenberg PR 44580] – Code Block: Add box-sizing to fix inconsistent layout
* [WordPress/gutenberg#44556 Gutenberg PR 44556] – Remove border from Global Styles previews
* [WordPress/gutenberg#44141 Gutenberg PR 44141] – Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides
* [WordPress/gutenberg#44453 Gutenberg PR 44453] – Preserve the generic signature of getEntityRecord and getEntityRecords through currying
* [WordPress/gutenberg#44504 Gutenberg PR 44504] – Theme.json: fix some outline properties doesn't work properly on the editor
* [WordPress/gutenberg#44516 Gutenberg PR 44516] – Add style engine to editor tsconfig references
* [WordPress/gutenberg#44523 Gutenberg PR 44523] – Query Loop Block: Rename Query Loop variations allowControls to allowedControls
* [WordPress/gutenberg#44520 Gutenberg PR 44520] – Post Featured Image: Fix application of default border style in editor
* [WordPress/gutenberg#44286 Gutenberg PR 44286] – Post Featured Image: Fix borders after addition of overlay feature
* [WordPress/gutenberg#44482 Gutenberg PR 44482] – Template Editor: Fix crashes due to undefined variables
* [WordPress/gutenberg#44480 Gutenberg PR 44480] – Template Parts: Prevent adding block in post editor or inside post template or content blocks
* [WordPress/gutenberg#44425 Gutenberg PR 44425] – Fix rotated image crop area aspect ratio
* [WordPress/gutenberg#44485 Gutenberg PR 44485] – Fix padding/margin visualizer accuracy
* [WordPress/gutenberg#44569 Gutenberg PR 44569] – Theme.json: Fix some shadow properties that do not work properly in the site editor
* [WordPress/gutenberg#44575 Gutenberg PR 44575] – ToggleGroupControl: Fix unselected icon color
* [WordPress/gutenberg#44526 Gutenberg PR 44526] – TokenInput Field: Try alternative approach to fix screen reader focus issue
* [WordPress/gutenberg#44506 Gutenberg PR 44506] – Edit Post: Optimize legacy post content layout
* [WordPress/gutenberg#44258 Gutenberg PR 44258] – Add layout styles from Post Content block to post editor

Follow-up to [54257] and [54335].

Props czapla, isabel_brison, wildworks, bernhard-reiter, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54383


git-svn-id: http://core.svn.wordpress.org/trunk@53942 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot pushed a commit to gilzow/wordpress-performance that referenced this pull request Oct 4, 2022
Package updates for bug and regression fixes:

* @wordpress/annotations: 2.17.3
* @wordpress/block-directory: 3.15.4
* @wordpress/block-editor: 10.0.4
* @wordpress/block-library: 7.14.4
* @wordpress/blocks: 11.16.4
* @wordpress/components: 21.0.4
* @wordpress/core-data: 5.0.4
* @wordpress/customize-widgets: 3.14.4
* @wordpress/data: 7.1.3
* @wordpress/data-controls: 2.17.3
* @wordpress/edit-post: 6.14.4
* @wordpress/edit-site: 4.14.5
* @wordpress/edit-widgets: 4.14.4
* @wordpress/editor: 12.16.4
* @wordpress/format-library: 3.15.4
* @wordpress/interface: 4.16.3
* @wordpress/keyboard-shortcuts: 3.15.3
* @wordpress/list-reusable-blocks: 3.15.4
* @wordpress/notices: 3.17.3
* @wordpress/nux: 5.15.4
* @wordpress/preferences: 2.9.4
* @wordpress/reusable-blocks: 3.15.4
* @wordpress/rich-text: 5.15.3
* @wordpress/server-side-render: 3.15.4
* @wordpress/style-engine: 1.0.3
* @wordpress/viewport: 4.15.3
* @wordpress/widgets: 2.15.4

References:
* [WordPress/gutenberg#44634 Gutenberg PR 44634] – Quote block: stop slash inserter popup showing in citation
* [WordPress/gutenberg#44630 Gutenberg PR 44630] – Query Loop: Fix condition for displaying 'parents' control
* [WordPress/gutenberg#44554 Gutenberg PR 44554] – Hide the Classic block in the Site Editor
* [WordPress/gutenberg#44594 Gutenberg PR 44594] – Fix navigation block console error
* [WordPress/gutenberg#44555 Gutenberg PR 44555] – Theme export: Fix broken spacingScale export
* [WordPress/gutenberg#44580 Gutenberg PR 44580] – Code Block: Add box-sizing to fix inconsistent layout
* [WordPress/gutenberg#44556 Gutenberg PR 44556] – Remove border from Global Styles previews
* [WordPress/gutenberg#44141 Gutenberg PR 44141] – Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides
* [WordPress/gutenberg#44453 Gutenberg PR 44453] – Preserve the generic signature of getEntityRecord and getEntityRecords through currying
* [WordPress/gutenberg#44504 Gutenberg PR 44504] – Theme.json: fix some outline properties doesn't work properly on the editor
* [WordPress/gutenberg#44516 Gutenberg PR 44516] – Add style engine to editor tsconfig references
* [WordPress/gutenberg#44523 Gutenberg PR 44523] – Query Loop Block: Rename Query Loop variations allowControls to allowedControls
* [WordPress/gutenberg#44520 Gutenberg PR 44520] – Post Featured Image: Fix application of default border style in editor
* [WordPress/gutenberg#44286 Gutenberg PR 44286] – Post Featured Image: Fix borders after addition of overlay feature
* [WordPress/gutenberg#44482 Gutenberg PR 44482] – Template Editor: Fix crashes due to undefined variables
* [WordPress/gutenberg#44480 Gutenberg PR 44480] – Template Parts: Prevent adding block in post editor or inside post template or content blocks
* [WordPress/gutenberg#44425 Gutenberg PR 44425] – Fix rotated image crop area aspect ratio
* [WordPress/gutenberg#44485 Gutenberg PR 44485] – Fix padding/margin visualizer accuracy
* [WordPress/gutenberg#44569 Gutenberg PR 44569] – Theme.json: Fix some shadow properties that do not work properly in the site editor
* [WordPress/gutenberg#44575 Gutenberg PR 44575] – ToggleGroupControl: Fix unselected icon color
* [WordPress/gutenberg#44526 Gutenberg PR 44526] – TokenInput Field: Try alternative approach to fix screen reader focus issue
* [WordPress/gutenberg#44506 Gutenberg PR 44506] – Edit Post: Optimize legacy post content layout
* [WordPress/gutenberg#44258 Gutenberg PR 44258] – Add layout styles from Post Content block to post editor

Follow-up to [54257] and [54335].

Props czapla, isabel_brison, wildworks, bernhard-reiter, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54383


git-svn-id: https://core.svn.wordpress.org/trunk@53942 1a063a9b-81f0-0310-95a4-ce76da25c4cd
ootwch pushed a commit to ootwch/wordpress-develop that referenced this pull request Nov 4, 2022
Package updates for bug and regression fixes:

* @wordpress/annotations: 2.17.3
* @wordpress/block-directory: 3.15.4
* @wordpress/block-editor: 10.0.4
* @wordpress/block-library: 7.14.4
* @wordpress/blocks: 11.16.4
* @wordpress/components: 21.0.4
* @wordpress/core-data: 5.0.4
* @wordpress/customize-widgets: 3.14.4
* @wordpress/data: 7.1.3
* @wordpress/data-controls: 2.17.3
* @wordpress/edit-post: 6.14.4
* @wordpress/edit-site: 4.14.5
* @wordpress/edit-widgets: 4.14.4
* @wordpress/editor: 12.16.4
* @wordpress/format-library: 3.15.4
* @wordpress/interface: 4.16.3
* @wordpress/keyboard-shortcuts: 3.15.3
* @wordpress/list-reusable-blocks: 3.15.4
* @wordpress/notices: 3.17.3
* @wordpress/nux: 5.15.4
* @wordpress/preferences: 2.9.4
* @wordpress/reusable-blocks: 3.15.4
* @wordpress/rich-text: 5.15.3
* @wordpress/server-side-render: 3.15.4
* @wordpress/style-engine: 1.0.3
* @wordpress/viewport: 4.15.3
* @wordpress/widgets: 2.15.4

References:
* [WordPress/gutenberg#44634 Gutenberg PR 44634] – Quote block: stop slash inserter popup showing in citation
* [WordPress/gutenberg#44630 Gutenberg PR 44630] – Query Loop: Fix condition for displaying 'parents' control
* [WordPress/gutenberg#44554 Gutenberg PR 44554] – Hide the Classic block in the Site Editor
* [WordPress/gutenberg#44594 Gutenberg PR 44594] – Fix navigation block console error
* [WordPress/gutenberg#44555 Gutenberg PR 44555] – Theme export: Fix broken spacingScale export
* [WordPress/gutenberg#44580 Gutenberg PR 44580] – Code Block: Add box-sizing to fix inconsistent layout
* [WordPress/gutenberg#44556 Gutenberg PR 44556] – Remove border from Global Styles previews
* [WordPress/gutenberg#44141 Gutenberg PR 44141] – Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides
* [WordPress/gutenberg#44453 Gutenberg PR 44453] – Preserve the generic signature of getEntityRecord and getEntityRecords through currying
* [WordPress/gutenberg#44504 Gutenberg PR 44504] – Theme.json: fix some outline properties doesn't work properly on the editor
* [WordPress/gutenberg#44516 Gutenberg PR 44516] – Add style engine to editor tsconfig references
* [WordPress/gutenberg#44523 Gutenberg PR 44523] – Query Loop Block: Rename Query Loop variations allowControls to allowedControls
* [WordPress/gutenberg#44520 Gutenberg PR 44520] – Post Featured Image: Fix application of default border style in editor
* [WordPress/gutenberg#44286 Gutenberg PR 44286] – Post Featured Image: Fix borders after addition of overlay feature
* [WordPress/gutenberg#44482 Gutenberg PR 44482] – Template Editor: Fix crashes due to undefined variables
* [WordPress/gutenberg#44480 Gutenberg PR 44480] – Template Parts: Prevent adding block in post editor or inside post template or content blocks
* [WordPress/gutenberg#44425 Gutenberg PR 44425] – Fix rotated image crop area aspect ratio
* [WordPress/gutenberg#44485 Gutenberg PR 44485] – Fix padding/margin visualizer accuracy
* [WordPress/gutenberg#44569 Gutenberg PR 44569] – Theme.json: Fix some shadow properties that do not work properly in the site editor
* [WordPress/gutenberg#44575 Gutenberg PR 44575] – ToggleGroupControl: Fix unselected icon color
* [WordPress/gutenberg#44526 Gutenberg PR 44526] – TokenInput Field: Try alternative approach to fix screen reader focus issue
* [WordPress/gutenberg#44506 Gutenberg PR 44506] – Edit Post: Optimize legacy post content layout
* [WordPress/gutenberg#44258 Gutenberg PR 44258] – Add layout styles from Post Content block to post editor

Follow-up to [54257] and [54335].

Props czapla, isabel_brison, wildworks, bernhard-reiter, hellofromTonya.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54383 602fd350-edb4-49c9-b593-d223f7449a82
@femkreations femkreations added the Needs User Documentation Needs new user documentation label Jan 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs User Documentation Needs new user documentation [Type] Bug An existing feature does not function as intended
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

Update spacing in exploded padding control
8 participants