Description

In the Site Editor canvas, accessibility-only labels rendered by core blocks appear as visible text, breaking layouts that authors design around the block's compact frontend appearance.

There are two related but distinct cases:

1. Categories block — [data-visually-hidden] not styled in the editor

With displayAsDropdown: true and showLabel: false, the block renders:

<label for="blocks-category-select-1"
       class="<hash>__visually-hidden"
       data-visually-hidden="">Categories</label>

The <hash>__visually-hidden class is produced by CSS Modules and is paired with visually-hidden CSS — but that CSS Module stylesheet isn't loaded inside .editor-styles-wrapper, so the label renders as plain text in the canvas. The frontend hides it correctly.

The data-visually-hidden attribute looks intentional as a stable hook, but no rule actually uses it.

2. Navigation block — __description has no hide styling at all

When overlayMenu: "always", the block injects:

<div id="<uuid>-desc" class="wp-block-navigation__description">
  Navigation Menu: "<menu name>"
</div>

This element is referenced via aria-describedby on the toggle, so it must stay in the DOM, but it has no screen-reader-text, no data-visually-hidden, and no scoped hide styling — it just renders as visible text in the canvas, with no equivalent hidden render on the frontend overlay.

Expected

The editor canvas matches the frontend rendering: dropdown only for Categories, hamburger icon only for Navigation. Accessibility nodes remain in the DOM but are not visually rendered.

Actual

Both labels render as visible text in the canvas, pushing surrounding blocks out of place.

Workaround

Editor-scoped CSS via add_editor_style():

.editor-styles-wrapper .wp-block-navigation__description,
.editor-styles-wrapper [data-visually-hidden] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

Suggested fix

• Ship a global rule on [data-visually-hidden] (so the stable hook actually works regardless of whether a given stylesheet is loaded in a context). This also future-proofs other places using the same CSS Modules pattern.
• Add an equivalent screen-reader-text (or data-visually-hidden) hook to .wp-block-navigation__description so it doesn't need its own bespoke rule.

Step-by-step reproduction instructions

Steps to reproduce

1. In a block theme, place inside a tightly-sized flex container:
   • A Categories block with displayAsDropdown: true, showLabel: false
   • A Navigation block with overlayMenu: "always"
2. Open the template/part in the Site Editor.

Screenshots, screen recording, code snippet

Environment info

Environment

• WordPress: 6.9.4
• Gutenberg plugin: Version 23.1.0
• Browser: Chrome and Arc
• Theme: custom block theme (block-based)

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