Skip to content

Commit

Permalink
Cleaning up the regex, rebase for theme.json v2
Browse files Browse the repository at this point in the history 
updating php unit tests
adding axial tests
replacing block usages of block gap var with equivalent axial var

Update packages/block-library/src/button/style.scss

Co-authored-by: Andrew Serong <[email protected]>
  • Loading branch information
@ramonjd @andrewserong
ramonjd and andrewserong committed Nov 8, 2021
1 parent 7dcc755 commit 97406be
Show file tree
Hide file tree
Showing 7 changed files with 81 additions and 37 deletions.
33 changes: 10 additions & 23 deletions lib/block-supports/spacing.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,15 +108,15 @@ function gutenberg_render_spacing_gap_support( $block_content, $block ) {

$gap_value = $block['attrs']['style']['spacing']['blockGap'];

$styles = [];
if ( is_array( $gap_value ) ) {

// 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.
$gap_row_value_is_valid = ! preg_match( '%[\\\(&=}]|/\*%', $gap_value['row'] );
$gap_column_value_is_valid = ! preg_match( '%[\\\(&=}]|/\*%', $gap_value['column'] );
// Regex to test CSS gap value for unsupported characters.
// Borrowed from `safecss_filter_attr`, and used here
// because we only want to match against the value, not the CSS attribute.
$regex_pattern = '%[\\\(&=}]|/\*%';
$styles = array();

if ( is_array( $gap_value ) ) {
$gap_row_value_is_valid = isset( $gap_value['row'] ) && ! preg_match( $regex_pattern, $gap_value['row'] );
$gap_column_value_is_valid = isset( $gap_value['column'] ) && ! preg_match( $regex_pattern, $gap_value['column'] );

if ( $gap_row_value_is_valid && $gap_column_value_is_valid ) {
$styles[] = sprintf( '--wp--style--block-gap: %s %s;', esc_attr( $gap_value['row'] ), esc_attr( $gap_value['column'] ) );
Expand All @@ -129,35 +129,22 @@ function gutenberg_render_spacing_gap_support( $block_content, $block ) {
if ( $gap_column_value_is_valid ) {
$styles[] = sprintf( '--wp--style--block-column-gap: %s;', esc_attr( $gap_value['column'] ) );
}

} else {
// 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 ) ) {
if ( preg_match( $regex_pattern, $gap_value ) ) {
return $block_content;
}

$styles[] = sprintf( '--wp--style--block-gap: %s %s;', esc_attr( $gap_value ), esc_attr( $gap_value ) );
$styles[] = sprintf( '--wp--style--block-row-gap: %s;', esc_attr( $gap_value ) );
$styles[] = sprintf( '--wp--style--block-column-gap: %s;', esc_attr( $gap_value ) );

}



// $style = sprintf(
// '--wp--style--block-gap: %s',
// esc_attr( $gap_value )
// );

$style = implode( ' ', $styles );


// Attempt to update an existing style attribute on the wrapper element.
$injected_style = preg_replace(
'/^([^>.]+?)(' . preg_quote( 'style="', '/' ) . ')(?=.+?>)/',
'$1$2' . $style . '; ',
'$1$2' . $style . ' ',
$block_content,
1
);
Expand Down
2 changes: 1 addition & 1 deletion lib/class-wp-theme-json-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ class WP_Theme_JSON_Gutenberg {
'padding-bottom' => array( 'spacing', 'padding', 'bottom' ),
'padding-left' => array( 'spacing', 'padding', 'left' ),
'--wp--style--block-gap' => array( 'spacing', 'blockGap' ),
'--wp--style--block-row-gap' => array( 'spacing', 'blockGap', 'row'),
'--wp--style--block-row-gap' => array( 'spacing', 'blockGap', 'row' ),
'--wp--style--block-column-gap' => array( 'spacing', 'blockGap', 'column' ),
'text-decoration' => array( 'typography', 'textDecoration' ),
'text-transform' => array( 'typography', 'textTransform' ),
Expand Down
2 changes: 2 additions & 0 deletions packages/block-editor/src/default-editor-styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ body {
font-size: 18px;
line-height: 1.5;
--wp--style--block-gap: 2em;
--wp--style--block-row-gap: 2em;
--wp--style--block-column-gap: 2em;
}

p {
Expand Down
6 changes: 3 additions & 3 deletions packages/block-library/src/button/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,15 @@ $blocks-block__margin: 0.5em;
}

&.wp-block-button__width-25 {
width: calc(25% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.75));
width: calc(25% - (var(--wp--style--block-column-gap, #{$blocks-block__margin}) * 0.75));
}

&.wp-block-button__width-50 {
width: calc(50% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.5));
width: calc(50% - (var(--wp--style--block-column-gap, #{$blocks-block__margin}) * 0.5));
}

&.wp-block-button__width-75 {
width: calc(75% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.25));
width: calc(75% - (var(--wp--style--block-column-gap, #{$blocks-block__margin}) * 0.25));
}

&.wp-block-button__width-100 {
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/navigation/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -396,7 +396,7 @@
// Apply top padding to nested submenus.
.wp-block-navigation__submenu-container,
.wp-block-navigation__container {
padding-top: var(--wp--style--block-gap, 2em);
padding-top: var(--wp--style--block-row-gap, 2em);
}
}

Expand Down
69 changes: 62 additions & 7 deletions phpunit/block-supports/spacing-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@
*/

class WP_Block_Supports_Spacing_Test extends WP_UnitTestCase {
private $sample_block_content = '<div class="wp-block-test-block">Test</div>';
private $test_gap_block_value = array();
private $test_gap_block_args = array();
private $sample_block_content = '<div class="wp-block-test-block">Test</div>';
private $test_gap_block_value = array();
private $test_gap_block_axial_value = array();
private $test_gap_block_single_axial_value = array();
private $test_gap_block_args = array();

function setUp() {
parent::setUp();
Expand All @@ -33,6 +35,33 @@ function setUp() {
),
),
);

$this->test_gap_block_axial_value = array(
'blockName' => 'test/test-block',
'attrs' => array(
'style' => array(
'spacing' => array(
'blockGap' => array(
'row' => '44px',
'column' => '33px',
),
),
),
),
);

$this->test_gap_block_single_axial_value = array(
'blockName' => 'test/test-block',
'attrs' => array(
'style' => array(
'spacing' => array(
'blockGap' => array(
'row' => '55px',
),
),
),
),
);
}

function tearDown() {
Expand All @@ -49,7 +78,33 @@ function test_spacing_gap_block_support_renders_block_inline_style() {
);

$this->assertSame(
'<div style="--wp--style--block-gap: 3em" class="wp-block-test-block">Test</div>',
'<div style="--wp--style--block-gap: 3em 3em; --wp--style--block-row-gap: 3em; --wp--style--block-column-gap: 3em;" class="wp-block-test-block">Test</div>',
$render_output
);
}

function test_spacing_axial_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_axial_value
);

$this->assertSame(
'<div style="--wp--style--block-gap: 44px 33px; --wp--style--block-row-gap: 44px; --wp--style--block-column-gap: 33px;" class="wp-block-test-block">Test</div>',
$render_output
);
}

function test_spacing_single_axial_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_single_axial_value
);

$this->assertSame(
'<div style="--wp--style--block-row-gap: 55px;" class="wp-block-test-block">Test</div>',
$render_output
);
}
Expand All @@ -62,7 +117,7 @@ function test_spacing_gap_block_support_renders_block_inline_style_with_inner_ta
);

$this->assertSame(
'<div style="--wp--style--block-gap: 3em" class="wp-test-block"><p style="color: red;">Test</p></div>',
'<div style="--wp--style--block-gap: 3em 3em; --wp--style--block-row-gap: 3em; --wp--style--block-column-gap: 3em;" class="wp-test-block"><p style="color: red;">Test</p></div>',
$render_output
);
}
Expand All @@ -75,7 +130,7 @@ function test_spacing_gap_block_support_renders_block_inline_style_with_no_other
);

$this->assertSame(
'<div style="--wp--style--block-gap: 3em"><p>Test</p></div>',
'<div style="--wp--style--block-gap: 3em 3em; --wp--style--block-row-gap: 3em; --wp--style--block-column-gap: 3em;"><p>Test</p></div>',
$render_output
);
}
Expand All @@ -88,7 +143,7 @@ function test_spacing_gap_block_support_renders_appended_block_inline_style() {
);

$this->assertSame(
'<div class="wp-test-block" style="--wp--style--block-gap: 3em; background: green;"><p style="color: red;">Test</p></div>',
'<div class="wp-test-block" style="--wp--style--block-gap: 3em 3em; --wp--style--block-row-gap: 3em; --wp--style--block-column-gap: 3em; background: green;"><p style="color: red;">Test</p></div>',
$render_output
);
}
Expand Down
4 changes: 2 additions & 2 deletions phpunit/class-wp-theme-json-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ function test_get_stylesheet_renders_enabled_protected_properties() {
)
);

$expected = 'body{--wp--style--block-gap: 1em;}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }.wp-block-columns{--wp--style--block-gap: 24px;}';
$expected = 'body{--wp--style--block-gap: 1em;}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-column-gap ); }.wp-block-columns{--wp--style--block-gap: 24px;}';
$this->assertEquals( $expected, $theme_json->get_stylesheet() );
$this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
}
Expand Down Expand Up @@ -408,7 +408,7 @@ function test_get_stylesheet() {
);

$variables = 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}';
$styles = 'body{color: var(--wp--preset--color--grey);}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}';
$styles = 'body{color: var(--wp--preset--color--grey);}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-column-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}';
$presets = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}';
$all = $variables . $styles . $presets;
$this->assertEquals( $all, $theme_json->get_stylesheet() );
Expand Down

0 comments on commit 97406be

Please sign in to comment.