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.

Sign up for GitHub

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

Jump to bottom

theme.json styles are not loaded when previewing a FSE theme in the Customizer #34531

Closed
andersnoren opened this issue Sep 3, 2021 · 4 comments · Fixed by #34540
Closed

theme.json styles are not loaded when previewing a FSE theme in the Customizer #34531

andersnoren opened this issue Sep 3, 2021 · 4 comments · Fixed by #34540
Assignees
@oandregal
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@andersnoren
Copy link

andersnoren commented Sep 3, 2021 •
edited

Description

If you have a non-FSE theme active, go to the Customizer, click the "Change" button next to the name of the active theme, and select a FSE theme to preview, the preview that gets loaded doesn't include any of the theme.json styles in the theme.

The preview does work if you have a FSE theme active (like Blockbase) and preview a different FSE theme (like TT1 Blocks), but not if your active theme is a non-FSE theme.

Step-by-step reproduction instructions

  1. Activate a non-FSE theme, like Twenty Twenty-One.
  2. Go to the Customizer.
  3. Next to the theme name, click the "Change" button and select a FSE theme, like TT1 Blocks.
  4. The preview is loaded, but the theme.json styles are not output, resulting in the theme looking broken.

Screenshots, screen recording, code snippet

image

Environment info

WordPress 5.8, Gutenberg 11.4.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
@youknowriad youknowriad added [Priority] High Used to indicate top priority items that need quick attention [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 labels Sep 3, 2021
@oandregal
Copy link
Member

Hey, I can repro.

Some info:

  • The TwentyTwentyOne theme does load the global-styles-inline-css stylesheet. It does not have a theme.json but opts-in into link color, which needs the global stylesheet so we load it.
  • I've pasted a theme.json in the folder of TwentyTwentyOne and I can confirm the global styles also work fine in this case.
  • I've also tested switching from TwentyTwenty (no global stylesheet) to TwentTwentyOne (has global stylesheet) and works fine.

So, the global stylesheet is loaded fine in some situations. It appears to be somehow blocked for block-based themes in the customizer.

@youknowriad youknowriad removed the [Priority] High Used to indicate top priority items that need quick attention label Sep 3, 2021
@oandregal oandregal mentioned this issue Sep 3, 2021
Merged
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Sep 3, 2021
@oandregal
Copy link
Member

I've got a fix at #34540

@oandregal
Copy link
Member

oandregal commented Sep 7, 2021 •
edited

Meta trac ticket that may be related https://meta.trac.wordpress.org/ticket/5818#comment:4 (previews for themes with theme.json not working consistently in the theme directory)

@oandregal oandregal mentioned this issue Sep 10, 2021
Closed
@oandregal
Copy link
Member

I've landed #34704 a few days ago that was also relevant to this. #34540 is still necessary.

nylen pushed a commit to nylen/wordpress-develop-svn that referenced this issue Sep 16, 2021
@jorgefilipecosta
Block editor: Cache global stylesheet by theme key.
cf53b09 
Global styles are used in a few different contexts (front, editor, customizer, the theme directory). In the last two contexts, it's important that switching themes immediately refreshes the global stylesheet, to avoid situations in which the styles of the previous theme load with the new one. This was brought up at WordPress/gutenberg#34531 (customizer) and at meta.trac.wordpress.org/ticket/5818 (theme directory).
This commit makes sure the stylesheet is regenerated upon switching themes.

Props oandregal, dd32.
See #53175.

git-svn-id: https://develop.svn.wordpress.org/trunk@51819 602fd350-edb4-49c9-b593-d223f7449a82
pento pushed a commit to WordPress/wordpress-develop that referenced this issue Sep 16, 2021
@jorgefilipecosta
Block editor: Cache global stylesheet by theme key.
57ad9f1 
Global styles are used in a few different contexts (front, editor, customizer, the theme directory). In the last two contexts, it's important that switching themes immediately refreshes the global stylesheet, to avoid situations in which the styles of the previous theme load with the new one. This was brought up at WordPress/gutenberg#34531 (customizer) and at meta.trac.wordpress.org/ticket/5818 (theme directory).
This commit makes sure the stylesheet is regenerated upon switching themes.

Props oandregal, dd32.
See #53175.

git-svn-id: https://develop.svn.wordpress.org/trunk@51819 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this issue Sep 16, 2021
@jorgefilipecosta
Block editor: Cache global stylesheet by theme key.
5932bb0 
Global styles are used in a few different contexts (front, editor, customizer, the theme directory). In the last two contexts, it's important that switching themes immediately refreshes the global stylesheet, to avoid situations in which the styles of the previous theme load with the new one. This was brought up at WordPress/gutenberg#34531 (customizer) and at meta.trac.wordpress.org/ticket/5818 (theme directory).
This commit makes sure the stylesheet is regenerated upon switching themes.

Props oandregal, dd32.
See #53175.
Built from https://develop.svn.wordpress.org/trunk@51819


git-svn-id: http://core.svn.wordpress.org/trunk@51426 1a063a9b-81f0-0310-95a4-ce76da25c4cd
gMagicScott pushed a commit to gMagicScott/core.wordpress-mirror that referenced this issue Sep 16, 2021
@jorgefilipecosta
Block editor: Cache global stylesheet by theme key.
a3f75f4 
Global styles are used in a few different contexts (front, editor, customizer, the theme directory). In the last two contexts, it's important that switching themes immediately refreshes the global stylesheet, to avoid situations in which the styles of the previous theme load with the new one. This was brought up at WordPress/gutenberg#34531 (customizer) and at meta.trac.wordpress.org/ticket/5818 (theme directory).
This commit makes sure the stylesheet is regenerated upon switching themes.

Props oandregal, dd32.
See #53175.
Built from https://develop.svn.wordpress.org/trunk@51819


git-svn-id: https://core.svn.wordpress.org/trunk@51426 1a063a9b-81f0-0310-95a4-ce76da25c4cd
danfarrow pushed a commit to danfarrow/wordpress-develop that referenced this issue Sep 30, 2021
@jorgefilipecosta @danfarrow
Block editor: Cache global stylesheet by theme key.
adfe6e5 
Global styles are used in a few different contexts (front, editor, customizer, the theme directory). In the last two contexts, it's important that switching themes immediately refreshes the global stylesheet, to avoid situations in which the styles of the previous theme load with the new one. This was brought up at WordPress/gutenberg#34531 (customizer) and at meta.trac.wordpress.org/ticket/5818 (theme directory).
This commit makes sure the stylesheet is regenerated upon switching themes.

Props oandregal, dd32.
See #53175.

git-svn-id: https://develop.svn.wordpress.org/trunk@51819 602fd350-edb4-49c9-b593-d223f7449a82
danielpunkass pushed a commit to danielpunkass/wordpress-develop that referenced this issue Oct 26, 2021
@jorgefilipecosta @danielpunkass
Block editor: Cache global stylesheet by theme key.
988a4f6 
Global styles are used in a few different contexts (front, editor, customizer, the theme directory). In the last two contexts, it's important that switching themes immediately refreshes the global stylesheet, to avoid situations in which the styles of the previous theme load with the new one. This was brought up at WordPress/gutenberg#34531 (customizer) and at meta.trac.wordpress.org/ticket/5818 (theme directory).
This commit makes sure the stylesheet is regenerated upon switching themes.

Props oandregal, dd32.
See #53175.

git-svn-id: https://develop.svn.wordpress.org/trunk@51819 602fd350-edb4-49c9-b593-d223f7449a82
doiftrue pushed a commit to doiftrue/wordpress-develop that referenced this issue Oct 30, 2021
@jorgefilipecosta @doiftrue
Block editor: Cache global stylesheet by theme key.
31be257 
Global styles are used in a few different contexts (front, editor, customizer, the theme directory). In the last two contexts, it's important that switching themes immediately refreshes the global stylesheet, to avoid situations in which the styles of the previous theme load with the new one. This was brought up at WordPress/gutenberg#34531 (customizer) and at meta.trac.wordpress.org/ticket/5818 (theme directory).
This commit makes sure the stylesheet is regenerated upon switching themes.

Props oandregal, dd32.
See #53175.

git-svn-id: https://develop.svn.wordpress.org/trunk@51819 602fd350-edb4-49c9-b593-d223f7449a82
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@oandregal oandregal

Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Clean theme data when switching themes in the customizer WordPress/gutenberg
3 participants
@youknowriad @oandregal @andersnoren