| @@ -11,33 +11,20 @@ | ||
| 11 | 11 | * @param WP_Block_Type $block_type Block Type. |
| 12 | 12 | */ |
| 13 | 13 | function gutenberg_register_colors_support( $block_type ) { |
| 14 | 14 | $color_support = false; |
| 15 | - if ( $block_type instanceof WP_Block_Type ) { | |
| 16 | - $color_support = $block_type->supports['color'] ?? false; | |
| 15 | + if ( property_exists( $block_type, 'supports' ) ) { | |
| 16 | + $color_support = gutenberg_experimental_get( $block_type->supports, array( '__experimentalColor' ), false ); | |
| 17 | 17 | } |
| 18 | - $has_text_colors_support = true === $color_support || | |
| 19 | - ( isset( $color_support['text'] ) && $color_support['text'] ) || | |
| 20 | - ( is_array( $color_support ) && ! isset( $color_support['text'] ) ); | |
| 21 | - $has_background_colors_support = true === $color_support || | |
| 22 | - ( isset( $color_support['background'] ) && $color_support['background'] ) || | |
| 23 | - ( is_array( $color_support ) && ! isset( $color_support['background'] ) ); | |
| 24 | - $has_gradients_support = $color_support['gradients'] ?? false; | |
| 25 | - $has_link_colors_support = $color_support['link'] ?? false; | |
| 26 | - $has_button_colors_support = $color_support['button'] ?? false; | |
| 27 | - $has_heading_colors_support = $color_support['heading'] ?? false; | |
| 28 | - $has_color_support = $has_text_colors_support || | |
| 29 | - $has_background_colors_support || | |
| 30 | - $has_gradients_support || | |
| 31 | - $has_link_colors_support || | |
| 32 | - $has_button_colors_support || | |
| 33 | - $has_heading_colors_support; | |
| 18 | + $has_text_colors_support = is_array( $color_support ) || $color_support; | |
| 19 | + $has_background_colors_support = $has_text_colors_support; | |
| 20 | + $has_gradients_support = $has_text_colors_support && gutenberg_experimental_get( $color_support, array( 'gradients' ), false ); | |
| 34 | 21 | |
| 35 | 22 | if ( ! $block_type->attributes ) { |
| 36 | 23 | $block_type->attributes = array(); |
| 37 | 24 | } |
| 38 | 25 | |
| 39 | - if ( $has_color_support && ! array_key_exists( 'style', $block_type->attributes ) ) { | |
| 26 | + if ( $has_text_colors_support && ! array_key_exists( 'style', $block_type->attributes ) ) { | |
| 40 | 27 | $block_type->attributes['style'] = array( |
| 41 | 28 | 'type' => 'object', |
| 42 | 29 | ); |
| 43 | 30 | } |
| @@ -65,82 +52,88 @@ | ||
| 65 | 52 | /** |
| 66 | 53 | * Add CSS classes and inline styles for colors to the incoming attributes array. |
| 67 | 54 | * This will be applied to the block markup in the front-end. |
| 68 | 55 | * |
| 56 | + * @param array $attributes Comprehensive list of attributes to be applied. | |
| 57 | + * @param array $block_attributes Block attributes. | |
| 69 | 58 | * @param WP_Block_Type $block_type Block type. |
| 70 | - * @param array $block_attributes Block attributes. | |
| 71 | 59 | * |
| 72 | 60 | * @return array Colors CSS classes and inline styles. |
| 73 | 61 | */ |
| 74 | -function gutenberg_apply_colors_support( $block_type, $block_attributes ) { | |
| 75 | - $color_support = $block_type->supports['color'] ?? false; | |
| 62 | +function gutenberg_apply_colors_support( $attributes, $block_attributes, $block_type ) { | |
| 63 | + $color_support = gutenberg_experimental_get( $block_type->supports, array( '__experimentalColor' ), false ); | |
| 64 | + $has_text_colors_support = is_array( $color_support ) || $color_support; | |
| 65 | + $has_background_colors_support = $has_text_colors_support; | |
| 66 | + $has_link_colors_support = $has_text_colors_support && gutenberg_experimental_get( $color_support, array( 'linkColor' ), false ); | |
| 67 | + $has_gradients_support = $has_text_colors_support && gutenberg_experimental_get( $color_support, array( 'gradients' ), false ); | |
| 76 | 68 | |
| 77 | - if ( | |
| 78 | - is_array( $color_support ) && | |
| 79 | - wp_should_skip_block_supports_serialization( $block_type, 'color' ) | |
| 80 | - ) { | |
| 81 | - return array(); | |
| 82 | - } | |
| 69 | + // Text Colors. | |
| 70 | + // Check support for text colors. | |
| 71 | + if ( $has_text_colors_support ) { | |
| 72 | + $has_named_text_color = array_key_exists( 'textColor', $block_attributes ); | |
| 73 | + $has_custom_text_color = isset( $block_attributes['style']['color']['text'] ); | |
| 83 | 74 | |
| 84 | - $has_text_colors_support = true === $color_support || | |
| 85 | - ( isset( $color_support['text'] ) && $color_support['text'] ) || | |
| 86 | - ( is_array( $color_support ) && ! isset( $color_support['text'] ) ); | |
| 87 | - $has_background_colors_support = true === $color_support || | |
| 88 | - ( isset( $color_support['background'] ) && $color_support['background'] ) || | |
| 89 | - ( is_array( $color_support ) && ! isset( $color_support['background'] ) ); | |
| 90 | - $has_gradients_support = $color_support['gradients'] ?? false; | |
| 91 | - $color_block_styles = array(); | |
| 92 | - | |
| 93 | - // Text colors. | |
| 94 | - // Check support for text colors. | |
| 95 | - if ( $has_text_colors_support && ! wp_should_skip_block_supports_serialization( $block_type, 'color', 'text' ) ) { | |
| 96 | - $preset_text_color = array_key_exists( 'textColor', $block_attributes ) ? "var:preset|color|{$block_attributes['textColor']}" : null; | |
| 97 | - $custom_text_color = $block_attributes['style']['color']['text'] ?? null; | |
| 98 | - $color_block_styles['text'] = $preset_text_color ? $preset_text_color : $custom_text_color; | |
| 75 | + // Apply required generic class. | |
| 76 | + if ( $has_custom_text_color || $has_named_text_color ) { | |
| 77 | + $attributes['css_classes'][] = 'has-text-color'; | |
| 78 | + } | |
| 79 | + // Apply color class or inline style. | |
| 80 | + if ( $has_named_text_color ) { | |
| 81 | + $attributes['css_classes'][] = sprintf( 'has-%s-color', $block_attributes['textColor'] ); | |
| 82 | + } elseif ( $has_custom_text_color ) { | |
| 83 | + $attributes['inline_styles'][] = sprintf( 'color: %s;', $block_attributes['style']['color']['text'] ); | |
| 84 | + } | |
| 99 | 85 | } |
| 100 | 86 | |
| 101 | - // Background colors. | |
| 102 | - if ( $has_background_colors_support && ! wp_should_skip_block_supports_serialization( $block_type, 'color', 'background' ) ) { | |
| 103 | - $preset_background_color = array_key_exists( 'backgroundColor', $block_attributes ) ? "var:preset|color|{$block_attributes['backgroundColor']}" : null; | |
| 104 | - $custom_background_color = $block_attributes['style']['color']['background'] ?? null; | |
| 105 | - $color_block_styles['background'] = $preset_background_color ? $preset_background_color : $custom_background_color; | |
| 87 | + // Link Colors. | |
| 88 | + if ( $has_link_colors_support ) { | |
| 89 | + $has_link_color = isset( $block_attributes['style']['color']['link'] ); | |
| 90 | + // Apply required class and style. | |
| 91 | + if ( $has_link_color ) { | |
| 92 | + $attributes['css_classes'][] = 'has-link-color'; | |
| 93 | + // If link is a named color. | |
| 94 | + if ( strpos( $block_attributes['style']['color']['link'], 'var:preset|color|' ) !== false ) { | |
| 95 | + // Get the name from the string and add proper styles. | |
| 96 | + $index_to_splice = strrpos( $block_attributes['style']['color']['link'], '|' ) + 1; | |
| 97 | + $link_color_name = substr( $block_attributes['style']['color']['link'], $index_to_splice ); | |
| 98 | + $attributes['inline_styles'][] = sprintf( '--wp--style--color--link:var(--wp--preset--color--%s);', $link_color_name ); | |
| 99 | + } else { | |
| 100 | + $attributes['inline_styles'][] = sprintf( '--wp--style--color--link: %s;', $block_attributes['style']['color']['link'] ); | |
| 101 | + } | |
| 102 | + } | |
| 106 | 103 | } |
| 107 | 104 | |
| 108 | - // Gradients. | |
| 109 | - // Suppress color.gradient CSS when background.gradient is supported and | |
| 110 | - // explicitly set. background.php owns CSS generation in that case, and | |
| 111 | - // emitting the background shorthand here would conflict with it. | |
| 112 | - $has_background_gradient_support = block_has_support( $block_type, array( 'background', 'gradient' ), false ); | |
| 113 | - $has_background_gradient_value = ! empty( $block_attributes['style']['background']['gradient'] ); | |
| 105 | + // Background Colors. | |
| 106 | + if ( $has_background_colors_support ) { | |
| 107 | + $has_named_background_color = array_key_exists( 'backgroundColor', $block_attributes ); | |
| 108 | + $has_custom_background_color = isset( $block_attributes['style']['color']['background'] ); | |
| 114 | 109 | |
| 115 | - if ( | |
| 116 | - $has_gradients_support && | |
| 117 | - ! wp_should_skip_block_supports_serialization( $block_type, 'color', 'gradients' ) && | |
| 118 | - ! ( $has_background_gradient_support && $has_background_gradient_value ) | |
| 119 | - ) { | |
| 120 | - $preset_gradient_color = array_key_exists( 'gradient', $block_attributes ) ? "var:preset|gradient|{$block_attributes['gradient']}" : null; | |
| 121 | - $custom_gradient_color = $block_attributes['style']['color']['gradient'] ?? null; | |
| 122 | - $color_block_styles['gradient'] = $preset_gradient_color ? $preset_gradient_color : $custom_gradient_color; | |
| 110 | + // Apply required background class. | |
| 111 | + if ( $has_custom_background_color || $has_named_background_color ) { | |
| 112 | + $attributes['css_classes'][] = 'has-background'; | |
| 113 | + } | |
| 114 | + // Apply background color classes or styles. | |
| 115 | + if ( $has_named_background_color ) { | |
| 116 | + $attributes['css_classes'][] = sprintf( 'has-%s-background-color', $block_attributes['backgroundColor'] ); | |
| 117 | + } elseif ( $has_custom_background_color ) { | |
| 118 | + $attributes['inline_styles'][] = sprintf( 'background-color: %s;', $block_attributes['style']['color']['background'] ); | |
| 119 | + } | |
| 123 | 120 | } |
| 124 | 121 | |
| 125 | - $attributes = array(); | |
| 126 | - $styles = gutenberg_style_engine_get_styles( array( 'color' => $color_block_styles ), array( 'convert_vars_to_classnames' => true ) ); | |
| 122 | + // Gradients. | |
| 123 | + if ( $has_gradients_support ) { | |
| 124 | + $has_named_gradient = array_key_exists( 'gradient', $block_attributes ); | |
| 125 | + $has_custom_gradient = isset( $block_attributes['style']['color']['gradient'] ); | |
| 127 | 126 | |
| 128 | - if ( ! empty( $styles['classnames'] ) ) { | |
| 129 | - $attributes['class'] = $styles['classnames']; | |
| 127 | + if ( $has_named_gradient || $has_custom_gradient ) { | |
| 128 | + $attributes['css_classes'][] = 'has-background'; | |
| 129 | + } | |
| 130 | + // Apply required background class. | |
| 131 | + if ( $has_named_gradient ) { | |
| 132 | + $attributes['css_classes'][] = sprintf( 'has-%s-gradient-background', $block_attributes['gradient'] ); | |
| 133 | + } elseif ( $has_custom_gradient ) { | |
| 134 | + $attributes['inline_styles'][] = sprintf( 'background: %s;', $block_attributes['style']['color']['gradient'] ); | |
| 135 | + } | |
| 130 | 136 | } |
| 131 | 137 | |
| 132 | - if ( ! empty( $styles['css'] ) ) { | |
| 133 | - $attributes['style'] = $styles['css']; | |
| 134 | - } | |
| 135 | - | |
| 136 | 138 | return $attributes; |
| 137 | 139 | } |
| 138 | - | |
| 139 | -// Register the block support. | |
| 140 | -WP_Block_Supports::get_instance()->register( | |
| 141 | - 'colors', | |
| 142 | - array( | |
| 143 | - 'register_attribute' => 'gutenberg_register_colors_support', | |
| 144 | - 'apply' => 'gutenberg_apply_colors_support', | |
| 145 | - ) | |
| 146 | -); | |
