Changeset 54211 for trunk/src/wp-includes/block-supports/colors.php

Timestamp:

09/19/2022 08:12:02 PM (4 years ago)

Author:

audrasjb

Message:

Editor: Backport block supports (border, color, elements, spacing) from Gutenberg to WP 6.1.

This changeset backports border, color, elements and spacing block supports changes from Gutenberg to WP 6.1.

See tracking issue on Gutenberg repository: ​gutenberg#43440.

Props ramonopoly, glendaviesnz, bernhard-reiter, audrasjb, costdev.
See #56467.

File:

• trunk/src/wp-includes/block-supports/colors.php (modified) (4 diffs)

trunk/src/wp-includes/block-supports/colors.php

@@ -11 +11 @@
  *
  * @since 5.6.0
+ * @since 6.1.0 Improved $color_support assignment optimization.
  * @access private
  *
@@ -16 +17 @@
  */
 function wp_register_colors_support( $block_type ) {
-    $color_support = false;
-    if ( property_exists( $block_type, 'supports' ) ) {
-        $color_support = _wp_array_get( $block_type->supports, array( 'color' ), false );
-    }
+    $color_support                 = property_exists( $block_type, 'supports' ) ? _wp_array_get( $block_type->supports, array( 'color' ), false ) : false;
     $has_text_colors_support       = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'text' ), true ) );
     $has_background_colors_support = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'background' ), true ) );
@@ -64 +62 @@
  *
  * @since 5.6.0
+ * @since 6.1.0 Implemented the style engine to generate CSS and classnames.
  * @access private
  *
@@ -84 +83 @@
     $has_background_colors_support = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'background' ), true ) );
     $has_gradients_support         = _wp_array_get( $color_support, array( 'gradients' ), false );
-    $classes                       = array();
-    $styles                        = array();
+    $color_block_styles            = array();
 
     // Text colors.
-    // Check support for text colors.
     if ( $has_text_colors_support && ! wp_should_skip_block_supports_serialization( $block_type, 'color', 'text' ) ) {
-        $has_named_text_color  = array_key_exists( 'textColor', $block_attributes );
-        $has_custom_text_color = isset( $block_attributes['style']['color']['text'] );
-
-        // Apply required generic class.
-        if ( $has_custom_text_color || $has_named_text_color ) {
-            $classes[] = 'has-text-color';
-        }
-        // Apply color class or inline style.
-        if ( $has_named_text_color ) {
-            $classes[] = sprintf( 'has-%s-color', _wp_to_kebab_case( $block_attributes['textColor'] ) );
-        } elseif ( $has_custom_text_color ) {
-            $styles[] = sprintf( 'color: %s;', $block_attributes['style']['color']['text'] );
-        }
+        $preset_text_color          = array_key_exists( 'textColor', $block_attributes ) ? "var:preset|color|{$block_attributes['textColor']}" : null;
+        $custom_text_color          = _wp_array_get( $block_attributes, array( 'style', 'color', 'text' ), null );
+        $color_block_styles['text'] = $preset_text_color ? $preset_text_color : $custom_text_color;
     }
 
     // Background colors.
     if ( $has_background_colors_support && ! wp_should_skip_block_supports_serialization( $block_type, 'color', 'background' ) ) {
-        $has_named_background_color  = array_key_exists( 'backgroundColor', $block_attributes );
-        $has_custom_background_color = isset( $block_attributes['style']['color']['background'] );
-
-        // Apply required background class.
-        if ( $has_custom_background_color || $has_named_background_color ) {
-            $classes[] = 'has-background';
-        }
-        // Apply background color classes or styles.
-        if ( $has_named_background_color ) {
-            $classes[] = sprintf( 'has-%s-background-color', _wp_to_kebab_case( $block_attributes['backgroundColor'] ) );
-        } elseif ( $has_custom_background_color ) {
-            $styles[] = sprintf( 'background-color: %s;', $block_attributes['style']['color']['background'] );
-        }
+        $preset_background_color          = array_key_exists( 'backgroundColor', $block_attributes ) ? "var:preset|color|{$block_attributes['backgroundColor']}" : null;
+        $custom_background_color          = _wp_array_get( $block_attributes, array( 'style', 'color', 'background' ), null );
+        $color_block_styles['background'] = $preset_background_color ? $preset_background_color : $custom_background_color;
     }
 
     // Gradients.
     if ( $has_gradients_support && ! wp_should_skip_block_supports_serialization( $block_type, 'color', 'gradients' ) ) {
-        $has_named_gradient  = array_key_exists( 'gradient', $block_attributes );
-        $has_custom_gradient = isset( $block_attributes['style']['color']['gradient'] );
-
-        if ( $has_named_gradient || $has_custom_gradient ) {
-            $classes[] = 'has-background';
-        }
-        // Apply required background class.
-        if ( $has_named_gradient ) {
-            $classes[] = sprintf( 'has-%s-gradient-background', _wp_to_kebab_case( $block_attributes['gradient'] ) );
-        } elseif ( $has_custom_gradient ) {
-            $styles[] = sprintf( 'background: %s;', $block_attributes['style']['color']['gradient'] );
-        }
+        $preset_gradient_color          = array_key_exists( 'gradient', $block_attributes ) ? "var:preset|gradient|{$block_attributes['gradient']}" : null;
+        $custom_gradient_color          = _wp_array_get( $block_attributes, array( 'style', 'color', 'gradient' ), null );
+        $color_block_styles['gradient'] = $preset_gradient_color ? $preset_gradient_color : $custom_gradient_color;
     }
 
     $attributes = array();
-    if ( ! empty( $classes ) ) {
-        $attributes['class'] = implode( ' ', $classes );
+    $styles     = wp_style_engine_get_styles( array( 'color' => $color_block_styles ), array( 'convert_vars_to_classnames' => true ) );
+
+    if ( ! empty( $styles['classnames'] ) ) {
+        $attributes['class'] = $styles['classnames'];
     }
-    if ( ! empty( $styles ) ) {
-        $attributes['style'] = implode( ' ', $styles );
+
+    if ( ! empty( $styles['css'] ) ) {
+        $attributes['style'] = $styles['css'];
     }