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

SelectControl: remove margin overrides and add new opt-in prop #46448

Merged
merged 3 commits into from
Jan 6, 2023

Conversation

brookewp
Copy link
Contributor

@brookewp brookewp commented Dec 10, 2022

What?

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

Why?

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.

Additional Notes

Testing Instructions

1. The Site Editor:

  • NavigationInspector

    1. Edit the 'Header' template part or wherever you have a Navigation block
    2. Ensure you have more than one menu created
    3. Click on the Navigation block or add one if there isn't
    4. Click on the 'Open list view' icon in the block toolbar
    5. Ensure the space select element for menus is the same as before
    Screen Shot 2022-12-12 at 2 55 27 PM
  • TemplatePartAreaSelector

    1. Go to 'Template Parts'
    2. Create a custom template part by clicking 'Add New'
    3. Name it and click 'Create'
    4. Click on the name you gave at the top
    5. Ensure the space below the select element for 'Area' is the same as before
    Screen Shot 2022-12-09 at 1 20 38 PM
  • TemplatePartAdvancedControls

    1. Edit a template in the site editor
    2. Add a Template Part block
    3. Choose a template or start blank
    4. Go to 'Advanced' in the block inspector
    5. Look for labels 'Area' and 'HTML Element'
    6. Ensure the space below the select elements is the same as before
    Screen Shot 2022-12-12 at 3 03 10 PM
  • Color Picker

    1. Open site editor
    2. Click on the Global Styles icon → then on 'Colors'
    3. Click on Palette
    4. Click on a color
    5. Ensure the space below the select element is the same as before
    Screen Shot 2022-12-09 at 11 49 37 PM

2. The Block Editor:

  • DefaultStylePicker

    1. Comment out the following lines:

      if ( ! preferredStyle || preferredStyle === defaultStyleName ) {
      return null;
      }

    2. Add a Quote block to the editor

    3. Look for 'Default Style' label in the block inspector

    4. Ensure the space below the select element is the same as before

    Screen Shot 2022-12-12 at 3 05 00 PM
  • FontFamilyControl

    1. Add a block that has typography options (e.g. Paragraph block)
    2. Click on three dots menu next to 'Typography' label in the block inspector
    3. Choose 'Font Family'
    4. Ensure the space below the select element for 'Font' is the same as before
    Screen Shot 2022-12-12 at 3 06 10 PM
  • For ImageSizeControl

    1. Add image block
    2. Look for the select element under 'Image Size' label in block inspector
    3. Ensure the space below the select element is the same as before
    Screen Shot 2022-11-30 at 6 54 58 PM
  • ArchivesEdit

    1. Add Archives block
    2. Look for the select element under 'Group by:' label in block inspector
    3. Ensure the space below the select element is the same as before
    Screen Shot 2022-11-30 at 6 54 15 PM
  • AudioEdit

    1. Add Audio block
    2. Upload or add audio from the media library
    3. Look for the select element under the 'Preload' label in the block inspector
    4. Ensure the space below the select element is the same as before
    Screen Shot 2022-11-30 at 6 54 33 PM
  • CommentsInspectorControls

    1. Add Comments block
    2. Open the 'Advanced' section at the bottom of the block inspector
    3. Look for the select element under the 'HTML Element' label
    4. Ensure the space below the select element is the same as before
    Screen Shot 2022-11-30 at 9 31 27 PM
  • FileBlockInspector

    1. Add File block
    2. Upload / Add PDF from Media Library
    3. Look for the select element under the 'Link to' label in the block inspector
    4. Ensure the space below the select element is the same as before
    Screen Shot 2022-12-12 at 3 07 46 PM
  • GalleryEdit

    1. Add gallery block to editor and add media
    2. Ensure you have 'Gallery' selected through block navigation and not a single image
    3. Look for 'Link to' and 'Image Size' labels in block inspector
    4. Ensure space below select elements are the same as before
    Screen Shot 2022-12-12 at 3 09 31 PM
  • GalleryEdit V1

    I have tested this myself, and it's a bit involved to test, but here are the steps if using wp-env and Docker:

    1. In gutenberg/.wp-env.json, change the first line to:
      "core": "WordPress/WordPress#5.9"
    2. Start WordPress with npm run wp-env start
    3. Add Gutenberg 12.0 or lower to /.wp-env/{DOCKER-CONTAINER}/WordPress/wp-content/plugins
    4. Change the second line in `` to:
      plugins": [ ],
    5. Ensure the older version of Gutenberg is there but deactivated
    6. Run npx wp-env run cli wp option set use_balanceTags 1 to enable useBalanceTags
    7. Activate Gutenberg in plugins
    8. Add a Gallery block to the editor
    9. Look for the 'Link to' and 'Image Size' labels in the block inspector
    10. Ensure the space below select elements is the same as before
    Screen Shot 2022-12-09 at 5 58 30 PM
  • GroupEditControls

    1. Add Group block
    2. Open the 'Advanced' section at the bottom of the block inspector
    3. Look for a select element under the 'HTML Element' label
    4. Ensure the space below the select element is the same as before
    Screen Shot 2022-11-30 at 9 31 27 PM
  • PostAuthorEdit

    1. Add Post Author block
    2. Look for select elements under the 'Author' and 'Avatar size' labels in the block inspector
    3. Ensure the space below select elements is the same as before
    Screen Shot 2022-11-30 at 6 58 15 PM
  • QueryControls

    1. Add the Latest Posts block
    2. Look for the 'Order By' label under 'Sorting and filtering' in the block inspector
    3. Ensure the space below the select element is the same as before
    Screen Shot 2022-12-09 at 11 33 24 PM
  • DimensionControls

    1. Add Post Featured Block
    2. Add/upload image to block
    3. Click on three dots menu next to the 'Dimensions' label in the block inspector
    4. Select 'Image Size'
    5. Ensure the space below the 'Image Size' select element is the same as before
    Screen Shot 2022-12-12 at 3 11 21 PM
  • QueryContent & QueryInspectorControls

    There are a few components to test in the Query loop block inspector so this can be done in one shot:

    1. Add Query Loop block and select 'Start Blank'

    2. Click any variation

    3. Look for the following labels in the block inspector and ensure the below select elements' bottom spacing is the same as before:

      • 'Post Type'
      • 'Order By'
      • 'Sticky Posts'
    4. Next, go to the bottom of the block inspector and open the 'Advanced' section

    5. Look for the select element under the 'HTML ELement' label

    6. Ensure the space below the select element is the same as before

      Step 3 Step 7-9
      Screen Shot 2022-12-12 at 3 14 51 PM Screen Shot 2022-12-12 at 3 15 09 PM
  • TagCloudEdit

    1. Add Tag Cloud to the editor
    2. Look for a select element under the 'Taxonomy' label in the block inspector
    3. Ensure the space below the select element is the same as before
    Screen Shot 2022-12-12 at 4 25 38 PM
  • VideoSettings && SingleTrackEditor

    1. Add video block

    2. Upload/add video

    3. Look for the 'Preload' label in the block inspector

    4. Ensure the space below the select element is the same as before

    5. Click on the block and select 'Text tracks' from the toolbar

    6. Add text track (I used a sample I found here)

      Step 3 Step 7-8
      Screen Shot 2022-12-12 at 3 22 41 PM Screen Shot 2022-12-12 at 3 23 02 PM
  • PostTemplateForm

    1. In a page or post's inspector, look for 'Template'
    2. Click on the link to the right of it
    3. Ensure the space below the select element in the popover is the same as before
    Screen Shot 2022-12-12 at 3 24 07 PM

