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 '';
- }
- );
+ // 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 = '
Test
';
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(
+ 'Test
',
+ $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 = '/^Test<\/div>$/';
- $matches = array();
- $found_match = preg_match(
- $expected_content_pattern,
- $render_output,
- $matches
+ $render_output = gutenberg_render_spacing_support(
+ '
',
+ $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(
- '',
- $wp_footer_output
+ '
',
+ $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
- );
}
}