Gallery block: update the gallery gap to load styles in header for bl…

…ock themes (#41015)

Co-authored-by: Glen Davies <glen.davies@a8c.com>
Co-authored-by: ramonjd <ramonjd@gmail.com>

lib/compat/wordpress-5.9/script-loader.php

@@ -46,29 +46,3 @@ function gutenberg_enqueue_global_styles_assets() {
 }
 add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles_assets' );
 add_action( 'wp_footer', 'gutenberg_enqueue_global_styles_assets' );
-
-/**
- * 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  happens before
- * the render_block.
- *
- * @link https://core.trac.wordpress.org/ticket/53494.
- *
- * @param string $style String containing the CSS styles to be added.
- */
-function gutenberg_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";
-		}
-	);
-}

lib/compat/wordpress-6.1/script-loader.php

@@ -5,6 +5,37 @@
  * @package gutenberg
  */
 
+/**
+ * This function takes care of adding inline styles
+ * in the proper place, depending on the theme in use.
+ *
+ * This method was added to core in 5.9.1, but with a single param ($style). The second param ($priority) was
+ * added post 6.0, so the 6.1 release needs to have wp_enqueue_block_support_styles updated to include this param.
+ *
+ * For block themes, it's loaded in the head.
+ * For classic ones, it's loaded in the body
+ * because the wp_head action  happens before
+ * the render_block.
+ *
+ * @link https://core.trac.wordpress.org/ticket/53494.
+ *
+ * @param string $style String containing the CSS styles to be added.
+ * @param int    $priority To set the priority for the add_action.
+ */
+function gutenberg_enqueue_block_support_styles( $style, $priority = 10 ) {
+	$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";
+		},
+		$priority
+	);
+}
+
 /**
  * This applies a filter to the list of style nodes that comes from `get_style_nodes` in WP_Theme_JSON.
  * This particular filter removes all of the blocks from the array.

lib/load.php

@@ -126,10 +126,10 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.1/blocks.php';
 require __DIR__ . '/compat/wordpress-6.1/persisted-preferences.php';
 require __DIR__ . '/compat/wordpress-6.1/get-global-styles-and-settings.php';
-require __DIR__ . '/compat/wordpress-6.1/script-loader.php';
 require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-6-1.php';
 require __DIR__ . '/compat/wordpress-6.1/block-template-utils.php';
 require __DIR__ . '/compat/wordpress-6.1/wp-theme-get-post-templates.php';
+require __DIR__ . '/compat/wordpress-6.1/script-loader.php';
 
 // Experimental features.
 remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WP 6.0's stopgap handler for Webfonts API.

packages/block-library/src/gallery/index.php

@@ -79,16 +79,7 @@ function block_core_gallery_render( $attributes, $content ) {
 	// Set the CSS variable to the column value, and the `gap` property to the combined gap value.
 	$style = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_column . '; gap: ' . $gap_value . '}';
 
-	// 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>';
-		},
-		11
-	);
+	gutenberg_enqueue_block_support_styles( $style, 11 );
 	return $content;
 }
 /**