3. An older theme (e.g. Twenty Seventeen):

  • PostFormat && PostAuthorSelect

    1. Switch to an older theme (e.g. Twenty Seventeen)
    2. Edit a post and go to the Post settings sidebar
    3. Look for select elements under the labels 'Post Format' and 'Author'
    4. Ensure the space below select elements is the same as before
    Screen Shot 2022-12-12 at 3 32 14 PM Screen Shot 2022-12-09 at 3 43 51 PM
  • WidgetTypeSelector

    1. With the older theme still active, go to 'Appearance → Widgets'
    2. Click on the plus icon to add a 'Legacy Widget' block to one of the widget locations
    3. Ensure the space below the select element is the same as before
    Screen Shot 2022-12-12 at 3 32 58 PM

Storybook

  • Disabled

    1. Run storybook with this branch checked out
    2. See that bottom margin has been removed

    Screen Shot 2022-12-13 at 11 09 54 PM


Checklist template (if it helps for testing)

Site Editor:

  • NavigationInspector
  • TemplatePartAreaSelector
  • TemplatePartAdvancedControls
  • ColorPicker

Block Editor:

  • DefaultStylePicker
  • FontFamilyControl
  • ImageSizeControl
  • ArchivesEdit
  • AudioEdit
  • CommentsInspectorControls
  • FileBlockInspector
  • GalleryEdit
  • GalleryEdit V1
  • GroupEditControls
  • PostAuthorEdit
  • QueryControls
  • DimensionComtrols
  • QueryContent & QueryInspectorControls
    • OrderControl
    • StickyControl
  • TagCloudEdit
  • VideoSettings & SingleTrackEditor
  • ManageLocations
  • PostTemplateForm
  • PostTemplate
  • TagCloudEdit

With an older theme:

  • PostFormat & PostAuthorSelect
  • WidgetTypeSelector

Storybook

  • Disabled

@brookewp brookewp added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components labels Dec 10, 2022
@brookewp brookewp self-assigned this Dec 10, 2022
@github-actions
Copy link

github-actions bot commented Dec 10, 2022

Size Change: +63 B (0%)

Total Size: 1.32 MB

