Skip to content

Commit

Permalink
Remove everything that is not a link with :hover
Browse files Browse the repository at this point in the history 
Initial version should only support :hover on link. We can iteratively add support for more functionality once the elements API is upgraded.
  • Loading branch information
@getdave @ramonjd
getdave authored and ramonjd committed Jun 15, 2022
1 parent 9448577 commit a0037a0
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 41 deletions.
49 changes: 25 additions & 24 deletions packages/style-engine/class-wp-style-engine.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,12 +148,11 @@ class WP_Style_Engine {
'link' => array(
'path' => array( 'elements', 'link' ),
'selector' => 'a',
'states' => array( ':hover', ':focus' ),
'states' => array( ':hover' ),
),
'button' => array(
'path' => array( 'elements', 'button' ),
'selector' => 'button',
'states' => array( ':hover', ':focus', ':disabled' ),
),
),
'spacing' => array(
Expand Down Expand Up @@ -543,37 +542,39 @@ 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'] ) ) {

// States.
foreach ( $element_definition['states'] as $state_pseudo_selector ) {
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,
);
// 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 );
$state_styles = _wp_array_get( $element_styles, $state_definition['path'], null );

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

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

$generated_state_styles = self::get_instance()->generate( $state_styles, $state_options );
$generated_state_styles = self::get_instance()->generate( $state_styles, $state_options );

if ( isset( $generated_state_styles['css'] ) ) {
$css_output[] = $generated_state_styles['css'];
if ( isset( $generated_state_styles['css'] ) ) {
$css_output[] = $generated_state_styles['css'];
}
}
}

}

if ( ! empty( $css_output ) ) {
Expand Down
74 changes: 57 additions & 17 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 @@ -347,7 +347,7 @@ public function data_generate_styles_fixtures() {
'elements_and_element_states_with_selector' => array(
'block_styles' => array(
'elements' => array(
'link' => array(
'link' => array(
'color' => array(
'text' => '#fff',
'background' => '#000',
Expand All @@ -365,51 +365,91 @@ public function data_generate_styles_fixtures() {
),
),
),
'button' => array(
'color' => array(
),
),
'options' => array( 'selector' => '.la-sinistra' ),
'expected_output' => array(
'css' => '.la-sinistra a { color: #fff; background-color: #000; } .la-sinistra a:hover { color: #000; background-color: #fff; }',
),
),

'elements_and_element_states_with_css_vars' => array(
'block_styles' => array(
'elements' => array(
'link' => array(
'color' => array(
'text' => 'var:preset|color|roastbeef',
'background' => '#000',
),
':hover' => array(
'color' => array(
'text' => 'var:preset|color|pineapple',
'background' => 'var:preset|color|goldenrod',
),
),
),
),
),
'options' => array(
'selector' => '.der-beste-link',
'css_vars' => true,
),
'expected_output' => array(
'css' => '.der-beste-link a { color: var(--wp--preset--color--roastbeef); background-color: #000; } .der-beste-link a:hover { color: var(--wp--preset--color--pineapple); background-color: var(--wp--preset--color--goldenrod); }',
),
),

'elements_and_unsupported_element_states' => array(
'block_styles' => array(
'elements' => array(
'link' => array(
'color' => array(
'text' => '#fff',
'background' => '#000',
),
':disabled' => array(
// Not a supported pseudo selector (yet!)
':focus' => array(
'color' => array(
'text' => '#999',
'text' => '#000',
'background' => '#fff',
),
),
),
),
),
'options' => array( 'selector' => '.la-sinistra' ),
'options' => array(),
'expected_output' => array(
'css' => '.la-sinistra a { color: #fff; background-color: #000; } .la-sinistra a:hover { color: #000; background-color: #fff; } .la-sinistra a:focus { color: #000; background-color: #fff; } .la-sinistra button { color: #fff; background-color: #000; } .la-sinistra button:disabled { color: #999; background-color: #fff; }',
// Should not contain the `:focus` rule.
'css' => 'a { color: #fff; background-color: #000; }',
),
),

'elements_and_element_states_with_css_vars' => array(
'unsupported_elements_with_states' => array(
'block_styles' => array(
'elements' => array(
// Only `link` has state support at this time.
'button' => array(
'color' => array(
'text' => 'var:preset|color|roastbeef',
'color' => array(
'text' => '#fff',
'background' => '#000',
),
':hover' => array(
// Should be ignored.
'color' => array(
'text' => 'var:preset|color|pineapple',
'background' => 'var:preset|color|goldenrod',
'text' => '#000',
'background' => '#fff',
),
),
),
),
),
'options' => array(
'selector' => '.der-beste-button',
'css_vars' => true,
),
'options' => array(),
'expected_output' => array(
'css' => '.der-beste-button button { color: var(--wp--preset--color--roastbeef); background-color: #000; } .der-beste-button button:hover { color: var(--wp--preset--color--pineapple); background-color: var(--wp--preset--color--goldenrod); }',
// Should not contain the `:hover` rule.
'css' => 'button { color: #fff; background-color: #000; }',
),
),

);
}
}

0 comments on commit a0037a0

Please sign in to comment.