From 5259eb0c7bf6f566fd73a5c5a32f434c85109ad5 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 19 Jan 2021 17:52:23 +1100
Subject: [PATCH] Add dropdowns and indicators

---
 lib/class-walker-pages-block.php            | 35 +++++++++
 lib/load.php                                |  3 +
 packages/block-library/src/pages/index.php  | 15 +++-
 packages/block-library/src/pages/style.scss | 87 +++++++++++++++++++++
 packages/block-library/src/style.scss       |  1 +
 5 files changed, 139 insertions(+), 2 deletions(-)
 create mode 100644 lib/class-walker-pages-block.php
 create mode 100644 packages/block-library/src/pages/style.scss

diff --git a/lib/class-walker-pages-block.php b/lib/class-walker-pages-block.php
new file mode 100644
index 00000000000000..06b0b4eab96d35
--- /dev/null
+++ b/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}";
+	}
+}
diff --git a/lib/load.php b/lib/load.php
index 1d53a8122b43d3..90a2eb412e140b 100644
--- a/lib/load.php
+++ b/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';
diff --git a/packages/block-library/src/pages/index.php b/packages/block-library/src/pages/index.php
index 45e26caae608e8..e6c971896512ef 100644
--- a/packages/block-library/src/pages/index.php
+++ b/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,
diff --git a/packages/block-library/src/pages/style.scss b/packages/block-library/src/pages/style.scss
new file mode 100644
index 00000000000000..91a9a77430104e
--- /dev/null
+++ b/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;
+			}
+		}
+	}
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index a8d23e1563793d..b2339a6dd6fead 100644
--- a/packages/block-library/src/style.scss
+++ b/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";