Filename Size Change
build/block-editor/index.min.js 182 kB +17 B (0%)
build/block-library/index.min.js 198 kB +19 B (0%)
build/components/index.min.js 203 kB -25 B (0%)
build/edit-post/index.min.js 34.6 kB +18 B (0%)
build/edit-site/index.min.js 64.9 kB +31 B (0%)
build/edit-site/style-rtl.css 9.08 kB +12 B (0%)
build/edit-site/style.css 9.08 kB +13 B (0%)
build/editor/index.min.js 44.1 kB +7 B (0%)
build/widgets/index.min.js 7.31 kB +35 B (0%)
build/widgets/style-rtl.css 1.18 kB -32 B (-3%)
build/widgets/style.css 1.18 kB -32 B (-3%)
ℹ️ 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 487 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 2.71 kB
build/block-editor/content.css 2.71 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-editor/style-rtl.css 14.7 kB
build/block-editor/style.css 14.7 kB
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 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 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 457 B
build/block-library/blocks/table/editor.css 457 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/editor-rtl.css 691 B
build/block-library/blocks/video/editor.css 694 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/editor-rtl.css 11.7 kB
build/block-library/editor.css 11.7 kB
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/style-rtl.css 11.6 kB
build/components/style.css 11.6 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 8.16 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.12 kB
build/edit-navigation/style.css 4.13 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/style-rtl.css 7.45 kB
build/edit-post/style.css 7.44 kB
build/edit-widgets/index.min.js 16.8 kB
build/edit-widgets/style-rtl.css 4.46 kB
build/edit-widgets/style.css 4.47 kB
build/editor/style-rtl.css 3.69 kB
build/editor/style.css 3.68 kB
build/element/index.min.js 4.93 kB
build/escape-html/index.min.js 548 B
build/experiments/index.min.js 882 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.13 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.94 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.26 kB
build/reusable-blocks/style-rtl.css 283 B
build/reusable-blocks/style.css 283 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.7 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/wordcount/index.min.js 1.06 kB

compressed-size-action

@brookewp brookewp marked this pull request as ready for review December 13, 2022 18:38
@brookewp brookewp requested review from mirka and chad1008 December 13, 2022 18:39
@brookewp brookewp force-pushed the update/selectcontrol-margin branch from 36aaa60 to 936c689 Compare December 14, 2022 07:10
width: 100%;
}
.components-select-control__input {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This CSS was removed because it wasn't being used (overwritten by other styles).

@@ -164,11 +164,12 @@
}

.wp-block-legacy-widget {
.components-base-control {
.wp-block-legacy-widget__selector-container {
width: 100%;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This override was added because of flex on the Placeholder fieldset, with no options on Placeholder to change that other than with CSS. So I added a div with a class to specify the style of this block and remove it from BaseControl. I could have added the class to WidgetTypeSelector, but it would be more code changes in two different files, so it seemed better to go this way.

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 job 👏 I especially like how you resolved the style hack in legacy-widget!

I actually learn a lot about Gutenberg functionality by going through your thoughtful testing instructions 😂 Thanks for that, too.

Comment on lines -114 to -117

${ StyledField } {
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.

🎉

packages/block-editor/src/components/font-family/index.js Outdated Show resolved Hide resolved
@@ -164,11 +164,12 @@
}

.wp-block-legacy-widget {
.components-base-control {
Copy link
Member

Choose a reason for hiding this comment

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

Good call to remove the hack 👍

}
} }
/>
<div className="wp-block-legacy-widget__selector-container">
Copy link
Member

Choose a reason for hiding this comment

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

Btw there is also a FlexBlock component you can use for this purpose. (Sorry for all these undiscoverable components 😅)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Don't be sorry! It's super valuable for me to know, and demonstrates why this project is such a great learning experience! 😄

@@ -31,6 +31,7 @@
- Lighten the border color on control components ([#46252](https://github.com/WordPress/gutenberg/pull/46252)).
- `Popover`: Prevent unnecessary paint when scrolling by using transform instead of top/left positionning ([#46187](https://github.com/WordPress/gutenberg/pull/46187)).
- `CircularOptionPicker`: Prevent unecessary paint on hover ([#46197](https://github.com/WordPress/gutenberg/pull/46197)).
- `ColorPicker` & `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom` ([#46448](https://github.com/WordPress/gutenberg/pull/46448)).
Copy link
Member

Choose a reason for hiding this comment

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

We can move this to the "Internal" section since it doesn't really affect consumers.

@brookewp brookewp force-pushed the update/selectcontrol-margin branch from 936c689 to 7a1f9d7 Compare January 4, 2023 03:45
@brookewp brookewp requested a review from mirka January 5, 2023 05:24
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.

Looking good! 🚀

@brookewp brookewp merged commit 59ce2c8 into trunk Jan 6, 2023
@brookewp brookewp deleted the update/selectcontrol-margin branch January 6, 2023 18:52
@github-actions github-actions bot added this to the Gutenberg 15.0 milestone Jan 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants