WordPress 7.0: Block Visibiltiy icon not removed from toolbar when a block is shown

[pbiron]

Description

Testing with 7.0-RC2, I see that when I hide a block, an icon is added to that block's row in the List View and another icon is added to the toolbar.

When I then show that same block, the icon disappears from the row in the List View and stays in the toolbar.

I find that confusing. I expected it disappear from the toolbar as well.

Step-by-step reproduction instructions

Here's a screenvid showing the steps I did.

blockvisibility-bug.mp4

Screenshots, screen recording, code snippet

No response

Environment info

WP 7.0-RC2, no GB
Chrome 146.0.7680.178
Win 11

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[pbiron]

Also, the Block Visibility DevNote says:

Controls are available in the block toolbar, block inspector sidebar, and command palette to launch the block visibility options modal. In List View, blocks with active visibility rules show icons that indicate which viewports they are hidden on.

I'm not seeing a control for block visibility in the block inspector sidebar. Where is the control supposed to be?

[Mustafabharmal]

I’m working on this issue. I traced the toolbar icon behavior and identified the stale state in the visibility toolbar component. I’m preparing a minimal fix so the toolbar icon is removed after a block is shown again, while preserving focus behavior when the visibility modal is open. I’ll open a PR shortly.

[t-hamano]

Thanks for the report, but please note that the current behaviour is intentional. See this comment:

gutenberg/packages/block-editor/src/components/block-visibility/viewport-toolbar.js

Lines 42 to 48 in c718e13

	/*
	* If the block visibility button has been shown, we don't want to
	* remove it from the toolbar until the toolbar is rendered again
	* without it. Removing it beforehand can cause focus loss issues.
	* It needs to return focus from whence it came, and to do that,
	* we need to leave the button in the toolbar.
	*/

[pbiron]

Thanx for the context @t-hamano. I now agree that if the control in the toolbar was used to show the the block again then the toolbar control should not be removed.

Would it be possible to remove the control from the toolbar as long as the control that showed it again was not the control in the toolbar? React is not my strong suit, so I don't know how easy that would be to do.