CSS Class Name Not Displayed in Block Settings When aria-label is Added to Paragraph Block

[369work]

Description

Description

When an aria-label attribute is added to a paragraph block in the Site Editor, the CSS class name no longer appears in the "Additional CSS class(es)" field in the block settings panel when the text is selected. However, the class is still properly rendered in the actual HTML output on the frontend.

This is purely a UI display issue in the editor, but it can cause confusion for users who rely on the visual feedback in the block settings to confirm that classes are properly applied.

Step-by-step reproduction instructions

Step-by-step reproduction instructions

1. Open the Site Editor in WordPress
2. Add or select a Paragraph block
3. Add a CSS class to the paragraph block via Block Settings → Advanced → "Additional CSS class(es)"
4. Confirm that the class name appears in the field
5. Switch to Code Editor mode
6. Add an aria-label attribute to the paragraph block's HTML (e.g., <p class="your-class" aria-label="some label">)
7. Switch back to Visual Editor
8. Click on the paragraph text to select it
9. Check the "Additional CSS class(es)" field in Block Settings → Advanced

Screenshots, screen recording, code snippet

Expected behavior:
The CSS class name should still be displayed in the "Additional CSS class(es)" field.

Actual behavior:
The CSS class name disappears from the "Additional CSS class(es)" field, even though it is still present in the HTML output.

Screenshots, screen recording, code snippet

Example HTML in Code Editor:

<!-- wp:paragraph {"className":"my-custom-class"} -->
<p class="my-custom-class" aria-label="Description for accessibility">This is a test paragraph.</p>
<!-- /wp:paragraph -->

When viewing this block in Visual Editor:

• The class is correctly applied to the rendered paragraph
• The frontend HTML output is correct
• However, the "Additional CSS class(es)" field appears empty

Additional context

• This issue occurs specifically when aria-label is manually added via the Code Editor
• The HTML output on the frontend is correct - this is purely an editor UI issue
• No console errors are generated when this bug occurs
• This can cause confusion for users who are less familiar with the Code Editor and rely on the visual interface to verify their class assignments

Environment info

Environment info

WordPress version: 6.8.3
Theme: Twenty Twenty-Five (also reproduced with custom block theme)
Browser: Google Chrome (latest version)
OS: Windows 11
Server: XAMPP (PHP 8.2.12)
Plugins: None (all plugins deactivated during testing)

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

[t-hamano]

As a general rule, you cannot use HTML attributes in a block's HTML that are not intended for that block. Doing so may cause the block to malfunction.

If you really need to add an aria-label, you can add ariaLabel block support. Here is an example of the code:

function add_aria_label_support_to_paragraph( $metadata ) {
	if ( 'core/paragraph' !== $metadata['name'] ) {
		return $metadata;
	}
	if ( ! isset( $metadata['supports'] ) ) {
		$metadata['supports'] = array();
	}
	$metadata['supports']['ariaLabel'] = true;
	return $metadata;
}
add_filter( 'block_type_metadata', 'add_aria_label_support_to_paragraph' );

Then, add the aria-label as follows:

<!-- wp:paragraph {"className":"my-custom-class","ariaLabel":"Description for accessibility"} -->
<p class="my-custom-class" aria-label="Description for accessibility">This is a test paragraph.</p>
<!-- /wp:paragraph -->

This behavior is not a bug, so I will close this issue.