Skip to content

Block specific elements styles are not applied for non-core block plugins #52276

@zpericic

Description

@zpericic

Description

Block specific styles are not serialized completely if block is not one of core plugins eg. name starting with "core/".

As result global styles are broken and non-core could only be styled one-by-one or via external CSS.

This is regression after #50310.

I have made PR #52228 which shortly address this issue.

Step-by-step reproduction instructions

  1. Install custom block which:
  • Name is not starting with 'core/"
  • Supports elements global style (eg. button, link, h[1-6])
  1. Apply some global styles on your custom block for button, link or h[1-6].

theme.json example:

{
  "styles": {
    "blocks": {
      "some/block": {
        "color": {
          "background": "black",
          "text": "white"
        },
        "elements": {
          "link": {
            "color": {
              "text": "red"
             }
          }
        }
      }       
    },
    "elements": {
      "color": {
        "background": "white",
        "text": "black"
      },
      "link": {
        "color": {
          "text": "blue"
         }
      }
    }
  }
}

  1. Link styles are not applied on frontend eg. links are blue. Block-specific elements styles are not serialized.

Result:

<style id='global-styles-inline-css'>
body{...
.wp-block-some-block{color: white; background-color: black;}
...
</style>

Expected result:

<style id='global-styles-inline-css'>
body{...
.wp-block-some-block{color: white; background-color: black;}
.wp-block-some-block a:where(:not(.wp-element-button)){color: red;}
...
</style>

Screenshots, screen recording, code snippet

No response

Environment info

Versions:

  • WordPress: 6.2.2 and newer
  • Gutenberg: 16.1.0

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions