WordPress.org

Make WordPress Core

#50689 closed defect (bug) (reported-upstream)

Visibility of RGBA values on gradient

Reported by: MarkS99 Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.5
Component: Editor Keywords:
Focuses: ui, accessibility, css Cc:

Description

When adding a gradient to a block, the RGBA values can not be seen in the

div.components-popover__content
 .components-color-picker__inputs-fields

See example image on Google Drive:
https://drive.google.com/file/d/114wEYZFYiaydsXyptfZVwp1wYnORShsS/view?usp=sharing
Problem occurs in WP Version 5.5-beta-2, not tested earlier versions.
System running OSX and tested in Chrome, Safari & Firefox. Not tested Windows browsers.

Attachments (3)

rgba-windows-chrome.jpg (35.3 KB) - added by sabernhardt 13 months ago.
RGBA inputs in Windows Chrome (hidden increment buttons show on hover/focus)
hsla-windows-firefox.jpg (40.8 KB) - added by sabernhardt 13 months ago.
HSLA inputs in Windows Firefox (increment buttons show automatically)
rgba-legend.jpg (57.2 KB) - added by sabernhardt 13 months ago.
visually-hidden legend

Download all attachments as: .zip

Change History (10)

@sabernhardt
13 months ago

RGBA inputs in Windows Chrome (hidden increment buttons show on hover/focus)

@sabernhardt
13 months ago

HSLA inputs in Windows Firefox (increment buttons show automatically)

@sabernhardt
13 months ago

visually-hidden legend

#1 @sabernhardt
13 months ago

  • Component changed from General to Editor
  • Focuses css added

@MarkS99 Thanks for the report!

It occurs on Windows browsers, too. The inputs are not large enough for the numbers plus the number-input increment buttons.

The simplest fix might be to add a min-width on the container.

.components-color-picker__inputs-wrapper {
    min-width: 25em;
}

I like 25em for larger screens (medium breakpoint up), though it might need to be 20em or a similar pixel value for narrower screens.

Also, the legends do not mention the alpha channel. Maybe they only need the "A" added to each abbreviation, but something like "Color value in RGB with alpha transparency" might give more meaning. The "a" input label is not as (wait for it) clear as it could be.

This ticket was mentioned in Slack in #core-editor by sabernhardt. View the logs.


13 months ago

#3 @desrosj
13 months ago

  • Milestone changed from Awaiting Review to 5.5

I’m going to move this to 5.5 because this is a particularly nasty little issue that pretty much renders these inputs useless, and it’s not yet clear if this is a regression in trunk or a preexisting issue. If anyone that has better knowledge of this and feels that this is not realistic, feel free to put to future release.

This ticket was mentioned in Slack in #core by whyisjake. View the logs.


13 months ago

#5 @whyisjake
13 months ago

I think we need to get this issue moved over to the Gutenberg repo. Let's make sure to tag Backport to WordPress core so that this lands in 5.5.

#7 @ocean90
12 months ago

  • Keywords needs-design-feedback removed
  • Milestone 5.5 deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

@sabernhardt Thanks for the issue, resolving as reported upstream.

Note: See TracTickets for help on using tickets.