-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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.
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
Add: Descendent block styles mechanism. #41922
Closed
Closed
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Add: Descendent block styles mechanism.
- Loading branch information
commit ed078e9a0bb339c02ad8ed26ed1d24ba988bbe6b
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,115 @@ | ||
<?php | ||
/** | ||
* Descendent blocks styles block support. | ||
* | ||
* @package gutenberg | ||
*/ | ||
|
||
/** | ||
* Get the class names used on descend block styles | ||
* | ||
* @param array $block Block object. | ||
* @return string The unique class name. | ||
*/ | ||
function gutenberg_get_block_styles_class_name( $block ) { | ||
return 'wp-descendent-blocks-styles-' . md5( serialize( $block ) ); | ||
} | ||
|
||
/** | ||
* Update the block content with descend block styles class names. | ||
* | ||
* @param string $block_content Rendered block content. | ||
* @param array $block Block object. | ||
* @return string Filtered block content. | ||
*/ | ||
function gutenberg_render_descendent_block_styles_support( $block_content, $block ) { | ||
if ( ! $block_content ) { | ||
return $block_content; | ||
} | ||
|
||
// return early if the block has not support for descendent block styles. | ||
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); | ||
if ( ! block_has_support( $block_type, array( '__experimentalDescendentStyles' ), false ) ) { | ||
return $block_content; | ||
} | ||
|
||
// return early if no descendent blocks are found on the block attributes. | ||
$block_styles = _wp_array_get( $block, array( 'attrs', 'style', 'blocks' ), null ); | ||
if ( empty( $block_styles ) ) { | ||
return $block_content; | ||
} | ||
|
||
$class_name = gutenberg_get_block_styles_class_name( $block ); | ||
|
||
// Like the layout hook this assumes the hook only applies to blocks with a single wrapper. | ||
// Retrieve the opening tag of the first HTML element. | ||
$html_element_matches = array(); | ||
preg_match( '/<[^>]+>/', $block_content, $html_element_matches, PREG_OFFSET_CAPTURE ); | ||
$first_element = $html_element_matches[0][0]; | ||
// If the first HTML element has a class attribute just add the new class | ||
// as we do on layout and duotone. | ||
if ( strpos( $first_element, 'class="' ) !== false ) { | ||
$content = preg_replace( | ||
'/' . preg_quote( 'class="', '/' ) . '/', | ||
'class="' . $class_name . ' ', | ||
$block_content, | ||
1 | ||
); | ||
} else { | ||
// If the first HTML element has no class attribute we should inject the attribute before the attribute at the end. | ||
$first_element_offset = $html_element_matches[0][1]; | ||
$content = substr_replace( $block_content, ' class="' . $class_name . '"', $first_element_offset + strlen( $first_element ) - 1, 0 ); | ||
} | ||
|
||
return $content; | ||
} | ||
|
||
/** | ||
* Render the descendent block styles stylesheet. | ||
* | ||
* @param string|null $pre_render The pre-rendered content. Default null. | ||
* @param array $block The block being rendered. | ||
* | ||
* @return null | ||
*/ | ||
function gutenberg_render_descendent_block_styles_support_styles( $pre_render, $block ) { | ||
// Return early if the block has not support for descendent block styles. | ||
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); | ||
if ( ! block_has_support( $block_type, array( '__experimentalDescendentStyles' ), false ) ) { | ||
return null; | ||
} | ||
|
||
// Return early if no descendent blocks are found on the block attributes. | ||
$block_styles = _wp_array_get( $block, array( 'attrs', 'style', 'blocks' ), null ); | ||
if ( empty( $block_styles ) ) { | ||
return null; | ||
} | ||
|
||
$class_name = gutenberg_get_block_styles_class_name( $block ); | ||
|
||
// Remove any potentially unsafe styles. | ||
$theme_json_shape = WP_Theme_JSON_Gutenberg::remove_insecure_properties( array( | ||
'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, | ||
'styles' => array( | ||
'blocks' => $block_styles, | ||
), | ||
) ); | ||
|
||
$styles = ''; | ||
|
||
$theme_json_object = new WP_Theme_JSON_Gutenberg( $theme_json_shape ); | ||
$block_nodes = $theme_json_object->get_styles_block_nodes(); | ||
foreach ( $block_nodes as $block_node ) { | ||
$block_node['selector'] = WP_Theme_JSON_Gutenberg::scope_selector( '.' . $class_name, $block_node['selector'] ); | ||
$styles .= $theme_json_object->get_styles_for_block( $block_node ); | ||
} | ||
|
||
if ( ! empty( $styles ) ) { | ||
gutenberg_enqueue_block_support_styles( $styles ); | ||
} | ||
|
||
return null; | ||
} | ||
|
||
add_filter( 'render_block', 'gutenberg_render_descendent_block_styles_support', 10, 2 ); | ||
add_filter( 'pre_render_block', 'gutenberg_render_descendent_block_styles_support_styles', 10, 2 ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -674,4 +674,35 @@ protected static function get_property_value( $styles, $path, $theme_json = null | |
|
||
return $value; | ||
} | ||
|
||
/** | ||
* Function that scopes a selector with another one. This works a bit like | ||
* SCSS nesting except the `&` operator isn't supported. | ||
* | ||
* <code> | ||
* $scope = '.a, .b .c'; | ||
* $selector = '> .x, .y'; | ||
* $merged = scope_selector( $scope, $selector ); | ||
* // $merged is '.a > .x, .a .y, .b .c > .x, .b .c .y' | ||
* </code> | ||
* | ||
* @since 5.9.0 | ||
* | ||
* @param string $scope Selector to scope to. | ||
* @param string $selector Original selector. | ||
* @return string Scoped selector. | ||
*/ | ||
public static function scope_selector( $scope, $selector ) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Note to reviewers: This function is exactly the same that exists in core I'm just making it public because it is useful and needed outside the class. |
||
$scopes = explode( ',', $scope ); | ||
$selectors = explode( ',', $selector ); | ||
|
||
$selectors_scoped = array(); | ||
foreach ( $scopes as $outer ) { | ||
foreach ( $selectors as $inner ) { | ||
$selectors_scoped[] = trim( $outer ) . ' ' . trim( $inner ); | ||
} | ||
} | ||
|
||
return implode( ', ', $selectors_scoped ); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there another way we can output these styles? The pattern of using id-based classnames and outputting additional
style
tags is something we're attempting to move away from in the style engine (#38167) and layout projects (#39336). Ideally it'd be great if we can reduce the amount we're relying on these approaches, as they're not covered by rendering in async contexts (e.g. the problems outlined in #35376)I was wondering if it's possible for the styles for descendent blocks to somehow be output from the global styles sheet? I'm not too familiar with the work for this block support, but the idea of having the required styles available in the global style sheet is one of the things I'm exploring in the Layout block support refactor in: #40875
I'll also CC: @ramonjd for visibility here, since we've been discussing some of these concerns for future phases of the style engine lately 🙂
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @andrewserong
It's not just about the style engine, but long-standing issues about the quality and sustainability of our styles output. Also refer to https://make.wordpress.org/core/2022/06/24/block-editor-styles-initiatives-and-goals/ for background.
Two of them are to rein in the specificity issues caused by random IDs and to construct more semantic classnames that theme authors can rely on.
Are the unique ids required to target elements with custom CSS, unique to that element? Or for specificity?
Maybe there's not a better way to achieve what you're trying to do right now, but it'd be useful to see if we can come up with an alternative that won't compound the style quality issues theme users are already dealing with.
I can picture getting a lot of blow back from things like this:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm also wondering if theme.json/global styles is a logical home for this behaviour.
How will this interact with the current block supports mechanism?
If this data lives in the block's attributes, will there be any editor UI to control descendant styles from the parent block?
I'm imagining something like this in theme.json
That would be the recipe for the following CSS:
Sorry if I'm rehashing old ground and asking a lot of questions! Just trying to get context. 🙇