Ability to disable block popover through __experimentalUIParts.hasPopover option.

[yansern]

Description

This PR adds ability to disable block popover through the __experimentalUIParts.hasPopover option.

Why do we need this?

We are using blocks without the need for the block popover, block toolbar and everything around it. The implementation as seen in #18173 only hides them using CSS. While they are not visible visually, the components are still rendered, this causes accessibility issues. When user tabs through the interface, the buttons from the block toolbar is still being focused, even though it is not visible on the screen.

Example Usage:

<BlockList
	__experimentalUIParts={ {
		hasPopover: false,
	} }
/>

Test Instructions

We will use storybook to test if the block popover component isn't rendered when the hasPopover attribute is set to false. Here are the steps:

1. Inside the file storybook/stories/playground/index.js, modify the element <BlockList /> at line 49 to:

   <BlockList __experimentalUIParts={ { hasPopover: false } } />

2. Run npm run storybook:dev.
3. Go to Playground > Block Editor > Default.
4. Click on the first block (and type something if you like) in the editor.
5. There should be no block popover displayed.

Screenshot

Without hasPopover: false

With hasPopover: false

[ellatrix]

What will it be used for?

[yansern]

What will it be used for?

@ellatrix With PR #18173, parts of the block UI is hidden but they are still rendered. This causes accessibility issues, e.g. when a user is tabbing between elements on screen, suddenly a hidden element on the block toolbar gets focused even though it is not visible on the screen. It will be better to be able to prevent the entire toolbar from rendering when needed.

[ellatrix]

This seems fine to me. The only concern I have is that this is not tested. I've run into problems before with these options to disable things and the capturing toolbars not being used by any core blocks and then breaking it.

[yansern]

In this issue Automattic/wp-calypso#38635, we are currently hiding the toolbar using CSS but ideally if the toolbar can programmatically disabled, that will be better.

[yansern]

This seems fine to me. The only concern I have is that this is not tested.

@ellatrix I have added test instructions in the updated PR.

@jorgefilipecosta I have updated this PR from disabling the block toolbar hasToolbar to disabling the block popover hasPopover.

Let us know if there are any concerns to address, hopefully we can get this approved!

[ockham]

This is working nicely in my testing! 🎉

I left a few small suggestions that I think would make these changes more aligned with prior art 🙂

[ockham]

Looking good, and still working well.

Since this only modifies something __experimental, I think we can go ahead and merge, unless someone is strongly opposed (cc @ellatrix and @jorgefilipecosta).

[ellatrix]

Not sure what changed since I last saw this PR. What happens if the "top toolbar" option is enabled? I think the toolbar will still show in the main top toolbar no?

[yansern]

Just some context here for clarity, the current component tree looks like this:

BlockPopover
|_ BlockToolbar
|_ BlockBreadcrumb
|_ Inserter

Not sure what changed since I last saw this PR.

We realized that disabling the BlockToolbar isn't enough, so the scope of this PR has changed from disabling just the BlockToolbar to disabling the BlockPopover. And the option name has changed from from hasToolbar to hasPopover.

What happens if the "top toolbar" option is enabled? I think the toolbar will still show in the main top toolbar no?

Does your "top toolbar" refer to the BlockToolbar/BlockPopover? If so, the BlockToolbar/BlockPopover is enabled by default (as it is), it only doesn't show when hasPopover is set to false.