Skip to content

Commit

Permalink
Refactor server-rendering to use an inline style, update tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@andrewserong
andrewserong committed Aug 17, 2021
1 parent ea441af commit 842bbfe
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 82 deletions.
32 changes: 15 additions & 17 deletions lib/block-supports/spacing.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
100 changes: 35 additions & 65 deletions phpunit/block-supports/spacing-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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
);
}

Expand All @@ -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() {
Expand All @@ -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
);
}
}

0 comments on commit 842bbfe

Please sign in to comment.