Gallery: register styles with style engine (#43070)

* Removing gutenberg_enqueue_block_support_styles
Registering gallery styles with style engine

* Deprecate gutenberg_enqueue_block_support_styles

* Remove enqueue option (deprecated)

* Use the WP_HTML_Tag_Processor to add the unique classname to the container

* Move gutenberg_enqueue_block_support_styles wordpress-6.2/script-loader.php, so we can formally deprecate the function in 6.2

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

@@ -5,37 +5,6 @@
  * @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/compat/wordpress-6.2/script-loader.php

@@ -28,3 +28,38 @@ function gutenberg_register_vendor_scripts_62( $scripts ) {
 	$script->deps = array_merge( $script->deps, array( 'wp-inert-polyfill' ) );
 }
 add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts_62' );
+
+/**
+ * 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.
+ *
+ * @deprecated 6.2 Block supports styles are now stored for enqueuing via the style engine API. See: packages/style-engine/README.md.
+ *
+ * @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 ) {
+	_deprecated_function( __FUNCTION__, '6.2' );
+
+	$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
+	);
+}

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

@@ -76,13 +76,10 @@ function block_core_gallery_render( $attributes, $content ) {
 		}
 	}
 
-	$class   = wp_unique_id( 'wp-block-gallery-' );
-	$content = preg_replace(
-		'/' . preg_quote( 'class="', '/' ) . '/',
-		'class="' . $class . ' ',
-		$content,
-		1
-	);
+	$unique_gallery_classname = wp_unique_id( 'wp-block-gallery-' );
+	$processed_content        = new WP_HTML_Tag_Processor( $content );
+	$processed_content->next_tag();
+	$processed_content->add_class( $unique_gallery_classname );
 
 	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
 	// gap on the gallery.
@@ -102,10 +99,22 @@ 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 = '.wp-block-gallery.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_column . '; gap: ' . $gap_value . '}';
+	$gallery_styles   = array();
+	$gallery_styles[] = array(
+		'selector'     => ".wp-block-gallery.{$unique_gallery_classname}",
+		'declarations' => array(
+			'--wp--style--unstable-gallery-gap' => $gap_column,
+			'gap'                               => $gap_value,
+		),
+	);
 
-	wp_enqueue_block_support_styles( $style, 11 );
-	return $content;
+	gutenberg_style_engine_get_stylesheet_from_css_rules(
+		$gallery_styles,
+		array(
+			'context' => 'block-supports',
+		)
+	);
+	return (string) $processed_content;
 }
 /**
  * Registers the `core/gallery` block on server.