WordPress.org
Get WordPress

Make WordPress Core

Opened 5 months ago

Last modified 5 months 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: 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 5 months ago.
Sample plugin with the custom block "style" and "viewStyle" defined

Download all attachments as: .zip

Change History (5)

@wildworks
5 months ago

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

#1 @wildworks
5 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.
5 months ago #2

  • Keywords has-patch added

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

#3 @wildworks
5 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 5 months ago by wildworks (previous) (diff)

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

Thanks

Note: See TracTickets for help on using tickets.