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

Base Block Styles Loaded Differently for PHP templates than Block-based HTML templates. #31293

Closed
pbking opened this issue Apr 28, 2021 · 5 comments · Fixed by #31309
Closed

Base Block Styles Loaded Differently for PHP templates than Block-based HTML templates. #31293

pbking opened this issue Apr 28, 2021 · 5 comments · Fixed by #31309
Labels
[Feature] Themes Questions or issues with incorporating or styling blocks in a theme. 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

@pbking
Copy link
Contributor

pbking commented Apr 28, 2021 •
edited
Loading

Description

When a block-based HTML template is used to render a page base block styles are loaded inline, and are loaded prior to the styles generated based on theme.json.
i.e.

<head>
...
<style id='wp-block-button-inline-css' type='text/css'>
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;cursor:pointer;display:inline-block;font-size:1.125em;padding:calc(.667em + 2px) calc(1.333em + 2px);text-align:center;text-decoration:none;overflow-wrap:break-word;box-sizing:border-box}.wp-block-button__link:active,.wp-block-button__link:focus,.wp-block-button__link:hover,.wp-block-button__link:visited{color:#fff}.wp-block-button__link.aligncenter{text-align:center}.wp-block-button__link.alignright{text-align:right}.wp-block-buttons>.wp-block-button.has-custom-width{max-width:none}.wp-block-buttons>.wp-block-button.has-custom-width .wp-block-button__link{width:100%}.wp-block-buttons>.wp-block-button.has-custom-font-size .wp-block-button__link{font-size:inherit}.wp-block-buttons>.wp-block-button.wp-block-button__width-25{width:calc(25% - .5em)}.wp-block-buttons>.wp-block-button.wp-block-button__width-50{width:calc(50% - .5em)}.wp-block-buttons>.wp-block-button.wp-block-button__width-75{width:calc(75% - .5em)}.wp-block-buttons>.wp-block-button.wp-block-button__width-100{margin-right:0;width:100%}.wp-block-button.is-style-squared,.wp-block-button__link.wp-block-button.is-style-squared{border-radius:0}.wp-block-button.no-border-radius,.wp-block-button__link.no-border-radius{border-radius:0!important}.is-style-outline>.wp-block-button__link,.wp-block-button__link.is-style-outline{border:2px solid;padding:.667em 1.333em}.is-style-outline>.wp-block-button__link:not(.has-text-color),.wp-block-button__link.is-style-outline:not(.has-text-color){color:currentColor}.is-style-outline>.wp-block-button__link:not(.has-background),.wp-block-button__link.is-style-outline:not(.has-background){background-color:transparent}
</style>
...
<style id='global-styles-inline-css' type='text/css'>
...
</head>

When a php-based template is used to render a page the base block styles are loaded from CSS files instead, and are loaded at the bottom of the body.

<style id='global-styles-inline-css' type='text/css'>
...
</head>
<body>
   ... content ...
   <link rel='stylesheet' id='wp-block-button-css'  href='http://localhost:4759/wp-content/plugins/gutenberg/build/block-library/blocks/button/style.css?ver=1619619707' type='text/css' media='all' />
...
</body>

The result is incorrect application of styles as the 'base' supersedes the 'generated global styles' in most scenarios.

Step-by-step reproduction instructions

Load (or create) a theme that leverages Global Styles via theme.json but renders PHP templates. (Here is a simple theme as an example.)
Ensure button styles are expressed in the theme.

Expected behavior

Ideally the block base classes would be provided rendered inline in the same fashion for PHP rendered templates as block-based HTML templates.
Ensure a 'button' style is applied (such as background color)
Load a page rendered from a PHP template and observe the styles on a button block in the view.
image

Actual behavior

image

WordPress information

  • WordPress version: latest
  • Gutenberg version: trunk (10.5.0)
  • Are all plugins except Gutenberg deactivated? yes

This appears to work as expected on 10.4.1.

Also note that disabling block support in the theme also causes it to operate as expected.

remove_theme_support( 'block-templates' );
@jffng jffng 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 [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. labels Apr 28, 2021
@pbking
Copy link
Contributor Author

pbking commented Apr 28, 2021

It seems that the culprit is somewhere in this commit adding support for block templates.

@jffng
Copy link
Contributor

jffng commented Apr 28, 2021

cc @aristath for any clues 🙏

@aristath aristath mentioned this issue Apr 29, 2021
Merged
3 tasks
@aristath
Copy link
Member

@pbking I pushed PR #31309
I tested with your test theme and that tweak fixes the issue. Can you please confirm that works? Thanks 👍

@aristath aristath linked a pull request Apr 29, 2021 that will close this issue
Only split block styles loading for block themes #31309
Merged
3 tasks
@MaggieCabrera
Copy link
Contributor

@pbking I pushed PR #31309
I tested with your test theme and that tweak fixes the issue. Can you please confirm that works? Thanks 👍

It does fix it for me on my test site!

@jffng
Copy link
Contributor

jffng commented Apr 29, 2021

Thank you @aristath !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Feature] Themes Questions or issues with incorporating or styling blocks in a theme. 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
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Only split block styles loading for block themes WordPress/gutenberg
4 participants
@pbking @aristath @MaggieCabrera @jffng