Skip to content

Commit

Permalink
Try reducing specificity of global styles block selector.
Browse files Browse the repository at this point in the history 
Update custom root selector unit test

Update layout support tests

Reinstate line mistakenly omitted while resolving test changes

Fix copy and paste error

Fix JS unit tests

Fix all the theme.json unit tests

Lower specificity of base layout styles

Reduce specificity of layout selectors

Lower specificity of feature and compound selectors.

zero specificity for pesky button elements

Remove obsolete override

Apply in editor

Change style loading order
  • Loading branch information
@tellthemachines @aaronrobertshaw
tellthemachines authored and aaronrobertshaw committed Jan 24, 2024
1 parent 9ca829a commit 1949ae1
Show file tree
Hide file tree
Showing 12 changed files with 122 additions and 106 deletions.
14 changes: 7 additions & 7 deletions lib/block-supports/layout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,13 @@ function gutenberg_get_layout_definitions() {
),
'spacingStyles' => array(
array(
'selector' => ' > :first-child:first-child',
'selector' => ' > :first-child',
'rules' => array(
'margin-block-start' => '0',
),
),
array(
'selector' => ' > :last-child:last-child',
'selector' => ' > :last-child',
'rules' => array(
'margin-block-end' => '0',
),
Expand Down Expand Up @@ -112,13 +112,13 @@ function gutenberg_get_layout_definitions() {
),
'spacingStyles' => array(
array(
'selector' => ' > :first-child:first-child',
'selector' => ' > :first-child',
'rules' => array(
'margin-block-start' => '0',
),
),
array(
'selector' => ' > :last-child:last-child',
'selector' => ' > :last-child',
'rules' => array(
'margin-block-end' => '0',
),
Expand Down Expand Up @@ -248,7 +248,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
),
),
array(
'selector' => "$selector$selector > * + *",
'selector' => "$selector > * + *",
'declarations' => array(
'margin-block-start' => $gap_value,
'margin-block-end' => '0',
Expand Down Expand Up @@ -357,7 +357,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
),
),
array(
'selector' => "$selector$selector > * + *",
'selector' => "$selector > * + *",
'declarations' => array(
'margin-block-start' => $gap_value,
'margin-block-end' => '0',
Expand Down Expand Up @@ -716,7 +716,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
$has_block_gap_support = isset( $block_gap );

$style = gutenberg_get_layout_style(
".$container_class.$container_class",
".$container_class",
$used_layout,
$has_block_gap_support,
$gap_value,
Expand Down
16 changes: 8 additions & 8 deletions lib/class-wp-theme-json-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -546,7 +546,7 @@ class WP_Theme_JSON_Gutenberg {
* @var string[]
*/
const ELEMENTS = array(
'link' => 'a:where(:not(.wp-element-button))', // The `where` is needed to lower the specificity.
'link' => 'a:not(.wp-element-button)',
'heading' => 'h1, h2, h3, h4, h5, h6',
'h1' => 'h1',
'h2' => 'h2',
Expand Down Expand Up @@ -1562,7 +1562,7 @@ protected function get_layout_styles( $block_metadata ) {
$spacing_rule['selector']
);
} else {
$format = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(%s .%s) %s' : '%s-%s%s';
$format = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(%s .%s) %s' : ':where(%s-%s) %s';
$layout_selector = sprintf(
$format,
$selector,
Expand Down Expand Up @@ -1598,7 +1598,7 @@ protected function get_layout_styles( $block_metadata ) {
in_array( $layout_definition['displayMode'], $valid_display_modes, true )
) {
$layout_selector = sprintf(
'%s .%s',
':where(%s .%s)',
$selector,
$class_name
);
Expand Down Expand Up @@ -1631,7 +1631,7 @@ protected function get_layout_styles( $block_metadata ) {
}

$layout_selector = sprintf(
'%s .%s%s',
':where(%s .%s%s)',
$selector,
$class_name,
$base_style_rule['selector']
Expand Down Expand Up @@ -2647,7 +2647,7 @@ static function ( $pseudo_selector ) use ( $selector ) {
}

// 2. Generate and append the rules that use the general selector.
$block_rules .= static::to_ruleset( $selector, $declarations );
$block_rules .= static::to_ruleset( ":where($selector)", $declarations );

// 3. Generate and append the rules that use the duotone selector.
if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
Expand All @@ -2664,7 +2664,7 @@ static function ( $pseudo_selector ) use ( $selector ) {

// 5. Generate and append the feature level rulesets.
foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) {
$block_rules .= static::to_ruleset( $feature_selector, $individual_feature_declarations );
$block_rules .= static::to_ruleset( ":where($feature_selector)", $individual_feature_declarations );
}

// 6. Generate and append the style variation rulesets.
Expand Down Expand Up @@ -2740,8 +2740,8 @@ public function get_root_layout_rules( $selector, $block_metadata ) {
if ( $has_block_gap_support ) {
$block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ) );
$css .= ":where(.wp-site-blocks) > * { margin-block-start: $block_gap_value; margin-block-end: 0; }";
$css .= ':where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }';
$css .= ':where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }';
$css .= ':where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
$css .= ':where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';

// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
$css .= "$selector { --wp--style--block-gap: $block_gap_value; }";
Expand Down
8 changes: 3 additions & 5 deletions lib/global-styles-and-settings.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,16 +174,14 @@ function gutenberg_get_global_styles_custom_css() {
* @return void
*/
function gutenberg_add_global_styles_for_blocks() {
if ( ! wp_should_load_separate_core_block_assets() ) {
return;
}
$tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
$block_nodes = $tree->get_styles_block_nodes();
foreach ( $block_nodes as $metadata ) {
$block_css = $tree->get_styles_for_block( $metadata );

if ( ! wp_should_load_separate_core_block_assets() ) {
wp_add_inline_style( 'global-styles', $block_css );
continue;
}

$stylesheet_handle = 'global-styles';
if ( isset( $metadata['name'] ) ) {
/*
Expand Down
34 changes: 30 additions & 4 deletions lib/script-loader.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,13 +50,39 @@ function gutenberg_enqueue_global_styles() {
wp_register_style( 'global-styles', false );
wp_add_inline_style( 'global-styles', $stylesheet );
wp_enqueue_style( 'global-styles' );

// Add each block as an inline css.
gutenberg_add_global_styles_for_blocks();
}
add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles' );
add_action( 'init', 'gutenberg_enqueue_global_styles', 1 );
add_action( 'wp_footer', 'gutenberg_enqueue_global_styles', 1 );

add_action( 'wp_enqueue_scripts', 'gutenberg_add_global_styles_for_blocks' );

/**
* Enqueues block global styles when separate core block assets are disabled.
*
* @since 6.5.0
*/
function gutenberg_enqueue_block_global_styles() {
if ( wp_should_load_separate_core_block_assets() ) {
return;
}

$tree = WP_Theme_JSON_Resolver::get_merged_data();
$block_nodes = $tree->get_styles_block_nodes();

wp_register_style( 'global-styles-blocks', false );

foreach ( $block_nodes as $metadata ) {
$block_css = $tree->get_styles_for_block( $metadata );
wp_add_inline_style( 'global-styles-blocks', $block_css );
}

wp_enqueue_style( 'global-styles-blocks' );

wp_enqueue_global_styles();
}

add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_block_global_styles' );

/**
* Enqueues the global styles custom css.
*
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/default-block-appender/content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
// In the case of this appender, it needs to apply those same rules to avoid layout shifts.
// Such shifts happen when the bottom margin of the Title block has been set to less than the default 1em margin of paragraphs.
:where(body .is-layout-constrained) & {
> :first-child:first-child {
> :first-child {
margin-block-start: 0;
}

Expand Down
Loading

0 comments on commit 1949ae1

Please sign in to comment.