Skip to content

Commit

Permalink
Changes from WordPress/gutenberg#46496
Browse files Browse the repository at this point in the history
  • Loading branch information
@ramonjd @tellthemachines
ramonjd authored and tellthemachines committed Jun 27, 2023
1 parent d0eb6aa commit 5132c5b
Show file tree
Hide file tree
Showing 4 changed files with 733 additions and 85 deletions.
2 changes: 1 addition & 1 deletion src/wp-includes/block-supports/settings.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ function _wp_add_block_level_presets_class( $block_content, $block ) {
* @internal
*
* @since 6.2.0
* @since 6.3.0 Updates preset styles to use Selectors API.
* @since 6.3.0 Updated preset styles to use Selectors API.
* @access private
*
* @param string|null $pre_render The pre-rendered content. Default null.
Expand Down
266 changes: 182 additions & 84 deletions src/wp-includes/class-wp-theme-json.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -879,6 +879,7 @@ protected static function prepend_to_selector( $selector, $to_prepend ) {
* @since 5.8.0
* @since 5.9.0 Added `duotone` key with CSS selector.
* @since 6.1.0 Added `features` key with block support feature level selectors.
* @since 6.3.0 Refactored and stabilized selectors API.
*
* @return array Block metadata.
*/
Expand All @@ -893,56 +894,33 @@ protected static function get_blocks_metadata() {
}

foreach ( $blocks as $block_name => $block_type ) {
if (
isset( $block_type->supports['__experimentalSelector'] ) &&
is_string( $block_type->supports['__experimentalSelector'] )
) {
static::$blocks_metadata[ $block_name ]['selector'] = $block_type->supports['__experimentalSelector'];
} else {
static::$blocks_metadata[ $block_name ]['selector'] = '.wp-block-' . str_replace( '/', '-', str_replace( 'core/', '', $block_name ) );
}
$root_selector = wp_get_block_css_selector( $block_type );

if (
isset( $block_type->supports['color']['__experimentalDuotone'] ) &&
is_string( $block_type->supports['color']['__experimentalDuotone'] )
) {
static::$blocks_metadata[ $block_name ]['duotone'] = $block_type->supports['color']['__experimentalDuotone'];
static::$blocks_metadata[ $block_name ]['selector'] = $root_selector;
static::$blocks_metadata[ $block_name ]['selectors'] = static::get_block_selectors( $block_type, $root_selector );

$elements = static::get_block_element_selectors( $root_selector );
if ( ! empty( $elements ) ) {
static::$blocks_metadata[ $block_name ]['elements'] = $elements;
}

// Generate block support feature level selectors if opted into
// for the current block.
$features = array();
foreach ( static::BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS as $key => $feature ) {
if (
isset( $block_type->supports[ $key ]['__experimentalSelector'] ) &&
$block_type->supports[ $key ]['__experimentalSelector']
) {
$features[ $feature ] = static::scope_selector(
static::$blocks_metadata[ $block_name ]['selector'],
$block_type->supports[ $key ]['__experimentalSelector']
);
// The block may or may not have a duotone selector.
$duotone_selector = wp_get_block_css_selector( $block_type, 'filter.duotone' );

// Keep backwards compatibility for support.color.__experimentalDuotone.
if ( null === $duotone_selector ) {
$duotone_support = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), null );

if ( $duotone_support ) {
$root_selector = wp_get_block_css_selector( $block_type );
$duotone_selector = WP_Theme_JSON::scope_selector( $root_selector, $duotone_support );
}
}

if ( ! empty( $features ) ) {
static::$blocks_metadata[ $block_name ]['features'] = $features;
if ( null !== $duotone_selector ) {
static::$blocks_metadata[ $block_name ]['duotone'] = $duotone_selector;
}

// Assign defaults, then overwrite those that the block sets by itself.
// If the block selector is compounded, will append the element to each
// individual block selector.
$block_selectors = explode( ',', static::$blocks_metadata[ $block_name ]['selector'] );
foreach ( static::ELEMENTS as $el_name => $el_selector ) {
$element_selector = array();
foreach ( $block_selectors as $selector ) {
if ( $selector === $el_selector ) {
$element_selector = array( $el_selector );
break;
}
$element_selector[] = static::prepend_to_selector( $el_selector, $selector . ' ' );
}
static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector );
}
// If the block has style variations, append their selectors to the block metadata.
if ( ! empty( $block_type->styles ) ) {
$style_selectors = array();
Expand Down Expand Up @@ -2223,6 +2201,7 @@ private static function update_separator_declarations( $declarations ) {
* An internal method to get the block nodes from a theme.json file.
*
* @since 6.1.0
* @since 6.3.0 Refactored and stabilized selectors API.
*
* @param array $theme_json The theme.json converted to an array.
* @return array The block nodes in theme.json.
Expand Down Expand Up @@ -2251,8 +2230,8 @@ private static function get_block_nodes( $theme_json ) {
}

$feature_selectors = null;
if ( isset( $selectors[ $name ]['features'] ) ) {
$feature_selectors = $selectors[ $name ]['features'];
if ( isset( $selectors[ $name ]['selectors'] ) ) {
$feature_selectors = $selectors[ $name ]['selectors'];
}

$variation_selectors = array();
Expand All @@ -2269,6 +2248,7 @@ private static function get_block_nodes( $theme_json ) {
'name' => $name,
'path' => array( 'styles', 'blocks', $name ),
'selector' => $selector,
'selectors' => $feature_selectors,
'duotone' => $duotone_selector,
'features' => $feature_selectors,
'variations' => $variation_selectors,
Expand Down Expand Up @@ -2311,45 +2291,11 @@ private static function get_block_nodes( $theme_json ) {
* @return string Styles for the block.
*/
public function get_styles_for_block( $block_metadata ) {
$node = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
$use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
$selector = $block_metadata['selector'];
$settings = _wp_array_get( $this->theme_json, array( 'settings' ) );

/*
* Process style declarations for block support features the current
* block contains selectors for. Values for a feature with a custom
* selector are filtered from the theme.json node before it is
* processed as normal.
*/
$feature_declarations = array();

if ( ! empty( $block_metadata['features'] ) ) {
foreach ( $block_metadata['features'] as $feature_name => $feature_selector ) {
if ( ! empty( $node[ $feature_name ] ) ) {
// Create temporary node containing only the feature data
// to leverage existing `compute_style_properties` function.
$feature = array( $feature_name => $node[ $feature_name ] );
// Generate the feature's declarations only.
$new_feature_declarations = static::compute_style_properties( $feature, $settings, null, $this->theme_json );

// Merge new declarations with any that already exist for
// the feature selector. This may occur when multiple block
// support features use the same custom selector.
if ( isset( $feature_declarations[ $feature_selector ] ) ) {
foreach ( $new_feature_declarations as $new_feature_declaration ) {
$feature_declarations[ $feature_selector ][] = $new_feature_declaration;
}
} else {
$feature_declarations[ $feature_selector ] = $new_feature_declarations;
}

// Remove the feature from the block's node now the
// styles will be included under the feature level selector.
unset( $node[ $feature_name ] );
}
}
}
$node = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
$use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
$selector = $block_metadata['selector'];
$settings = _wp_array_get( $this->theme_json, array( 'settings' ) );
$feature_declarations = static::get_feature_declarations_for_node( $block_metadata, $node );

// If there are style variations, generate the declarations for them, including any feature selectors the block may have.
$style_variation_declarations = array();
Expand Down Expand Up @@ -3536,6 +3482,159 @@ private static function resolve_custom_css_format( $tree ) {
return $tree;
}

/**
* Returns the selectors metadata for a block.
*
* @since 6.3.0
*
* @param object $block_type The block type.
* @param string $root_selector The block's root selector.
*
* @return array The custom selectors set by the block.
*/
protected static function get_block_selectors( $block_type, $root_selector ) {
if ( ! empty( $block_type->selectors ) ) {
return $block_type->selectors;
}

$selectors = array( 'root' => $root_selector );
foreach ( static::BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS as $key => $feature ) {
$feature_selector = wp_get_block_css_selector( $block_type, $key );
if ( null !== $feature_selector ) {
$selectors[ $feature ] = array( 'root' => $feature_selector );
}
}

return $selectors;
}

/**
* Generates all the element selectors for a block.
*
* @since 6.3.0
*
* @param string $root_selector The block's root CSS selector.
* @return array The block's element selectors.
*/
protected static function get_block_element_selectors( $root_selector ) {
// Assign defaults, then override those that the block sets by itself.
// If the block selector is compounded, will append the element to each
// individual block selector.
$block_selectors = explode( ',', $root_selector );
$element_selectors = array();

foreach ( static::ELEMENTS as $el_name => $el_selector ) {
$element_selector = array();
foreach ( $block_selectors as $selector ) {
if ( $selector === $el_selector ) {
$element_selector = array( $el_selector );
break;
}
$element_selector[] = static::prepend_to_selector( $el_selector, $selector . ' ' );
}
$element_selectors[ $el_name ] = implode( ',', $element_selector );
}

return $element_selectors;
}

/**
* Generates style declarations for a node's features e.g., color, border,
* typography etc. that have custom selectors in their related block's
* metadata.
*
* @since 6.3.0
*
* @param object $metadata The related block metadata containing selectors.
* @param object $node A merged theme.json node for block or variation.
*
* @return array The style declarations for the node's features with custom
* selectors.
*/
protected function get_feature_declarations_for_node( $metadata, &$node ) {
$declarations = array();

if ( ! isset( $metadata['selectors'] ) ) {
return $declarations;
}

$settings = _wp_array_get( $this->theme_json, array( 'settings' ) );

foreach ( $metadata['selectors'] as $feature => $feature_selectors ) {
// Skip if this is the block's root selector or the block doesn't
// have any styles for the feature.
if ( 'root' === $feature || empty( $node[ $feature ] ) ) {
continue;
}

if ( is_array( $feature_selectors ) ) {
foreach ( $feature_selectors as $subfeature => $subfeature_selector ) {
if ( 'root' === $subfeature || empty( $node[ $feature ][ $subfeature ] ) ) {
continue;
}

// Create temporary node containing only the subfeature data
// to leverage existing `compute_style_properties` function.
$subfeature_node = array(
$feature => array(
$subfeature => $node[ $feature ][ $subfeature ],
),
);

// Generate style declarations.
$new_declarations = static::compute_style_properties( $subfeature_node, $settings, null, $this->theme_json );

// Merge subfeature declarations into feature declarations.
if ( isset( $declarations[ $subfeature_selector ] ) ) {
foreach ( $new_declarations as $new_declaration ) {
$declarations[ $subfeature_selector ][] = $new_declaration;
}
} else {
$declarations[ $subfeature_selector ] = $new_declarations;
}

// Remove the subfeature from the block's node now its
// styles will be included under its own selector not the
// block's.
unset( $node[ $feature ][ $subfeature ] );
}
}

// Now subfeatures have been processed and removed we can process
// feature root selector or simple string selector.
if (
is_string( $feature_selectors ) ||
( isset( $feature_selectors['root'] ) && $feature_selectors['root'] )
) {
$feature_selector = is_string( $feature_selectors ) ? $feature_selectors : $feature_selectors['root'];

// Create temporary node containing only the feature data
// to leverage existing `compute_style_properties` function.
$feature_node = array( $feature => $node[ $feature ] );

// Generate the style declarations.
$new_declarations = static::compute_style_properties( $feature_node, $settings, null, $this->theme_json );

// Merge new declarations with any that already exist for
// the feature selector. This may occur when multiple block
// support features use the same custom selector.
if ( isset( $declarations[ $feature_selector ] ) ) {
foreach ( $new_declarations as $new_declaration ) {
$declarations[ $feature_selector ][] = $new_declaration;
}
} else {
$declarations[ $feature_selector ] = $new_declarations;
}

// Remove the feature from the block's node now its styles
// will be included under its own selector not the block's.
unset( $node[ $feature ] );
}
}

return $declarations;
}

/**
* Replaces CSS variables with their values in place.
*
Expand Down Expand Up @@ -3608,5 +3707,4 @@ function( $carry, $item ) {
$theme_json->theme_json['styles'] = self::convert_variables_to_value( $styles, $vars );
return $theme_json;
}

}
Loading

0 comments on commit 5132c5b

Please sign in to comment.