close
Skip to content

Per-block css defined in theme.json no longer populates the Additional CSS textarea in the Styles UI #75413

@bph

Description

@bph

Description

When defining custom CSS for a block via styles.blocks.<block-name>.css in theme.json, the CSS is correctly applied on both the front end and in the editor. However, the value no longer appears in the per-block "Additional CSS" textarea in the Site Editor (Appearance > Editor > Styles > Additional CSS).

The Dev Note Custom CSS for global styles and per block documents that theme.json css values should populate this textarea, allowing users to view and modify them in the UI. This worked as of WordPress 6.2 when the feature was introduced. Related issue #60673 also describes behavior (resetting the field to theme.json defaults) that assumes the textarea is populated.

The UI has been reorganized. Issue #73926 documents that Additional CSS was "recently hidden deeper in a menu" in the Styles editor, so there have been active changes to this area of the UI.

Expected behavior: The css value from theme.json appears pre-filled in the per-block Additional CSS textarea in the Styles UI.

Actual behavior: The Additional CSS textarea is empty, even though the styles are applied correctly.

Step-by-step reproduction instructions

  • Create a minimal block theme with this in theme.json:

    ```
    {
    "$schema": "https://schemas.wp.org/trunk/theme.json",
       "version": 3,
        "styles": {
           "blocks": {
                "core/post-title": {
                   "css": "letter-spacing: 1px; background-color: yellow; padding: 10px;"             }
             }
         }
     }
    ```
    
  • Activate the theme.

  • Go to Appearance > Editor > Styles > Blocks > Post Title.

  • Open the "Additional CSS" field (under the Advanced section or via the kebab menu).

  • Observe that the textarea is empty, despite the CSS being applied.

Screenshots, screen recording, code snippet

The screenshot show on the top the theme.json entry for post title and below the
Editor view with the empty Additional CSS box.

Image

Environment info

  • WordPress 6.9.1
  • Gutenberg Nightly 22.7.20260211
  • Chrome 144.0.7559.133

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    CSS StylingRelated to editor and front end styles, CSS-specific issues.Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions