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

Block Styles: Make block style variations control scale for increased number of variations #57780

Conversation

aaronrobertshaw
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw commented Jan 11, 2024

Depends on:

Related:

What?

Updates the Block Styles UI to use a Dropdown to display available options.

Each block style variation option will also render a card indicating the background, text, and link colors set by that block style variation.

Given the possibility for block style variations to mix other styles with colors, or not set color styles at all, the combination of a "color card" and label was settled on.

Why?

With the expansion of block style variation functionality in #57908. It is anticipated that blocks will have an increasing number of block styles available to them. Currently, in the block inspector, each block style is given a button to enable its selection. As the number of available block style variations increases, so does the real estate these controls take up.

How?

  • Adds a new BlockStylesDropdown component in the block editor
  • Uses the new dropdown for the block styles control in the inspector

Testing Instructions

  1. Follow the steps in #57908 to register some additional styles and configure their colors in theme.json
  2. Edit a post, add a few blocks that have the newly registered block styles
  3. Select the block and switch to the Styles tab
  4. Try out the new block styles control
  5. Make sure that block style variations can be preview, applied, changed and removed

Screenshots or screencast

Screenshot 2024-02-29 at 5 26 11 pm

Demo:

Screen.Recording.2024-02-29.at.5.27.07.pm.mp4
Previous iteration of this PR description for the `CustomSelect` approach

What?

Leverages the new v2 CustomSelect and CustomSelectItem components to provide a custom select control for block style variations.

Initially, it was deemed to early to use these components and using a Dropdown might have been a better option. However, given the delays to the block style variations feature, the new v2 CustomSelect components are much closer to being ready and should land shortly before the variations work will in 6.6.

Why?

With the expansion of block style variation functionality in #57908. It is anticipated that blocks will have an increasing number of block styles available to them. Currently, in the block inspector, each block style is given a button to enable its selection. As the number of available block style variations increases, so does the real estate these controls take up.

How?

  • Makes the v2 CustomSelect components available via the components package's private APIs
  • Updates the v2 CustomSelect to accept and pass through custom popoverProps
  • Replaces the collection of buttons per block style variation with a CustomSelect control

Testing Instructions

  1. Follow the steps in #57908 to register some additional styles and configure their colors in theme.json
  2. Edit a post, add a few blocks that have the newly registered block styles
  3. Select the block and switch to the Styles tab
  4. Try out the new block styles control
  5. Make sure that block style variations can be preview, applied, changed and removed

Screenshots or screencast

Screenshot 2024-02-21 at 5 46 45 pm

Demo:

Screen.Recording.2024-02-21.at.5.45.29.pm.mp4
Original iteration of this PR description for the Dropdown approach

What?

This is an alternate approach to updating the block style variations control in the block inspector to better handle an increasing number of block styles.

Why?

With the expansion of block style variation functionality in #57908. It is anticipated that blocks will have an increasing number of block styles available to them. Currently, in the block inspector each block style is given a button to enable its selection. As the number of available block style variations increases so too does the real estate these controls takes up.

The initial approach in #57331 was to use a CustomSelectControl however that component (including its new v2 version) require some updates before it will be suitable. This PR offers a similar approach using a Dropdown instead.

How?

  • Adds access global styles data in the post editor so that color swatches can be provided within the control
  • Replaces the collection of buttons per style with a dropdown
  • Removes hardcoded group example block styles so they don't break the block style preview

Testing Instructions

  1. Follow the steps in #57908 to register some additional styles and configure their colors in theme.json
  2. Edit a post, add a few blocks that have the newly registered block styles
  3. Select the block and switch to the Styles tab
  4. Try out the new block styles control
  5. Make sure that block style variations can be preview, applied, changed and removed

Screenshots or screencast

Screenshot 2024-01-12 at 9 36 19 am

Demo:

Screen.Recording.2024-01-11.at.9.58.22.pm.mp4

@aaronrobertshaw aaronrobertshaw added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. [Feature] Block Style Variations Issues or PRs that are related to the style variations for blocks labels Jan 11, 2024
@aaronrobertshaw aaronrobertshaw self-assigned this Jan 11, 2024
Copy link

github-actions bot commented Jan 11, 2024

This pull request changed or added PHP files in previous commits, but none have been detected in the latest commit.

Thank you! ❤️

Copy link

github-actions bot commented Jan 11, 2024

