search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.35k stars 4.13k forks source link

Color Presets: Unexpected scroll to color presets when selecting a style variation #61841

Open andrewserong opened 4 months ago

andrewserong commented 4 months ago

Description

Related to https://github.com/WordPress/gutenberg/issues/61213 and possibly introduced in https://github.com/WordPress/gutenberg/pull/61334

While testing the new color presets in trunk, I noticed that if you select one of the color presets and then go to select a style variation, the first time you click the style variation, the site editor's browse mode side bar unexpectedly scrolls down to the already selected color preset.

Step-by-step reproduction instructions

  1. Open the site editor
  2. In the left hand sidebar of the browse mode, navigate to Styles
  3. Scroll down and select one of the color presets
  4. Then, scroll up and click on one of the style variations
  5. Notice that the sidebar scrolls down to the already selected color preset, instead of focus being placed on the style variation that the user clicked on
  6. If you then attempt to click on the style variation a second time, it works as expected

Screenshots, screen recording, code snippet

https://github.com/WordPress/gutenberg/assets/14988353/47f298fb-83de-4727-9359-7ec8f57710ed

Environment info

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

amitraj2203 commented 4 months ago

Hi @andrewserong, I think the bug mentioned in the issue is fixed in this PR. I also tried to replicate it but couldn't. Let me know if I'm missing anything.

andrewserong commented 3 months ago

Thanks @amitraj2203, but after re-testing trunk after #61617, this issue still appears to be present:

https://github.com/WordPress/gutenberg/assets/14988353/42a1b4fe-123f-4b20-b174-a1b7835bb5f3

In case it helps, I found it easier to reproduce on a smaller window size, e.g. a 13" laptop screen, where the Styles sidebar scrolls quite a long way. On larger screen sizes where both the style variations and color palettes are visible at the same time, the scroll issue doesn't appear to occur (I suspect because the elements are all visible?), so it's just when the other components aren't visible where the unexpected scroll seems to be happening.

richtabor commented 3 months ago

I'm pretty sure this existed before https://github.com/WordPress/gutenberg/pull/61334. Let's target a fix for 6.6.

Sourav61 commented 2 months ago

Hey @andrewserong, I tested the above issue and can reproduce this issue But I wanted to confirm whether the scroll on changing the style variation is expected or not.

I think that updating the style variation should automatically scroll to the colour palette associated as the next step so that we can confirm the colour palette and typography to be used

I will be working on the fix for the focus not being placed correctly on the style variation that the user clicked on.

andrewserong commented 2 months ago

Thanks for the ping!

But I wanted to confirm whether the scroll on changing the style variation is expected or not.

I believe the scroll is unexpected. In this case we can't know whether a user wishes to continue toggling through the style variations, so to me it would be unexpected to be scrolled immediately to another part of the UI as these screens aren't explicitly step based.

scruffian commented 2 months ago

I can no longer reproduce this, can you @andrewserong ?

andrewserong commented 2 months ago

Thanks for the ping! I can still reproduce this @scruffian. It can be a little tricky to reproduce if your theme only has a couple of presets as the issue only occurs when there's enough style variations and palettes that the buttons are out of view. To reproduce / emulate a theme that has a lot of presets, I've reduced my browser window down so that it's very short. I'm testing on Chrome on macOS. Here's how it's looking for me:

Gutenberg trunk

https://github.com/WordPress/gutenberg/assets/14988353/d758b424-470b-41c3-b6a0-658e8d6e497a

WP 6.6 RC 3 (without Gutenberg)

https://github.com/WordPress/gutenberg/assets/14988353/5db4f737-8a8f-4885-a462-8ca05d6e378b

In the above screengrabs, I select a style variation, then click the color palette and then it snaps back up to the style variation. But it also happens the other way around for me if I select a color palette first and then go to select a variation, it'll snap down to the color palette.