Revert placeholder string logic

WordPress · Oct 12, 2021 · 1ab2a3a · 1ab2a3a
1 parent 2b32e56
commit 1ab2a3a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 27 deletions.
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
@@ -28,12 +28,13 @@ function gutenberg_register_layout_support( $block_type ) {
 /**
  * Generates the CSS corresponding to the provided layout.
  *
+ * @param string  $selector CSS selector.
  * @param array   $layout   Layout object. The one that is passed has already checked the existance of default block layout.
  * @param boolean $has_block_gap_support Whether the theme has support for the block gap.
  *
  * @return string CSS style.
  */
-function gutenberg_get_layout_style( $layout, $has_block_gap_support = false ) {
+function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false ) {
 	$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
 
 	$style = '';
@@ -51,21 +52,21 @@ function gutenberg_get_layout_style( $layout, $has_block_gap_support = false ) {
 
 		$style = '';
 		if ( $content_size || $wide_size ) {
-			$style  = '.{{ placeholder }} > * {';
+			$style  = "$selector > * {";
 			$style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
 			$style .= 'margin-left: auto !important;';
 			$style .= 'margin-right: auto !important;';
 			$style .= '}';
 
-			$style .= '.{{ placeholder }} > .alignwide { max-width: ' . esc_html( $wide_max_width_value ) . ';}';
-			$style .= '.{{ placeholder }} .alignfull { max-width: none; }';
+			$style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}';
+			$style .= "$selector .alignfull { max-width: none; }";
 		}
 
-		$style .= '.{{ placeholder }} .alignleft { float: left; margin-right: 2em; }';
-		$style .= '.{{ placeholder }} .alignright { float: right; margin-left: 2em; }';
+		$style .= "$selector .alignleft { float: left; margin-right: 2em; }";
+		$style .= "$selector .alignright { float: right; margin-left: 2em; }";
 		if ( $has_block_gap_support ) {
-			$style .= '.{{ placeholder }} > * { margin-top: 0; margin-bottom: 0; }';
-			$style .= '.{{ placeholder }} > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }';
+			$style .= "$selector > * { margin-top: 0; margin-bottom: 0; }";
+			$style .= "$selector > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }";
 		}
 	} elseif ( 'flex' === $layout_type ) {
 		$justify_content_options = array(
@@ -75,7 +76,7 @@ function gutenberg_get_layout_style( $layout, $has_block_gap_support = false ) {
 			'space-between' => 'space-between',
 		);
 
-		$style  = '.{{ placeholder }} {';
+		$style  = "$selector {";
 		$style .= 'display: flex;';
 		if ( $has_block_gap_support ) {
 			$style .= 'gap: var( --wp--style--block-gap, 0.5em );';
@@ -94,7 +95,7 @@ function gutenberg_get_layout_style( $layout, $has_block_gap_support = false ) {
 		}
 		$style .= '}';
 
-		$style .= '{{ placeholder }} > * { margin: 0; }';
+		$style .= "$selector > * { margin: 0; }";
 	}
 
 	return $style;
@@ -128,17 +129,19 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 		$used_layout = $default_layout;
 	}
 
-	$style = gutenberg_get_layout_style( $used_layout, $has_block_gap_support );
-	$class_name = gutenberg_render_block_support_style( 'wp-container-', '<style>' . $style . '</style>' );
+	$id    = uniqid();
+	$style = gutenberg_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support );
 	// This assumes the hook only applies to blocks with a single wrapper.
 	// I think this is a reasonable limitation for that particular hook.
 	$content = preg_replace(
 		'/' . preg_quote( 'class="', '/' ) . '/',
-		'class="' . $class_name . ' ',
+		'class="wp-container-' . $id . ' ',
 		$block_content,
 		1
 	);
 
+	gutenberg_render_block_support_style( '<style>' . $style . '</style>' );
+
 	return $content;
 }
 

diff --git a/lib/blocks.php b/lib/blocks.php
@@ -625,23 +625,18 @@ function gutenberg_multiple_block_styles( $metadata ) {
  * Render block support styles and inject into wp_footer, and append
  * to the end of post content for REST API requests.
  *
- * @param string $name    The identified for a class name or id
- * @param string $content The content to be rendered
+ * @param string $content The content to be rendered.
+ * @param string $action  The type of action to use, e.g. `wp_footer` or `admin_footer`.
  *
- * @return string The class name with an id appended
  */
-function gutenberg_render_block_support_style( $name, $content, $action = 'wp_footer' ) {
-	$unique_name = $name . uniqid();
-
-	$output = str_replace( '{{ placeholder }}', $unique_name, $content );
-
+function gutenberg_render_block_support_style( $content, $action = 'wp_footer' ) {
 	// 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(
 		$action,
-		function () use ( $output ) {
-			echo $output;
+		function () use ( $content ) {
+			echo $content;
 		}
 	);
 
@@ -652,15 +647,13 @@ function () use ( $output ) {
 	if ( defined( 'REST_REQUEST' ) && REST_REQUEST ) {
 		add_filter(
 			'wp_render_block_support_styles',
-			function ( $block_support_styles ) use ( $output ) {
-				return $block_support_styles . $output;
+			function ( $block_support_styles ) use ( $content ) {
+				return $block_support_styles . $content;
 			},
 			10,
 			1
 		);
 	}
-
-	return $unique_name;
 }
 
 /**