From cc00407dec301b14210b241a5b9ced674f926a4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 16 Feb 2022 16:34:21 +0100
Subject: [PATCH] Load block support styles in the head for block themes
 (#38750)

---
 lib/block-supports/elements.php | 12 ++----------
 lib/block-supports/layout.php   | 10 +---------
 lib/blocks.php                  | 26 ++++++++++++++++++++++++++
 3 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/lib/block-supports/elements.php b/lib/block-supports/elements.php
index f3b7891f107d60..711631a63b6612 100644
--- a/lib/block-supports/elements.php
+++ b/lib/block-supports/elements.php
@@ -43,7 +43,7 @@ function gutenberg_render_elements_support( $block_content, $block ) {
 	}
 	$link_color_declaration = esc_html( safecss_filter_attr( "color: $link_color" ) );
 
-	$style = "<style>.$class_name a{" . $link_color_declaration . ";}</style>\n";
+	$style = ".$class_name a{" . $link_color_declaration . ';}';
 
 	// Like the layout hook this assumes the hook only applies to blocks with a single wrapper.
 	// Retrieve the opening tag of the first HTML element.
@@ -65,15 +65,7 @@ function gutenberg_render_elements_support( $block_content, $block ) {
 		$content              = substr_replace( $block_content, ' class="' . $class_name . '"', $first_element_offset + strlen( $first_element ) - 1, 0 );
 	}
 
-	// Ideally styles should be loaded in the head, but blocks may be parsed
-	// after that, so loading in the footer for now.
-	// See https://core.trac.wordpress.org/ticket/53494.
-	add_action(
-		'wp_footer',
-		function () use ( $style ) {
-			echo $style;
-		}
-	);
+	gutenberg_enqueue_block_support( $style );
 
 	return $content;
 }
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 5ed5f2f16ae754..1e5916993e6658 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -164,15 +164,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 		1
 	);
 
-	// Ideally styles should be loaded in the head, but blocks may be parsed
-	// after that, so loading in the footer for now.
-	// See https://core.trac.wordpress.org/ticket/53494.
-	add_action(
-		'wp_footer',
-		function () use ( $style ) {
-			echo '<style>' . $style . '</style>';
-		}
-	);
+	gutenberg_enqueue_block_support( $style );
 
 	return $content;
 }
diff --git a/lib/blocks.php b/lib/blocks.php
index 6ffefbfd8bd959..7005fc334c6857 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -707,3 +707,29 @@ function gutenberg_multiple_block_styles( $metadata ) {
 	return $metadata;
 }
 add_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles' );
+
+/**
+ * This function takes care of adding inline styles
+ * in the proper place, depending on the theme in use.
+ *
+ * For block themes, it's loaded in the head.
+ * For classic ones, it's loaded in the body
+ * because the wp_head action (and wp_enqueue_scripts)
+ * happens before the render_block.
+ *
+ * See https://core.trac.wordpress.org/ticket/53494.
+ *
+ * @param string $style String containing the CSS styles to be added.
+ */
+function gutenberg_enqueue_block_support( $style ) {
+	$action_hook_name = 'wp_footer';
+	if ( wp_is_block_theme() ) {
+		$action_hook_name = 'wp_enqueue_scripts';
+	}
+	add_action(
+		$action_hook_name,
+		function () use ( $style ) {
+			echo "<style>$style</style>\n";
+		}
+	);
+}