Size Change: +389 B (0%)

Total Size: 1.71 MB

Filename Size Change
build/block-editor/index.min.js 252 kB +415 B (0%)
build/block-editor/style-rtl.css 15.3 kB -14 B (0%)
build/block-editor/style.css 15.3 kB -12 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 kB
build/api-fetch/index.min.js 2.32 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 578 B
build/block-directory/index.min.js 7.22 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/content-rtl.css 4.35 kB
build/block-editor/content.css 4.35 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 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 133 B
build/block-library/blocks/audio/theme.css 133 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 104 B
build/block-library/blocks/avatar/style.css 104 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 415 B
build/block-library/blocks/button/editor.css 414 B
build/block-library/blocks/button/style-rtl.css 627 B
build/block-library/blocks/button/style.css 626 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 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 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 421 B
build/block-library/blocks/columns/style.css 421 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 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.7 kB
build/block-library/blocks/cover/style.css 1.69 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 98 B
build/block-library/blocks/details/style.css 98 B
build/block-library/blocks/embed/editor-rtl.css 322 B
build/block-library/blocks/embed/editor.css 322 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 133 B
build/block-library/blocks/embed/theme.css 133 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/style-rtl.css 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 227 B
build/block-library/blocks/form-input/editor.css 227 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 340 B
build/block-library/blocks/form-submission-notification/editor.css 340 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 471 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 947 B
build/block-library/blocks/gallery/editor.css 952 B
build/block-library/blocks/gallery/style-rtl.css 1.72 kB
build/block-library/blocks/gallery/style.css 1.72 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 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 189 B
build/block-library/blocks/heading/style.css 189 B
build/block-library/blocks/html/editor-rtl.css 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 863 B
build/block-library/blocks/image/editor.css 862 B
build/block-library/blocks/image/style-rtl.css 1.6 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/theme-rtl.css 133 B
build/block-library/blocks/image/theme.css 133 B
build/block-library/blocks/image/view.min.js 1.54 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 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 505 B
build/block-library/blocks/media-text/style.css 503 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 668 B
build/block-library/blocks/navigation-link/editor.css 669 B
build/block-library/blocks/navigation-link/style-rtl.css 259 B
build/block-library/blocks/navigation-link/style.css 257 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/editor-rtl.css 2.25 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.24 kB
build/block-library/blocks/navigation/style.css 2.23 kB
build/block-library/blocks/navigation/view.min.js 1.1 kB
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 377 B
build/block-library/blocks/page-list/editor.css 377 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 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 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 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 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 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 666 B
build/block-library/blocks/post-featured-image/editor.css 662 B
build/block-library/blocks/post-featured-image/style-rtl.css 342 B
build/block-library/blocks/post-featured-image/style.css 342 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 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 409 B
build/block-library/blocks/post-template/style.css 408 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-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 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 125 B
build/block-library/blocks/preformatted/style.css 125 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 354 B
build/block-library/blocks/pullquote/style.css 354 B
build/block-library/blocks/pullquote/theme-rtl.css 174 B
build/block-library/blocks/pullquote/theme.css 174 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 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 237 B
build/block-library/blocks/quote/style.css 237 B
build/block-library/blocks/quote/theme-rtl.css 233 B
build/block-library/blocks/quote/theme.css 235 B
build/block-library/blocks/read-more/style-rtl.css 140 B
build/block-library/blocks/read-more/style.css 140 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 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 614 B
build/block-library/blocks/search/style.css 614 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 478 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 229 B
build/block-library/blocks/separator/style.css 229 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 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 754 B
build/block-library/blocks/site-logo/editor.css 754 B
build/block-library/blocks/site-logo/style-rtl.css 204 B
build/block-library/blocks/site-logo/style.css 204 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 678 B
build/block-library/blocks/social-links/editor.css 678 B
build/block-library/blocks/social-links/style-rtl.css 1.49 kB
build/block-library/blocks/social-links/style.css 1.48 kB
build/block-library/blocks/spacer/editor-rtl.css 350 B
build/block-library/blocks/spacer/editor.css 350 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 395 B
build/block-library/blocks/table/editor.css 395 B
build/block-library/blocks/table/style-rtl.css 639 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 152 B
build/block-library/blocks/table/theme.css 152 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 403 B
build/block-library/blocks/template-part/editor.css 403 B
build/block-library/blocks/template-part/theme-rtl.css 107 B
build/block-library/blocks/template-part/theme.css 107 B
build/block-library/blocks/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 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 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 185 B
build/block-library/blocks/video/style.css 185 B
build/block-library/blocks/video/theme-rtl.css 133 B
build/block-library/blocks/video/theme.css 133 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12.3 kB
build/block-library/editor.css 12.3 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 216 kB
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.8 kB
build/block-library/style.css 14.7 kB
build/block-library/theme-rtl.css 707 B
build/block-library/theme.css 713 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.6 kB
build/commands/index.min.js 15.6 kB
build/commands/style-rtl.css 921 B
build/commands/style.css 918 B
build/components/index.min.js 226 kB
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.8 kB
build/compose/index.min.js 12.6 kB
build/core-commands/index.min.js 2.77 kB
build/core-data/index.min.js 72.7 kB
build/customize-widgets/index.min.js 12.1 kB
build/customize-widgets/style-rtl.css 1.32 kB
build/customize-widgets/style.css 1.32 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.93 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/index.min.js 25.1 kB
build/edit-post/style-rtl.css 5.63 kB
build/edit-post/style.css 5.62 kB
build/edit-site/index.min.js 212 kB
build/edit-site/style-rtl.css 15.3 kB
build/edit-site/style.css 15.3 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.21 kB
build/edit-widgets/style.css 4.21 kB
build/editor/index.min.js 61.8 kB
build/editor/style-rtl.css 5.43 kB
build/editor/style.css 5.43 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.89 kB
build/format-library/style-rtl.css 478 B
build/format-library/style.css 477 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.67 kB
build/interactivity/index.min.js 12.7 kB
build/interactivity/navigation.min.js 1.24 kB
build/interactivity/query.min.js 740 B
build/interactivity/router.min.js 1.29 kB
build/interactivity/search.min.js 618 B
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.74 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.11 kB
build/list-reusable-blocks/style-rtl.css 836 B
build/list-reusable-blocks/style.css 836 B
build/media-utils/index.min.js 2.9 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 2 kB
build/nux/style-rtl.css 735 B
build/nux/style.css 732 B
build/patterns/index.min.js 5.79 kB
build/patterns/style-rtl.css 540 B
build/patterns/style.css 539 B
build/plugins/index.min.js 1.8 kB
build/preferences-persistence/index.min.js 2.05 kB
build/preferences/index.min.js 2.82 kB
build/preferences/style-rtl.css 698 B
build/preferences/style.css 700 B
build/primitives/index.min.js 975 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 1 kB
build/react-i18n/index.min.js 623 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.72 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 10.4 kB
build/router/index.min.js 1.79 kB
build/server-side-render/index.min.js 1.95 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 2.08 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.72 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 957 B
build/warning/index.min.js 249 B
build/widgets/index.min.js 7.21 kB
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@aaronrobertshaw aaronrobertshaw changed the base branch from try/extending-block-style-variations to trunk January 24, 2024 06:31
@aaronrobertshaw aaronrobertshaw force-pushed the update/block-style-variations-ui branch from 4299abf to 8a8a5c9 Compare January 24, 2024 08:46
@aaronrobertshaw aaronrobertshaw changed the base branch from trunk to add/section-styling-via-block-styles January 24, 2024 08:49
@aaronrobertshaw
Copy link
Contributor Author

I've moved the UI updates here from being based on #56540 to #57908 as that approach seems the most promising.

Copy link

Flaky tests detected in 8a8a5c9.
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/7637638077
📝 Reported issues:

@aaronrobertshaw aaronrobertshaw force-pushed the add/section-styling-via-block-styles branch 2 times, most recently from e6ba6a7 to 79f5765 Compare February 1, 2024 02:19
@aaronrobertshaw aaronrobertshaw force-pushed the add/section-styling-via-block-styles branch from 08be716 to fb14f6b Compare February 6, 2024 08:35
@aaronrobertshaw aaronrobertshaw force-pushed the add/section-styling-via-block-styles branch 2 times, most recently from a694f89 to 1c8b54b Compare February 20, 2024 07:21
@aaronrobertshaw aaronrobertshaw force-pushed the update/block-style-variations-ui branch from 8a8a5c9 to ea76a86 Compare February 21, 2024 07:47
@aaronrobertshaw aaronrobertshaw removed the Needs Design Feedback Needs general design feedback. label Feb 21, 2024
@aaronrobertshaw
Copy link
Contributor Author

I've rebased this PR and switched the approach back to using the v2 CustomSelect components given the extended block style variations feature can now afford to wait for those components before landing.

@richtabor
Copy link
Member

I chatted with @mtias today about this.

I think we should add these as style selectors in the "Color" panel, above the color presets, rather than in the "Styles" panel, alongside any potential other styles. This would reduce potential UI confusion with group blocks that have the more traditional styles applied, and it also fits in visually with the efforts to add color (and typeset) presets to the editor.

I don't think I need the preview either, as it's easy enough to switch back to the default (the first one in the list).

CleanShot 2024-02-21 at 16 19 02

What do you think?

@aaronrobertshaw
Copy link
Contributor Author

Thanks for the feedback @richtabor 👍

What do you think?

Honestly, I'm not sure how the latest suggestion reduces confusion. I'm certainly more confused, so please bear with me 🙏

Block style variations can cover the full gamut of theme.json styling.

Yes, the examples to date were just using colors but they could be purely typographic, change only borders like the existing image rounded block style or a new "frame" style a theme author could create, or style everything (spacing, colors, typography, borders, inner elements, block types etc).

Given that, I don't personally think it makes sense to have them under Colors and assumed that is why block style variations resided separately to begin with.

This would reduce potential UI confusion with group blocks that have the more traditional styles applied

Can you expand on this for me? It sounds like you're suggesting that we conditionally separate block style variations and show some under the styles panel and others elsewhere (colors in this case).

After gradually getting some clarity on block style variations being the right mechanism for section styling it seems like we're moving away from that again and needing smaller subsets of styles within theme.json that can be mixed and matched properly.

I don't think I need the preview either, as it's easy enough to switch back to the default (the first one in the list).

I can remove the preview from the block style variations control if desired. I can see it providing a more complete picture of all of a block style variation's styles when it covers more than colors though.

@SaxonF
Copy link
Contributor

SaxonF commented Feb 22, 2024

