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

Update: PanelColorGradientSettings to use dropdowns #37067

Merged

Conversation

jorgefilipecosta
Copy link
Member

Alternative to: #37053

This PR updates PanelColorGradientSettings to be dropdown-based. The advantage when compared to #37053 is that all the blocks even the ones that use a custom color implementation (navigation, cover, social links, and even third-party) automatically get the new UI.

How has this been tested?

I verified the new color UI appears and works as expected on the paragraph, group, cover, navigation, and social links blocks.
I verified the global styles colors still work as before.

Screenshots

image
image
image
image

@jorgefilipecosta jorgefilipecosta added [Type] Enhancement A suggestion for improvement. [Feature] Blocks Overall functionality of blocks [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Colors Color management labels Dec 2, 2021
@github-actions
Copy link

github-actions bot commented Dec 2, 2021

Size Change: +583 B (0%)

Total Size: 1.13 MB

Filename Size Change
build/block-editor/index.min.js 140 kB +263 B (0%)
build/block-editor/style-rtl.css 14.5 kB +127 B (+1%)
build/block-editor/style.css 14.5 kB +129 B (+1%)
build/components/index.min.js 215 kB +49 B (0%)
build/edit-site/index.min.js 35.5 kB -27 B (0%)
build/edit-site/style-rtl.css 6.59 kB +20 B (0%)
build/edit-site/style.css 6.59 kB +22 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 960 B
build/admin-manifest/index.min.js 1.1 kB
build/annotations/index.min.js 2.75 kB
build/api-fetch/index.min.js 2.21 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 459 B
build/block-directory/index.min.js 6.28 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 58 B
build/block-library/blocks/audio/editor.css 58 B
build/block-library/blocks/audio/style-rtl.css 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 470 B
build/block-library/blocks/button/editor.css 470 B
build/block-library/blocks/button/style-rtl.css 560 B
build/block-library/blocks/button/style.css 560 B
build/block-library/blocks/buttons/editor-rtl.css 291 B
build/block-library/blocks/buttons/editor.css 291 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 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 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 90 B
build/block-library/blocks/code/style.css 90 B
build/block-library/blocks/code/theme-rtl.css 134 B
build/block-library/blocks/code/theme.css 134 B
build/block-library/blocks/columns/editor-rtl.css 210 B
build/block-library/blocks/columns/editor.css 208 B
build/block-library/blocks/columns/style-rtl.css 503 B
build/block-library/blocks/columns/style.css 502 B
build/block-library/blocks/comment-template/style-rtl.css 127 B
build/block-library/blocks/comment-template/style.css 127 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/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/cover/style-rtl.css 1.22 kB
build/block-library/blocks/cover/style.css 1.22 kB
build/block-library/blocks/embed/editor-rtl.css 488 B
build/block-library/blocks/embed/editor.css 488 B
build/block-library/blocks/embed/style-rtl.css 417 B
build/block-library/blocks/embed/style.css 417 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 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 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 322 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 966 B
build/block-library/blocks/gallery/editor.css 970 B
build/block-library/blocks/gallery/style-rtl.css 1.63 kB
build/block-library/blocks/gallery/style.css 1.62 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 159 B
build/block-library/blocks/group/editor.css 159 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 114 B
build/block-library/blocks/heading/style.css 114 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 810 B
build/block-library/blocks/image/editor.css 809 B
build/block-library/blocks/image/style-rtl.css 507 B
build/block-library/blocks/image/style.css 511 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B
build/block-library/blocks/latest-posts/editor.css 137 B
build/block-library/blocks/latest-posts/style-rtl.css 528 B
build/block-library/blocks/latest-posts/style.css 527 B
build/block-library/blocks/list/style-rtl.css 94 B
build/block-library/blocks/list/style.css 94 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 493 B
build/block-library/blocks/media-text/style.css 490 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 649 B
build/block-library/blocks/navigation-link/editor.css 650 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B
build/block-library/blocks/navigation-link/style.css 94 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-submenu/view.min.js 343 B
build/block-library/blocks/navigation/editor-rtl.css 1.91 kB
build/block-library/blocks/navigation/editor.css 1.91 kB
build/block-library/blocks/navigation/style-rtl.css 1.71 kB
build/block-library/blocks/navigation/style.css 1.7 kB
build/block-library/blocks/navigation/view.min.js 2.79 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 172 B
build/block-library/blocks/page-list/style.css 172 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 273 B
build/block-library/blocks/paragraph/style.css 273 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/style-rtl.css 446 B
build/block-library/blocks/post-comments-form/style.css 446 B
build/block-library/blocks/post-comments/style-rtl.css 507 B
build/block-library/blocks/post-comments/style.css 507 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 721 B
build/block-library/blocks/post-featured-image/editor.css 721 B
build/block-library/blocks/post-featured-image/style-rtl.css 153 B
build/block-library/blocks/post-featured-image/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 391 B
build/block-library/blocks/post-template/style.css 392 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 80 B
build/block-library/blocks/post-title/style.css 80 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 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 389 B
build/block-library/blocks/pullquote/style.css 388 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 273 B
build/block-library/blocks/query-pagination/style.css 269 B
build/block-library/blocks/query/editor-rtl.css 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 187 B
build/block-library/blocks/quote/style.css 187 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 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 397 B
build/block-library/blocks/search/style.css 398 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 245 B
build/block-library/blocks/separator/style.css 245 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 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 772 B
build/block-library/blocks/site-logo/editor.css 772 B
build/block-library/blocks/site-logo/style-rtl.css 165 B
build/block-library/blocks/site-logo/style.css 165 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 177 B
build/block-library/blocks/social-link/editor.css 177 B
build/block-library/blocks/social-links/editor-rtl.css 670 B
build/block-library/blocks/social-links/editor.css 669 B
build/block-library/blocks/social-links/style-rtl.css 1.32 kB
build/block-library/blocks/social-links/style.css 1.32 kB
build/block-library/blocks/spacer/editor-rtl.css 307 B
build/block-library/blocks/spacer/editor.css 307 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 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 146 B
build/block-library/blocks/tag-cloud/style.css 146 B
build/block-library/blocks/template-part/editor-rtl.css 560 B
build/block-library/blocks/template-part/editor.css 559 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 569 B
build/block-library/blocks/video/editor.css 570 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 857 B
build/block-library/common.css 856 B
build/block-library/editor-rtl.css 10 kB
build/block-library/editor.css 10 kB
build/block-library/index.min.js 163 kB
build/block-library/reset-rtl.css 474 B
build/block-library/reset.css 474 B
build/block-library/style-rtl.css 10.8 kB
build/block-library/style.css 10.8 kB
build/block-library/theme-rtl.css 672 B
build/block-library/theme.css 677 B
build/block-serialization-default-parser/index.min.js 1.09 kB
build/block-serialization-spec-parser/index.min.js 2.79 kB
build/blocks/index.min.js 46.3 kB
build/components/style-rtl.css 15.5 kB
build/components/style.css 15.5 kB
build/compose/index.min.js 10.9 kB
build/core-data/index.min.js 13.2 kB
build/customize-widgets/index.min.js 11.4 kB
build/customize-widgets/style-rtl.css 1.5 kB
build/customize-widgets/style.css 1.49 kB
build/data-controls/index.min.js 631 B
build/data/index.min.js 7.49 kB
build/date/index.min.js 31.9 kB
build/deprecated/index.min.js 485 B
build/dom-ready/index.min.js 304 B
build/dom/index.min.js 4.5 kB
build/edit-navigation/index.min.js 16 kB
build/edit-navigation/style-rtl.css 3.76 kB
build/edit-navigation/style.css 3.76 kB
build/edit-post/classic-rtl.css 492 B
build/edit-post/classic.css 494 B
build/edit-post/index.min.js 29.4 kB
build/edit-post/style-rtl.css 7.1 kB
build/edit-post/style.css 7.09 kB
build/edit-widgets/index.min.js 16.5 kB
build/edit-widgets/style-rtl.css 4.18 kB
build/edit-widgets/style.css 4.18 kB
build/editor/index.min.js 37.9 kB
build/editor/style-rtl.css 3.78 kB
build/editor/style.css 3.77 kB
build/element/index.min.js 3.29 kB
build/escape-html/index.min.js 517 B
build/format-library/index.min.js 6.58 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.63 kB
build/html-entities/index.min.js 424 B
build/i18n/index.min.js 3.71 kB
build/is-shallow-equal/index.min.js 501 B
build/keyboard-shortcuts/index.min.js 1.8 kB
build/keycodes/index.min.js 1.39 kB
build/list-reusable-blocks/index.min.js 1.72 kB
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.92 kB
build/notices/index.min.js 925 B
build/nux/index.min.js 2.08 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/plugins/index.min.js 1.84 kB
build/primitives/index.min.js 924 B
build/priority-queue/index.min.js 582 B
build/react-i18n/index.min.js 671 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.65 kB
build/reusable-blocks/index.min.js 2.22 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11 kB
build/server-side-render/index.min.js 1.57 kB
build/shortcode/index.min.js 1.49 kB
build/token-list/index.min.js 639 B
build/url/index.min.js 1.9 kB
build/viewport/index.min.js 1.05 kB
build/warning/index.min.js 248 B
build/widgets/index.min.js 7.15 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.04 kB

compressed-size-action

@shaunandrews
Copy link
Contributor

Very nice. This feels a lot more natural than the drill-down option explored earlier. Its also easier to use when editing a few colors back-to-back; There's no need to find a back button, or wait for transitions.

--

I noticed the Solid/Gradient toggle seems broken when first opening the color menu:
image

--

I think we should likely look at a few more tweaks:

  • Give the menu some more padding; It feels a little cramped right now.
  • The currently selected color in the sidebar should have a different state to help reinforce which color you're changing. Maybe keep the text blue (like hover) and add a grey-100 background color.
  • The menu might benefit from a title using the currently selected color, like "Background color."

image


.block-editor-panel-color-gradient-settings__item {
// @todo: this can be removed when https://github.com/WordPress/gutenberg/pull/37028 lands.
.component-color-indicator {
Copy link
Contributor

Choose a reason for hiding this comment

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

37028 has been merged, so these rules can be removed. That gets us to this point at least:
Screenshot 2021-12-02 at 16 59 51

The diagonal line is missing. I'm realizing that this diagonal is scoped to work only in global styles: https://github.com/WordPress/gutenberg/pull/36994/files#diff-448ace8cb198438b19f4fc13f3107589730cf0aea599c46fa935e87ff1b70816R54

Where's a good place to move that rule? The diagonal should be shown when a color is unset, and the transparent checkerboard can be shown when a color is explicitly transparent. Any thoughts?

Copy link
Member

Choose a reason for hiding this comment

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

The vertical alignment of the circles also seems off in the above capture

Copy link
Contributor

Choose a reason for hiding this comment

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

A fix for that was merged in #37028, I wonder if a rebase would fix it?

Copy link
Contributor

Choose a reason for hiding this comment

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

(Ignore this comment in case we're deleting this rule)

We should try to avoid using internal classnames for styling @wordpress/components (same as comment above)

Copy link
Member Author

Choose a reason for hiding this comment

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

We need this rule because of the empty line but the class enhancement was done.

@jorgefilipecosta jorgefilipecosta force-pushed the update/panel-color-gradient-settings-to-use-dropdowns branch from a513207 to a1c9467 Compare December 2, 2021 16:12
@pablohoneyhoney
Copy link

You are all too fast and had me jumping from one PR to the other 😄

Good notes from @shaunandrews above, some of which I list out below as well.

  • I believe the colors opened in pop over is fine as an interim path. It does at least relieve the footprint occupied today in favor of more contextual color editing/selection.
    This pop over could however benefit from some finessing in paddings and various details however (hex code position, swatches are larger than the ones in inspector, borders compared to the color picker, clear button, etc.). The notice/tip inherited styles are out of place. It seems the transparency was addressed in a separate PR but not applicable here as @jasmussen points out. Some refinement to do also in the gradients case (segmentation seems glitchy until I engage with it).

  • The overlap of the color picker is a bit troubling. It’s a bit convoluted visually but also functionally. Due to its position (could it be positioned below or the left side of the color pop over if triggered from this instance? Below can be an issue in large color options), and because I can’t move it (there’s no dragging affordance). It’s also frustrating when I click the canvas and everything resets to collapsed, provided I’m in color editing mode. Color picker only goes away when I select the color pop over.

Screen Shot 2021-12-02 at 10 50 04 AM

I'm personally also ok compromising some of the above in the name of 5.9, and iterate further later, but there's likely some challenging a11y aspects switching between these panels.

One temporary alt solution I don't love is to add a header to the pop over to close and drag.

LMK if the above resonates with you or if anything further context is needed.

@ciampo ciampo requested review from mirka and diegohaz December 2, 2021 16:39
@shaunandrews
Copy link
Contributor

One temporary alt solution I don't love is to add a header to the pop over to close and drag.

I briefly thought about this, but then considered we wouldn't be using a "menu" anymore. I think that might have more drastic implications to usability and accessibility. I'm not arguing against it, just that it would likely mean a different implementation, maybe?

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.

I’m assuming we’re mostly talking about things in SC 2.4.8 Location in regards to the a11y implications of these double popovers. (As opposed to the things we already support, e.g. focus management and keyboard operability.)

I agree it feels pretty reasonable when the popover content is minimal, but in other cases we may be pushing it. For example in this mobile viewport with Gradient options, we are basically looking at three layers of popover with an obstructed tab panel in between:

Block inspector for the Cover block in a mobile viewport, with nested color popovers

That’s a pretty deep stack to keep in your head, though it could be somewhat alleviated by things like #35292, or positioning the popovers in a way that makes the origins clearer. At least in the mobile use case though, it could be argued that the navigator approach in #36952 (or anything that reduces the popover stack) makes more sense. (I can't actually try it because the branch is already deleted.)

Maybe relevant is something like the Figma color flyout, which is designed in a way that doesn't require a secondary popover.

CleanShot.2021-12-03.at.04.11.55.mp4

{ children }
<ItemGroup isBordered isSeparated>
{ settings.map( ( setting, index ) => (
<Dropdown
Copy link
Contributor

Choose a reason for hiding this comment

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

It looks like the addition of the Dropdown wrapper here adds an extra element around each item inside the itemgroup. So without the dropdown you have this markup:

Screenshot 2021-12-03 at 11 10 35

With the extra wrapper, we have this:
Screenshot 2021-12-03 at 11 10 55

In terms of tabbing that doesn't seem to be a problem due to the tabindex properties. But the extra wrapper does mean this rule now is causing trouble:

Screenshot 2021-12-03 at 11 12 09

The rule is around the use of border for focus inside the itemgroup, making it transparent if it's the last child in an itemgroup. But because of the extra container, it's now adding transparent borders to every dropdown container which makes them all 1px taller. Compare this context:
Screenshot 2021-12-03 at 11 09 32

... with that of global styles:
Screenshot 2021-12-03 at 11 09 26

My instinct tells me the solution is to refactor how focus works inside the itemgroup, to not rely on those advanced selectors, but perhaps instead just use a pseudo element. That would also let us avoid the use of transparent borders, which I think are problematic anyway due to them being made opaque in high contrast modes.

But before I explore a fix for this in a separate PR, I wonder: @ciampo do you think my instinct above makes sense, or would there be a different or better way to fix this?

Copy link
Contributor

Choose a reason for hiding this comment

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

@jorgefilipecosta it looks like the ItemGroup component is designed to have a very specific structure of ItemGroup > Item (like ul > li) and that the border styles are designed for the DOM structure to be pretty specific. As noted above the addition of the Dropdown is causing a few small issues since the structure becomes ItemGroup > Dropdown > Item, making the border rules target the wrong element.

It's not problematic enough to block this PR, I think, but it's also not ideal.

Just to see if it was possible, I tried to see if it would work to move the Dropdown inside the Item. Like so:

			<ItemGroup isBordered isSeparated>
				{ settings.map( ( setting, index ) => (
					<Item
						key={ index }
						className="block-editor-panel-color-gradient-settings__item"
					>
						<Dropdown
							contentClassName="block-editor-panel-color-gradient-settings__dropdown"
							renderToggle={ ( { onToggle } ) => {
								return (
									<HStack
										justify="flex-start"
										onClick={ onToggle }
									>
										<FlexItem>
											<ColorIndicator
												colorValue={
													setting.gradientValue ??
													setting.colorValue
												}
											/>
										</FlexItem>
										<FlexItem>{ setting.label }</FlexItem>
									</HStack>
								);
							} }
							renderContent={ () => (
								<ColorGradientControl
									showTitle={ false }
									{ ...{
										colors,
										gradients,
										disableCustomColors,
										disableCustomGradients,
										__experimentalHasMultipleOrigins,
										__experimentalIsRenderedInSidebar,
										enableAlpha,
										...setting,
									} }
								/>
							) }
						/>
					</Item>
				) ) }
			</ItemGroup>

It doesn't totally work, it replaces the UnstyledButton with the Dropdown. But is there a way we could make it work? Any thoughts?

Copy link
Contributor

Choose a reason for hiding this comment

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

@jasmussen analysis is correct.

I've tried playing around with the markup a little, but I couldn't find any good solution — mainly trying to change the outline to something like:

ItemGroup
  Item
    Dropdown
      Button
        [content]

But that would mean that we'd need to apply most of the styles of <Item> to <Button> to achieve the same look&feel (and even then there could be some glitches)

I think that the best solution for now is to keep things as they are, and look into improving how ItemGroup and Item are styled directly at the source level.

@jasmussen jasmussen force-pushed the update/panel-color-gradient-settings-to-use-dropdowns branch from a1c9467 to a5951b4 Compare December 3, 2021 10:33
@jasmussen
Copy link
Contributor

I took the liberty of rebasing this branch, and pushing a small fix to add the diagonal indicator for unset colors:
Screenshot 2021-12-03 at 11 28 26

Per the comment here, I'll look separately at how/if we can fix the spacing issue separately in the itemgroup.

Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

I agree it feels pretty reasonable when the popover content is minimal, but in other cases we may be pushing it. For example in this mobile viewport with Gradient options, we are basically looking at three layers of popover with an obstructed tab panel in between:

I tend to agree with the points made by @mirka here as well

Comment on lines 42 to 49
.components-dropdown {
display: block;
}

// Allow horizontal overflow so the size-increasing color indicators don't cause a scrollbar.
.components-navigator-screen {
overflow-x: visible;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

We should not rely on internal components classnames, as they are not part of the public APIs and could change in the future.

A better approach would be to set a custom className in the specific context of the block editor's color panel, and then use that new custom classname to apply styles (both for dropdown and navigator screen)


// Allow horizontal overflow so the size-increasing color indicators don't cause a scrollbar.
.components-navigator-screen {
overflow-x: visible;
Copy link
Contributor

Choose a reason for hiding this comment

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

As @jasmussen mentioned here, we should be able to remove this rule safely


.block-editor-panel-color-gradient-settings__item {
// @todo: this can be removed when https://github.com/WordPress/gutenberg/pull/37028 lands.
.component-color-indicator {
Copy link
Contributor

Choose a reason for hiding this comment

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

(Ignore this comment in case we're deleting this rule)

We should try to avoid using internal classnames for styling @wordpress/components (same as comment above)

{ children }
<ItemGroup isBordered isSeparated>
{ settings.map( ( setting, index ) => (
<Dropdown
Copy link
Contributor

Choose a reason for hiding this comment

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

@jasmussen analysis is correct.

I've tried playing around with the markup a little, but I couldn't find any good solution — mainly trying to change the outline to something like:

ItemGroup
  Item
    Dropdown
      Button
        [content]

But that would mean that we'd need to apply most of the styles of <Item> to <Button> to achieve the same look&feel (and even then there could be some glitches)

I think that the best solution for now is to keep things as they are, and look into improving how ItemGroup and Item are styled directly at the source level.

@jorgefilipecosta jorgefilipecosta added the [Status] In Progress Tracking issues with work in progress label Dec 3, 2021
@jorgefilipecosta
Copy link
Member Author

Thank you all for the feedback it seems the technical changes are ok. I'm working on the design taking into account the feedback provided.

For planning purposes, Is this change supposed to be part of WP 5.9 or it is something for the future?

@jasmussen
Copy link
Contributor

I think what's in this branch is a vast improvement over what's shipping in trunk, and I'd personally love to see it.

@ciampo ciampo mentioned this pull request Dec 6, 2021
12 tasks
@youknowriad youknowriad added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Dec 6, 2021
@letasync
Copy link

letasync commented Dec 8, 2021

This is a welcome UI enhancement.
Recently I was also playing with color palette UI and had this in mind.
The problem I see with current suggestion is, its hiding the main content area. Anything which overlaps the main content area of editor will again create bad user experience.

color palette UI suggestion 01

@jorgefilipecosta jorgefilipecosta force-pushed the update/panel-color-gradient-settings-to-use-dropdowns branch from eddf8d7 to 9201bca Compare December 8, 2021 23:25
@jorgefilipecosta
Copy link
Member Author

Thank you all for the feedback! I tried to incorporate the design feedback.
This is what we have:

Untitled 13

image

I faced some challenges because of underlying issues on the ToggleGroupControl. I added "temporary solutions" in this PR so we can test things properly. All the changes related to this component will be extracted into separate PR's so we can discuss the changes in a more detailed and focused way. Please ignore changes related to this component from this PR.

Another issue is the custom gradient picker color popover not having a great sidebar behavior we will get that for "free" after #37115 is merged so also please ignore that until the other PR is merged.

@jasmussen
Copy link
Contributor

Took this for a spin, and high level this feels like a very big enhancement over what's shipping, where it's hard to figure out which color you're changing simply due to the multiple duplicated color palettes stacked.

colors

I think there's going to be room to improve this further. For example the "Clear" button remains a bit of an odd one, but this can be enhanced by the color panel becoming a tools panel.

I don't think we should remove the border around the popover, though. That full-bleed look works for the innermost color picker, and it might work for making the top swatch have that edge to edge look. But I think we should explore that separately, and keep the gray border in the mean time. That means this mockup from #35093 is probably the closest thing to target at this point.

@jorgefilipecosta jorgefilipecosta force-pushed the update/panel-color-gradient-settings-to-use-dropdowns branch 3 times, most recently from 9cb7fb6 to 2a58c4a Compare December 14, 2021 14:18
@jorgefilipecosta
Copy link
Member Author

Hi @jasmussen, @ciampo, @mirka thank you for the reviews.

I also keep being skeptical about the double popover approach — using @mirka's words:

On mobile, it is not ideal, on the next iteration, it is probably something we should work on.

I would still prefer if the comments that I left regarding styles and hardcoded classnames were addressed before merging, though (they shouldn't take long)

The suggestions regarding classes were applied.

@jorgefilipecosta jorgefilipecosta force-pushed the update/panel-color-gradient-settings-to-use-dropdowns branch from 2a58c4a to 087ebb2 Compare December 14, 2021 14:31
@WordPress WordPress deleted a comment from pumpi851 Dec 14, 2021
@WordPress WordPress deleted a comment from pumpi851 Dec 14, 2021
@jorgefilipecosta jorgefilipecosta force-pushed the update/panel-color-gradient-settings-to-use-dropdowns branch from 087ebb2 to 9cb9d65 Compare December 14, 2021 17:54
@jorgefilipecosta jorgefilipecosta merged commit 1ec8726 into trunk Dec 14, 2021
@jorgefilipecosta jorgefilipecosta deleted the update/panel-color-gradient-settings-to-use-dropdowns branch December 14, 2021 18:32
@github-actions github-actions bot added this to the Gutenberg 12.2 milestone Dec 14, 2021
@jorgefilipecosta
Copy link
Member Author

I had to skip two tests end to end tests because I'm having some trouble fixing them. The functionality works well it is the tests that need an update to account for the UI changes. I'm working on fixing the tests and should have a PR ready soon.

@priethor
Copy link
Contributor

priethor commented Dec 14, 2021

Beta 3 is being released as I write this message, and Beta 4 is not yet confirmed, so we should be mindful of the timeline and concerns about adding improvements so close to RC. As much as I’d personally like to have this improvement in 5.9, could we compromise by removing the Backport to WP label and releasing it in a minor version instead, unless feedback coming from Beta 3 suggests otherwise?

@mtias mtias added Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release and removed Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels Dec 14, 2021
@mtias
Copy link
Member

mtias commented Dec 14, 2021

I marked this one as backport to a minor release so we can follow up quickly. If during the remaining testing period of 5.9 this surfaces as an important pain point for people we can reconsider it since it's ready.

@Mamaduka
Copy link
Member

Cherry-picked for 5.9.1.

@Mamaduka Mamaduka removed the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Feb 16, 2022
Mamaduka pushed a commit that referenced this pull request Feb 16, 2022
Co-authored-by: jasmussen <joen@automattic.com>
@Humanify-nl
Copy link

Humanify-nl commented Feb 23, 2022

I hope this is the right place for this:

As a heavy user of the block editor, editing a lot of blocks per hour, I have one big issue with this change to the color tool:

It added two extra clicks to clear the color styles from blocks. One for text, one for background. This adds a lot of unnecessary interactions (and tiresome) when editing many blocks daily.

Solution?
Add a 'X or clear' icon next to the color previewer (not in the pop-over, but in the inspector panel) so we can quickly remove these colors. This used to be 2 clicks, now its 4 (and extra mouse movement).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Blocks Overall functionality of blocks [Feature] Colors Color management [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.