Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
zpericic opened this issue Jul 4, 2023 · 2 comments
Open
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Bug An existing feature does not function as intended

Comments

@zpericic
Copy link

zpericic commented Jul 4, 2023

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

@jordesign jordesign added [Type] Bug An existing feature does not function as intended Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Block] Preformatted Affects the Preformatted Block - used for showing preformatted text and removed [Block] Preformatted Affects the Preformatted Block - used for showing preformatted text labels Jul 6, 2023
@zpericic
Copy link
Author

This is resolved in Wordpress by 4174 and merged in Trac 56254.

Error still persist if guttenberg is active.

@carolinan
Copy link
Contributor

Are these issues duplicates?
#46454

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants