WordPress.org
Get WordPress

Make WordPress Core

Opened 8 months ago

Last modified 3 weeks ago

#63695 new defect (bug)

viewStyle is loaded in the footer when the active theme is the classic theme

Reported by: wildworks's profile wildworks Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Editor Keywords: has-patch
Focuses: performance Cc:

Description

Related to #59673
Originally reported at ​GB 70673

The block.json has two fields that define the styles that will be enqueued on the frontend.

  • style: enqueue in both the front-end and the editor
  • viewStyle enqueued only in the front-end

How these styles are loaded depends on the active theme and whether the page has the block.

Of the four patterns below, the behavior in the classic theme is not what I expect. My understanding is that in the classic theme, by default, both styles should be loaded in the head tag, regardless of whether or not there are blocks on the page.

✅ The block theme is active, and there are blocks on the page

Both styles are loaded in the head tag.

<!DOCTYPE html>
<html lang="en-US">
<head>
<style id='create-block-test-style-inline-css'>
.wp-block-create-block-test{background-color:red}
</style>
<style id='create-block-test-view-style-inline-css'>
.wp-block-create-block-test{background-color:blue}
</style>
</head>
<body></body>
</html>

✅ The block theme is active, and there are no blocks on the page

Both styles are not loaded.

❌ The classic theme is active, and there are blocks on the page

  • The style is loaded in the head tag
  • The viewStyle is loaded outside the head tag 
<!DOCTYPE html>
<html lang="en-US" >
<head>
<style id='create-block-test-style-inline-css'>
.wp-block-create-block-test{background-color:red}
</style>
</head>
<body>
<style id='create-block-test-view-style-inline-css'>
.wp-block-create-block-test{background-color:blue}
</style>
</body>
</html>

❌ The classic theme is active, and there are no blocks on the page

  • The style is loaded in the head tag
  • The viewStyle is not loaded 
<!DOCTYPE html>
<html lang="en-US" >
<head>
<style id='create-block-test-style-inline-css'>
.wp-block-create-block-test{background-color:red}
</style>
</head>
<body></body>
</html>

Attachments (1)

test.zip​ (183.5 KB) - added by wildworks 8 months ago.
Sample plugin with the custom block "style" and "viewStyle" defined

Download all attachments as: .zip

Change History (9)

@wildworks
8 months ago

Sample plugin with the custom block "style" and "viewStyle" defined

#1 @wildworks
8 months ago

I've attached the sample plugin with the custom block "style" and "viewStyle" defined. You should be able to test this ticket by using this plugin.

This ticket was mentioned in ​PR #9249 on ​WordPress/wordpress-develop by ​@wildworks.
8 months ago #2

  • Keywords has-patch added

Trac ticket: https://core.trac.wordpress.org/ticket/63695

#3 @wildworks
8 months ago

I believe ​PR #9249 should fix this issue.

Testing Instructions

  • Download and install the test.zip file, which contains a custom block with viewStyle and style fields defined.
  • Insert the Test block into the content.
  • Check the frontend.

The block theme is active, and there are blocks on the page

Both styles are loaded in the head tag (as before).

The block theme is active, and there are no blocks on the page

Both styles are not loaded (as before).

The classic theme is active, and there are blocks on the page

Both styles are loaded in the head tag (fixed by this PR).

The classic theme is active, and there are no blocks on the page

Both styles are not loaded (fixed by this PR).

Last edited 8 months ago by wildworks (previous) (diff)

​Kaycee2815 commented on ​PR #9249:
8 months ago #4

Thanks

​@wildworks commented on ​PR #9249:
3 weeks ago #6

Oh, I re-forked the wordpress-develop repo and it seems all my submitted open PRs were closed 😂 I submitted a new PR that is equivalent to this one. ​https://github.com/WordPress/wordpress-develop/pull/10925

#7 @westonruter
3 weeks ago

This seems related to #55184.

#8 @westonruter
3 weeks ago

  • Focuses performance added

I'm trying to reproduce this in trunk right now.

Post where the block is present

Block Theme

✅ In T25 on a page that has the Test block, this is printed in HEAD:

<style id="create-block-test-style-inline-css">
.wp-block-create-block-test{background-color:red}

/*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/style-index.css */
</style>
<style id="create-block-test-view-style-inline-css">
.wp-block-create-block-test{background-color:blue}

/*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/view.css */
</style>

Classic Theme

✅ In T21, on a page that has the Test block this is printed in HEAD:

<style id="create-block-test-style-inline-css">
.wp-block-create-block-test{background-color:red}

/*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/style-index.css */
</style>

<!-- ... -->

<style id="create-block-test-view-style-inline-css">
.wp-block-create-block-test{background-color:blue}

/*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/view.css */
</style>

⚠️ In T21, when I have the ​Load Combined Core Block Assets plugin active, the first style continues to be printed in the HEAD but the second is printed in the footer:

<style id="create-block-test-style-inline-css">
.wp-block-create-block-test{background-color:red}

/*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/style-index.css */
</style>

Down in the footer:

<style id="create-block-test-view-style-inline-css">
.wp-block-create-block-test{background-color:blue}

/*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/view.css */
</style>

So it seems #64099 partially fixed the behavior since blocks are now loaded on demand by default in classic themes.

Post where the block is absent

Block Theme

✅ None of the Test block styles are printed.

Classic Theme

✅ In T21, none of the test blocks are printed.

⚠️ With ​Load Combined Core Block Assets plugin active, the following style appears in HEAD:

<style id="create-block-test-style-inline-css">
.wp-block-create-block-test{background-color:red}

/*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/style-index.css */
</style>

The other style is absent.

When I check out the ​pull request and I'm looking at a Classic Theme:

Post where the block is present

✅ Same as before:

<style id="create-block-test-style-inline-css">
.wp-block-create-block-test{background-color:red}

/*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/style-index.css */
</style>

<!-- ... -->

<style id="create-block-test-view-style-inline-css">
.wp-block-create-block-test{background-color:blue}

/*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/view.css */
</style>

✅ In T21, when I have the ​Load Combined Core Block Assets plugin active, I now see both styles printed in the HEAD:

<style id="create-block-test-style-inline-css">
.wp-block-create-block-test{background-color:red}

/*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/style-index.css */
</style>
<style id="create-block-test-view-style-inline-css">
.wp-block-create-block-test{background-color:blue}

/*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/view.css */
</style>

Post where the block is absent

✅ Same as before, no block styles are printed.

✅❓ With ​Load Combined Core Block Assets plugin active, the following style appears in HEAD:

<style id="create-block-test-style-inline-css">
.wp-block-create-block-test{background-color:red}

/*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/style-index.css */
</style>
<style id="create-block-test-view-style-inline-css">
.wp-block-create-block-test{background-color:blue}

/*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/view.css */
</style>

The changes in the PR ensure that all block styles are always printed in the HEAD for all registered blocks for classic themes when not loading block styles on demand. So I suppose this is working as expected. Nevertheless, enqueueing styles for blocks which aren't on the page is not good for performance. This is what was improved in 6.9 so that classic themes could start loading block styles on demand. This is now the default behavior. So the change here is only going to ensure styles are enqueued for classic theme sites which turn off loading block styles on demand (e.g. by opting out of loading block styles separately).

So this ticket seems to be partially obsolete, at least for default core behavior, yes?

Note: See TracTickets for help on using tickets.