Test<\/div>$/';
+ $matches = array();
+ $found_match = preg_match(
+ $expected_content_pattern,
+ $render_output,
+ $matches
+ );
+
+ $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
+ );
+ }
+
+ function test_spacing_gap_block_support_does_not_render_style_when_support_is_false() {
+ $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' => false,
+ ),
+ ),
+ );
+
+ 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();
+
+ $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() {
+ $block = array(
+ 'blockName' => 'test/test-block',
+ 'attrs' => array(
+ 'style' => array(
+ 'spacing' => array(
+ 'blockGap' => null,
+ ),
+ ),
+ ),
+ );
+
+ $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 );
+ $wp_footer_output = $this->get_footer_styles();
+
+ $this->assertEquals(
+ $this->sample_block_content,
+ $render_output
+ );
+
+ $this->assertEquals(
+ '',
+ $wp_footer_output
+ );
+ }
+}
From c9d87a5de408611962d2749126f47104e732f807 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 16 Aug 2021 17:05:41 +1000
Subject: [PATCH 10/20] Fix whitespace alignment in spacing block support tests
---
phpunit/block-supports/spacing-test.php | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/phpunit/block-supports/spacing-test.php b/phpunit/block-supports/spacing-test.php
index aaa60ee56584e..fbc0363aefc87 100644
--- a/phpunit/block-supports/spacing-test.php
+++ b/phpunit/block-supports/spacing-test.php
@@ -32,7 +32,7 @@ function setUp() {
function tearDown() {
unregister_block_type( 'test/test-block' );
- $GLOBALS['wp_styles'] = $this->old_wp_styles;
+ $GLOBALS['wp_styles'] = $this->old_wp_styles;
add_action( 'wp_default_styles', 'wp_default_styles' );
add_action( 'wp_print_styles', 'print_emoji_styles' );
@@ -122,7 +122,7 @@ 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 );
+ $render_output = gutenberg_render_spacing_support( $this->sample_block_content, $block );
$wp_footer_output = $this->get_footer_styles();
$this->assertEquals(
@@ -158,7 +158,7 @@ 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 );
+ $render_output = gutenberg_render_spacing_support( $this->sample_block_content, $block );
$wp_footer_output = $this->get_footer_styles();
$this->assertEquals(
From edb506e6c931ccc62483aa14ace372a3883deaaa 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 11/20] 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 603bf9eea4ca8..7ae2773ebf08c 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 fbc0363aefc87..b415aabf65fb2 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 = '
';
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(
+ '
',
+ $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
- );
}
}
From 016f4a7e4d6294b5a737518bbe3216433ddfb993 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 18 Aug 2021 16:57:16 +1000
Subject: [PATCH 12/20] Tweak regex to fix issue where wrapper has no style
attribute, but child node does
---
lib/block-supports/spacing.php | 26 ++++--
phpunit/block-supports/spacing-test.php | 116 +++++++++---------------
2 files changed, 60 insertions(+), 82 deletions(-)
diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php
index 7ae2773ebf08c..35aa827477fed 100644
--- a/lib/block-supports/spacing.php
+++ b/lib/block-supports/spacing.php
@@ -101,30 +101,38 @@ function gutenberg_skip_spacing_serialization( $block_type ) {
/**
- * Renders the spacing support to the block wrapper, for supports that
- * require block-level server-side rendering, for example blockGap support
- * which uses CSS variables.
+ * Renders the spacing gap support to the block wrapper, to ensure
+ * that the CSS variable is rendered in all environments.
*
* @param string $block_content Rendered block content.
* @param array $block Block object.
* @return string Filtered block content.
*/
-function gutenberg_render_spacing_support( $block_content, $block ) {
+function gutenberg_render_spacing_gap_support( $block_content, $block ) {
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
$has_gap_support = gutenberg_block_has_support( $block_type, array( 'spacing', 'blockGap' ), false );
if ( ! $has_gap_support || ! isset( $block['attrs']['style']['spacing']['blockGap'] ) ) {
return $block_content;
}
+ $gap_value = $block['attrs']['style']['spacing']['blockGap'];
+
+ // Skip if gap value contains unsupported characters.
+ // Regex for CSS value borrowed from `safecss_filter_attr`, and used here
+ // because we only want to match against the value, not the CSS attribute.
+ if ( preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ) {
+ return $block_content;
+ }
+
$style = sprintf(
- '--wp--style--block-gap: %s;',
- esc_attr( $block['attrs']['style']['spacing']['blockGap'] )
+ '--wp--style--block-gap: %s',
+ esc_attr( $gap_value )
);
// Attempt to update an existing style attribute on the wrapper element.
$injected_style = preg_replace(
- '/^(.+?)(' . preg_quote( 'style="', '/' ) . ')(?=.+?>)/',
- '$1$2' . $style . ' ',
+ '/^([^>.]+?)(' . preg_quote( 'style="', '/' ) . ')(?=.+?>)/',
+ '$1$2' . $style . '; ',
$block_content,
1
);
@@ -151,4 +159,4 @@ function gutenberg_render_spacing_support( $block_content, $block ) {
)
);
-add_filter( 'render_block', 'gutenberg_render_spacing_support', 10, 2 );
+add_filter( 'render_block', 'gutenberg_render_spacing_gap_support', 10, 2 );
diff --git a/phpunit/block-supports/spacing-test.php b/phpunit/block-supports/spacing-test.php
index b415aabf65fb2..0b9dd0f22d96d 100644
--- a/phpunit/block-supports/spacing-test.php
+++ b/phpunit/block-supports/spacing-test.php
@@ -9,18 +9,13 @@
class WP_Block_Supports_Spacing_Test extends WP_UnitTestCase {
private $sample_block_content = '
Test
';
+ private $test_gap_block_value = array();
+ private $test_gap_block_args = array();
+
function setUp() {
parent::setUp();
- }
-
- function tearDown() {
- unregister_block_type( 'test/test-block' );
- parent::tearDown();
- }
-
- function test_spacing_gap_block_support_renders_block_inline_style() {
- $block = array(
+ $this->test_gap_block_value = array(
'blockName' => 'test/test-block',
'attrs' => array(
'style' => array(
@@ -31,7 +26,7 @@ function test_spacing_gap_block_support_renders_block_inline_style() {
),
);
- $test_block_args = array(
+ $this->test_gap_block_args = array(
'api_version' => 2,
'supports' => array(
'spacing' => array(
@@ -39,41 +34,45 @@ function test_spacing_gap_block_support_renders_block_inline_style() {
),
),
);
+ }
- register_block_type( 'test/test-block', $test_block_args );
- $render_output = gutenberg_render_spacing_support( $this->sample_block_content, $block );
+ function tearDown() {
+ unregister_block_type( 'test/test-block' );
+
+ parent::tearDown();
+ }
+
+ function test_spacing_gap_block_support_renders_block_inline_style() {
+ register_block_type( 'test/test-block', $this->test_gap_block_args );
+ $render_output = gutenberg_render_spacing_gap_support(
+ $this->sample_block_content,
+ $this->test_gap_block_value
+ );
$this->assertSame(
- '
Test
',
+ '
Test
',
$render_output
);
}
- function test_spacing_gap_block_support_renders_appended_block_inline_style() {
- $block = array(
- 'blockName' => 'test/test-block',
- 'attrs' => array(
- 'style' => array(
- 'spacing' => array(
- 'blockGap' => '3em',
- ),
- ),
- ),
+ function test_spacing_gap_block_support_renders_block_inline_style_with_inner_tag() {
+ register_block_type( 'test/test-block', $this->test_gap_block_args );
+ $render_output = gutenberg_render_spacing_gap_support(
+ '
',
+ $this->test_gap_block_value
);
- $test_block_args = array(
- 'api_version' => 2,
- 'supports' => array(
- 'spacing' => array(
- 'blockGap' => true,
- ),
- ),
+ $this->assertSame(
+ '
',
+ $render_output
);
+ }
- register_block_type( 'test/test-block', $test_block_args );
- $render_output = gutenberg_render_spacing_support(
+ function test_spacing_gap_block_support_renders_appended_block_inline_style() {
+ register_block_type( 'test/test-block', $this->test_gap_block_args );
+ $render_output = gutenberg_render_spacing_gap_support(
'
',
- $block
+ $this->test_gap_block_value
);
$this->assertSame(
@@ -83,29 +82,14 @@ function test_spacing_gap_block_support_renders_appended_block_inline_style() {
}
function test_spacing_gap_block_support_does_not_render_style_when_support_is_false() {
- $block = array(
- 'blockName' => 'test/test-block',
- 'attrs' => array(
- 'style' => array(
- 'spacing' => array(
- 'blockGap' => '3em',
- ),
- ),
- ),
- );
+ $this->test_gap_block_args['supports']['spacing']['blockGap'] = false;
- $test_block_args = array(
- 'api_version' => 2,
- 'supports' => array(
- 'spacing' => array(
- 'blockGap' => false,
- ),
- ),
+ register_block_type( 'test/test-block', $test_gap_block_args );
+ $render_output = gutenberg_render_spacing_gap_support(
+ $this->sample_block_content,
+ $this->test_gap_block_value
);
- register_block_type( 'test/test-block', $test_block_args );
- $render_output = gutenberg_render_spacing_support( $this->sample_block_content, $block );
-
$this->assertEquals(
$this->sample_block_content,
$render_output
@@ -113,28 +97,14 @@ function test_spacing_gap_block_support_does_not_render_style_when_support_is_fa
}
function test_spacing_gap_block_support_does_not_render_style_when_gap_is_null() {
- $block = array(
- 'blockName' => 'test/test-block',
- 'attrs' => array(
- 'style' => array(
- 'spacing' => array(
- 'blockGap' => null,
- ),
- ),
- ),
- );
-
- $test_block_args = array(
- 'api_version' => 2,
- 'supports' => array(
- 'spacing' => array(
- 'blockGap' => true,
- ),
- ),
- );
+ $this->test_gap_block_value['attrs']['style']['spacing']['blockGap'] = null;
+ $this->test_gap_block_args['supports']['spacing']['blockGap'] = true;
register_block_type( 'test/test-block', $test_block_args );
- $render_output = gutenberg_render_spacing_support( $this->sample_block_content, $block );
+ $render_output = gutenberg_render_spacing_gap_support(
+ $this->sample_block_content,
+ $this->test_gap_block_value
+ );
$this->assertEquals(
$this->sample_block_content,
From 1a22b15ef23019ac35daee0567d4f54005b402c1 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 18 Aug 2021 17:06:31 +1000
Subject: [PATCH 13/20] Add additional tests
---
phpunit/block-supports/spacing-test.php | 29 +++++++++++++++++++++++++
1 file changed, 29 insertions(+)
diff --git a/phpunit/block-supports/spacing-test.php b/phpunit/block-supports/spacing-test.php
index 0b9dd0f22d96d..d0caa13a0dff5 100644
--- a/phpunit/block-supports/spacing-test.php
+++ b/phpunit/block-supports/spacing-test.php
@@ -68,6 +68,19 @@ function test_spacing_gap_block_support_renders_block_inline_style_with_inner_ta
);
}
+ function test_spacing_gap_block_support_renders_block_inline_style_with_no_other_attributes() {
+ register_block_type( 'test/test-block', $this->test_gap_block_args );
+ $render_output = gutenberg_render_spacing_gap_support(
+ '
',
+ $this->test_gap_block_value
+ );
+
+ $this->assertSame(
+ '
',
+ $render_output
+ );
+ }
+
function test_spacing_gap_block_support_renders_appended_block_inline_style() {
register_block_type( 'test/test-block', $this->test_gap_block_args );
$render_output = gutenberg_render_spacing_gap_support(
@@ -111,4 +124,20 @@ function test_spacing_gap_block_support_does_not_render_style_when_gap_is_null()
$render_output
);
}
+
+ function test_spacing_gap_block_support_does_not_render_style_when_gap_is_illegal_value() {
+ $this->test_gap_block_value['attrs']['style']['spacing']['blockGap'] = '" javascript="alert("hello");';
+ $this->test_gap_block_args['supports']['spacing']['blockGap'] = true;
+
+ register_block_type( 'test/test-block', $test_block_args );
+ $render_output = gutenberg_render_spacing_gap_support(
+ $this->sample_block_content,
+ $this->test_gap_block_value
+ );
+
+ $this->assertEquals(
+ $this->sample_block_content,
+ $render_output
+ );
+ }
}
From 0d52de9435e06b2a747eff1ab6704933a0dcf83d Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 18 Aug 2021 17:07:51 +1000
Subject: [PATCH 14/20] Align equals signs correctly
---
phpunit/block-supports/spacing-test.php | 7 +++----
1 file changed, 3 insertions(+), 4 deletions(-)
diff --git a/phpunit/block-supports/spacing-test.php b/phpunit/block-supports/spacing-test.php
index d0caa13a0dff5..6c33c86a39980 100644
--- a/phpunit/block-supports/spacing-test.php
+++ b/phpunit/block-supports/spacing-test.php
@@ -8,9 +8,8 @@
class WP_Block_Supports_Spacing_Test extends WP_UnitTestCase {
private $sample_block_content = '
Test
';
-
private $test_gap_block_value = array();
- private $test_gap_block_args = array();
+ private $test_gap_block_args = array();
function setUp() {
parent::setUp();
@@ -111,7 +110,7 @@ function test_spacing_gap_block_support_does_not_render_style_when_support_is_fa
function test_spacing_gap_block_support_does_not_render_style_when_gap_is_null() {
$this->test_gap_block_value['attrs']['style']['spacing']['blockGap'] = null;
- $this->test_gap_block_args['supports']['spacing']['blockGap'] = true;
+ $this->test_gap_block_args['supports']['spacing']['blockGap'] = true;
register_block_type( 'test/test-block', $test_block_args );
$render_output = gutenberg_render_spacing_gap_support(
@@ -127,7 +126,7 @@ function test_spacing_gap_block_support_does_not_render_style_when_gap_is_null()
function test_spacing_gap_block_support_does_not_render_style_when_gap_is_illegal_value() {
$this->test_gap_block_value['attrs']['style']['spacing']['blockGap'] = '" javascript="alert("hello");';
- $this->test_gap_block_args['supports']['spacing']['blockGap'] = true;
+ $this->test_gap_block_args['supports']['spacing']['blockGap'] = true;
register_block_type( 'test/test-block', $test_block_args );
$render_output = gutenberg_render_spacing_gap_support(
From f8a09329ef60b849dfdc40f0afdd1dd3a8806a3d Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 18 Aug 2021 17:19:57 +1000
Subject: [PATCH 15/20] Fix typo / phpcs warning
---
phpunit/block-supports/spacing-test.php | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/phpunit/block-supports/spacing-test.php b/phpunit/block-supports/spacing-test.php
index 6c33c86a39980..1038cfcb5ca97 100644
--- a/phpunit/block-supports/spacing-test.php
+++ b/phpunit/block-supports/spacing-test.php
@@ -96,7 +96,7 @@ function test_spacing_gap_block_support_renders_appended_block_inline_style() {
function test_spacing_gap_block_support_does_not_render_style_when_support_is_false() {
$this->test_gap_block_args['supports']['spacing']['blockGap'] = false;
- register_block_type( 'test/test-block', $test_gap_block_args );
+ register_block_type( 'test/test-block', $this->test_gap_block_args );
$render_output = gutenberg_render_spacing_gap_support(
$this->sample_block_content,
$this->test_gap_block_value
@@ -112,7 +112,7 @@ function test_spacing_gap_block_support_does_not_render_style_when_gap_is_null()
$this->test_gap_block_value['attrs']['style']['spacing']['blockGap'] = null;
$this->test_gap_block_args['supports']['spacing']['blockGap'] = true;
- register_block_type( 'test/test-block', $test_block_args );
+ register_block_type( 'test/test-block', $this->test_gap_block_args );
$render_output = gutenberg_render_spacing_gap_support(
$this->sample_block_content,
$this->test_gap_block_value
@@ -128,7 +128,7 @@ function test_spacing_gap_block_support_does_not_render_style_when_gap_is_illega
$this->test_gap_block_value['attrs']['style']['spacing']['blockGap'] = '" javascript="alert("hello");';
$this->test_gap_block_args['supports']['spacing']['blockGap'] = true;
- register_block_type( 'test/test-block', $test_block_args );
+ register_block_type( 'test/test-block', $this->test_gap_block_args );
$render_output = gutenberg_render_spacing_gap_support(
$this->sample_block_content,
$this->test_gap_block_value
From a974db1cf86d1f27c8153981bf9797f870e17b25 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 18 Aug 2021 17:28:04 +1000
Subject: [PATCH 16/20] Remove gap from apply_spacing_support so it isn't
applied twice for dynamic blocks
---
lib/block-supports/spacing.php | 9 ---------
1 file changed, 9 deletions(-)
diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php
index 35aa827477fed..4ad5f643e527e 100644
--- a/lib/block-supports/spacing.php
+++ b/lib/block-supports/spacing.php
@@ -45,7 +45,6 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
$has_padding_support = gutenberg_block_has_support( $block_type, array( 'spacing', 'padding' ), false );
$has_margin_support = gutenberg_block_has_support( $block_type, array( 'spacing', 'margin' ), false );
- $has_gap_support = gutenberg_block_has_support( $block_type, array( 'spacing', 'blockGap' ), false );
$styles = array();
if ( $has_padding_support ) {
@@ -72,14 +71,6 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
}
}
- if ( $has_gap_support ) {
- $gap_value = _wp_array_get( $block_attributes, array( 'style', 'spacing', 'blockGap' ), null );
-
- if ( is_string( $gap_value ) ) {
- $styles[] = sprintf( '--wp--style--block-gap: %s', $gap_value );
- }
- }
-
return empty( $styles ) ? array() : array( 'style' => implode( ' ', $styles ) );
}
From 276837e39f0dba2c18f979c3c7708c2c145e7510 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 27 Aug 2021 11:58:59 +1000
Subject: [PATCH 17/20] Remove duplicate block gap style attribute from
constants
---
packages/blocks/src/api/constants.js | 5 +----
1 file changed, 1 insertion(+), 4 deletions(-)
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index eb34a7a63818d..8971264238089 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -72,10 +72,6 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
value: [ 'typography', 'fontWeight' ],
support: [ 'typography', '__experimentalFontWeight' ],
},
- '--wp--style--block-gap': {
- value: [ 'spacing', 'blockGap' ],
- support: [ 'spacing', 'blockGap' ],
- },
lineHeight: {
value: [ 'typography', 'lineHeight' ],
support: [ 'typography', 'lineHeight' ],
@@ -114,6 +110,7 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
},
'--wp--style--block-gap': {
value: [ 'spacing', 'blockGap' ],
+ support: [ 'spacing', 'blockGap' ],
},
};
From 530d8b5a86856419e0f4d5bf79c33cf32276cfaa Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 27 Aug 2021 12:31:41 +1000
Subject: [PATCH 18/20] Tweak regex
---
lib/block-supports/spacing.php | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php
index 4ad5f643e527e..ca7b77f43864b 100644
--- a/lib/block-supports/spacing.php
+++ b/lib/block-supports/spacing.php
@@ -131,8 +131,8 @@ function gutenberg_render_spacing_gap_support( $block_content, $block ) {
// 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 . '"',
+ '/<([a-zA-Z0-9]+)([ >])/',
+ '<$1 style="' . $style . '"$2',
$block_content,
1
);
From 9a421ca97332dee2ee0ecd09271ec49142d3d66f Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 30 Aug 2021 15:31:53 +1000
Subject: [PATCH 19/20] Rename support from customBlockGap to blockGap
---
lib/class-wp-theme-json-gutenberg.php | 2 +-
lib/theme.json | 2 +-
packages/block-editor/src/hooks/gap.js | 2 +-
packages/edit-site/src/components/sidebar/dimensions-panel.js | 2 +-
4 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index c2630797e6039..fc93fb9fe549d 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -99,7 +99,7 @@ class WP_Theme_JSON_Gutenberg {
'wideSize' => null,
),
'spacing' => array(
- 'customBlockGap' => null,
+ 'blockGap' => null,
'customMargin' => null,
'customPadding' => null,
'units' => null,
diff --git a/lib/theme.json b/lib/theme.json
index e6844cddc1760..5d952b381ef93 100644
--- a/lib/theme.json
+++ b/lib/theme.json
@@ -211,7 +211,7 @@
]
},
"spacing": {
- "customBlockGap": false,
+ "blockGap": false,
"customMargin": false,
"customPadding": false,
"units": [ "px", "em", "rem", "vh", "vw", "%" ]
diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
index 29d64dcf0239b..d20b94c2b72cd 100644
--- a/packages/block-editor/src/hooks/gap.js
+++ b/packages/block-editor/src/hooks/gap.js
@@ -66,7 +66,7 @@ export function resetGap( { attributes = {}, setAttributes } ) {
* @return {boolean} Whether the gap setting is disabled.
*/
export function useIsGapDisabled( { name: blockName } = {} ) {
- const isDisabled = ! useSetting( 'spacing.customBlockGap' );
+ const isDisabled = ! useSetting( 'spacing.blockGap' );
return ! hasGapSupport( blockName ) || isDisabled;
}
diff --git a/packages/edit-site/src/components/sidebar/dimensions-panel.js b/packages/edit-site/src/components/sidebar/dimensions-panel.js
index ab156f7f08896..72059768b3018 100644
--- a/packages/edit-site/src/components/sidebar/dimensions-panel.js
+++ b/packages/edit-site/src/components/sidebar/dimensions-panel.js
@@ -39,7 +39,7 @@ function useHasMargin( { name, supports } ) {
}
function useHasGap( { name, supports } ) {
- const settings = useSetting( 'spacing.customBlockGap', name );
+ const settings = useSetting( 'spacing.blockGap', name );
return settings && supports.includes( '--wp--style--block-gap' );
}
From 779afe586341bdd8c78e627988dd00a97cfaf4b2 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 30 Aug 2021 15:37:39 +1000
Subject: [PATCH 20/20] Align whitespace
---
lib/class-wp-theme-json-gutenberg.php | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index fc93fb9fe549d..f63f3f40bbb42 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -99,10 +99,10 @@ class WP_Theme_JSON_Gutenberg {
'wideSize' => null,
),
'spacing' => array(
- 'blockGap' => null,
- 'customMargin' => null,
- 'customPadding' => null,
- 'units' => null,
+ 'blockGap' => null,
+ 'customMargin' => null,
+ 'customPadding' => null,
+ 'units' => null,
),
'typography' => array(
'customFontSize' => null,