Adds vertical variation to navigation menu (#21296)

* adds vertical variation to navigation menu * Update packages/block-library/src/navigation/editor.scss Co-Authored-By: Daniel Richards <daniel.richards@automattic.com> * Update packages/block-library/src/navigation/index.js Co-Authored-By: Daniel Richards <daniel.richards@automattic.com> * Update packages/block-library/src/navigation/index.js Co-Authored-By: Daniel Richards <daniel.richards@automattic.com> * copy update for variation display name * removes undefined icon property of variations * update snapshots to contain orientation attribute for variation Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
WordPress · Apr 2, 2020 · adfc9b9 · adfc9b9
1 parent 559655b
commit adfc9b9
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 4 deletions.
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
@@ -149,6 +149,7 @@ function Navigation( {
 	const blockClassNames = classnames( className, {
 		[ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification,
 		[ fontSize.class ]: fontSize.class,
+		'is-vertical': attributes.orientation === 'vertical',
 	} );
 	const blockInlineStyles = {
 		fontSize: fontSize.size ? fontSize.size + 'px' : undefined,
@@ -279,7 +280,9 @@ function Navigation( {
 							ref={ ref }
 							allowedBlocks={ [ 'core/navigation-link' ] }
 							templateInsertUpdatesSelection={ false }
-							__experimentalMoverDirection={ 'horizontal' }
+							__experimentalMoverDirection={
+								attributes.orientation
+							}
 							__experimentalTagName="ul"
 							__experimentalAppenderTagName="li"
 							__experimentalPassedProps={ {

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -19,6 +19,10 @@ $navigation-item-height: 46px;
 	align-items: center;
 }
 
+.wp-block-navigation.is-vertical .block-list-appender {
+	margin: $grid-unit-10;
+}
+
 .wp-block-navigation__inserter-content {
 	padding: $grid-unit-20;
 }

diff --git a/packages/block-library/src/navigation/index.js b/packages/block-library/src/navigation/index.js
@@ -32,6 +32,22 @@ export const settings = {
 		lightBlockWrapper: true,
 	},
 
+	variations: [
+		{
+			name: 'horizontal',
+			isDefault: true,
+			title: __( 'Navigation (horizontal)' ),
+			description: __( 'Links shown in a row.' ),
+			attributes: { orientation: 'horizontal' },
+		},
+		{
+			name: 'vertical',
+			title: __( 'Navigation (vertical)' ),
+			description: __( 'Links shown in a column.' ),
+			attributes: { orientation: 'vertical' },
+		},
+	],
+
 	example: {
 		innerBlocks: [
 			{

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -292,6 +292,9 @@ function register_block_core_navigation() {
 		'core/navigation',
 		array(
 			'attributes' => array(
+				'orientation'           => array(
+					'type' => 'string',
+				),
 				'className'             => array(
 					'type' => 'string',
 				),

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -93,6 +93,18 @@ $navigation-sub-menu-width: $grid-unit-10 * 25;
 		}
 	}
 
+	&.is-vertical ul {
+		display: flex;
+		flex-direction: column;
+		li {
+			text-align: left;
+		}
+	}
+
+	&.is-vertical > .wp-block-navigation__container {
+		align-items: flex-start;
+	}
+
 	// Main menu
 	.wp-block-navigation-link {
 		position: relative;

diff --git a/packages/e2e-tests/specs/experiments/__snapshots__/navigation.test.js.snap b/packages/e2e-tests/specs/experiments/__snapshots__/navigation.test.js.snap
@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Navigation allows a navigation menu to be created from an empty menu using a mixture of internal and external links 1`] = `
-"<!-- wp:navigation -->
+"<!-- wp:navigation {\\"orientation\\":\\"horizontal\\"} -->
 <!-- wp:navigation-link {\\"label\\":\\"WP\\",\\"id\\":\\"https://wordpress.org\\",\\"url\\":\\"https://wordpress.org\\"} /-->
 
 <!-- wp:navigation-link {\\"label\\":\\"Contact\\",\\"id\\":1,\\"url\\":\\"https://this/is/a/test/search/get-in-touch\\"} /-->
 <!-- /wp:navigation -->"
 `;
 
 exports[`Navigation allows a navigation menu to be created using existing pages 1`] = `
-"<!-- wp:navigation -->
+"<!-- wp:navigation {\\"orientation\\":\\"horizontal\\"} -->
 <!-- wp:navigation-link {\\"label\\":\\"Home\\",\\"type\\":\\"page\\",\\"id\\":1,\\"url\\":\\"https://this/is/a/test/page/home\\"} /-->
 
 <!-- wp:navigation-link {\\"label\\":\\"About\\",\\"type\\":\\"page\\",\\"id\\":2,\\"url\\":\\"https://this/is/a/test/page/about\\"} /-->
@@ -19,7 +19,7 @@ exports[`Navigation allows a navigation menu to be created using existing pages
 `;
 
 exports[`Navigation allows pages to be created from the navigation block and their links added to menu 1`] = `
-"<!-- wp:navigation -->
+"<!-- wp:navigation {\\"orientation\\":\\"horizontal\\"} -->
 <!-- wp:navigation-link {\\"label\\":\\"A really long page name that will not exist\\",\\"id\\":1,\\"url\\":\\"https://this/is/a/test/create/page/my-new-page\\"} /-->
 <!-- /wp:navigation -->"
 `;