Add dropdowns and indicators

lib/class-walker-pages-block.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * Walker_Pages_Block class.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Class that adds submenu dropdown indicators to Pages block.
+ */
+class Walker_Pages_Block extends Walker_Page {
+	/**
+	 * Outputs the beginning of the current level in the tree before elements are output.
+	 *
+	 * @since 2.1.0
+	 *
+	 * @see Walker::start_lvl()
+	 *
+	 * @param string $output Used to append additional content (passed by reference).
+	 * @param int    $depth  Optional. Depth of page. Used for padding. Default 0.
+	 * @param array  $args   Optional. Arguments for outputting the next level.
+	 *                       Default empty array.
+	 */
+	public function start_lvl( &$output, $depth = 0, $args = array() ) {
+		if ( isset( $args['item_spacing'] ) && 'preserve' === $args['item_spacing'] ) {
+			$t = "\t";
+			$n = "\n";
+		} else {
+			$t = '';
+			$n = '';
+		}
+		$indent  = str_repeat( $t, $depth );
+		$output .= "<span class='wp-block-pages__submenu-icon'><svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' transform='rotate(90)'><path d='M8 5v14l11-7z'/><path d='M0 0h24v24H0z' fill='none'/></svg></span>{$n}{$indent}<ul class='children'>{$n}";
+	}
+}

lib/load.php

@@ -116,3 +116,6 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/block-supports/typography.php';
 require __DIR__ . '/block-supports/custom-classname.php';
 require __DIR__ . '/block-supports/border.php';
+
+/* Page Walker class extension for Pages Block */
+require_once __DIR__ . '/class-walker-pages-block.php';

packages/block-library/src/pages/index.php

@@ -8,21 +8,32 @@
 /**
  * Renders the `core/pages` block on server.
  *
+ * @param array $attributes The block attributes.
+ *
  * @return string Returns the pages list/dropdown markup.
  */
-function render_block_core_pages() {
+function render_block_core_pages( $attributes ) {
 	static $block_id = 0;
 	$block_id++;
 
+	$walker = new Walker_Pages_Block;
+
 	$args = array(
 		'echo'     => false,
 		'title_li' => '',
+		'walker'   => $walker,
 	);
 
 	$wrapper_markup = '<ul %1$s>%2$s</ul>';
 	$items_markup   = wp_list_pages( $args );
 
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => 'wp-block-page-list' ) );
+	$classes = 'wp-block-page-list';
+
+	if ( isset( $attributes['showSubmenuIcon'] ) && $attributes['showSubmenuIcon'] ) {
+		$classes .= ' show-submenu-icons';
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 
 	return sprintf(
 		$wrapper_markup,

packages/block-library/src/pages/style.scss

@@ -0,0 +1,87 @@
+.wp-block-navigation-link__submenu-icon {
+	display: none;
+}
+
+.show-submenu-icons {
+	.wp-block-navigation-link__submenu-icon {
+		display: block;
+	}
+}
+
+// The Pages block should inherit navigation styles when nested within it
+.wp-block-navigation {
+	.wp-block-page-list {
+		display: flex;
+		flex-wrap: wrap;
+	}
+	.page_item a {
+		display: block;
+		color: inherit;
+		padding: 0.5em 1em;
+	}
+
+	.page_item_has_children {
+		display: flex;
+		position: relative;
+
+		> a {
+			padding-right: 0.5em;
+		}
+		> .children {
+			border: $border-width solid rgba(0, 0, 0, 0.15);
+			background-color: inherit;
+			color: inherit;
+			position: absolute;
+			left: 0;
+			top: 100%;
+			width: fit-content;
+			z-index: 2;
+			opacity: 0;
+			transition: opacity 0.1s linear;
+			visibility: hidden;
+
+			@include break-medium {
+				left: 1.5em;
+
+				// Nested submenus sit to the left on large breakpoints
+				.children {
+					left: 100%;
+					top: -1px;
+
+					// Prevent the menu from disappearing when the mouse is over the gap
+					&::before {
+						content: "";
+						position: absolute;
+						right: 100%;
+						height: 100%;
+						display: block;
+						width: 0.5em;
+						background: transparent;
+					}
+				}
+
+				.wp-block-navigation-link__submenu-icon svg {
+					transform: rotate(0);
+				}
+			}
+		}
+
+		&:hover {
+			cursor: pointer;
+
+			> .children {
+				visibility: visible;
+				opacity: 1;
+			}
+		}
+
+		&:focus-within {
+			cursor: pointer;
+
+			> .children {
+				visibility: visible;
+				opacity: 1;
+			}
+		}
+	}
+}

packages/block-library/src/style.scss

@@ -23,6 +23,7 @@
 @import "./media-text/style.scss";
 @import "./navigation/style.scss";
 @import "./navigation-link/style.scss";
+@import "./pages/style.scss";
 @import "./paragraph/style.scss";
 @import "./post-author/style.scss";
 @import "./post-comments-form/style.scss";