Fix: Document Bar: Back button flickers by hbhalodia · Pull Request #76320 · WordPress/gutenberg

hbhalodia · 2026-03-09T13:59:35Z

What?

Closes #76279

Why?

PR fixes the button flicker issue.

How?

Detailed comment here - Document Bar: Back button flickers #76279 (comment)

Testing Instructions

Open page/post.
Create a normal and synced pattern.
Edit the patterns.
Check back button, it should have smooth animation.

Testing Instructions for Keyboard

None

Screenshots or screencast

Synced Pattern

Screen.Recording.2026-03-09.at.7.23.12.PM.mov

Content-Only pattern

Screen.Recording.2026-03-09.at.7.23.25.PM.mov

github-actions · 2026-03-09T13:59:46Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

t-hamano

Thanks for the PR!

I quote from #76279 (comment):

The parent rule .editor-document-bar .components-button applies transition: all 0.1s ease-out

Why does this exist in the first place? From what I've tested, it appears that the issue can be resolved simply by removing the following styles.

gutenberg/packages/editor/src/components/document-bar/style.scss

Lines 24 to 34 in a4866f0

    
           .components-button { 
        
           	border-radius: $grid-unit-05; 
        
           	@media not (prefers-reduced-motion) { 
        
           		transition: all 0.1s ease-out; 
        
           	} 
        
           	&:hover { 
        
           		background: $gray-200; 
        
           	} 
        
           }

We may want to check the following two PRs to make sure that removing these styles does not cause any visual issues.

hbhalodia · 2026-03-10T05:10:36Z

Why does this exist in the first place?

Yeah it makes sense as well, but it was also present in 6.9 which does not cause any issues, and it was added to provide the animation based on the comment here - #60113 (review)

If removing that CSS removes the animation, then we should not go with that approach. Because it was earlier working as expected without any flickers, if animation is that root cause then why we should have added in first place as you said.

t-hamano · 2026-03-10T07:13:57Z

I think this transition was added to apply motion only to the background color on hover. If so, the simplest approach might be to just change the property name.

diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss
index 418dda6acb2..0d637330885 100644
--- a/packages/editor/src/components/document-bar/style.scss
+++ b/packages/editor/src/components/document-bar/style.scss
@@ -25,7 +25,7 @@
                border-radius: $grid-unit-05;
 
                @media not (prefers-reduced-motion) {
-                       transition: all 0.1s ease-out;
+                       transition: background-color 0.1s ease-out;
                }
 
                &:hover {

hbhalodia · 2026-03-11T05:14:40Z

Thanks @t-hamano, I will update it and test it. Will update the PR as well.

hbhalodia · 2026-03-11T05:22:52Z

Hi @t-hamano, Have updated the PR with the change and tested to animate only for background-color and it fixed the flicker issue.

Thanks,

t-hamano

LGTM! Let's backport this to WP 7.0.

* Fix button flickering issue on document bar * Fix animate only background color property to fix flicker issue Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>

github-actions · 2026-03-11T06:33:44Z

I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: aab7148

This updates the pinned hash from the `gutenberg` from `9b8144036fa5faf75de43d4502ff9809fcf689ad` to `8c78d87453509661a9f28f978ba2c242d515563b`. The following changes are included: - Navigation Editor: Allow any blocks to be inserted by gating contentOnly insertion rules to section blocks (WordPress/gutenberg#76189) - Add `fetchpriority=low` to `IMG` tags in collapsed Details blocks (WordPress/gutenberg#76269) - Connectors: Add logo URL support for custom AI providers (WordPress/gutenberg#76190) - Cover Block: Add a playlist parameter to loop YouTube background videos. (WordPress/gutenberg#76004) - Connectors: Memoize getConnectors selector (WordPress/gutenberg#76339) - HTML Block: Fix broken layout (WordPress/gutenberg#76278) - Tests: Skip connector logo URL tests when AI Client is unavailable (WordPress/gutenberg#76343) - Navigation Overlay: Explicitly set fetchpriority for images (WordPress/gutenberg#76208) - Connectors: Show API key source for env vars and wp-config constants (WordPress/gutenberg#76355) - Connectors: Move API key validation and masking to REST dispatch level (WordPress/gutenberg#76327) - Connectors: Replace apiFetch with core-data store selectors (WordPress/gutenberg#76333) - Do not sync local attributes (WordPress/gutenberg#76267) - Add `fetchpriority=low` to `IMG` tags in collapsed Accordion Item blocks (WordPress/gutenberg#76336) - Implement disconnection debounce after initial connection (WordPress/gutenberg#76114) - Allow Post Content to be edited when 'Show template' is active and Post content is nested in a Template Part (WordPress/gutenberg#76305) - Fix: Document Bar: Back button flickers (WordPress/gutenberg#76320) - RTC: Move event hooks from editor to core-data (WordPress/gutenberg#76358) - fix(navigation): prevent right-justified submenu overflow in custom overlays (WordPress/gutenberg#76360) - Connectors: Add connectors registry for extensibility (WordPress/gutenberg#76364) - Connectors: Add empty state when no connectors are registered (WordPress/gutenberg#76375) - Temp: Disable RTC in the site editor (WordPress/gutenberg#76223) - Connectors: Add AI Experiments plugin callout with install/activate functionality (WordPress/gutenberg#76379) - Editor: Polish real-time collaboration presence UI and move Avatar to editor package (WordPress/gutenberg#75652) (WordPress/gutenberg#76365) - RTC: Add collaborator selection highlighting in rich text (WordPress/gutenberg#76107) - Sync changes from `wp_enqueue_global_styles()` to Gutenberg override (WordPress/gutenberg#76127) - [RTC] Fix performance regression on post save (WordPress/gutenberg#76370) - Media: Enable AVIF support for client-side uploads (WordPress/gutenberg#76371) - Connectors: Move plugin status computation to script module data (WordPress/gutenberg#76409) - Revisions: Skip rendered fields in REST API responses (WordPress/gutenberg#76347) - E2E Tests: Add connector setup flow tests with test AI provider (WordPress/gutenberg#76433) - RTC: Place sync connection modal in front of popover (WordPress/gutenberg#76431) - Connectors: Sync PHP code with WordPress Core (WordPress/gutenberg#76443) - Editor: Show own presence in collaborative editing sessions (WordPress/gutenberg#76413) (WordPress/gutenberg#76445) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/9b8144036fa5faf75de43d4502ff9809fcf689ad…8c78d87453509661a9f28f978ba2c242d515563b. Log created with: git log --reverse --format="- %s" 9b8144036fa5faf75de43d4502ff9809fcf689ad..8c78d87453509661a9f28f978ba2c242d515563b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. git-svn-id: https://develop.svn.wordpress.org/trunk@61988 602fd350-edb4-49c9-b593-d223f7449a82

This updates the pinned hash from the `gutenberg` from `9b8144036fa5faf75de43d4502ff9809fcf689ad` to `8c78d87453509661a9f28f978ba2c242d515563b`. The following changes are included: - Navigation Editor: Allow any blocks to be inserted by gating contentOnly insertion rules to section blocks (WordPress/gutenberg#76189) - Add `fetchpriority=low` to `IMG` tags in collapsed Details blocks (WordPress/gutenberg#76269) - Connectors: Add logo URL support for custom AI providers (WordPress/gutenberg#76190) - Cover Block: Add a playlist parameter to loop YouTube background videos. (WordPress/gutenberg#76004) - Connectors: Memoize getConnectors selector (WordPress/gutenberg#76339) - HTML Block: Fix broken layout (WordPress/gutenberg#76278) - Tests: Skip connector logo URL tests when AI Client is unavailable (WordPress/gutenberg#76343) - Navigation Overlay: Explicitly set fetchpriority for images (WordPress/gutenberg#76208) - Connectors: Show API key source for env vars and wp-config constants (WordPress/gutenberg#76355) - Connectors: Move API key validation and masking to REST dispatch level (WordPress/gutenberg#76327) - Connectors: Replace apiFetch with core-data store selectors (WordPress/gutenberg#76333) - Do not sync local attributes (WordPress/gutenberg#76267) - Add `fetchpriority=low` to `IMG` tags in collapsed Accordion Item blocks (WordPress/gutenberg#76336) - Implement disconnection debounce after initial connection (WordPress/gutenberg#76114) - Allow Post Content to be edited when 'Show template' is active and Post content is nested in a Template Part (WordPress/gutenberg#76305) - Fix: Document Bar: Back button flickers (WordPress/gutenberg#76320) - RTC: Move event hooks from editor to core-data (WordPress/gutenberg#76358) - fix(navigation): prevent right-justified submenu overflow in custom overlays (WordPress/gutenberg#76360) - Connectors: Add connectors registry for extensibility (WordPress/gutenberg#76364) - Connectors: Add empty state when no connectors are registered (WordPress/gutenberg#76375) - Temp: Disable RTC in the site editor (WordPress/gutenberg#76223) - Connectors: Add AI Experiments plugin callout with install/activate functionality (WordPress/gutenberg#76379) - Editor: Polish real-time collaboration presence UI and move Avatar to editor package (WordPress/gutenberg#75652) (WordPress/gutenberg#76365) - RTC: Add collaborator selection highlighting in rich text (WordPress/gutenberg#76107) - Sync changes from `wp_enqueue_global_styles()` to Gutenberg override (WordPress/gutenberg#76127) - [RTC] Fix performance regression on post save (WordPress/gutenberg#76370) - Media: Enable AVIF support for client-side uploads (WordPress/gutenberg#76371) - Connectors: Move plugin status computation to script module data (WordPress/gutenberg#76409) - Revisions: Skip rendered fields in REST API responses (WordPress/gutenberg#76347) - E2E Tests: Add connector setup flow tests with test AI provider (WordPress/gutenberg#76433) - RTC: Place sync connection modal in front of popover (WordPress/gutenberg#76431) - Connectors: Sync PHP code with WordPress Core (WordPress/gutenberg#76443) - Editor: Show own presence in collaborative editing sessions (WordPress/gutenberg#76413) (WordPress/gutenberg#76445) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/9b8144036fa5faf75de43d4502ff9809fcf689ad…8c78d87453509661a9f28f978ba2c242d515563b. Log created with: git log --reverse --format="- %s" 9b8144036fa5faf75de43d4502ff9809fcf689ad..8c78d87453509661a9f28f978ba2c242d515563b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. Built from https://develop.svn.wordpress.org/trunk@61988 git-svn-id: http://core.svn.wordpress.org/trunk@61270 1a063a9b-81f0-0310-95a4-ce76da25c4cd

Fix button flickering issue on document bar

7c8159b

hbhalodia self-assigned this Mar 9, 2026

github-actions bot added the [Package] Editor /packages/editor label Mar 9, 2026

hbhalodia added [Type] Bug An existing feature does not function as intended General Interface Parts of the UI which don't fall neatly under other labels. and removed [Package] Editor /packages/editor labels Mar 9, 2026

t-hamano reviewed Mar 10, 2026

View reviewed changes

Fix animate only background color property to fix flicker issue

a2d8e76

hbhalodia requested a review from t-hamano March 11, 2026 05:21

github-actions bot added the [Package] Editor /packages/editor label Mar 11, 2026

t-hamano approved these changes Mar 11, 2026

View reviewed changes

t-hamano added the Backport to WP 7.0 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Mar 11, 2026

t-hamano merged commit 9c3210d into WordPress:trunk Mar 11, 2026
45 checks passed

github-actions bot added this to the Gutenberg 22.8 milestone Mar 11, 2026

github-actions bot removed the Backport to WP 7.0 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Mar 11, 2026

github-actions bot added the Backported to WP Core Pull request that has been successfully merged into WP Core label Mar 11, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix: Document Bar: Back button flickers#76320

Fix: Document Bar: Back button flickers#76320
t-hamano merged 2 commits intoWordPress:trunkfrom
hbhalodia:fix/issue-76279

hbhalodia commented Mar 9, 2026

Uh oh!

github-actions bot commented Mar 9, 2026

Uh oh!

t-hamano left a comment

Uh oh!

hbhalodia commented Mar 10, 2026

Uh oh!

t-hamano commented Mar 10, 2026

Uh oh!

hbhalodia commented Mar 11, 2026

Uh oh!

hbhalodia commented Mar 11, 2026

Uh oh!

t-hamano left a comment

Uh oh!

Uh oh!

github-actions bot commented Mar 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	.components-button {
	border-radius: $grid-unit-05;

	@media not (prefers-reduced-motion) {
	transition: all 0.1s ease-out;
	}

	&:hover {
	background: $gray-200;
	}
	}

Conversation

hbhalodia commented Mar 9, 2026

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Synced Pattern

Content-Only pattern

Uh oh!

github-actions bot commented Mar 9, 2026

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

hbhalodia commented Mar 10, 2026

Uh oh!

t-hamano commented Mar 10, 2026

Uh oh!

hbhalodia commented Mar 11, 2026

Uh oh!

hbhalodia commented Mar 11, 2026

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Mar 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants