show block toolbar programmatically gutenberg

[gsailland]

Hi
I am creating a block with InnerBlocks component.
If no content added to the InnerBlocks (and even with content in fact) it is very difficult to popup the block toolbar
I would like to add an iconbutton on top corner that will show the block floating toolbar
How can I tell the .block-editor-block-contextual-toolbar to show?
I don't see any method of the .wp-block in the inspector that would do that and the documentation of Block Controls: Block Toolbar and Settings Sidebar https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar/ is quite basic
Many thanks

[stokesman]

The block toolbar should show anytime a block is selected. It sounds like the block you are building is hard to select. Turning on the "Top Toolbar" option makes the toolbar visible at all times, but if a block is not selected, nothing shows in the toolbar.

It seems you need a way to make the block easy to select instead of a way to show the toolbar but maybe I'm missing something. It's been a while since you asked, are you still experiencing the difficulty with this?

[gsailland]

Yes I still have a problem with selecting the parent block.
Here is my code:
https://github.com/GregoireSailland/un-block-collection

[stokesman]

In your block the className prop coming back from useBlockProps is being overwritten.

	       <div { ...properties } className={alignmentClass,'background-wrapper'} /*onClick={($event)=>{

If you simply remove className={alignmentClass,'background-wrapper'} the block will become easily selectable. To add classes to the block make them a className property of an object passed to useBlockProps. It will return them merged with classes it's adding for the sake of making the block manipulable in the editor.

Btw, the hook is already going to give your block a class of "wp-block-un-block-background-wrapper" so probably don't need to add another one. You'd also want to pass any other props (like style) for your wrapper element through the useBlockProps hook as well. That way your wrapper could just be <div { ...properties }>.

See: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#block-wrapper-props

[gsailland]

Ah thank you so much. That was that easy!