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

TextControl: remove margin overrides and add new opt-in prop (pt 2/2) #47158

Merged
merged 5 commits into from
Jan 27, 2023

Conversation

brookewp
Copy link
Contributor

@brookewp brookewp commented Jan 14, 2023

Part 2/2

What?

Added new opt-in prop __nextHasNoMarginBottom for usages of TextControl in the Gutenberg codebase and removed margin overrides.

This is part of #47157 but was separated due to small visual changes to each of the blocks/components in this PR.

Why?

These changes will result in less CSS used in favour of components.

Part of this project: #38730
The tl;dr is BaseControl has a margin-bottom which makes it difficult to reuse and results in inconsistent use.

How?

By removing margin overrides in the CSS and adding the prop __nextHasNoMarginBottom. As well as adding VStack and HStack (and sometimes replacing Flex with those) to remove additional CSS.

Additional Notes

packages/block-library/src/post-comment/edit.js has been deprecated. I looked at it in the editor, and it looks a bit broken as it is:

Screenshot 2023-01-11 at 12 16 16 PM

Adding the prop won't affect it by much, it shifts slightly down a pixel (similar to the legacy widget in the SelectControl PR, which we updated without adding additional overrides), so I added it here to be consistent.

Testing Instructions

Rather than verifying if the changes look the same as trunk, we'll need to make sure that these minor visual changes are okay or if we need to add CSS overrides to match perfectly to trunk.

Block Editor testing steps:

  • HierarchicalTermSelector

    1. Edit post
    2. Look for 'Categories' in block inspector
    3. Change line 40 to a lower number if you don't have more than 8 categories on your test site:
    4. Ensure the space below the text input for 'Search categories' looks the same as before
    5. Click on 'Add New Category'
    6. Ensure space below the text input for 'New category name' looks the same as before

      Screenshot 2023-01-10 at 7 21 11 PM
  • NonDefaultControls (DateFormatPicker)

    1. Add a Post Date block
    2. Toggle off 'default format' in the block inspector
    3. Choose 'Custom' format from the dropdown
    4. Verify spacing

    Before

    After
    Screenshot 2023-01-13 at 10 54 57 PM Screenshot 2023-01-13 at 10 55 02 PM
  • ImageURLInputUI

    1. Add an Image block and upload/add an image
    2. Click on the Image block toolbar to add a URL
    3. Click on the downward-facing arrow to view additional options
    4. Verify spacing

    Before

    After
    Screenshot 2023-01-13 at 11 03 57 PM Screenshot 2023-01-13 at 11 04 07 PM
  • SingleTrackEditor

    1. Add a Video block and upload/add video
    2. Click on 'Text tracks' in the toolbar
    3. Add or upload a .vtt text file (I used a sample I found here)
    4. Verify spacing

    Before

    After
    Screenshot 2023-01-13 at 11 26 12 PM Screenshot 2023-01-13 at 11 26 18 PM
  • SocialLinkEdit

    1. Add a Social Icons block to the editor
    2. Add any icon
    3. Look for 'Link label' in block inspector and see that there is a bit less space below, but it's more even
    4. Look for 'Link Rel' under 'Advanced'
    5. Ensure space below 'Link Rel' looks the same as trunk

    Before

    After
    Screenshot 2023-01-11 at 10 37 06 PM Screenshot 2023-01-11 at 10 37 11 PM

Site Editor testing steps:

  • CreateTemplatePartModal

    1. Open site editor
    2. Click on template parts
    3. Click plus icon to create a new template part
    4. Verify spacing

    Before

    After
    Screenshot 2023-01-13 at 11 06 48 PM Screenshot 2023-01-13 at 11 08 10 PM
  • TitleModal

    1. Edit a template in the site editor
    2. Add a Template Part block
    3. Choose start blank
    4. Verify spacing

    Before

    After
    Screenshot 2023-01-13 at 11 10 46 PM Screenshot 2023-01-13 at 11 09 40 PM

Storybook testing steps:

  • Placeholder

    1. npm run storybook:dev
    2. Open Placeholder component
    3. Verify spacing

    Before

    After
    Screenshot 2023-01-13 at 11 13 51 PM Screenshot 2023-01-13 at 11 14 12 PM

@brookewp brookewp added the [Type] Enhancement A suggestion for improvement. label Jan 14, 2023
@brookewp brookewp self-assigned this Jan 14, 2023
@brookewp brookewp requested a review from ajitbohra as a code owner January 14, 2023 07:46
@brookewp brookewp requested a review from ellatrix as a code owner January 14, 2023 07:46
@github-actions
Copy link

