Make WordPress Core

#54667 closed defect (bug) (fixed)

flickering Navigation Select Menu in FSE

Reported by: tinomueller's profile tinomueller Owned by:
Milestone: 5.9 Priority: normal
Severity: normal Version: 5.9
Component: Editor Keywords: needs-testing close
Focuses: ui, accessibility Cc:

Description

The Navigation Block option menu flickers when selected in header template. See attached GIF file, recorded with LiceCap at 8fps so the flicker looks like a slow whobble.

Attachments (4)

editor_flicker_bug.gif (645.6 KB) - added by tinomueller 21 months ago.
editor flicker bug
navigation-block-beta4.png (11.0 KB) - added by sabernhardt 21 months ago.
flickering issue - responsive size related.gif (2.2 MB) - added by tinomueller 21 months ago.
Editor flickers because of responsive class switching
Screen Shot 2022-02-02 at 2.16.09 PM.png (32.1 KB) - added by annezazu 20 months ago.
current navigation block

Change History (19)

@tinomueller
21 months ago

editor flicker bug

#1 follow-up: @sabernhardt
21 months ago

Hi and thanks for the report!

Could you add more details of how you discovered this flickering? It seems that you removed the Navigation block and then added a new one, but I'm not sure.

I have not been able to reproduce the error in Beta 4 with Windows browsers (Firefox and Chrome). The block options menu has changed somewhat since your version. I have a "Select menu" button (Menü auswählen) not shown in the GIF, and that is now centered along with the Navigation heading (but the other two buttons are aligned left).

This is likely an Editor issue and not Twenty Twenty-Two, yet I'll leave it in the Bundled Theme component until we confirm that.

#2 in reply to: ↑ 1 @tinomueller
21 months ago

I just opened Gutenberg and clicked into the header part w/o removeing or editing something. It was a out-of-the-box experience. Tested with newest Beta 5.9-beta4-52424.

Now i removed the navigation from the header template and added a empty new navigation. Same flickering again. With a existing navigation which contains a menu item it seems ok. It seem related to the responsive classes. I attached a new screen-capture made with LiceCap. My screen is 1920x1080px - no zoom (also in browser - Chrome).

Replying to sabernhardt:

Hi and thanks for the report!

Could you add more details of how you discovered this flickering? It seems that you removed the Navigation block and then added a new one, but I'm not sure.

I have not been able to reproduce the error in Beta 4 with Windows browsers (Firefox and Chrome). The block options menu has changed somewhat since your version. I have a "Select menu" button (Menü auswählen) not shown in the GIF, and that is now centered along with the Navigation heading (but the other two buttons are aligned left).

This is likely an Editor issue and not Twenty Twenty-Two, yet I'll leave it in the Bundled Theme component until we confirm that.

Last edited 21 months ago by tinomueller (previous) (diff)

@tinomueller
21 months ago

Editor flickers because of responsive class switching

#3 @audrasjb
21 months ago

  • Milestone changed from Awaiting Review to 5.9
  • Severity changed from major to normal

Moving for 5.9 consideration.

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


21 months ago

#5 @hellofromTonya
21 months ago

  • Milestone changed from 5.9 to 5.9.1

With RC1 happening in a couple of hours, moving this to 5.9.1 for investigation to determine where the root cause lies. Once identified, then it can be reported upstream in Gutenberg or TT2 for resolution with the fix backported to Core when fixed.

#6 @audrasjb
21 months ago

  • Keywords needs-testing added

It would be nice to test the issue on another block theme to see if it happens there too. If yes, then it's an issue in the Site Editor itself and needs to be fixed upstream (= Gutenberg repository).

Moving to 5.9.1 since 5.9 RC1 is released today.

#7 @tinomueller
21 months ago

can't reproduce it right now using the 5.9-RC2-52567 - clean installation. so it seems fixed.

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


21 months ago

#9 @ixkaito
20 months ago

Tested in 5.9-RC3-52601. Couldn't reproduce it because as @sabernhardt said, it seems that the UI has been changed.

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


20 months ago

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


20 months ago

#12 @audrasjb
20 months ago

  • Keywords close added

As per today's bug scrub, it looks like the issue was somehow fixed before 5.9 final release
Let’s get another test to confirm, then close the ticket as fixed.

@annezazu
20 months ago

current navigation block

#13 @annezazu
20 months ago

Just tested this with a brand new site with the TT2 theme using WordPress 5.9 and cannot replicate. I set my language to German in case there was an internationalization issue. As you can see, the UI has adjusted. From what I can see, this was originally likely due to how the placeholder reacted in small spaces. This has been improved ahead of 5.9 in this PR: https://github.com/WordPress/gutenberg/pull/37089

From my point of view, this can be resolved.

#14 @webcommsat
20 months ago

I do not get this issue any longer. I rechecked it on the test site where I did get it previously. Looks fixed.

#15 @sabernhardt
20 months ago

  • Component changed from Bundled Theme to Editor
  • Milestone changed from 5.9.1 to 5.9
  • Resolution set to fixed
  • Status changed from new to closed

Thanks for testing and linking to the PR!

Note: See TracTickets for help on using tickets.