From adfc9b92b55e905b80fa41362a4f984fcad18fae Mon Sep 17 00:00:00 2001 From: andrei draganescu Date: Thu, 2 Apr 2020 16:21:42 +0300 Subject: [PATCH] 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 * Update packages/block-library/src/navigation/index.js Co-Authored-By: Daniel Richards * Update packages/block-library/src/navigation/index.js Co-Authored-By: Daniel Richards * 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 --- packages/block-library/src/navigation/edit.js | 5 ++++- .../block-library/src/navigation/editor.scss | 4 ++++ packages/block-library/src/navigation/index.js | 16 ++++++++++++++++ packages/block-library/src/navigation/index.php | 3 +++ packages/block-library/src/navigation/style.scss | 12 ++++++++++++ .../__snapshots__/navigation.test.js.snap | 6 +++--- 6 files changed, 42 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index 5802259887c0b5..99254e16c1ccf5 100644 --- 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 index 7b7f4a3a192e87..4098185c23a59e 100644 --- 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 index 08030d5b8895d5..db72a33515837d 100644 --- 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 index 8afba2b584d8cb..f680a931dc7b4f 100644 --- 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 index fedfdd9eed449e..43549e8e9e9866 100644 --- 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 index 9bef34b8e46192..e41ca54dee0304 100644 --- a/packages/e2e-tests/specs/experiments/__snapshots__/navigation.test.js.snap +++ b/packages/e2e-tests/specs/experiments/__snapshots__/navigation.test.js.snap @@ -1,7 +1,7 @@ // 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`] = ` -" +" @@ -9,7 +9,7 @@ exports[`Navigation allows a navigation menu to be created from an empty menu us `; exports[`Navigation allows a navigation menu to be created using existing pages 1`] = ` -" +" @@ -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`] = ` -" +" " `;