Fix gallery block toolbar overlap

[ehamwey]

Description

Gallery block toolbars were overlapping under the site header due to a missing class, this provides a workaround by always applying that css rule to each block toolbar.

Additional findings:

• With the coblocks plugin disabled, this behavior does not occur
• With the coblocks plugin enabled, all gallery toolbars (core and coblocks) are missing the components-accessible-toolbar class. This prevents the core css rule display: inline-flex from being applied, which fixes the overlap issue.

Screenshots

Before:

After:

Types of changes

CSS rule update

How has this been tested?

Locally, in-editor

Checklist:

• My code is tested
• My code follows accessibility standards
• My code has proper inline documentation
• I've included any necessary tests
• I've included developer documentation
• I've added proper labels to this pull request

[olafleur]

I was able to reproduce the fix. Good job! :)

[AnthonyLedesma]

Looks Good To Merge.

This issue was a bit strange in that the Toolbar component seems to have this missing class/style behavior when we are extending the existing toolbar on blocks with any custom controls.

This here is the spot in Gutenberg where the Toolbar is returned early without the 'components-accessible-toolbar' class.
https://github.com/WordPress/gutenberg/blob/7db6ba5cec54c64418600aa8f0e98088a0ba9cf4/packages/components/src/toolbar/index.js#L29-L42

Though the short-circuit is related to the toolbar label, this behavior exists when appending labels on all toolbars within CoBlocks.

[Mamaduka]

The issue is fixed in the Gutenberg plugin as well - WordPress/gutenberg#32424.