Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Global styles: Append preset classes to any block custom selectors to help ensure correct specificity #40237

Closed
wants to merge 3 commits into from
Closed

Global styles: Append preset classes to any block custom selectors to help ensure correct specificity #40237

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
881885e
Append preset classes to any block custom selectors in order to ensur…
Apr 11, 2022
001498f
need to add for all custom selectors not just those with a class
Apr 11, 2022
93b62de
Combine selectors to reduce extra css
Apr 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 28 additions & 7 deletions lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -523,6 +523,7 @@ protected static function get_blocks_metadata() {
is_string( $block_type->supports['__experimentalSelector'] )
) {
static::$blocks_metadata[ $block_name ]['selector'] = $block_type->supports['__experimentalSelector'];
static::$blocks_metadata['custom_selectors'][] = $block_type->supports['__experimentalSelector'];
} else {
static::$blocks_metadata[ $block_name ]['selector'] = '.wp-block-' . str_replace( '/', '-', str_replace( 'core/', '', $block_name ) );
}
Expand Down Expand Up @@ -652,7 +653,7 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets'
}

if ( in_array( 'presets', $types, true ) ) {
$stylesheet .= $this->get_preset_classes( $setting_nodes, $origins );
$stylesheet .= $this->get_preset_classes( $setting_nodes, $origins, $blocks_metadata['custom_selectors'] );
}

return $stylesheet;
Expand Down Expand Up @@ -804,7 +805,7 @@ protected function get_block_classes( $style_nodes ) {
* @param array $origins List of origins to process presets from.
* @return string The new stylesheet.
*/
protected function get_preset_classes( $setting_nodes, $origins ) {
protected function get_preset_classes( $setting_nodes, $origins, $custom_selectors ) {
$preset_rules = '';

foreach ( $setting_nodes as $metadata ) {
Expand All @@ -814,7 +815,7 @@ protected function get_preset_classes( $setting_nodes, $origins ) {

$selector = $metadata['selector'];
$node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
$preset_rules .= static::compute_preset_classes( $node, $selector, $origins );
$preset_rules .= static::compute_preset_classes( $node, $selector, $origins, $custom_selectors );
}

return $preset_rules;
Expand Down Expand Up @@ -925,7 +926,7 @@ protected static function append_to_selector( $selector, $to_append ) {
* @param array $origins List of origins to process.
* @return string The result of processing the presets.
*/
protected static function compute_preset_classes( $settings, $selector, $origins ) {
protected static function compute_preset_classes( $settings, $selector, $origins, $custom_selectors ) {
if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
// Classes at the global level do not need any CSS prefixed,
// and we don't want to increase its specificity.
Expand All @@ -944,14 +945,34 @@ protected static function compute_preset_classes( $settings, $selector, $origins
array(
array(
'name' => $property,
'value' => 'var(' . $css_var . ') !important',
'value' => 'var(' . $css_var . ')',
),
)
);
}
// For blocks with a custom class selector append presets to this in order
// to make sure that preset will be more specific.
$custom_block_selectors = '';
$x = 1;
$total_custom_selectors = count( $custom_selectors );
foreach ( $custom_selectors as $custom_selector ) {
$custom_block_selectors .= static::append_to_selector( $custom_selector, $class_name );
if ( $x !== $total_custom_selectors ) {
$custom_block_selectors .= ',';
}
$x++;
}
$stylesheet .= static::to_ruleset(
$custom_block_selectors,
array(
array(
'name' => $property,
'value' => 'var(' . $css_var . ')',
),
)
);
};
}
}

return $stylesheet;
}

Expand Down