diff --git a/wp-includes/blocks/index.php b/wp-includes/blocks/index.php index c06618372e..326fc043b0 100644 --- a/wp-includes/blocks/index.php +++ b/wp-includes/blocks/index.php @@ -15,6 +15,7 @@ require ABSPATH . WPINC . '/blocks/latest-comments.php'; require ABSPATH . WPINC . '/blocks/latest-posts.php'; require ABSPATH . WPINC . '/blocks/legacy-widget.php'; require ABSPATH . WPINC . '/blocks/loginout.php'; +require ABSPATH . WPINC . '/blocks/page-list.php'; require ABSPATH . WPINC . '/blocks/post-content.php'; require ABSPATH . WPINC . '/blocks/post-date.php'; require ABSPATH . WPINC . '/blocks/post-excerpt.php'; diff --git a/wp-includes/blocks/page-list.php b/wp-includes/blocks/page-list.php new file mode 100644 index 0000000000..a0cadde487 --- /dev/null +++ b/wp-includes/blocks/page-list.php @@ -0,0 +1,227 @@ + 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. + * + * @param array $context Navigation block context. + * @return array Font size CSS classes and inline styles. + */ +function block_core_page_list_build_css_font_sizes( $context ) { + // CSS classes. + $font_sizes = array( + 'css_classes' => array(), + 'inline_styles' => '', + ); + + $has_named_font_size = array_key_exists( 'fontSize', $context ); + $has_custom_font_size = isset( $context['style']['typography']['fontSize'] ); + + if ( $has_named_font_size ) { + // Add the font size class. + $font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] ); + } elseif ( $has_custom_font_size ) { + // Add the custom font size inline style. + $font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['style']['typography']['fontSize'] ); + } + + return $font_sizes; +} + +/** + * Outputs Page list markup from an array of pages with nested children. + * + * @param array $nested_pages The array of nested pages. + * + * @return string List markup. + */ +function render_nested_page_list( $nested_pages ) { + if ( empty( $nested_pages ) ) { + return; + } + $markup = ''; + foreach ( (array) $nested_pages as $page ) { + $css_class = 'wp-block-pages-list__item'; + if ( isset( $page['children'] ) ) { + $css_class .= ' has-child'; + } + $markup .= '
  • '; + $markup .= '' . wp_kses( + $page['title'], + wp_kses_allowed_html( 'post' ) + ) . ''; + if ( isset( $page['children'] ) ) { + $markup .= ''; + $markup .= ''; + } + $markup .= '
    • '; + } + return $markup; +} + +/** + * Outputs nested array of pages + * + * @param array $current_level The level being iterated through. + * @param array $children The children grouped by parent post ID. + * + * @return array The nested array of pages. + */ +function nest_pages( $current_level, $children ) { + if ( empty( $current_level ) ) { + return; + } + foreach ( (array) $current_level as $key => $current ) { + if ( isset( $children[ $key ] ) ) { + $current_level[ $key ]['children'] = nest_pages( $children[ $key ], $children ); + } + } + return $current_level; +} + +/** + * Renders the `core/page-list` block on server. + * + * @param array $attributes The block attributes. + * @param array $content The saved content. + * @param array $block The parsed block. + * + * @return string Returns the page list markup. + */ +function render_block_core_page_list( $attributes, $content, $block ) { + static $block_id = 0; + $block_id++; + + // TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby values is resolved, + // update 'sort_column' to 'menu_order, post_title'. Sorting by both menu_order and post_title ensures a stable sort. + // Otherwise with pages that have the same menu_order value, we can see different ordering depending on how DB + // queries are constructed internally. For example we might see a different order when a limit is set to <499 + // versus >= 500. + $all_pages = get_pages( + array( + 'sort_column' => 'menu_order', + 'order' => 'asc', + ) + ); + + $top_level_pages = array(); + + $pages_with_children = array(); + + foreach ( (array) $all_pages as $page ) { + if ( $page->post_parent ) { + $pages_with_children[ $page->post_parent ][ $page->ID ] = array( + 'title' => $page->post_title, + 'link' => get_permalink( $page->ID ), + ); + } else { + $top_level_pages[ $page->ID ] = array( + 'title' => $page->post_title, + 'link' => get_permalink( $page->ID ), + ); + + } + } + + $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( + $colors['css_classes'], + $font_sizes['css_classes'] + ); + $style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] ); + $css_classes = trim( implode( ' ', $classes ) ); + + if ( $block->context && $block->context['showSubmenuIcon'] ) { + $css_classes .= ' show-submenu-icons'; + } + + $wrapper_attributes = get_block_wrapper_attributes( + array( + 'class' => $css_classes, + 'style' => $style_attribute, + ) + ); + + return sprintf( + $wrapper_markup, + $wrapper_attributes, + $items_markup + ); +} + + /** + * Registers the `core/pages` block on server. + */ +function register_block_core_page_list() { + register_block_type_from_metadata( + __DIR__ . '/page-list', + array( + 'render_callback' => 'render_block_core_page_list', + ) + ); +} + add_action( 'init', 'register_block_core_page_list' ); diff --git a/wp-includes/blocks/page-list/block.json b/wp-includes/blocks/page-list/block.json new file mode 100644 index 0000000000..25118d2dbe --- /dev/null +++ b/wp-includes/blocks/page-list/block.json @@ -0,0 +1,25 @@ +{ + "apiVersion": 2, + "name": "core/page-list", + "title": "Page List", + "category": "widgets", + "description": "Display a list of all pages.", + "keywords": [ "menu", "navigation" ], + "textdomain": "default", + "usesContext": [ + "textColor", + "customTextColor", + "backgroundColor", + "customBackgroundColor", + "fontSize", + "customFontSize", + "showSubmenuIcon", + "style" + ], + "supports": { + "reusable": false, + "html": false + }, + "editorStyle": "wp-block-page-list-editor", + "style": "wp-block-page-list" +} diff --git a/wp-includes/blocks/page-list/editor-rtl.css b/wp-includes/blocks/page-list/editor-rtl.css new file mode 100644 index 0000000000..444d6a587e --- /dev/null +++ b/wp-includes/blocks/page-list/editor-rtl.css @@ -0,0 +1,107 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +.wp-block-navigation .wp-block-page-list > div, +.wp-block-navigation .wp-block-page-list { + background-color: inherit; +} +.wp-block-navigation.items-justified-space-between .wp-block-page-list > div, +.wp-block-navigation.items-justified-space-between .wp-block-page-list { + display: contents; + flex: 1; +} +.wp-block-navigation.items-justified-space-between.has-child-selected .wp-block-page-list > div, .wp-block-navigation.items-justified-space-between.has-child-selected .wp-block-page-list, .wp-block-navigation.items-justified-space-between.is-selected .wp-block-page-list > div, .wp-block-navigation.items-justified-space-between.is-selected .wp-block-page-list { + flex: inherit; +} + +.wp-block-pages-list__item__link { + pointer-events: none; +} + +.wp-block-page-list .components-placeholder { + min-height: 0; + padding: 0; + background-color: inherit; +} +.wp-block-page-list .components-placeholder .components-spinner { + margin: 0.5em; +} + +.wp-block-page-list-modal { + max-width: 400px; +} + +.wp-block-page-list-modal-buttons { + display: flex; + justify-content: flex-end; +} +.wp-block-page-list-modal-buttons .components-button { + margin-right: 12px; +} \ No newline at end of file diff --git a/wp-includes/blocks/page-list/editor-rtl.min.css b/wp-includes/blocks/page-list/editor-rtl.min.css new file mode 100644 index 0000000000..9391451c12 --- /dev/null +++ b/wp-includes/blocks/page-list/editor-rtl.min.css @@ -0,0 +1 @@ +.wp-block-navigation .wp-block-page-list,.wp-block-navigation .wp-block-page-list>div{background-color:inherit}.wp-block-navigation.items-justified-space-between .wp-block-page-list,.wp-block-navigation.items-justified-space-between .wp-block-page-list>div{display:contents;flex:1}.wp-block-navigation.items-justified-space-between.has-child-selected .wp-block-page-list,.wp-block-navigation.items-justified-space-between.has-child-selected .wp-block-page-list>div,.wp-block-navigation.items-justified-space-between.is-selected .wp-block-page-list,.wp-block-navigation.items-justified-space-between.is-selected .wp-block-page-list>div{flex:inherit}.wp-block-pages-list__item__link{pointer-events:none}.wp-block-page-list .components-placeholder{min-height:0;padding:0;background-color:inherit}.wp-block-page-list .components-placeholder .components-spinner{margin:.5em}.wp-block-page-list-modal{max-width:400px}.wp-block-page-list-modal-buttons{display:flex;justify-content:flex-end}.wp-block-page-list-modal-buttons .components-button{margin-right:12px} \ No newline at end of file diff --git a/wp-includes/blocks/page-list/editor.css b/wp-includes/blocks/page-list/editor.css new file mode 100644 index 0000000000..c3a2b5e096 --- /dev/null +++ b/wp-includes/blocks/page-list/editor.css @@ -0,0 +1,107 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +.wp-block-navigation .wp-block-page-list > div, +.wp-block-navigation .wp-block-page-list { + background-color: inherit; +} +.wp-block-navigation.items-justified-space-between .wp-block-page-list > div, +.wp-block-navigation.items-justified-space-between .wp-block-page-list { + display: contents; + flex: 1; +} +.wp-block-navigation.items-justified-space-between.has-child-selected .wp-block-page-list > div, .wp-block-navigation.items-justified-space-between.has-child-selected .wp-block-page-list, .wp-block-navigation.items-justified-space-between.is-selected .wp-block-page-list > div, .wp-block-navigation.items-justified-space-between.is-selected .wp-block-page-list { + flex: inherit; +} + +.wp-block-pages-list__item__link { + pointer-events: none; +} + +.wp-block-page-list .components-placeholder { + min-height: 0; + padding: 0; + background-color: inherit; +} +.wp-block-page-list .components-placeholder .components-spinner { + margin: 0.5em; +} + +.wp-block-page-list-modal { + max-width: 400px; +} + +.wp-block-page-list-modal-buttons { + display: flex; + justify-content: flex-end; +} +.wp-block-page-list-modal-buttons .components-button { + margin-left: 12px; +} \ No newline at end of file diff --git a/wp-includes/blocks/page-list/editor.min.css b/wp-includes/blocks/page-list/editor.min.css new file mode 100644 index 0000000000..5c2bf4995a --- /dev/null +++ b/wp-includes/blocks/page-list/editor.min.css @@ -0,0 +1 @@ +.wp-block-navigation .wp-block-page-list,.wp-block-navigation .wp-block-page-list>div{background-color:inherit}.wp-block-navigation.items-justified-space-between .wp-block-page-list,.wp-block-navigation.items-justified-space-between .wp-block-page-list>div{display:contents;flex:1}.wp-block-navigation.items-justified-space-between.has-child-selected .wp-block-page-list,.wp-block-navigation.items-justified-space-between.has-child-selected .wp-block-page-list>div,.wp-block-navigation.items-justified-space-between.is-selected .wp-block-page-list,.wp-block-navigation.items-justified-space-between.is-selected .wp-block-page-list>div{flex:inherit}.wp-block-pages-list__item__link{pointer-events:none}.wp-block-page-list .components-placeholder{min-height:0;padding:0;background-color:inherit}.wp-block-page-list .components-placeholder .components-spinner{margin:.5em}.wp-block-page-list-modal{max-width:400px}.wp-block-page-list-modal-buttons{display:flex;justify-content:flex-end}.wp-block-page-list-modal-buttons .components-button{margin-left:12px} \ No newline at end of file diff --git a/wp-includes/blocks/page-list/style-rtl.css b/wp-includes/blocks/page-list/style-rtl.css new file mode 100644 index 0000000000..28e7bf08e1 --- /dev/null +++ b/wp-includes/blocks/page-list/style-rtl.css @@ -0,0 +1,99 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +.wp-block-navigation .wp-block-page-list { + display: flex; + flex-wrap: wrap; + background-color: inherit; +} +.wp-block-navigation .wp-block-pages-list__item { + background-color: inherit; +} +.wp-block-navigation .wp-block-page-list__submenu-icon { + display: none; +} +.wp-block-navigation .show-submenu-icons .wp-block-page-list__submenu-icon { + display: block; +} + +.is-vertical .wp-block-navigation__container .wp-block-page-list, +.is-open .wp-block-navigation__container .wp-block-page-list { + display: block; +} + +@media (min-width: 480px) { + .is-open .wp-block-navigation__container .wp-block-page-list { + display: flex; + } +} + +.items-justified-space-between .wp-block-page-list { + display: contents; +} \ No newline at end of file diff --git a/wp-includes/blocks/page-list/style-rtl.min.css b/wp-includes/blocks/page-list/style-rtl.min.css new file mode 100644 index 0000000000..d852515661 --- /dev/null +++ b/wp-includes/blocks/page-list/style-rtl.min.css @@ -0,0 +1 @@ +.wp-block-navigation .wp-block-page-list{display:flex;flex-wrap:wrap;background-color:inherit}.wp-block-navigation .wp-block-pages-list__item{background-color:inherit}.wp-block-navigation .wp-block-page-list__submenu-icon{display:none}.is-open .wp-block-navigation__container .wp-block-page-list,.is-vertical .wp-block-navigation__container .wp-block-page-list,.wp-block-navigation .show-submenu-icons .wp-block-page-list__submenu-icon{display:block}@media (min-width:480px){.is-open .wp-block-navigation__container .wp-block-page-list{display:flex}}.items-justified-space-between .wp-block-page-list{display:contents} \ No newline at end of file diff --git a/wp-includes/blocks/page-list/style.css b/wp-includes/blocks/page-list/style.css new file mode 100644 index 0000000000..28e7bf08e1 --- /dev/null +++ b/wp-includes/blocks/page-list/style.css @@ -0,0 +1,99 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +.wp-block-navigation .wp-block-page-list { + display: flex; + flex-wrap: wrap; + background-color: inherit; +} +.wp-block-navigation .wp-block-pages-list__item { + background-color: inherit; +} +.wp-block-navigation .wp-block-page-list__submenu-icon { + display: none; +} +.wp-block-navigation .show-submenu-icons .wp-block-page-list__submenu-icon { + display: block; +} + +.is-vertical .wp-block-navigation__container .wp-block-page-list, +.is-open .wp-block-navigation__container .wp-block-page-list { + display: block; +} + +@media (min-width: 480px) { + .is-open .wp-block-navigation__container .wp-block-page-list { + display: flex; + } +} + +.items-justified-space-between .wp-block-page-list { + display: contents; +} \ No newline at end of file diff --git a/wp-includes/blocks/page-list/style.min.css b/wp-includes/blocks/page-list/style.min.css new file mode 100644 index 0000000000..d852515661 --- /dev/null +++ b/wp-includes/blocks/page-list/style.min.css @@ -0,0 +1 @@ +.wp-block-navigation .wp-block-page-list{display:flex;flex-wrap:wrap;background-color:inherit}.wp-block-navigation .wp-block-pages-list__item{background-color:inherit}.wp-block-navigation .wp-block-page-list__submenu-icon{display:none}.is-open .wp-block-navigation__container .wp-block-page-list,.is-vertical .wp-block-navigation__container .wp-block-page-list,.wp-block-navigation .show-submenu-icons .wp-block-page-list__submenu-icon{display:block}@media (min-width:480px){.is-open .wp-block-navigation__container .wp-block-page-list{display:flex}}.items-justified-space-between .wp-block-page-list{display:contents} \ No newline at end of file diff --git a/wp-includes/version.php b/wp-includes/version.php index 083df3a142..40b07feb35 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -13,7 +13,7 @@ * * @global string $wp_version */ -$wp_version = '5.8-alpha-51104'; +$wp_version = '5.8-alpha-51105'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.