Filter template_include failed to load generated CSS in FSE (Full Site Editing) supported theme

[anik]

Description

I just create a template using template_include filter hook. Then add default Social Icons blocks inside the post. It working great with non FSE theme like Twenty Twenty One but in FSE supported theme causes some CSS broke like Twenty Twenty Two.

add_filter('template_include', 'include_template_files');
function include_template_files() {
    return TEMPLATE_PATH.'/Template.php';
}

Template File code Template.php

<?php
defined( 'ABSPATH' ) || exit;
get_header();
    the_content();
get_footer();

Screenshot of Twenty Twenty One (Working):
https://ibb.co/Wz416Tm

Screenshot of Twenty Twenty Two (Not Working):
https://ibb.co/P5Fn7QN

This CSS is Automatically Generated in Twenty Twenty One but not Generated CSS in FSE theme like Twenty Twenty Two

<style>.wp-container-1 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;justify-content: flex-start;}.wp-container-1 > * { margin: 0; }</style>
<style>.wp-container-2 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-2 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-2 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style>
<style>.wp-container-3 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-3 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-3 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style>
<style>.wp-container-4 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-4 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-4 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style>
<style>.wp-container-5 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-5 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-5 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style>

Step-by-step reproduction instructions

1. Create a Template.php Using Code Above
2. Add template_include hook
3. Then Create a new post and add Social Icons blocks
4. Active theme Twenty Twenty One(Non FSE supported theme) and check frontend (Working).
5. Active theme Twenty Twenty Two(FSE Supported theme) and check frontend, its broken (Not Working).

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress Version 6.0.2
• MacOS Version 12.2 (M1 Chip)
• Google Chrome Version 105.0.5195.102 (Official Build) (arm64)

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

[obiPlabon]

Hey @anik, this article might help you to resolve the issue https://fullsiteediting.com/lessons/how-to-use-php-templates-in-block-themes/

[carolinan]

As the author of the linked article: the examples do not work anymore, the page was last updated in March.
Please see this comment about where to place do_blocks() in the PHP file to render blocks.
#39207 (comment)
Only the CSS for the blocks that are actually rendered will load.

I don't think this will actually solve the problem. I am replying because the article was mentioned.
I am not sure how template_include is intended to work with FSE.

[anik]

@obiPlabon & @carolinan Thank you so much for your help. Its really helpful.

I checked the WordPress core.
File path:
https://core.trac.wordpress.org/browser/tags/6.0.2/src/wp-includes/script-loader.php#L2912

It was edited after this ticket.
https://core.trac.wordpress.org/ticket/53494

function wp_enqueue_block_support_styles( $style ) {
	$action_hook_name = 'wp_footer';
	if ( wp_is_block_theme() ) {
		$action_hook_name = 'wp_head';
	}
	add_action(
		$action_hook_name,
		static function () use ( $style ) {
			echo "<style>$style</style>\n";
		}
	);
}

Problem is template_include will working perfectly if CSS style is loaded in footer for block based theme (FSE). But in this core code this is not possible.

Modified code. Just add a extra filter called "block_support_styles_hook" :

function wp_enqueue_block_support_styles( $style ) {
	$action_hook_name = 'wp_footer';
	if ( wp_is_block_theme() ) {
		$action_hook_name = 'wp_head';
	}
	add_action(
		apply_filters('block_support_styles_hook', $action_hook_name),
		static function () use ( $style ) {
			echo "<style>$style</style>\n";
		}
	);
}

Then anyone can load the style in both header and footer.

add_filter('block_support_styles_hook', function(){
    return 'wp_footer';
});