Navigation block: Can't style block in editor using theme CSS

[noisysocks]

The Navigation block as it appears in the editor is using class names that do not match what is rendered on the frontend when the Navigation block is published in a page or post. This means that styling made to the Navigation block by a theme is not automatically picked up by the block editor.

Ideally, a block's editor.scss styles should build on top of a block's style.scss styles.

The markup of a Navigation block in the frontend—note the underlined class names:

The markup of a Navigation block in the editor—note the underlined class names:

There are two immediate problems:

• Links in the editor should have the wp-block-navigation-item__link class but instead have wp-block-navigation-link.
• Navigation items in the editor should have the wp-block-navigation-item class but do not.

[talldan]

@noisysocks My understanding is that wp-block-navigation-link is the correct class name for the block since the block was renamed to Navigation Link. Ideally everywhere reflects that.

The classnames in the editor look correct to me. The element with the data-block attribute is the BlockEdit component which renders the output of the block's edit function. The first child of BlockEdit should have the wp-block-navigation-link class name, which it does.

The classnames in the frontend should be wp-block-navigation-link, so that definitely needs to be corrected.