Make WordPress Core


Ignore:
Timestamp:
02/01/2023 01:41:16 PM (3 years ago)
Author:
hellofromTonya
Message:

Editor: Add support for editing block style variations in global styles.

To allow editing of block style variations in global styles, this changeset adds the following for server side support:

  • building of block style schema into WP_Theme_JSON::sanitize().
  • appending of style variation selectors to block metadata in WP_Theme_JSON::get_blocks_metadata().
  • building of selectors and variations for nodes in WP_Theme_JSON::get_block_nodes().

Tests for happy and unhappy paths are included.

Reference:

Follow-up to [54118], [50973], [50959].

Props isabel_brison,
Fixes #57583.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-theme-json.php

    r55142 r55172  
    666666        $schema_settings_blocks = array();
    667667        foreach ( $valid_block_names as $block ) {
    668             $schema_settings_blocks[ $block ]           = static::VALID_SETTINGS;
    669             $schema_styles_blocks[ $block ]             = $styles_non_top_level;
    670             $schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements;
     668            // Build the schema for each block style variation.
     669            $style_variation_names = array();
     670            if (
     671                ! empty( $input['styles']['blocks'][ $block ]['variations'] ) &&
     672                is_array( $input['styles']['blocks'][ $block ]['variations'] )
     673            ) {
     674                $style_variation_names = array_keys( $input['styles']['blocks'][ $block ]['variations'] );
     675            }
     676
     677            $schema_styles_variations = array();
     678            if ( ! empty( $style_variation_names ) ) {
     679                $schema_styles_variations = array_fill_keys( $style_variation_names, $styles_non_top_level );
     680            }
     681
     682            $schema_settings_blocks[ $block ]             = static::VALID_SETTINGS;
     683            $schema_styles_blocks[ $block ]               = $styles_non_top_level;
     684            $schema_styles_blocks[ $block ]['elements']   = $schema_styles_elements;
     685            $schema_styles_blocks[ $block ]['variations'] = $schema_styles_variations;
    671686        }
    672687
     
    814829                }
    815830                static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector );
     831            }
     832            // If the block has style variations, append their selectors to the block metadata.
     833            if ( ! empty( $block_type->styles ) ) {
     834                $style_selectors = array();
     835                foreach ( $block_type->styles as $style ) {
     836                    // The style variation classname is duplicated in the selector to ensure that it overrides core block styles.
     837                    $style_selectors[ $style['name'] ] = static::append_to_selector( '.is-style-' . $style['name'] . '.is-style-' . $style['name'], static::$blocks_metadata[ $block_name ]['selector'] );
     838                }
     839                static::$blocks_metadata[ $block_name ]['styleVariations'] = $style_selectors;
    816840            }
    817841        }
     
    20402064            }
    20412065
     2066            $variation_selectors = array();
     2067            if ( isset( $node['variations'] ) ) {
     2068                foreach ( $node['variations'] as $variation => $node ) {
     2069                    $variation_selectors[] = array(
     2070                        'path'     => array( 'styles', 'blocks', $name, 'variations', $variation ),
     2071                        'selector' => $selectors[ $name ]['styleVariations'][ $variation ],
     2072                    );
     2073                }
     2074            }
     2075
    20422076            $nodes[] = array(
    2043                 'name'     => $name,
    2044                 'path'     => array( 'styles', 'blocks', $name ),
    2045                 'selector' => $selector,
    2046                 'duotone'  => $duotone_selector,
    2047                 'features' => $feature_selectors,
     2077                'name'       => $name,
     2078                'path'       => array( 'styles', 'blocks', $name ),
     2079                'selector'   => $selector,
     2080                'duotone'    => $duotone_selector,
     2081                'features'   => $feature_selectors,
     2082                'variations' => $variation_selectors,
    20482083            );
    20492084
     
    21252160        }
    21262161
     2162        // If there are style variations, generate the declarations for them, including any feature selectors the block may have.
     2163        $style_variation_declarations = array();
     2164        if ( ! empty( $block_metadata['variations'] ) ) {
     2165            foreach ( $block_metadata['variations'] as $style_variation ) {
     2166                $style_variation_node     = _wp_array_get( $this->theme_json, $style_variation['path'], array() );
     2167                $style_variation_selector = $style_variation['selector'];
     2168
     2169                // If the block has feature selectors, generate the declarations for them within the current style variation.
     2170                if ( ! empty( $block_metadata['features'] ) ) {
     2171                    $clean_style_variation_selector = trim( $style_variation_selector );
     2172                    foreach ( $block_metadata['features'] as $feature_name => $feature_selector ) {
     2173                        if ( empty( $style_variation_node[ $feature_name ] ) ) {
     2174                            continue;
     2175                        }
     2176                        // Prepend the variation selector to the feature selector.
     2177                        $split_feature_selectors    = explode( ',', $feature_selector );
     2178                        $feature_selectors          = array_map(
     2179                            static function( $split_feature_selector ) use ( $clean_style_variation_selector ) {
     2180                                return $clean_style_variation_selector . trim( $split_feature_selector );
     2181                            },
     2182                            $split_feature_selectors
     2183                        );
     2184                        $combined_feature_selectors = implode( ',', $feature_selectors );
     2185
     2186                        // Compute declarations for the feature.
     2187                        $new_feature_declarations = static::compute_style_properties( array( $feature_name => $style_variation_node[ $feature_name ] ), $settings, null, $this->theme_json );
     2188
     2189                        /*
     2190                         * Merge new declarations with any that already exist for
     2191                         * the feature selector. This may occur when multiple block
     2192                         * support features use the same custom selector.
     2193                         */
     2194                        if ( isset( $style_variation_declarations[ $combined_feature_selectors ] ) ) {
     2195                            $style_variation_declarations[ $combined_feature_selectors ] = array_merge( $style_variation_declarations[ $combined_feature_selectors ], $new_feature_declarations );
     2196                        } else {
     2197                            $style_variation_declarations[ $combined_feature_selectors ] = $new_feature_declarations;
     2198                        }
     2199                        /*
     2200                         * Remove the feature from the variation's node now the
     2201                         * styles will be included under the feature level selector.
     2202                         */
     2203                        unset( $style_variation_node[ $feature_name ] );
     2204                    }
     2205                }
     2206                // Compute declarations for remaining styles not covered by feature level selectors.
     2207                $style_variation_declarations[ $style_variation_selector ] = static::compute_style_properties( $style_variation_node, $settings, null, $this->theme_json );
     2208            }
     2209        }
    21272210        /*
    21282211         * Get a reference to element name from path.
     
    22132296        foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) {
    22142297            $block_rules .= static::to_ruleset( $feature_selector, $individual_feature_declarations );
     2298        }
     2299
     2300        // 6. Generate and append the style variation rulesets.
     2301        foreach ( $style_variation_declarations as $style_variation_selector => $individual_style_variation_declarations ) {
     2302            $block_rules .= static::to_ruleset( $style_variation_selector, $individual_style_variation_declarations );
    22152303        }
    22162304
Note: See TracChangeset for help on using the changeset viewer.