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

WordPress inline custom css specified for block even if block doesn't include on the page #49559

Open
cawa-93 opened this issue Apr 3, 2023 · 7 comments
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Technical Feedback Needs testing from a developer perspective. [Type] Enhancement A suggestion for improvement.

Comments

@cawa-93
Copy link
Contributor

cawa-93 commented Apr 3, 2023

Description

If I add some custom css for specific block I expect that this css will be included to page only if that block also included. But currently, it seems block-specific css always included, no mater is actually block itself used on page or not.

Step-by-step reproduction instructions

  1. Create empty theme with empty templates/index.html and theme.json like so:
    {
      "version": 2,
      "styles": {
        "blocks": {
          "core/button": {
            "css": "color: red"
          }
        }
      }
    }
  2. Open any page to load empty index.html template.
  3. Inspect inlined CSS. You should find .wp-block-button .wp-block-button__link{color: red} but I expect expected it not to be

Screenshots, screen recording, code snippet

No response

Environment info

  • WordPress 6.3-alpha-55614

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

@ndiego ndiego added Needs Testing Needs further testing to be confirmed. Needs Technical Feedback Needs testing from a developer perspective. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json CSS Styling Related to editor and front end styles, CSS-specific issues. and removed Needs Testing Needs further testing to be confirmed. labels Apr 4, 2023
@ndiego
Copy link
Member

ndiego commented Apr 4, 2023

I have been able to confirm and would similarly expect this styling only to render when a Button block is added to the page. Added some labels to get additional eyes on this issue.

@kathrynwp kathrynwp added the [Type] Enhancement A suggestion for improvement. label Apr 5, 2023
@talldan
Copy link
Contributor

talldan commented Apr 11, 2023

cc @glendaviesnz or @Mamaduka, who might be able to provide technical feedback.

@Mamaduka
Copy link
Member

@aristath or @carolinan should have more details for the block CSS feature since they worked on the implementation.

@aristath
Copy link
Member

Hmmm the per-block custom-css is currently getting added to the global custom-css.
In order to make these styles render only when a block exists on the page (as they should), they'll have to be decoupled from there, and attached to the block-styles instead.
It's doable, but it will require some code restructuring 🤔

@Mamaduka
Copy link
Member

Thank you, Ari! I belive that would be an excellent enhancement for the next major WP release.

@carolinan
Copy link
Contributor

Can we update this before I continue on #49396

@aristath
Copy link
Member

aristath commented Apr 11, 2023

Can we update this before I continue on #49396

Not necessary, it can be done after that PR without side-effects 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Technical Feedback Needs testing from a developer perspective. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

7 participants