WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
11/08/2021 02:26:27 PM (3 years ago)
Author:
youknowriad
Message:

Block Editor: Update the WordPress Packages based on Gutenberg 11.9 RC1.

This brings the JS packages up to date and is the first step that will allow us
to include the other block editor updates for WordPress 5.9:
FSE infrastrucutre, site editor and global styles.

Props noisysocks.
See #54337.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/blocks/page-list.php

    r51199 r52042  
    1010 * which will be applied to the pages markup in the front-end when it is a descendant of navigation.
    1111 *
    12  * @param  array $context Navigation block context.
     12 * @param  array $attributes Block attributes.
     13 * @param  array $context    Navigation block context.
    1314 * @return array Colors CSS classes and inline styles.
    1415 */
    15 function block_core_page_list_build_css_colors( $context ) {
     16function block_core_page_list_build_css_colors( $attributes, $context ) {
    1617    $colors = array(
    17         'css_classes'   => array(),
    18         'inline_styles' => '',
     18        'css_classes'           => array(),
     19        'inline_styles'         => '',
     20        'overlay_css_classes'   => array(),
     21        'overlay_inline_styles' => '',
    1922    );
    2023
    2124    // Text color.
    2225    $has_named_text_color  = array_key_exists( 'textColor', $context );
     26    $has_picked_text_color = array_key_exists( 'customTextColor', $context );
    2327    $has_custom_text_color = isset( $context['style']['color']['text'] );
    2428
    2529    // If has text color.
    26     if ( $has_custom_text_color || $has_named_text_color ) {
     30    if ( $has_custom_text_color || $has_picked_text_color || $has_named_text_color ) {
    2731        // Add has-text-color class.
    2832        $colors['css_classes'][] = 'has-text-color';
    … …  
    3135    if ( $has_named_text_color ) {
    3236        // Add the color class.
    33         $colors['css_classes'][] = sprintf( 'has-%s-color', $context['textColor'] );
     37        $colors['css_classes'][] = sprintf( 'has-%s-color', gutenberg_experimental_to_kebab_case( $context['textColor'] ) );
     38    } elseif ( $has_picked_text_color ) {
     39        $colors['inline_styles'] .= sprintf( 'color: %s;', $context['customTextColor'] );
    3440    } elseif ( $has_custom_text_color ) {
    3541        // Add the custom color inline style.
    … …  
    3945    // Background color.
    4046    $has_named_background_color  = array_key_exists( 'backgroundColor', $context );
     47    $has_picked_background_color = array_key_exists( 'customBackgroundColor', $context );
    4148    $has_custom_background_color = isset( $context['style']['color']['background'] );
    4249
    4350    // If has background color.
    44     if ( $has_custom_background_color || $has_named_background_color ) {
     51    if ( $has_custom_background_color || $has_picked_background_color || $has_named_background_color ) {
    4552        // Add has-background class.
    4653        $colors['css_classes'][] = 'has-background';
    … …  
    4956    if ( $has_named_background_color ) {
    5057        // Add the background-color class.
    51         $colors['css_classes'][] = sprintf( 'has-%s-background-color', $context['backgroundColor'] );
     58        $colors['css_classes'][] = sprintf( 'has-%s-background-color', gutenberg_experimental_to_kebab_case( $context['backgroundColor'] ) );
     59    } elseif ( $has_picked_background_color ) {
     60        $colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['customBackgroundColor'] );
    5261    } elseif ( $has_custom_background_color ) {
    5362        // Add the custom background-color inline style.
    5463        $colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['style']['color']['background'] );
     64    }
     65
     66    // Overlay text color.
     67    $has_named_overlay_text_color  = array_key_exists( 'overlayTextColor', $context );
     68    $has_picked_overlay_text_color = array_key_exists( 'customOverlayTextColor', $context );
     69
     70    // If it has a text color.
     71    if ( $has_named_overlay_text_color || $has_picked_overlay_text_color ) {
     72        $colors['overlay_css_classes'][] = 'has-text-color';
     73    }
     74
     75    // Give overlay colors priority, fall back to Navigation block colors, then global styles.
     76    if ( $has_named_overlay_text_color ) {
     77        $colors['overlay_css_classes'][] = sprintf( 'has-%s-color', gutenberg_experimental_to_kebab_case( $context['overlayTextColor'] ) );
     78    } elseif ( $has_picked_overlay_text_color ) {
     79        $colors['overlay_inline_styles'] .= sprintf( 'color: %s;', $context['customOverlayTextColor'] );
     80    }
     81
     82    // Overlay background colors.
     83    $has_named_overlay_background_color  = array_key_exists( 'overlayBackgroundColor', $context );
     84    $has_picked_overlay_background_color = array_key_exists( 'customOverlayBackgroundColor', $context );
     85
     86    // If has background color.
     87    if ( $has_named_overlay_background_color || $has_picked_overlay_background_color ) {
     88        $colors['overlay_css_classes'][] = 'has-background';
     89    }
     90
     91    if ( $has_named_overlay_background_color ) {
     92        $colors['overlay_css_classes'][] = sprintf( 'has-%s-background-color', gutenberg_experimental_to_kebab_case( $context['overlayBackgroundColor'] ) );
     93    } elseif ( $has_picked_overlay_background_color ) {
     94        $colors['overlay_inline_styles'] .= sprintf( 'background-color: %s;', $context['customOverlayBackgroundColor'] );
    5595    }
    5696
    … …  
    89129 * Outputs Page list markup from an array of pages with nested children.
    90130 *
    91  * @param array $nested_pages The array of nested pages.
     131 * @param boolean $open_submenus_on_click Whether to open submenus on click instead of hover.
     132 * @param boolean $show_submenu_icons Whether to show submenu indicator icons.
     133 * @param boolean $is_navigation_child If block is a child of Navigation block.
     134 * @param array   $nested_pages The array of nested pages.
     135 * @param array   $active_page_ancestor_ids An array of ancestor ids for active page.
     136 * @param array   $colors Color information for overlay styles.
     137 * @param integer $depth The nesting depth.
    92138 *
    93139 * @return string List markup.
    94140 */
    95 function block_core_page_list_render_nested_page_list( $nested_pages ) {
     141function block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) {
    96142    if ( empty( $nested_pages ) ) {
    97143        return;
    … …  
    99145    $markup = '';
    100146    foreach ( (array) $nested_pages as $page ) {
    101         $css_class = 'wp-block-pages-list__item';
     147        $css_class       = $page['is_active'] ? ' current-menu-item' : '';
     148        $aria_current    = $page['is_active'] ? ' aria-current="page"' : '';
     149        $style_attribute = '';
     150
     151        $css_class .= in_array( $page['page_id'], $active_page_ancestor_ids, true ) ? ' current-menu-ancestor' : '';
    102152        if ( isset( $page['children'] ) ) {
    103153            $css_class .= ' has-child';
    104154        }
    105         $markup .= '<li class="' . $css_class . '">';
    106         $markup .= '<a class="wp-block-pages-list__item__link" href="' . esc_url( $page['link'] ) . '">' . wp_kses(
    107             $page['title'],
    108             wp_kses_allowed_html( 'post' )
    109         ) . '</a>';
     155
     156        if ( $is_navigation_child ) {
     157            $css_class .= ' wp-block-navigation-item';
     158
     159            if ( $open_submenus_on_click ) {
     160                $css_class .= ' open-on-click';
     161            } elseif ( $show_submenu_icons ) {
     162                $css_class .= ' open-on-hover-click';
     163            }
     164        }
     165
     166        $navigation_child_content_class = $is_navigation_child ? ' wp-block-navigation-item__content' : '';
     167
     168        // If this is the first level of submenus, include the overlay colors.
     169        if ( 1 === $depth && isset( $colors['overlay_css_classes'], $colors['overlay_inline_styles'] ) ) {
     170            $css_class .= ' ' . trim( implode( ' ', $colors['overlay_css_classes'] ) );
     171            if ( '' !== $colors['overlay_inline_styles'] ) {
     172                $style_attribute = sprintf( ' style="%s"', esc_attr( $colors['overlay_inline_styles'] ) );
     173            }
     174        }
     175
     176        $markup .= '<li class="wp-block-pages-list__item' . $css_class . '"' . $style_attribute . '>';
     177
     178        if ( isset( $page['children'] ) && $is_navigation_child && $open_submenus_on_click ) {
     179            $markup .= '<button class="' . $navigation_child_content_class . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . wp_kses(
     180                $page['title'],
     181                wp_kses_allowed_html( 'post' )
     182            ) . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__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>' .
     183            '</button>';
     184        } else {
     185            $markup .= '<a class="wp-block-pages-list__item__link' . $navigation_child_content_class . ' "href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . wp_kses(
     186                $page['title'],
     187                wp_kses_allowed_html( 'post' )
     188            ) . '</a>';
     189        }
     190
    110191        if ( isset( $page['children'] ) ) {
    111             $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>';
    112             $markup .= '<ul class="submenu-container">' . block_core_page_list_render_nested_page_list( $page['children'] ) . '</ul>';
     192            if ( $is_navigation_child && $show_submenu_icons && ! $open_submenus_on_click ) {
     193                $markup .= '<button class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
     194                $markup .= '<span class="wp-block-page-list__submenu-icon wp-block-navigation__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>';
     195                $markup .= '</button>';
     196            }
     197            $markup .= '<ul class="submenu-container';
     198            // Extra classname is added when the block is a child of Navigation.
     199            if ( $is_navigation_child ) {
     200                $markup .= ' wp-block-navigation__submenu-container';
     201            }
     202            $markup .= '">' . block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $page['children'], $active_page_ancestor_ids, $colors, $depth + 1 ) . '</ul>';
    113203        }
    114204        $markup .= '</li>';
    … …  
    150240    $block_id++;
    151241
    152     // TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby values is resolved,
    153     // update 'sort_column' to 'menu_order, post_title'. Sorting by both menu_order and post_title ensures a stable sort.
    154     // Otherwise with pages that have the same menu_order value, we can see different ordering depending on how DB
    155     // queries are constructed internally. For example we might see a different order when a limit is set to <499
    156     // versus >= 500.
    157242    $all_pages = get_pages(
    158243        array(
    159             'sort_column' => 'menu_order',
     244            'sort_column' => 'menu_order,post_title',
    160245            'order'       => 'asc',
    161246        )
    162247    );
    163248
     249    // If thare are no pages, there is nothing to show.
     250    if ( empty( $all_pages ) ) {
     251        return;
     252    }
     253
    164254    $top_level_pages = array();
    165255
    166256    $pages_with_children = array();
    167257
     258    $active_page_ancestor_ids = array();
     259
    168260    foreach ( (array) $all_pages as $page ) {
     261        $is_active = ! empty( $page->ID ) && ( get_the_ID() === $page->ID );
     262
     263        if ( $is_active ) {
     264            $active_page_ancestor_ids = get_post_ancestors( $page->ID );
     265        }
     266
    169267        if ( $page->post_parent ) {
    170268            $pages_with_children[ $page->post_parent ][ $page->ID ] = array(
    171                 'title' => $page->post_title,
    172                 'link'  => get_permalink( $page->ID ),
     269                'page_id'   => $page->ID,
     270                'title'     => $page->post_title,
     271                'link'      => get_permalink( $page->ID ),
     272                'is_active' => $is_active,
    173273            );
    174274        } else {
    175275            $top_level_pages[ $page->ID ] = array(
    176                 'title' => $page->post_title,
    177                 'link'  => get_permalink( $page->ID ),
     276                'page_id'   => $page->ID,
     277                'title'     => $page->post_title,
     278                'link'      => get_permalink( $page->ID ),
     279                'is_active' => $is_active,
    178280            );
    179281
    … …  
    181283    }
    182284
    183     $nested_pages = block_core_page_list_nest_pages( $top_level_pages, $pages_with_children );
    184 
    185     $wrapper_markup = '<ul %1$s>%2$s</ul>';
    186 
    187     $items_markup = block_core_page_list_render_nested_page_list( $nested_pages );
    188 
    189     $colors          = block_core_page_list_build_css_colors( $block->context );
     285    $colors          = block_core_page_list_build_css_colors( $attributes, $block->context );
    190286    $font_sizes      = block_core_page_list_build_css_font_sizes( $block->context );
    191287    $classes         = array_merge(
    … …  
    196292    $css_classes     = trim( implode( ' ', $classes ) );
    197293
    198     if ( $block->context && $block->context['showSubmenuIcon'] ) {
    199         $css_classes .= ' show-submenu-icons';
    200     }
     294    $nested_pages = block_core_page_list_nest_pages( $top_level_pages, $pages_with_children );
     295
     296    $is_navigation_child = array_key_exists( 'showSubmenuIcon', $block->context );
     297
     298    $open_submenus_on_click = array_key_exists( 'openSubmenusOnClick', $block->context ) ? $block->context['openSubmenusOnClick'] : false;
     299
     300    $show_submenu_icons = array_key_exists( 'showSubmenuIcon', $block->context ) ? $block->context['showSubmenuIcon'] : false;
     301
     302    $wrapper_markup = '<ul %1$s>%2$s</ul>';
     303
     304    $items_markup = block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $active_page_ancestor_ids, $colors );
    201305
    202306    $wrapper_attributes = get_block_wrapper_attributes(
Note: See TracChangeset for help on using the changeset viewer.