github-actions bot commented Jan 14, 2023

Size Change: -584 B (0%)

Total Size: 1.33 MB

Filename Size Change
build/block-editor/index.min.js 191 kB +5 B (0%)
build/block-editor/style-rtl.css 14.3 kB -32 B (0%)
build/block-editor/style.css 14.3 kB -38 B (0%)
build/block-library/blocks/video/editor-rtl.css 552 B -139 B (-20%) 🎉
build/block-library/blocks/video/editor.css 555 B -139 B (-20%) 🎉
build/block-library/editor-rtl.css 11.5 kB -111 B (-1%)
build/block-library/editor.css 11.5 kB -109 B (-1%)
build/block-library/index.min.js 200 kB +24 B (0%)
build/edit-site/index.min.js 63.4 kB -1 B (0%)
build/edit-site/style-rtl.css 9.49 kB -28 B (0%)
build/edit-site/style.css 9.5 kB -27 B (0%)
build/editor/index.min.js 45.2 kB +11 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 483 B
build/block-directory/index.min.js 7.16 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 3.66 kB
build/block-editor/content.css 3.66 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 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 90 B
build/block-library/blocks/archives/style.css 90 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 138 B
build/block-library/blocks/audio/theme.css 138 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 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 485 B
build/block-library/blocks/button/editor.css 485 B
build/block-library/blocks/button/style-rtl.css 532 B
build/block-library/blocks/button/style.css 532 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 121 B
build/block-library/blocks/code/style.css 121 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 199 B
build/block-library/blocks/comment-template/style.css 198 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 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 612 B
build/block-library/blocks/cover/editor.css 613 B
build/block-library/blocks/cover/style-rtl.css 1.57 kB
build/block-library/blocks/cover/style.css 1.56 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 138 B
build/block-library/blocks/embed/theme.css 138 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 353 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 984 B
build/block-library/blocks/gallery/editor.css 988 B
build/block-library/blocks/gallery/style-rtl.css 1.55 kB
build/block-library/blocks/gallery/style.css 1.55 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 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 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 829 B
build/block-library/blocks/image/editor.css 828 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 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/latest-comments/style-rtl.css 298 B
build/block-library/blocks/latest-comments/style.css 298 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 478 B
build/block-library/blocks/latest-posts/style.css 478 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 716 B
build/block-library/blocks/navigation-link/editor.css 715 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 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation/editor-rtl.css 2.13 kB
build/block-library/blocks/navigation/editor.css 2.14 kB
build/block-library/blocks/navigation/style-rtl.css 2.22 kB
build/block-library/blocks/navigation/style.css 2.2 kB
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB
build/block-library/blocks/navigation/view.min.js 447 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 376 B
build/block-library/blocks/page-list/editor.css 376 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 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 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 501 B
build/block-library/blocks/post-comments-form/style.css 501 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/editor-rtl.css 586 B
build/block-library/blocks/post-featured-image/editor.css 584 B
build/block-library/blocks/post-featured-image/style-rtl.css 318 B
build/block-library/blocks/post-featured-image/style.css 318 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-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 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 288 B
build/block-library/blocks/query-pagination/style.css 284 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 440 B
build/block-library/blocks/query/editor.css 440 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 149 B
build/block-library/blocks/rss/editor.css 149 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 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 490 B
build/block-library/blocks/site-logo/editor.css 490 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 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 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 332 B
build/block-library/blocks/spacer/editor.css 332 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 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 651 B
build/block-library/blocks/table/style.css 650 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 404 B
build/block-library/blocks/template-part/editor.css 404 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 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/style-rtl.css 179 B
build/block-library/blocks/video/style.css 179 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 162 B
build/block-library/classic.css 162 B
build/block-library/common-rtl.css 1.05 kB
build/block-library/common.css 1.05 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/style-rtl.css 12.4 kB
build/block-library/style.css 12.4 kB
build/block-library/theme-rtl.css 698 B
build/block-library/theme.css 703 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 50.4 kB
build/components/index.min.js 203 kB
build/components/style-rtl.css 11.6 kB
build/components/style.css 11.7 kB
build/compose/index.min.js 12.3 kB
build/core-data/index.min.js 15.9 kB
build/customize-widgets/index.min.js 11.7 kB
build/customize-widgets/style-rtl.css 1.41 kB
build/customize-widgets/style.css 1.41 kB
build/data-controls/index.min.js 663 B
build/data/index.min.js 7.95 kB
build/date/index.min.js 32.1 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.71 kB
build/edit-navigation/index.min.js 16.2 kB
build/edit-navigation/style-rtl.css 4.14 kB
build/edit-navigation/style.css 4.15 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 34.4 kB
build/edit-post/style-rtl.css 7.46 kB
build/edit-post/style.css 7.45 kB
build/edit-widgets/index.min.js 16.8 kB
build/edit-widgets/style-rtl.css 4.49 kB
build/edit-widgets/style.css 4.49 kB
build/editor/style-rtl.css 3.68 kB
build/editor/style.css 3.67 kB
build/element/index.min.js 4.93 kB
build/escape-html/index.min.js 548 B
build/experiments/index.min.js 870 B
build/format-library/index.min.js 7.2 kB
build/format-library/style-rtl.css 598 B
build/format-library/style.css 597 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.79 kB
build/keycodes/index.min.js 1.88 kB
build/list-reusable-blocks/index.min.js 2.14 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.99 kB
build/notices/index.min.js 977 B
build/plugins/index.min.js 1.95 kB
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.35 kB
build/primitives/index.min.js 960 B
build/priority-queue/index.min.js 1.59 kB
build/react-i18n/index.min.js 702 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.75 kB
build/reusable-blocks/index.min.js 2.27 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 10.8 kB
build/server-side-render/index.min.js 2.09 kB
build/shortcode/index.min.js 1.52 kB
build/style-engine/index.min.js 1.53 kB
build/token-list/index.min.js 650 B
build/url/index.min.js 3.69 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 1.09 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.31 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

