Skip to content

Commit

Permalink
Add Submenu Colors to Page List Block
Browse files Browse the repository at this point in the history
  • Loading branch information
George Hotelling committed May 6, 2021
1 parent 81f006c commit fd59864
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 11 deletions.
4 changes: 4 additions & 0 deletions packages/block-library/src/page-list/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
"customTextColor",
"backgroundColor",
"customBackgroundColor",
"overlayTextColor",
"customOverlayTextColor",
"overlayBackgroundColor",
"customOverlayBackgroundColor",
"fontSize",
"customFontSize",
"showSubmenuIcon",
Expand Down
93 changes: 82 additions & 11 deletions packages/block-library/src/page-list/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,44 +16,103 @@ 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';
}

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'] );
}

// 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';
}

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;
}

Expand Down Expand Up @@ -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 .= '<li class="' . $css_class . '">';

// 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 .= '<li class="' . $css_class . '"' . $style_attribute . '>';
$markup .= '<a class="wp-block-pages-list__item__link" href="' . esc_url( $page['link'] ) . '">' . wp_kses(
$page['title'],
wp_kses_allowed_html( 'post' )
) . '</a>';
if ( isset( $page['children'] ) ) {
$markup .= '<span class="wp-block-page-list__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
$markup .= '<ul class="submenu-container">' . render_nested_page_list( $page['children'] ) . '</ul>';
$markup .= '<ul class="submenu-container">' . render_nested_page_list( $page['children'], $colors, $depth + 1 ) . '</ul>';
}
$markup .= '</li>';
}
Expand Down Expand Up @@ -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 = '<ul %1$s>%2$s</ul>';

$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(
Expand All @@ -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 = '<ul %1$s>%2$s</ul>';

$items_markup = render_nested_page_list( $nested_pages, $colors );

if ( $block->context && $block->context['showSubmenuIcon'] ) {
$css_classes .= ' show-submenu-icons';
}
Expand Down

0 comments on commit fd59864

Please sign in to comment.