From 62396e336fc7818736fec3dfba8e4642e5c607c6 Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Thu, 6 May 2021 14:57:18 -0400 Subject: [PATCH] Add Submenu Colors to Page List Block --- .../block-library/src/page-list/block.json | 4 + .../block-library/src/page-list/index.php | 93 ++++++++++++++++--- 2 files changed, 86 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/page-list/block.json b/packages/block-library/src/page-list/block.json index 25118d2dbeffb4..c7d3d838d2b18a 100644 --- a/packages/block-library/src/page-list/block.json +++ b/packages/block-library/src/page-list/block.json @@ -11,6 +11,10 @@ "customTextColor", "backgroundColor", "customBackgroundColor", + "overlayTextColor", + "customOverlayTextColor", + "overlayBackgroundColor", + "customOverlayBackgroundColor", "fontSize", "customFontSize", "showSubmenuIcon", diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php index a0cadde487d571..9043acb402891e 100644 --- a/packages/block-library/src/page-list/index.php +++ b/packages/block-library/src/page-list/index.php @@ -16,14 +16,17 @@ function block_core_page_list_build_css_colors( $context ) { $colors = array( 'css_classes' => array(), 'inline_styles' => '', + 'overlay_css_classes' => array(), + 'overlay_inline_styles' => '', ); // Text color. $has_named_text_color = array_key_exists( 'textColor', $context ); + $has_picked_text_color = array_key_exists( 'customTextColor', $context ); $has_custom_text_color = isset( $context['style']['color']['text'] ); // If has text color. - if ( $has_custom_text_color || $has_named_text_color ) { + if ( $has_custom_text_color || $has_picked_text_color || $has_named_text_color ) { // Add has-text-color class. $colors['css_classes'][] = 'has-text-color'; } @@ -31,6 +34,8 @@ function block_core_page_list_build_css_colors( $context ) { if ( $has_named_text_color ) { // Add the color class. $colors['css_classes'][] = sprintf( 'has-%s-color', $context['textColor'] ); + } elseif ( $has_picked_text_color ) { + $colors['inline_styles'] .= sprintf( 'color: %s;', $context['customTextColor'] ); } elseif ( $has_custom_text_color ) { // Add the custom color inline style. $colors['inline_styles'] .= sprintf( 'color: %s;', $context['style']['color']['text'] ); @@ -38,10 +43,11 @@ function block_core_page_list_build_css_colors( $context ) { // Background color. $has_named_background_color = array_key_exists( 'backgroundColor', $context ); + $has_picked_background_color = array_key_exists( 'customBackgroundColor', $context ); $has_custom_background_color = isset( $context['style']['color']['background'] ); // If has background color. - if ( $has_custom_background_color || $has_named_background_color ) { + if ( $has_custom_background_color || $has_picked_background_color || $has_named_background_color ) { // Add has-background class. $colors['css_classes'][] = 'has-background'; } @@ -49,11 +55,64 @@ function block_core_page_list_build_css_colors( $context ) { if ( $has_named_background_color ) { // Add the background-color class. $colors['css_classes'][] = sprintf( 'has-%s-background-color', $context['backgroundColor'] ); + } elseif ( $has_picked_background_color ) { + $colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['customBackgroundColor'] ); } elseif ( $has_custom_background_color ) { // Add the custom background-color inline style. $colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['style']['color']['background'] ); } + // Overlay text color + $has_named_overlay_text_color = array_key_exists( 'overlayTextColor', $context ); + $has_picked_overlay_text_color = array_key_exists( 'customOverlayTextColor', $context ); + + // If it has a text color. + if ( $has_named_overlay_text_color + || $has_picked_overlay_text_color + || $has_named_text_color + || $has_picked_text_color + || $has_named_text_color ) { + $colors['overlay_css_classes'][] = 'has-text-color'; + } + + // Give overlay colors priority, fall back to Navigation block colors, then global styles + if ( $has_named_overlay_text_color ) { + $colors['overlay_css_classes'][] = sprintf( 'has-%s-color', $context['overlayTextColor'] ); + } elseif ( $has_picked_overlay_text_color ) { + $colors['overlay_inline_styles'] .= sprintf( 'color: %s;', $context['customOverlayTextColor'] ); + } elseif ( $has_named_text_color ) { + $colors['overlay_css_classes'][] = sprintf( 'has-%s-color', $context['textColor'] ); + } elseif ( $has_picked_text_color ) { + $colors['overlay_inline_styles'] .= sprintf( 'color: %s;', $context['customTextColor'] ); + } elseif ( $has_custom_text_color ) { + $colors['overlay_inline_styles'] .= sprintf( 'color: %s;', $context['style']['color']['text'] ); + } + + // Overlay background colors + $has_named_overlay_background_color = array_key_exists( 'overlayBackgroundColor', $context ); + $has_picked_overlay_background_color = array_key_exists( 'customOverlayBackgroundColor', $context ); + + // If has background color. + if ( $has_named_overlay_background_color + || $has_picked_overlay_background_color + || $has_named_background_color + || $has_picked_text_color + || $has_picked_background_color ) { + $colors['overlay_css_classes'][] = 'has-background'; + } + + if ( $has_named_overlay_background_color ) { + $colors['overlay_css_classes'][] = sprintf( 'has-%s-background-color', $context['overlayBackgroundColor'] ); + } elseif ( $has_picked_overlay_background_color ) { + $colors['overlay_inline_styles'] .= sprintf( 'background-color: %s;', $context['customOverlayBackgroundColor'] ); + } elseif ( $has_named_background_color ) { + $colors['overlay_css_classes'][] = sprintf( 'has-%s-background-color', $context['backgroundColor'] ); + } elseif ( $has_picked_background_color ) { + $colors['overlay_inline_styles'] .= sprintf( 'background-color: %s;', $context['customBackgroundColor'] ); + } elseif ( $has_custom_background_color ) { + $colors['overlay_inline_styles'] .= sprintf( 'background-color: %s;', $context['style']['color']['background'] ); + } + return $colors; } @@ -89,27 +148,39 @@ function block_core_page_list_build_css_font_sizes( $context ) { * Outputs Page list markup from an array of pages with nested children. * * @param array $nested_pages The array of nested pages. + * @param array $colors Color information for overlay styles + * @param integer $depth The nesting depth * * @return string List markup. */ -function render_nested_page_list( $nested_pages ) { +function render_nested_page_list( $nested_pages, $colors, $depth = 0 ) { if ( empty( $nested_pages ) ) { return; } $markup = ''; foreach ( (array) $nested_pages as $page ) { $css_class = 'wp-block-pages-list__item'; + $style_attribute = ''; if ( isset( $page['children'] ) ) { $css_class .= ' has-child'; } - $markup .= '
  • '; + + // If this is the first level of submenus, include the overlay colors + if ( 1 === $depth ) { + $css_class .= ' ' . trim( implode( ' ', $colors['overlay_css_classes'] ) ); + if ( $colors['overlay_inline_styles'] !== '' ) { + $style_attribute = sprintf( ' style="%s"', esc_attr($colors['overlay_inline_styles'])); + } + } + + $markup .= '
  • '; $markup .= '' . wp_kses( $page['title'], wp_kses_allowed_html( 'post' ) ) . ''; if ( isset( $page['children'] ) ) { $markup .= ''; - $markup .= ''; + $markup .= ''; } $markup .= '
    • '; } @@ -180,12 +251,6 @@ function render_block_core_page_list( $attributes, $content, $block ) { } } - $nested_pages = nest_pages( $top_level_pages, $pages_with_children ); - - $wrapper_markup = ''; - - $items_markup = render_nested_page_list( $nested_pages ); - $colors = block_core_page_list_build_css_colors( $block->context ); $font_sizes = block_core_page_list_build_css_font_sizes( $block->context ); $classes = array_merge( @@ -195,6 +260,12 @@ function render_block_core_page_list( $attributes, $content, $block ) { $style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] ); $css_classes = trim( implode( ' ', $classes ) ); + $nested_pages = nest_pages( $top_level_pages, $pages_with_children ); + + $wrapper_markup = ''; + + $items_markup = render_nested_page_list( $nested_pages, $colors ); + if ( $block->context && $block->context['showSubmenuIcon'] ) { $css_classes .= ' show-submenu-icons'; }