Make WordPress Core


Ignore:
Timestamp:
06/27/2023 08:46:45 AM (18 months ago)
Author:
isabel_brison
Message:

Editor: refactor and stabilize selectors API.

Restructures the block.json selectors API by moving __experimentalSelector props into their own config, stabilizing the selectors API, and enabling more flexible styling options.

Props ramonopoly, spacedmonkey, aaronrobertshaw, onemaggie.
Fixes #58586.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/global-styles-and-settings.php

    r56042 r56058  
    444444    return WP_Theme_JSON_Resolver::get_theme_data( array(), array( 'with_supports' => false ) )->get_patterns();
    445445}
     446
     447/**
     448 * Determines the CSS selector for the block type and property provided,
     449 * returning it if available.
     450 *
     451 * @since 6.3.0
     452 *
     453 * @param WP_Block_Type $block_type The block's type.
     454 * @param string|array  $target     The desired selector's target, `root` or array path.
     455 * @param boolean       $fallback   Whether to fall back to broader selector.
     456 *
     457 * @return string|null CSS selector or `null` if no selector available.
     458 */
     459function wp_get_block_css_selector( $block_type, $target = 'root', $fallback = false ) {
     460    if ( empty( $target ) ) {
     461        return null;
     462    }
     463
     464    $has_selectors = ! empty( $block_type->selectors );
     465
     466    // Root Selector.
     467
     468    // Calculated before returning as it can be used as fallback for
     469    // feature selectors later on.
     470    $root_selector = null;
     471
     472    if ( $has_selectors && isset( $block_type->selectors['root'] ) ) {
     473        // Use the selectors API if available.
     474        $root_selector = $block_type->selectors['root'];
     475    } elseif ( isset( $block_type->supports['__experimentalSelector'] ) && is_string( $block_type->supports['__experimentalSelector'] ) ) {
     476        // Use the old experimental selector supports property if set.
     477        $root_selector = $block_type->supports['__experimentalSelector'];
     478    } else {
     479        // If no root selector found, generate default block class selector.
     480        $block_name    = str_replace( '/', '-', str_replace( 'core/', '', $block_type->name ) );
     481        $root_selector = ".wp-block-{$block_name}";
     482    }
     483
     484    // Return selector if it's the root target we are looking for.
     485    if ( 'root' === $target ) {
     486        return $root_selector;
     487    }
     488
     489    // If target is not `root` we have a feature or subfeature as the target.
     490    // If the target is a string convert to an array.
     491    if ( is_string( $target ) ) {
     492        $target = explode( '.', $target );
     493    }
     494
     495    // Feature Selectors ( May fallback to root selector ).
     496    if ( 1 === count( $target ) ) {
     497        $fallback_selector = $fallback ? $root_selector : null;
     498
     499        // Prefer the selectors API if available.
     500        if ( $has_selectors ) {
     501            // Look for selector under `feature.root`.
     502            $path             = array_merge( $target, array( 'root' ) );
     503            $feature_selector = _wp_array_get( $block_type->selectors, $path, null );
     504
     505            if ( $feature_selector ) {
     506                return $feature_selector;
     507            }
     508
     509            // Check if feature selector is set via shorthand.
     510            $feature_selector = _wp_array_get( $block_type->selectors, $target, null );
     511
     512            return is_string( $feature_selector ) ? $feature_selector : $fallback_selector;
     513        }
     514
     515        // Try getting old experimental supports selector value.
     516        $path             = array_merge( $target, array( '__experimentalSelector' ) );
     517        $feature_selector = _wp_array_get( $block_type->supports, $path, null );
     518
     519        // Nothing to work with, provide fallback or null.
     520        if ( null === $feature_selector ) {
     521            return $fallback_selector;
     522        }
     523
     524        // Scope the feature selector by the block's root selector.
     525        return WP_Theme_JSON::scope_selector( $root_selector, $feature_selector );
     526    }
     527
     528    // Subfeature selector
     529    // This may fallback either to parent feature or root selector.
     530    $subfeature_selector = null;
     531
     532    // Use selectors API if available.
     533    if ( $has_selectors ) {
     534        $subfeature_selector = _wp_array_get( $block_type->selectors, $target, null );
     535    }
     536
     537    // Only return if we have a subfeature selector.
     538    if ( $subfeature_selector ) {
     539        return $subfeature_selector;
     540    }
     541
     542    // To this point we don't have a subfeature selector. If a fallback
     543    // has been requested, remove subfeature from target path and return
     544    // results of a call for the parent feature's selector.
     545    if ( $fallback ) {
     546        return wp_get_block_css_selector( $block_type, $target[0], $fallback );
     547    }
     548
     549    return null;
     550}
Note: See TracChangeset for help on using the changeset viewer.