I would +1 @aaronrobertshaw comment. A summary of the timeline so far. We started with focusing on just colours via colour sets/ways (basically what you've proposed here @richtabor ). We then moved in a direction to cover properties beyond colours. We then changed direction technically to make use of block style variations instead of introducing something new.

I think we've landed in a decent spot in that we have the flexibility of other properties if theme authors need it, but most importantly we are still solving the primary need which resolves around colours.

I think we continue making use of the existing block style variation picker, and if at a later date we decide to more prominently highlight colours included in the block style variations we can do that (much like we are doing for font/colours at the global variations level).

@aaronrobertshaw
Copy link
Contributor Author

I think we continue making use of the existing block style variation picker

Just to confirm, do you mean we should stick with the buttons for block style variations?

I'm happy to shelve this PR and revisit as required in the future. It could be a little premature to optimize the UI control for excessive numbers of block styles before we've run into that problem in the wild 🤷

@mtias
Copy link
Member

mtias commented Feb 22, 2024

We are talking about two related but different things here. The mechanism is just style variations, so the implementation is fine and can carry on. It's going to be presented based on what it contains, though. That's what #56604 aims to capture. So if a style variation only has color changes, it's presented as a color preset. That means in global styles it won't be within the "browse styles" but within the colors panel, where we have "color palette". Same for typography.

Check out the PR at #56622

Now in block instances we should follow this same organization. I think design wise we should use an element button and have the color presets on a flyout, not directly on the sidebar, which feels a bit overwhelming.

Given we don't yet have this organization, I don't think it should block this branch, but we should converge with #56622.

@SaxonF
Copy link
Contributor

SaxonF commented Feb 22, 2024

Just to confirm, do you mean we should stick with the buttons for block style variations?

No I meant stick with what you've built.

@aaronrobertshaw
Copy link
Contributor Author

Thanks for the continued discussion and patience here @mtias 👍

We are talking about two related but different things here.

Are the two things referred to theme style variations and block style variations?

The mechanism is just style variations, so the implementation is fine and can carry on.

This might be the bit that confuses me a little.

Style variations are generally the "theme" style variations, however the implementation here is for "block" style variations. They primarily address two different user pain points i.e. quickly creating a theme-level look and feel vs easily switching out styles across a section of a page, post, etc.

It's going to be presented based on what it contains, though. That's what #56604 aims to capture. So if a style variation only has color changes, it's presented as a color preset. That means in global styles it won't be within the "browse styles" but within the colors panel, where we have "color palette". Same for typography.

This is all related to theme style variations and a different scope to this PR (and its base PR).

Check out the PR at #56622

I did see that PR a couple of months back, and even worked on a proof of concept based on it, applying colorways and typesets in a mix and match way for block instances however the early feedback on that was the user problem was already solved by the work being done here on block style variations. I'll give it another fresh look though.

Now in block instances we should follow this same organization.

I'm not sure this makes as much sense at the block instance level as it does at the theme level in global styles.

Block style variations can be registered from multiple sources, core, themes, plugins etc. The complete set of block style variations might include variations that aren't purely color styles. That could lead to both the styles panel having some block style variation options and some under colors (or typography) yet we don't have a means of merging and applying multiple block style variations.

Having variations across different panels, or having seemingly unrelated controls impacting others sounds like a pretty sub par experience, so I'm not quite seeing just yet, how block style variations could converge with #56622.

My primary concern is making sure that whatever the grand plan is, the underlying implementation of block style variations doesn't cause problems in getting to the end goal. If the block style variations implementation is still relatively independent to #56622, which I think it is, it should be ok to move forward.


P.S. Can we rebrand all the various variations? 🙏

There seem to be a number of GitHub issues (e.g. #59186) and confusing discussions because of the term "variation" being used in multiple locations.

  • Block Variations
  • Style Variations (theme style variations)
  • Block Styles (which are referenced as variations in some places in the code and docs, probably to distinguish them from the rest of the "block styles" that are being processed)

@mtias
Copy link
Member

mtias commented Feb 23, 2024

@aaronrobertshaw of course! Appreciate the patience as well :)

It is all just style variations in the end (a theme.json shape) that is scoped to different things (i.e. globally to the site, a template part, a group/pattern, blocktypes) and in the future to things like templates and individual pages (i.e. a style that's applied to archives only, etc). We are going to need scoping mechanisms in the UI as these get to be created by a user, as well as scoping mechanisms in the theme definition (for example, the /styles/mystyle.json in a theme folder would need to gain some capabilities, perhaps a prefix /styles/block.mystyle.json or a scope key in the file definition) beyond the register function. The one thing I think is important is that it all happens in the same folder. But that's a separate part of the work, adding it as context to explain why it's all the same mechanism—shouldn't bottleneck the work here.

Agreed we need to group all of the disparate issues related to style variations, block variations, and everything in between.

Finally, for the specific UI here, I think the only thing we should tweak is that while the resting element is fine:

image

I think the dropdown (or flyout, probably), should use the full style variations card for clarity. Right now these seem to imply that it only affects colors, but it can affect any property. I'm also ok with iterating on this after merge if we are on the same page.

@aaronrobertshaw aaronrobertshaw changed the title [WIP] Block Styles: Make block style variations control scale for increased number of variations Block Styles: Make block style variations control scale for increased number of variations Feb 29, 2024
@aaronrobertshaw
Copy link
Contributor Author

After working through some further possible iterations using color cards within the UI, the following was settled upon:

Screenshot 2024-02-29 at 5 26 11 pm

The intent was to get as close as possible to the proposed color cards within the color panel. What stopped me from going further was that omitting labels became more awkward when color styles were omitted entirely, or were added by a user in Global Styles.

Take the example where a user applies the "Outline" block style to a Button block. By default, core doesn't define any colors for the Outline block style. That style needs a textual label to distinguish it from the default block style "Fill".

Now, after applying the block style, the user goes to Global Styles and defines some colors for the Outline block style. When they reselect their button block, that "Outline" block style option with the textual label would be replaced by a color card. Pretty confusing and less than ideal.

That brings us to the latest option consistently combining a color card with label but stacked vertically.

@aaronrobertshaw
Copy link
Contributor Author

Just noting that there is some work involving color cards happening in #59498. It would be good to align this PR with the results of that if possible.

@aaronrobertshaw
Copy link
Contributor Author

As noted on the main tracking issue, these UI updates will be put on hold for the time being. So for now I'll close this PR with a view to reopen down the road if it makes sense.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block Style Variations Issues or PRs that are related to the style variations for blocks [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants