From d3dae1759d8c3f9341c59febb4f0da059c3207d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Fri, 18 Jun 2021 11:28:13 +0200 Subject: [PATCH] Extract colors --- lib/block-supports/colors.php | 95 +++++++++++-------- .../block-library/src/page-list/index.php | 54 +---------- 2 files changed, 55 insertions(+), 94 deletions(-) diff --git a/lib/block-supports/colors.php b/lib/block-supports/colors.php index 72e3e45ffcb3d8..455dc78c8bca10 100644 --- a/lib/block-supports/colors.php +++ b/lib/block-supports/colors.php @@ -53,90 +53,103 @@ function gutenberg_register_colors_support( $block_type ) { } } - /** - * Add CSS classes and inline styles for colors to the incoming attributes array. - * This will be applied to the block markup in the front-end. + * Build an array with CSS classes and inline styles defining the colors. * - * @param WP_Block_Type $block_type Block type. - * @param array $block_attributes Block attributes. + * @param array $block_attributes Block attributes to extract the data from. + * @param array $supports What colors it supports: text, background, gradients. * * @return array Colors CSS classes and inline styles. */ -function gutenberg_apply_colors_support( $block_type, $block_attributes ) { - $color_support = _wp_array_get( $block_type->supports, array( 'color' ), false ); - - if ( - is_array( $color_support ) && - array_key_exists( '__experimentalSkipSerialization', $color_support ) && - $color_support['__experimentalSkipSerialization'] - ) { - return array(); - } +function gutenberg_extract_classes_and_styles_from_colors( $block_attributes, $supports = array( 'text' => true, 'background' => true, 'gradients' => true ) ) { + $colors = array( + 'classes' => array(), + 'styles' => array(), + ); - $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 ) ); - $has_gradients_support = _wp_array_get( $color_support, array( 'gradients' ), false ); - $classes = array(); - $styles = array(); - - // Text colors. - // Check support for text colors. - if ( $has_text_colors_support ) { + if ( $supports['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'; + $colors['classes'][] = 'has-text-color'; } // Apply color class or inline style. if ( $has_named_text_color ) { - $classes[] = sprintf( 'has-%s-color', $block_attributes['textColor'] ); + $colors['classes'][] = sprintf( 'has-%s-color', $block_attributes['textColor'] ); } elseif ( $has_custom_text_color ) { - $styles[] = sprintf( 'color: %s;', $block_attributes['style']['color']['text'] ); + $colors['styles'][] = sprintf( 'color: %s;', $block_attributes['style']['color']['text'] ); } } - // Background colors. - if ( $has_background_colors_support ) { + if ( $supports['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'; + $colors['classes'][] = 'has-background'; } // Apply background color classes or styles. if ( $has_named_background_color ) { - $classes[] = sprintf( 'has-%s-background-color', $block_attributes['backgroundColor'] ); + $colors['classes'][] = sprintf( 'has-%s-background-color', $block_attributes['backgroundColor'] ); } elseif ( $has_custom_background_color ) { - $styles[] = sprintf( 'background-color: %s;', $block_attributes['style']['color']['background'] ); + $colors['styles'][] = sprintf( 'background-color: %s;', $block_attributes['style']['color']['background'] ); } } - // Gradients. - if ( $has_gradients_support ) { + if ( $supports['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'; + $colors['classes'][] = 'has-background'; } // Apply required background class. if ( $has_named_gradient ) { - $classes[] = sprintf( 'has-%s-gradient-background', $block_attributes['gradient'] ); + $colors['classes'][] = sprintf( 'has-%s-gradient-background', $block_attributes['gradient'] ); } elseif ( $has_custom_gradient ) { - $styles[] = sprintf( 'background: %s;', $block_attributes['style']['color']['gradient'] ); + $colors['styles'][] = sprintf( 'background: %s;', $block_attributes['style']['color']['gradient'] ); } } + return $colors; +} + +/** + * Add CSS classes and inline styles for colors to the incoming attributes array. + * This will be applied to the block markup in the front-end. + * + * @param WP_Block_Type $block_type Block type. + * @param array $block_attributes Block attributes. + * + * @return array Colors CSS classes and inline styles. + */ +function gutenberg_apply_colors_support( $block_type, $block_attributes ) { + $color_support = _wp_array_get( $block_type->supports, array( 'color' ), false ); + + if ( + is_array( $color_support ) && + array_key_exists( '__experimentalSkipSerialization', $color_support ) && + $color_support['__experimentalSkipSerialization'] + ) { + return array(); + } + + $supports = array(); + $supports['text'] = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'text' ), true ) ); + $supports['background'] = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'background' ), true ) ); + $supports['gradients'] = _wp_array_get( $color_support, array( 'gradients' ), false ); + + $colors = gutenberg_extract_classes_and_styles_from_colors( $block_attributes, $supports ); + $attributes = array(); - if ( ! empty( $classes ) ) { - $attributes['class'] = implode( ' ', $classes ); + if ( ! empty( $colors['classes'] ) ) { + $attributes['class'] = implode( ' ', $colors['classes'] ); } - if ( ! empty( $styles ) ) { - $attributes['style'] = implode( ' ', $styles ); + if ( ! empty( $colors['styles'] ) ) { + $attributes['style'] = implode( ' ', $colors['styles'] ); } return $attributes; diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php index f71d7878823e72..9e1b0c57d346a4 100644 --- a/packages/block-library/src/page-list/index.php +++ b/packages/block-library/src/page-list/index.php @@ -5,58 +5,6 @@ * @package WordPress */ -/** - * Build an array with CSS classes and inline styles defining the colors - * which will be applied to the pages markup in the front-end when it is a descendant of navigation. - * - * @param array $context Navigation block context. - * @return array Colors CSS classes and inline styles. - */ -function block_core_page_list_build_css_colors( $context ) { - $colors = array( - 'css_classes' => array(), - 'inline_styles' => '', - ); - - // Text color. - $has_named_text_color = array_key_exists( 'textColor', $context ); - $has_custom_text_color = isset( $context['style']['color']['text'] ); - - // If has text color. - if ( $has_custom_text_color || $has_named_text_color ) { - // Add has-text-color class. - $colors['css_classes'][] = 'has-text-color'; - } - - if ( $has_named_text_color ) { - // Add the color class. - $colors['css_classes'][] = sprintf( 'has-%s-color', $context['textColor'] ); - } elseif ( $has_custom_text_color ) { - // Add the custom color inline style. - $colors['inline_styles'] .= sprintf( 'color: %s;', $context['style']['color']['text'] ); - } - - // Background color. - $has_named_background_color = array_key_exists( 'backgroundColor', $context ); - $has_custom_background_color = isset( $context['style']['color']['background'] ); - - // If has background color. - if ( $has_custom_background_color || $has_named_background_color ) { - // Add has-background class. - $colors['css_classes'][] = 'has-background'; - } - - if ( $has_named_background_color ) { - // Add the background-color class. - $colors['css_classes'][] = sprintf( 'has-%s-background-color', $context['backgroundColor'] ); - } elseif ( $has_custom_background_color ) { - // Add the custom background-color inline style. - $colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['style']['color']['background'] ); - } - - return $colors; -} - /** * Build an array with CSS classes and inline styles defining the font sizes * which will be applied to the pages markup in the front-end when it is a descendant of navigation. @@ -200,7 +148,7 @@ function render_block_core_page_list( $attributes, $content, $block ) { $items_markup = block_core_page_list_render_nested_page_list( $nested_pages, $active_page_ancestor_ids ); - $colors = block_core_page_list_build_css_colors( $block->context ); + $colors = gutenberg_extract_classes_and_styles_from_colors( $block->context, array( 'text' => true, 'background' => true ) ); $font_sizes = block_core_page_list_build_css_font_sizes( $block->context ); $classes = array_merge( $colors['css_classes'],