Skip to content

Commit

Permalink
Removing generating styles based on an options path since we're not u…
Browse files Browse the repository at this point in the history 
…sing it yet.

Adding a new public function to generate_classnames.
Updated tests.
  • Loading branch information
@ramonjd
ramonjd committed Apr 12, 2022
1 parent ff83f80 commit 6edbfa4
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 101 deletions.
2 changes: 1 addition & 1 deletion lib/block-supports/spacing.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
return $attributes;
}

$style_engine = WP_Style_Engine_Gutenberg::get_instance();
$style_engine = gutenberg_get_style_engine();
$skip_padding = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'padding' );
$skip_margin = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'margin' );
$spacing_block_styles = array();
Expand Down
6 changes: 3 additions & 3 deletions lib/block-supports/typography.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,18 +175,18 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
}
}

$style_engine = WP_Style_Engine_Gutenberg::get_instance();
$style_engine = gutenberg_get_style_engine();
$inline_styles = $style_engine->generate(
array( 'typography' => $styles ),
array(
'inline' => true,
)
);

$classnames = $style_engine->generate(
$classnames = $style_engine->get_classnames(
array( 'typography' => $classes ),
array(
'classnames' => true,
'use_schema' => true,
)
);

Expand Down
92 changes: 42 additions & 50 deletions packages/style-engine/class-wp-style-engine.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,16 +50,16 @@ class WP_Style_Engine {
),
'typography' => array(
'fontSize' => array(
'property_key' => 'font-size',
'path' => array( 'typography', 'fontSize' ),
'value_func' => 'static::get_css_rules',
'classname_pattern' => 'has-%s-font-size',
'property_key' => 'font-size',
'path' => array( 'typography', 'fontSize' ),
'value_func' => 'static::get_css_rules',
'classname_schema' => 'has-%s-font-size',
),
'fontFamily' => array(
'property_key' => 'font-family',
'path' => array( 'typography', 'fontFamily' ),
'value_func' => 'static::get_css_rules',
'classname_pattern' => 'has-%s-font-family',
'property_key' => 'font-family',
'path' => array( 'typography', 'fontFamily' ),
'value_func' => 'static::get_css_rules',
'classname_schema' => 'has-%s-font-family',
),
'fontStyle' => array(
'property_key' => 'font-style',
Expand Down Expand Up @@ -133,23 +133,42 @@ protected function get_block_style_css_rules( $style_value, $path ) {
}

/**
* Returns a classname built using the classname_pattern in BLOCK_STYLE_DEFINITIONS_METADATA.
* Returns a classname built using a provided schema.
*
* @param string $classname_slug A single slug to be inserted into the classname pattern.
* @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.
* Some of the values may contain slugs that need to be parsed using a schema.
* @param array $options = array(
* 'use_schema' => (boolean) Whether to use the internal classname schema in BLOCK_STYLE_DEFINITIONS_METADATA.
* );.
*
* @return string A CSS classname.
*/
protected function get_block_classname( $classname_slug, $path ) {
$style_definition = _wp_array_get( static::BLOCK_STYLE_DEFINITIONS_METADATA, $path, null );
public function get_classnames( $block_styles, $options = array() ) {
$output = '';

if ( ! empty( $style_definition ) ) {
if ( isset( $style_definition['classname_pattern'] ) ) {
return sprintf( $style_definition['classname_pattern'], $classname_slug );
if ( empty( $block_styles ) ) {
return $output;
}

$classnames = array();
$use_schema = isset( $options['use_schema'] ) ? $options['use_schema'] : false;

foreach ( self::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group ) {
foreach ( $definition_group as $style_definition ) {
$classname_value = _wp_array_get( $block_styles, $style_definition['path'], null );

if ( empty( $classname_value ) ) {
continue;
}

$style_definition = _wp_array_get( static::BLOCK_STYLE_DEFINITIONS_METADATA, $style_definition['path'], null );
// If there is no stored schema we could generate classnames based on other properties such as the path or value or other prefix passed to options.
$schema = $use_schema ? $style_definition['classname_schema'] : '';
$classnames[] = sprintf( $schema, $classname_value );
}
}

return '';
return implode( ' ', $classnames );
}

/**
Expand All @@ -171,42 +190,15 @@ public function generate( $block_styles, $options = array() ) {
return $output;
}

if ( isset( $options['classnames'] ) && true === $options['classnames'] ) {

$classnames = array();
foreach ( self::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group ) {
foreach ( $definition_group as $style_definition ) {
$classname_value = _wp_array_get( $block_styles, $style_definition['path'], null );

if ( empty( $classname_value ) ) {
continue;
}

$classnames[] = $this->get_block_classname( $classname_value, $style_definition['path'] );
}
}
return implode( ' ', $classnames );
}

$rules = array();

// 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'] ) );
} else {
// Otherwise build them all.
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'] ) );
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'] ) );
}
}

Expand Down
95 changes: 48 additions & 47 deletions packages/style-engine/phpunit/class-wp-style-engine-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@
*/
class WP_Style_Engine_Test extends WP_UnitTestCase {
/**
* Tests various manifestations of the $block_styles argument.
* Tests generating styles based on various manifestations of the $block_styles argument.
*
* @dataProvider data_block_styles_fixtures
* @dataProvider data_generate_css_fixtures
*/
function test_generate_css( $block_styles, $options, $expected_output ) {
$style_engine = WP_Style_Engine::get_instance();
$style_engine = wp_get_style_engine();
$generated_styles = $style_engine->generate(
$block_styles,
$options
Expand All @@ -31,7 +31,7 @@ function test_generate_css( $block_styles, $options, $expected_output ) {
*
* @return array
*/
public function data_block_styles_fixtures() {
public function data_generate_css_fixtures() {
return array(
'default_return_value' => array(
'block_styles' => array(),
Expand All @@ -42,7 +42,6 @@ public function data_block_styles_fixtures() {
'inline_invalid_block_styles_empty' => array(
'block_styles' => array(),
'options' => array(
'path' => array( 'spacing', 'padding' ),
'inline' => true,
),
'expected_output' => '',
Expand All @@ -63,7 +62,6 @@ public function data_block_styles_fixtures() {
'pageBreakAfter' => 'verso',
),
'options' => array(
'path' => array( 'pageBreakAfter', 'verso' ),
'inline' => true,
),
'expected_output' => '',
Expand All @@ -76,62 +74,24 @@ public function data_block_styles_fixtures() {
),
),
'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(
'inline_valid_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_spacing_style' => array(
'inline_valid_box_model_style' => array(
'block_styles' => array(
'spacing' => array(
'padding' => array(
Expand All @@ -154,7 +114,7 @@ public function data_block_styles_fixtures() {
'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;',
),

'inline_valid_multiple_typography_style' => array(
'inline_valid_typography_style' => array(
'block_styles' => array(
'typography' => array(
'fontSize' => 'clamp(2em, 2vw, 4em)',
Expand All @@ -174,4 +134,45 @@ public function data_block_styles_fixtures() {
),
);
}

/**
* Tests generating classnames based on various manifestations of the $block_styles argument.
*
* @dataProvider data_get_classnames_fixtures
*/
function test_get_classnames( $block_styles, $options, $expected_output ) {
$style_engine = wp_get_style_engine();
$generated_styles = $style_engine->get_classnames(
$block_styles,
$options
);
$this->assertSame( $expected_output, $generated_styles );
}

/**
* Data provider.
*
* @return array
*/
public function data_get_classnames_fixtures() {
return array(
'default_return_value' => array(
'block_styles' => array(),
'options' => null,
'expected_output' => '',
),
'valid_classnames_use_schema' => array(
'block_styles' => array(
'typography' => array(
'fontSize' => 'fantastic',
'fontFamily' => 'totally-awesome',
),
),
'options' => array(
'use_schema' => true,
),
'expected_output' => 'has-fantastic-font-size has-totally-awesome-font-family',
),
);
}
}

0 comments on commit 6edbfa4

Please sign in to comment.