Skip to content

Commit

Permalink
Rename public method to generate to reflect current frontend API
Browse files Browse the repository at this point in the history 
Add optional options array
Explicitly tell `generate()` to return styles so we can open it up to further functionality
Update tests
  • Loading branch information
@ramonjd
ramonjd committed Mar 23, 2022
1 parent 06a10bd commit 443dfc8
Show file tree
Hide file tree
Showing 3 changed files with 180 additions and 55 deletions.
14 changes: 10 additions & 4 deletions lib/block-supports/spacing.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,12 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
$style_engine = WP_Style_Engine_Gutenberg::get_instance();

if ( $has_padding_support ) {
$padding_styles = $style_engine->get_inline_css_from_block_styles(
$padding_styles = $style_engine->generate(
$block_styles,
array( 'spacing', 'padding' )
array(
'path' => array( 'spacing', 'padding' ),
'inline' => true,
)
);

if ( $padding_styles ) {
Expand All @@ -63,9 +66,12 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {

if ( $has_margin_support ) {
// As with padding above.
$margin_styles = $style_engine->get_inline_css_from_block_styles(
$margin_styles = $style_engine->generate(
$block_styles,
array( 'spacing', 'margin' )
array(
'path' => array( 'spacing', 'margin' ),
'inline' => true,
)
);

if ( $margin_styles ) {
Expand Down
49 changes: 37 additions & 12 deletions lib/style-engine/class-wp-style-engine-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,12 @@ class WP_Style_Engine_Gutenberg {
'spacing' => array(
'padding' => array(
'property_key' => 'padding',
'path' => array( 'spacing', 'padding' ),
'value_func' => 'gutenberg_get_style_engine_css_box_rules',
),
'margin' => array(
'property_key' => 'margin',
'path' => array( 'spacing', 'margin' ),
'value_func' => 'gutenberg_get_style_engine_css_box_rules',
),
),
Expand Down Expand Up @@ -85,32 +87,55 @@ protected function get_block_style_css_rules( $style_value, $path ) {
}

/**
* Returns an CSS ruleset destined to be inserted in an HTML `style` attribute.
* Returns an CSS ruleset.
* Styles are bundled based on the instructions in BLOCK_STYLE_DEFINITIONS_METADATA.
*
* @param array $block_styles An array of styles from a block's attributes.
* @param array<string> $path An array of strings representing a path to the style value.
* @param array $block_styles An array of styles from a block's attributes.
* @param array $options = array(
* 'inline' => (boolean) Whether to return inline CSS rules destined to be inserted in an HTML `style` attribute.
* 'path' => (array) Specify a block style to generate, otherwise it'll try all in BLOCK_STYLE_DEFINITIONS_METADATA.
* );.
*
* @return string A CSS ruleset formatted to be placed in an HTML `style` attribute.
*/
public function get_inline_css_from_block_styles( $block_styles, $path ) {
public function generate( $block_styles, $options = array() ) {
$output = '';

if ( empty( $block_styles ) || empty( $path ) ) {
if ( empty( $block_styles ) ) {
return $output;
}

$style_value = _wp_array_get( $block_styles, $path, null );
$rules = array();

if ( empty( $style_value ) ) {
return $output;
// If a path to a specific block style is defined, only return rules for that style.
if ( isset( $options['path'] ) && is_array( $options['path'] ) ) {
$style_value = _wp_array_get( $block_styles, $options['path'], null );
if ( empty( $style_value ) ) {
return $output;
}
$rules = array_merge( $rules, $this->get_block_style_css_rules( $style_value, $options['path'] ) );
// Otherwise build them all.
} else {
foreach ( self::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group ) {
foreach ( $definition_group as $style_definition ) {
$style_value = _wp_array_get( $block_styles, $style_definition['path'], null );
if ( empty( $style_value ) ) {
continue;
}
$rules = array_merge( $rules, $this->get_block_style_css_rules( $style_value, $style_definition['path'] ) );
}
}
}

$rules = $this->get_block_style_css_rules( $style_value, $path );

foreach ( $rules as $rule => $value ) {
$output .= "{$rule}:{$value};";
if ( ! empty( $rules ) ) {
// Generate inline style rules.
if ( isset( $options['inline'] ) && true === $options['inline'] ) {
foreach ( $rules as $rule => $value ) {
$output .= "{$rule}:{$value};";
}
}
}

return $output;
}
}
Expand Down
172 changes: 133 additions & 39 deletions phpunit/style-engine/class-wp-style-engine-gutenberg-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,53 +10,147 @@
* Tests for registering, storing and generating styles.
*/
class WP_Style_Engine_Gutenberg_Test extends WP_UnitTestCase {
function test_returns_inline_styles_from_string() {
$style_engine = WP_Style_Engine_Gutenberg::get_instance();
$block_styles = array(
'spacing' => array(
'padding' => '111px',
),
);
$padding_styles = $style_engine->get_inline_css_from_block_styles(
/**
* Tests various manifestations of the $block_styles argument.
*
* @dataProvider data_block_styles_fixtures
*/
function test_generate_css( $block_styles, $options, $expected_output ) {
$style_engine = WP_Style_Engine_Gutenberg::get_instance();
$generated_styles = $style_engine->generate(
$block_styles,
array( 'spacing', 'padding' )
$options
);
$expected = 'padding:111px;';
$this->assertSame( $expected, $padding_styles );
$this->assertSame( $expected_output, $generated_styles );
}

function test_returns_inline_styles_from_box_rules() {
$style_engine = WP_Style_Engine_Gutenberg::get_instance();
$block_styles = array(
'spacing' => array(
'padding' => array(
'top' => '42px',
'left' => '2%',
'bottom' => '44px',
'right' => '5rem',
/**
* Data provider.
*
* @return array
*/
public function data_block_styles_fixtures() {
return array(
'default_return_value' => array(
'block_styles' => array(),
'options' => null,
'expected_output' => '',
),

'inline_invalid_block_styles_empty' => array(
'block_styles' => array(),
'options' => array(
'path' => array( 'spacing', 'padding' ),
'inline' => true,
),
'expected_output' => '',
),

'inline_invalid_block_styles_unknown_style' => array(
'block_styles' => array(
'pageBreakAfter' => 'verso',
),
'options' => array(
'inline' => true,
),
'expected_output' => '',
),
);
$padding_styles = $style_engine->get_inline_css_from_block_styles(
$block_styles,
array( 'spacing', 'padding' )
);
$expected = 'padding-top:42px;padding-left:2%;padding-bottom:44px;padding-right:5rem;';
$this->assertSame( $expected, $padding_styles );
}

function test_returns_empty_string_when_invalid_path_passed() {
$style_engine = WP_Style_Engine_Gutenberg::get_instance();
$block_styles = array(
'spacing' => array(
'padding' => '111px',
'inline_invalid_block_styles_unknown_definition' => array(
'block_styles' => array(
'pageBreakAfter' => 'verso',
),
'options' => array(
'path' => array( 'pageBreakAfter', 'verso' ),
'inline' => true,
),
'expected_output' => '',
),

'inline_invalid_block_styles_unknown_property' => array(
'block_styles' => array(
'spacing' => array(
'gavin' => '1000vw',
),
),
'options' => array(
'path' => array( 'spacing', 'padding' ),
'inline' => true,
),
'expected_output' => '',
),

'inline_invalid_multiple_style_unknown_property' => array(
'block_styles' => array(
'spacing' => array(
'gavin' => '1000vw',
),
),
'options' => array(
'inline' => true,
),
'expected_output' => '',
),

'inline_valid_single_style_string' => array(
'block_styles' => array(
'spacing' => array(
'margin' => '111px',
),
),
'options' => array(
'path' => array( 'spacing', 'margin' ),
'inline' => true,
),
'expected_output' => 'margin:111px;',
),

'inline_valid_single_style' => array(
'block_styles' => array(
'spacing' => array(
'padding' => array(
'top' => '42px',
'left' => '2%',
'bottom' => '44px',
'right' => '5rem',
),
'margin' => array(
'top' => '12rem',
'left' => '2vh',
'bottom' => '2px',
'right' => '10em',
),
),
),
'options' => array(
'path' => array( 'spacing', 'padding' ),
'inline' => true,
),
'expected_output' => 'padding-top:42px;padding-left:2%;padding-bottom:44px;padding-right:5rem;',
),

'inline_valid_multiple_style' => array(
'block_styles' => array(
'spacing' => array(
'padding' => array(
'top' => '42px',
'left' => '2%',
'bottom' => '44px',
'right' => '5rem',
),
'margin' => array(
'top' => '12rem',
'left' => '2vh',
'bottom' => '2px',
'right' => '10em',
),
),
),
'options' => array(
'inline' => true,
),
'expected_output' => 'padding-top:42px;padding-left:2%;padding-bottom:44px;padding-right:5rem;margin-top:12rem;margin-left:2vh;margin-bottom:2px;margin-right:10em;',
),
);
$padding_styles = $style_engine->get_inline_css_from_block_styles(
$block_styles,
null
);
$expected = '';
$this->assertSame( $expected, $padding_styles );
}
}

0 comments on commit 443dfc8

Please sign in to comment.