Skip to content

Commit

Permalink
Remove button element from definition list.
Browse files Browse the repository at this point in the history 
Reinstated tests
A bit of tidying up.
  • Loading branch information
@ramonjd
ramonjd committed Jun 15, 2022
1 parent 66a0276 commit 037b923
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 120 deletions.
27 changes: 7 additions & 20 deletions packages/style-engine/class-wp-style-engine.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,15 +145,11 @@ class WP_Style_Engine {
),
),
'elements' => array(
'link' => array(
'link' => array(
'path' => array( 'elements', 'link' ),
'selector' => 'a',
'states' => array( ':hover' ),
),
'button' => array(
'path' => array( 'elements', 'button' ),
'selector' => 'button',
),
),
'spacing' => array(
'padding' => array(
Expand Down Expand Up @@ -542,29 +538,20 @@ protected static function generate_elements_styles( $element_styles, $options =
$css_output[] = $generated_elements_styles['css'];
}

// Handle states if the given element supports pseudo selector "states"
// in its allow list.
if ( ! empty( $element_definition['states'] ) ) {

foreach ( $element_definition['states'] as $state_pseudo_selector ) {

// Dynamically generate the state definitions based on the hard coded
// "allow list" of psuedo selectors for the given element.
$state_definition = array(
'path' => array_merge( $element_definition['path'], array( $state_pseudo_selector ) ),
'selector' => $element_definition['selector'] . $state_pseudo_selector,
);

$state_styles = _wp_array_get( $element_styles, $state_definition['path'], null );
foreach ( $element_definition['states'] as $state_selector ) {
// Try to fetch "state" styles in the incoming element's style object.
$state_styles = _wp_array_get( $element_styles, array_merge( $element_definition['path'], array( $state_selector ) ), null );

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

$state_options = array_merge(
$element_state_selector = "{$element_definition['selector']}$state_selector";
$state_options = array_merge(
$options,
array(
'selector' => isset( $options['selector'] ) ? "{$options['selector']} {$state_definition['selector']}" : $state_definition['selector'],
'selector' => isset( $options['selector'] ) ? "{$options['selector']} $element_state_selector" : $element_state_selector,
)
);

Expand Down
173 changes: 73 additions & 100 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 @@ -119,42 +119,42 @@ public function data_generate_styles_fixtures() {
'css' => 'border-top-left-radius: 99px; border-top-right-radius: 98px; border-bottom-left-radius: 97px; border-bottom-right-radius: 96px; padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem; margin-top: 12rem; margin-left: 2vh; margin-bottom: 2px; margin-right: 10em;',
),
),
// @TODO failing because we removed the safecss_filter_attr() to test this branch.
// 'inline_valid_typography_style' => array(
// 'block_styles' => array(
// 'typography' => array(
// 'fontSize' => 'clamp(2em, 2vw, 4em)',
// 'fontFamily' => 'Roboto,Oxygen-Sans,Ubuntu,sans-serif',
// 'fontStyle' => 'italic',
// 'fontWeight' => '800',
// 'lineHeight' => '1.3',
// 'textDecoration' => 'underline',
// 'textTransform' => 'uppercase',
// 'letterSpacing' => '2',
// ),
// ),
// 'options' => null,
// 'expected_output' => array(
// 'css' => 'font-family: Roboto,Oxygen-Sans,Ubuntu,sans-serif; font-style: italic; font-weight: 800; line-height: 1.3; text-decoration: underline; text-transform: uppercase; letter-spacing: 2;',
// ),
// ),

'style_block_with_selector' => array(
'block_styles' => array(
'spacing' => array(
'padding' => array(
'top' => '42px',
'left' => '2%',
'bottom' => '44px',
'right' => '5rem',
),
),
'inline_valid_typography_style' => array(
'block_styles' => array(
'typography' => array(
'fontSize' => 'clamp(2em, 2vw, 4em)',
'fontFamily' => 'Roboto,Oxygen-Sans,Ubuntu,sans-serif',
'fontStyle' => 'italic',
'fontWeight' => '800',
'lineHeight' => '1.3',
'textDecoration' => 'underline',
'textTransform' => 'uppercase',
'letterSpacing' => '2',
),
'options' => array( 'selector' => '.wp-selector > p' ),
'expected_output' => array(
'css' => '.wp-selector > p { padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem; }',
),
'options' => null,
'expected_output' => array(
'css' => 'font-family: Roboto,Oxygen-Sans,Ubuntu,sans-serif; font-style: italic; font-weight: 800; line-height: 1.3; text-decoration: underline; text-transform: uppercase; letter-spacing: 2;',
),
),

'style_block_with_selector' => array(
'block_styles' => array(
'spacing' => array(
'padding' => array(
'top' => '42px',
'left' => '2%',
'bottom' => '44px',
'right' => '5rem',
),
),
),
'options' => array( 'selector' => '.wp-selector > p' ),
'expected_output' => array(
'css' => '.wp-selector > p { padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem; }',
),
),

'with_valid_css_value_preset_style_property' => array(
'block_styles' => array(
Expand Down Expand Up @@ -245,51 +245,51 @@ public function data_generate_styles_fixtures() {
'classnames' => 'has-text-color has-background',
),
),
// @TODO failing because we removed the safecss_filter_attr() to test this branch.
// 'invalid_classnames_options' => array(
// 'block_styles' => array(
// 'typography' => array(
// 'fontSize' => array(
// 'tomodachi' => 'friends',
// ),
// 'fontFamily' => array(
// 'oishii' => 'tasty',
// ),
// ),
// ),
// 'options' => array(),
// 'expected_output' => array(),
// ),

'inline_valid_box_model_style_with_sides' => array(
'block_styles' => array(
'border' => array(
'top' => array(
'color' => '#fe1',
'width' => '1.5rem',
'style' => 'dashed',
),
'right' => array(
'color' => '#fe2',
'width' => '1.4rem',
'style' => 'solid',
),
'bottom' => array(
'color' => '#fe3',
'width' => '1.3rem',
),
'left' => array(
'color' => 'var:preset|color|swampy-yellow',
'width' => '0.5rem',
'style' => 'dotted',
),
'invalid_classnames_options' => array(
'block_styles' => array(
'typography' => array(
'fontSize' => array(
'tomodachi' => 'friends',
),
'fontFamily' => array(
'oishii' => 'tasty',
),
),
'options' => array(),
'expected_output' => array(
'css' => 'border-top-color: #fe1; border-top-width: 1.5rem; border-top-style: dashed; border-right-color: #fe2; border-right-width: 1.4rem; border-right-style: solid; border-bottom-color: #fe3; border-bottom-width: 1.3rem; border-left-color: var(--wp--preset--color--swampy-yellow); border-left-width: 0.5rem; border-left-style: dotted;',
),
'options' => array(),
'expected_output' => array(),
),

'inline_valid_box_model_style_with_sides' => array(
'block_styles' => array(
'border' => array(
'top' => array(
'color' => '#fe1',
'width' => '1.5rem',
'style' => 'dashed',
),
'right' => array(
'color' => '#fe2',
'width' => '1.4rem',
'style' => 'solid',
),
'bottom' => array(
'color' => '#fe3',
'width' => '1.3rem',
),
'left' => array(
'color' => 'var:preset|color|swampy-yellow',
'width' => '0.5rem',
'style' => 'dotted',
),
),
),
'options' => array(),
'expected_output' => array(
'css' => 'border-top-color: #fe1; border-top-width: 1.5rem; border-top-style: dashed; border-right-color: #fe2; border-right-width: 1.4rem; border-right-style: solid; border-bottom-color: #fe3; border-bottom-width: 1.3rem; border-left-color: var(--wp--preset--color--swampy-yellow); border-left-width: 0.5rem; border-left-style: dotted;',
),
),

'inline_invalid_box_model_style_with_sides' => array(
'block_styles' => array(
Expand Down Expand Up @@ -407,7 +407,7 @@ public function data_generate_styles_fixtures() {
'text' => '#fff',
'background' => '#000',
),
// Not a supported pseudo selector (yet!)
// Not a supported pseudo selector (yet!).
':focus' => array(
'color' => array(
'text' => '#000',
Expand All @@ -423,33 +423,6 @@ public function data_generate_styles_fixtures() {
'css' => 'a { color: #fff; background-color: #000; }',
),
),

'unsupported_elements_with_states' => array(
'block_styles' => array(
'elements' => array(
// Only `link` has state support at this time.
'button' => array(
'color' => array(
'text' => '#fff',
'background' => '#000',
),
':hover' => array(
// Should be ignored.
'color' => array(
'text' => '#000',
'background' => '#fff',
),
),
),
),
),
'options' => array(),
'expected_output' => array(
// Should not contain the `:hover` rule.
'css' => 'button { color: #fff; background-color: #000; }',
),
),

);
}
}

0 comments on commit 037b923

Please sign in to comment.