From 842bbfe6a7316c1c7d30166a7b289d33639bf1e8 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 17 Aug 2021 17:30:25 +1000
Subject: [PATCH] Refactor server-rendering to use an inline style, update
 tests

---
 lib/block-supports/spacing.php          |  32 ++++----
 phpunit/block-supports/spacing-test.php | 100 +++++++++---------------
 2 files changed, 50 insertions(+), 82 deletions(-)

diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php
index 603bf9eea4ca8f..7ae2773ebf08c9 100644
--- a/lib/block-supports/spacing.php
+++ b/lib/block-supports/spacing.php
@@ -116,32 +116,30 @@ function gutenberg_render_spacing_support( $block_content, $block ) {
 		return $block_content;
 	}
 
-	$id    = uniqid();
 	$style = sprintf(
-		'.wp-container-%s { --wp--style--block-gap: %s; }',
-		$id,
+		'--wp--style--block-gap: %s;',
 		esc_attr( $block['attrs']['style']['spacing']['blockGap'] )
 	);
 
-	// This assumes the hook only applies to blocks with a single wrapper.
-	$content = preg_replace(
-		'/' . preg_quote( 'class="', '/' ) . '/',
-		'class="wp-container-' . $id . ' ',
+	// Attempt to update an existing style attribute on the wrapper element.
+	$injected_style = preg_replace(
+		'/^(.+?)(' . preg_quote( 'style="', '/' ) . ')(?=.+?>)/',
+		'$1$2' . $style . ' ',
 		$block_content,
 		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>';
-		}
-	);
+	// If there is no existing style attribute, add one to the wrapper element.
+	if ( $injected_style === $block_content ) {
+		$injected_style = preg_replace(
+			'/<([a-zA-Z]+)/',
+			'<$1 style="' . $style . '"',
+			$block_content,
+			1
+		);
+	};
 
-	return $content;
+	return $injected_style;
 }
 
 // Register the block support.
diff --git a/phpunit/block-supports/spacing-test.php b/phpunit/block-supports/spacing-test.php
index fbc0363aefc879..b415aabf65fb21 100644
--- a/phpunit/block-supports/spacing-test.php
+++ b/phpunit/block-supports/spacing-test.php
@@ -7,49 +7,49 @@
  */
 
 class WP_Block_Supports_Spacing_Test extends WP_UnitTestCase {
-	private $old_wp_styles;
 	private $sample_block_content = '<div class="wp-block-test-block">Test</div>';
 
 	function setUp() {
 		parent::setUp();
-
-		if ( empty( $GLOBALS['wp_styles'] ) ) {
-			$GLOBALS['wp_styles'] = null;
-		}
-
-		$this->old_wp_styles = $GLOBALS['wp_styles'];
-
-		remove_action( 'wp_default_styles', 'wp_default_styles' );
-		remove_action( 'wp_print_styles', 'print_emoji_styles' );
-
-		$GLOBALS['wp_styles']                  = new WP_Styles();
-		$GLOBALS['wp_styles']->default_version = get_bloginfo( 'version' );
-
-		$GLOBALS['wp_scripts']                  = new WP_Scripts();
-		$GLOBALS['wp_scripts']->default_version = get_bloginfo( 'version' );
 	}
 
 	function tearDown() {
 		unregister_block_type( 'test/test-block' );
 
-		$GLOBALS['wp_styles'] = $this->old_wp_styles;
-
-		add_action( 'wp_default_styles', 'wp_default_styles' );
-		add_action( 'wp_print_styles', 'print_emoji_styles' );
-
 		parent::tearDown();
 	}
 
-	private function get_footer_styles() {
-		ob_start();
-		wp_footer();
-		$wp_footer_output = ob_get_contents();
-		ob_end_clean();
+	function test_spacing_gap_block_support_renders_block_inline_style() {
+		$block = array(
+			'blockName' => 'test/test-block',
+			'attrs'     => array(
+				'style' => array(
+					'spacing' => array(
+						'blockGap' => '3em',
+					),
+				),
+			),
+		);
+
+		$test_block_args = array(
+			'api_version' => 2,
+			'supports'    => array(
+				'spacing' => array(
+					'blockGap' => true,
+				),
+			),
+		);
+
+		register_block_type( 'test/test-block', $test_block_args );
+		$render_output = gutenberg_render_spacing_support( $this->sample_block_content, $block );
 
-		return $wp_footer_output;
+		$this->assertSame(
+			'<div style="--wp--style--block-gap: 3em;" class="wp-block-test-block">Test</div>',
+			$render_output
+		);
 	}
 
-	function test_spacing_gap_block_support_renders_block_style() {
+	function test_spacing_gap_block_support_renders_appended_block_inline_style() {
 		$block = array(
 			'blockName' => 'test/test-block',
 			'attrs'     => array(
@@ -71,32 +71,14 @@ function test_spacing_gap_block_support_renders_block_style() {
 		);
 
 		register_block_type( 'test/test-block', $test_block_args );
-		$render_output    = gutenberg_render_spacing_support( $this->sample_block_content, $block );
-		$wp_footer_output = $this->get_footer_styles();
-
-		$expected_content_pattern = '/^<div class="wp-container-([a-z0-9]{13}) wp-block-test-block">Test<\/div>$/';
-		$matches                  = array();
-		$found_match              = preg_match(
-			$expected_content_pattern,
-			$render_output,
-			$matches
+		$render_output = gutenberg_render_spacing_support(
+			'<div class="wp-test-block" style="background: green;"><p style="color: red;">Test</p></div>',
+			$block
 		);
 
 		$this->assertSame(
-			1,
-			$found_match,
-			sprintf(
-				"Rendered block content did not match pattern: %s\n\nActual block rendered content:\n\n%s",
-				$expected_content_pattern,
-				$render_output
-			)
-		);
-
-		$container_id = $matches[1];
-
-		$this->assertEquals(
-			'<style>.wp-container-' . $container_id . ' { --wp--style--block-gap: 3em; }</style>',
-			$wp_footer_output
+			'<div class="wp-test-block" style="--wp--style--block-gap: 3em; background: green;"><p style="color: red;">Test</p></div>',
+			$render_output
 		);
 	}
 
@@ -122,18 +104,12 @@ function test_spacing_gap_block_support_does_not_render_style_when_support_is_fa
 		);
 
 		register_block_type( 'test/test-block', $test_block_args );
-		$render_output    = gutenberg_render_spacing_support( $this->sample_block_content, $block );
-		$wp_footer_output = $this->get_footer_styles();
+		$render_output = gutenberg_render_spacing_support( $this->sample_block_content, $block );
 
 		$this->assertEquals(
 			$this->sample_block_content,
 			$render_output
 		);
-
-		$this->assertEquals(
-			'',
-			$wp_footer_output
-		);
 	}
 
 	function test_spacing_gap_block_support_does_not_render_style_when_gap_is_null() {
@@ -158,17 +134,11 @@ function test_spacing_gap_block_support_does_not_render_style_when_gap_is_null()
 		);
 
 		register_block_type( 'test/test-block', $test_block_args );
-		$render_output    = gutenberg_render_spacing_support( $this->sample_block_content, $block );
-		$wp_footer_output = $this->get_footer_styles();
+		$render_output = gutenberg_render_spacing_support( $this->sample_block_content, $block );
 
 		$this->assertEquals(
 			$this->sample_block_content,
 			$render_output
 		);
-
-		$this->assertEquals(
-			'',
-			$wp_footer_output
-		);
 	}
 }