[WP6.3] Styles not applied to some blocks

[t-hamano]

Originally reported at Making WordPress slack

Description

For some blocks, it appears that styles are not being applied on the front end. At the very least, I think the following behavior is not what would be expected.

• Styles not applied to the navigation block
• Group block width is large (box-sizing not applied)
• Padding inside the Paragraph block (has-background style) not applied
• Media and content are not aligned horizontally in the Media & Text block
• Styles are not applied to the Search block

Activating the latest gutenberg plugin appears to fix this problem.

Step-by-step reproduction instructions

Create a post with some blocks in WordPress 6.3 Beta 2 and confirm how it looks on the front end.

Screenshots, screen recording, code snippet

WordPress 6.3 Beta2	WordPress 6.2

Environment info

No response

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]

Hmm, I tried testing this in 6.3 Beta 2 without Gutenberg active and I am not able to replicate. Are there any other specifics to the setup? I tested in Chrome and Safari.

[t-hamano]

I have tested this issue again in various environments and it might be a specific environment or OS-dependent issue.

Reproduced:

• OS: Windows 11, Environment: Local (version 7.0.2)

Not reproduced:

• OS: Windows 11, Environment: wp-env
• OS: Ubuntu (WSL2), Environment: wp-env
• InstaWP

Curiously, I discovered two new things.

I further learned that this problem only occurs when should_load_separate_core_block_assets is true.

In other words, in the Block theme, changing it to false as shown below will solve the problem.

add_filter( 'should_load_separate_core_block_assets', '__return_false' );

Conversely, in the Classic theme, the same problem can be reproduced by changing the value to true as follows.

add_filter( 'should_load_separate_core_block_assets', '__return_true' );

I would like to do some more research to see if this is a problem in my environment.

[t-hamano]

From my research, I have found that this is a problem that occurs only on WIndowsOS and is due to a core function. I have submitted a ticket to Track and would like to close this issue.

https://core.trac.wordpress.org/ticket/58711

[franzaurus]

@t-hamano thank you for directing me to the ticket link at https://core.trac.wordpress.org/ticket/58711. Unfortunately, I cannot do the patch test as I'm not familiar with the steps. However, I'm still experiencing the issue in WP 6.3 RC3 (with the same local environment on a Windows OS), but I can see that https://core.trac.wordpress.org/changeset/56136 has been applied there.

However, the problem doesn't show up if I install Gutenberg on top of WP 6.3 RC3.

Let me know if you need more information. Thank you.

Environment:

• Windows 11
• Localwp 7.1.0
• WordPress: 6.3-RC3
• PHP: 8.1.9
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.9)
• Browser: Opera (Windows 10/11)
• Theme: Twenty Twenty-Three 1.2
• Plugins:
  • WordPress Beta Tester 3.5.2

[t-hamano]

Hi @franzaurus,

As noted in this comment, this issue involves a cache system called transients. Unless this cache is explicitly removed, this issue may not be resolved.

You can use a plugin that removes transients, or simply write the following code in the functions.php of an enabled theme, for example, and reload the WordPress site once. If the problem is resolved, this code can be removed.

add_action( 'init', function() {
	delete_transient( 'wp_core_block_css_files' );
} );

[franzaurus]

@t-hamano Thank you! It solved the problem.

[jsit]

Thank you, @t-hamano! I too was having an issue with block styles not loading when this was set to true, and deleting the transient fixed it for me as well.