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.

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
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
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
Add: Descendent block styles mechanism.
  • Loading branch information
jorgefilipecosta committed Jun 30, 2022
commit ed078e9a0bb339c02ad8ed26ed1d24ba988bbe6b
115 changes: 115 additions & 0 deletions lib/block-supports/descendent-block-styles.php
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 );
Copy link
Contributor

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 🙂

Copy link
Member

@ramonjd ramonjd Jul 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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:

.wp-descendent-blocks-styles-efc4caf478f4320f17d3346c4bd8a6a5 h1, .wp-descendent-blocks-styles-efc4caf478f4320f17d3346c4bd8a6a5 h2, .wp-descendent-blocks-styles-efc4caf478f4320f17d3346c4bd8a6a5 h3, .wp-descendent-blocks-styles-efc4caf478f4320f17d3346c4bd8a6a5 h4, .wp-descendent-blocks-styles-efc4caf478f4320f17d3346c4bd8a6a5 h5, .wp-descendent-blocks-styles-efc4caf478f4320f17d3346c4bd8a6a5 h6 {
    color: green;
    font-size: 25px;
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was wondering if it's possible for the styles for descendent blocks to somehow be output from the global styles sheet?

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

	"styles": {
		"spacing": {
			"margin": "44px"
		},
		"blocks": {
			"core/columns": {
				"spacing": {
					"padding": "22px"
				},
				"blocks": {
					"core/social-links": {
						"color": {
							"background": "kermit-green"
						}
					}
				}
			}
		}
	},

That would be the recipe for the following CSS:

body {
    margin: 44px;
}
.wp-block-columns {
    padding: 22px;
}
.wp-block-columns .wp-block-social-links {
    background-color: kermit-green;
}

Sorry if I'm rehashing old ground and asking a lot of questions! Just trying to get context. 🙇

}

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 );
31 changes: 31 additions & 0 deletions lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
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 ) {
Copy link
Member Author

Choose a reason for hiding this comment

The 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 );
}
}
1 change: 1 addition & 0 deletions lib/load.php
Original file line number Diff line number Diff line change
@@ -159,6 +159,7 @@ function gutenberg_is_experiment_enabled( $name ) {

// Block supports overrides.
require __DIR__ . '/block-supports/utils.php';
require __DIR__ . '/block-supports/descendent-block-styles.php';
require __DIR__ . '/block-supports/elements.php';
require __DIR__ . '/block-supports/colors.php';
require __DIR__ . '/block-supports/typography.php';
1 change: 1 addition & 0 deletions packages/block-library/src/group/block.json
Original file line number Diff line number Diff line change
@@ -19,6 +19,7 @@
},
"supports": {
"__experimentalSettings": true,
"__experimentalDescendentStyles": true,
"align": [ "wide", "full" ],
"anchor": true,
"html": false,