Make WordPress Core

Opened 18 months ago

Last modified 18 months ago

#56825 new defect (bug)

Customiser colour picker and popups broken in 6.1 RC1

Reported by: tecazwebdev's profile tecazwebdev Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Customize Keywords: reporter-feedback
Focuses: ui Cc:

Description

When using the customiser, and selecting a colour, using a colour picker, in the 6.1RC1, the colour selector hovers under the page, rendering it badly, and making it hard to make changes within the colour picker.

Here is how it looks in 6

https://www.bathroom-images.com/wp-content/uploads/2022/10/Wordpress_6.png

Here's how it looks in 6.1

https://www.bathroom-images.com/wp-content/uploads/2022/10/Wordpress_6__RC1.png

As you can see, it's obscured by the scrollbar, making the editing of colours impossible. It seems to happen to all of the popups for editing things in the customiser, killing usability.

https://www.bathroom-images.com/wp-content/uploads/2022/10/typography_6_1_RC1.png
Showing a typography selector drifting offscreen to the left, making it unusable.

I noticed this issue in Gutenberg releases before, when testing, so it's somewhere inside the Gutenberg part of the code.

Sorry I'm not technical enough to identify the cause.

Attachments (2)

Wordpress_6_1_RC1.PNG (1.7 MB) - added by tecazwebdev 18 months ago.
The popup in the customiser incorrectly placed
typography_6_1_RC1.PNG (1.7 MB) - added by tecazwebdev 18 months ago.

Change History (9)

@tecazwebdev
18 months ago

The popup in the customiser incorrectly placed

#1 follow-up: @pbiron
18 months ago

  • Keywords reporter-feedback added

Hi @tecazwebdev thanx for the ticket and welcome to trac!!!

What theme is used on the site in your screenshots? The reason I ask is that it appears that theme uses their own color picker (since those pickers are very different from those in WP core).

#2 in reply to: ↑ 1 ; follow-up: @tecazwebdev
18 months ago

Replying to pbiron:

Hi @tecazwebdev thanx for the ticket and welcome to trac!!!

What theme is used on the site in your screenshots? The reason I ask is that it appears that theme uses their own color picker (since those pickers are very different from those in WP core).#

This is using the Kadence theme. I have sent them a report too.

#3 in reply to: ↑ 2 @pbiron
18 months ago

Replying to tecazwebdev:

This is using the Kadence theme. I have sent them a report too.

I installed Kadence (free) v1.1.30 and can replicate the overlap you are reporting (and also confirmed that the pickers in question are specific to that theme).

It's possible that some change in the customizer CSS in 6.1 has caused this problem, so I'm keeping this ticket open for now. @westonruter are you aware of any such CSS changes?

#4 follow-up: @westonruter
18 months ago

I am not aware, but I haven't been following such changes explicitly.

#5 in reply to: ↑ 4 @pbiron
18 months ago

Replying to westonruter:

I am not aware, but I haven't been following such changes explicitly.

My apologies...I thought you were a component maintainer.

Pinging David, who is a maintainer :-) @dlh, see comment 3

#6 @dlh
18 months ago

I'm not aware of any relevant changes, either. The only recent change to the Customize-specific CSS files that I can see is [54188], which seems unlikely to have caused the issue.

I also looked through the Kadence theme and noticed that the color picker is using the <Popover> component, among others, from @wordpress/components (cool!). My guess would be that a change in the component library is having this side effect, but that's just a guess.

#7 @tecazwebdev
18 months ago

I have occasionally been testing out the Gutenberg updates, for the last few months, and this glitch presents itself on 6.0 / 6.0.3 with the current Gutenberg installed, so the break has occurred when Gutenberg was merged with 6.1 RC1.

Note: See TracTickets for help on using tickets.