justify="flex-end"
>
<FlexItem>
<VStack spacing="5">
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Added VStack with spacing to be consistent with other modals, as the spacing between the input and button wasn't the same as other modals in the site editor.

className="edit-site-create-template-part-modal__area-base-control"
>
<RadioGroup
<VStack spacing="4">
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I personally think that the new spacing looks more centered, but I could be wrong. I can add CSS to make it like trunk if others prefer.

Copy link
Member

Choose a reason for hiding this comment

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

Looks good to me 👍


.edit-site-create-template-part-modal__area-base-control .components-base-control__label {
margin: $grid-unit-20 0 $grid-unit-10;
cursor: auto;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Is there a reason why we'd use a text cursor here?

Copy link
Member

Choose a reason for hiding this comment

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

Wow this is interesting, I've never noticed it before. The standard WordPress forms.css adds a cursor: pointer to all labels:

I'm guessing the intent was to add an affordance that the labels are clickable. But unfortunately that is not always true, as is in this case (and some others, e.g. <progress>). So that's probably why they explicitly overrode the cursor: pointer here.

cc @ciampo FYI

@@ -1,18 +1,16 @@
.block-editor-date-format-picker {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

We can add CSS to make it the same as trunk, but there is a 20px space so we'd either have to use 16px, 24px, or possibly a grid unit subtracted by another in order to get 20px if we're okay to not use a single grid unit.

display: flex;
place-content: space-between;
margin-top: $grid-unit-40;
margin-top: $grid-unit-20;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Curious about when we should use a Spacer component instead of a margin like in this instance, but it seems like it could be debatable. :)

Copy link
Member

Choose a reason for hiding this comment

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

Personally I haven't really encountered a legitimate use case for Spacer!

In this case I want to make sure we aren't mixing margin and gap in a haphazard way:

margin-top being used in addition to a flex gap

I think it's fine to space the footer row using either margin or gap, but not both 😄

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Far enough! The reasoning here was to get closer to matching trunk. If the narrow gap is okay, I'd rather remove the margin altogether. Or add Spacer unless that's also weird to have a gap and Spacer. But then I know you'd like to avoid Spacer in general! 😅

Copy link
Member

@mirka mirka Jan 18, 2023

Choose a reason for hiding this comment

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

Sorry I wasn't clear, we should maintain the same amount (32px) of whitespace. The point is to achieve it "logically", with a separate VStack, or a single margin-top:

The footer positioned with a margin-top, or with a separate VStack wrapper

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for clarifying! I missed this comment earlier but my latest commit covers this now.

@@ -44,6 +44,7 @@ const Template: ComponentStory< typeof Placeholder > = ( args ) => {
<Placeholder { ...args }>
<div>
<TextControl
__nextHasNoMarginBottom
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Adding to stories, as we did with Disabled in a related PR. The spacing is also similar to what we did with the legacy widget in the SelectControl PR,

@github-actions
Copy link

github-actions bot commented Jan 14, 2023

Flaky tests detected in ac7ba5d.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4002185476
📝 Reported issues:

@brookewp brookewp changed the title TextControl: remove margin overrides and add new opt-in prop (pt 2/4) TextControl: remove margin overrides and add new opt-in prop (pt 2/2) Jan 14, 2023
Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

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

Good call to split the PRs!

It's nice to clean up all this CSS, but it's also nice to see the kinds of common UI patterns in the Gutenberg app. I think it will help inform our API design decisions.

Comment on lines -10 to -14
.block-editor-date-format-picker__custom-format-select-control {
&.components-base-control {
margin-bottom: 0;
}
}
Copy link
Member

Choose a reason for hiding this comment

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

It looks the BaseControl here is used merely for its implicit 8px margin-bottom properties (which is exactly the thing we're deprecating 😄). I think we can remove the BaseControl altogether and just wrap the CustomSelectControl and TextControl in a VStack.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Great find! I'll keep an eye out for stuff like this in the future

Comment on lines 112 to 114
.block-library-video-tracks-editor__single-track-editor-track-title,
.block-library-video-tracks-editor__single-track-editor-source-language {
flex: 1;
Copy link
Member

Choose a reason for hiding this comment

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

This looks like a use case for Grid rather than HStack, since we know we want two equal-width columns.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Awesome! I should have known there was a Grid component out there :) Thanks!

display: flex;
place-content: space-between;
margin-top: $grid-unit-40;
margin-top: $grid-unit-20;
Copy link
Member

Choose a reason for hiding this comment

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

Personally I haven't really encountered a legitimate use case for Spacer!

In this case I want to make sure we aren't mixing margin and gap in a haphazard way:

margin-top being used in addition to a flex gap

I think it's fine to space the footer row using either margin or gap, but not both 😄

<div className="block-library-video-tracks-editor__single-track-editor">
<VStack
className="block-library-video-tracks-editor__single-track-editor"
spacing="3"
Copy link
Member

Choose a reason for hiding this comment

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

One thing I noticed is that spacing=3 makes it a little hard to tell that the help text is associated with the items on top. It does seem like an insufficient amount of whitespace when help text is involved. I'll leave it up to you, but this might be a good time to switch this to the new grid spacing guidance, which would be spacing=4.

Insufficient spacing between help text for the control above and label text for the control below

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I agree! And nice, I love consistent spacing; sooo glad to see there are guidelines! 😍


.edit-site-create-template-part-modal__area-base-control .components-base-control__label {
margin: $grid-unit-20 0 $grid-unit-10;
cursor: auto;
Copy link
Member

Choose a reason for hiding this comment

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

Wow this is interesting, I've never noticed it before. The standard WordPress forms.css adds a cursor: pointer to all labels:

I'm guessing the intent was to add an affordance that the labels are clickable. But unfortunately that is not always true, as is in this case (and some others, e.g. <progress>). So that's probably why they explicitly overrode the cursor: pointer here.

cc @ciampo FYI

className="edit-site-create-template-part-modal__area-base-control"
>
<RadioGroup
<VStack spacing="4">
Copy link
Member

Choose a reason for hiding this comment

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

Looks good to me 👍

@brookewp brookewp force-pushed the update/textcontrol-margin-with-small-changes branch from 07cd8e6 to 74e2a4a Compare January 17, 2023 22:00
@brookewp brookewp requested a review from mirka January 17, 2023 22:01
@brookewp
Copy link
Contributor Author

brookewp commented Jan 18, 2023

@mirka, just to note, I also included the file packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js since your initial review and I've included testing steps at the top of the testing section.

I originally intended to include it in this PR due to some minor visual changes, but I ended up with it matching trunk. I just remembered that I needed to move it to part 1, but I merged that already.

However, in the spirit of part 2, it would be possible to remove most of the CSS (this has align-self: flex-start; on the 'Add New Category' button), but it would look a bit different:
Screenshot 2023-01-17 at 4 59 32 PM
But it's an option I could include if it's preferred. :)

@brookewp brookewp force-pushed the update/textcontrol-margin-with-small-changes branch from 749debf to ac7ba5d Compare January 25, 2023 02:04
Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

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

Great cleanup! 🔥 🧹

@ciampo
Copy link
Contributor

ciampo commented Jan 26, 2023

Always good to see more 🔴 than 🟢 in the diff! Thank you @brookewp for working on this!

@brookewp brookewp merged commit 493eac0 into trunk Jan 27, 2023
@brookewp brookewp deleted the update/textcontrol-margin-with-small-changes branch January 27, 2023 05:26
@github-actions github-actions bot added this to the Gutenberg 15.1 milestone Jan 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants