Navigation: Refactor and simplify setup state. (#36375)

* Navigation: Refactor and simplify setup state. * Address feedback.
WordPress · Nov 11, 2021 · 8ccd5e1 · 8ccd5e1
1 parent 5458edc
commit 8ccd5e1
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 45 deletions.
diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js
@@ -13,7 +13,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
 import { useCallback, useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { navigation, chevronDown, Icon } from '@wordpress/icons';
+import { navigation, Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -34,13 +34,14 @@ const ExistingMenusDropdown = ( {
  onCreateFromMenu,
 } ) => {
  const toggleProps = {
- variant: 'primary',
+ variant: 'tertiary',
+ iconPosition: 'right',
  className: 'wp-block-navigation-placeholder__actions__dropdown',
  };
  return (
  <DropdownMenu
- text={ __( 'Select existing menu' ) }
- icon={ chevronDown }
+ text={ __( 'Select menu' ) }
+ icon={ null }
  toggleProps={ toggleProps }
  popoverProps={ { isAlternate: true } }
  >
@@ -201,32 +202,35 @@ export default function NavigationPlaceholder( {
  <Icon icon={ navigation } />{ ' ' }
  { __( 'Navigation' ) }
  </div>
+ <hr />
  { hasMenus || navigationMenus.length ? (
- <ExistingMenusDropdown
- canSwitchNavigationMenu={
- canSwitchNavigationMenu
- }
- navigationMenus={ navigationMenus }
- setSelectedMenu={ setSelectedMenu }
- onFinish={ onFinish }
- menus={ menus }
- onCreateFromMenu={ onCreateFromMenu }
- />
+ <>
+ <ExistingMenusDropdown
+ canSwitchNavigationMenu={
+ canSwitchNavigationMenu
+ }
+ navigationMenus={ navigationMenus }
+ setSelectedMenu={ setSelectedMenu }
+ onFinish={ onFinish }
+ menus={ menus }
+ onCreateFromMenu={ onCreateFromMenu }
+ />
+ <hr />
+ </>
  ) : undefined }
  { hasPages ? (
- <Button
- variant={
- hasMenus || canSwitchNavigationMenu
- ? 'tertiary'
- : 'primary'
- }
- onClick={ () => {
- setIsNewMenuModalVisible( true );
- setCreateEmpty( false );
- } }
- >
- { __( 'Add all pages' ) }
- </Button>
+ <>
+ <Button
+ variant="tertiary"
+ onClick={ () => {
+ setIsNewMenuModalVisible( true );
+ setCreateEmpty( false );
+ } }
+ >
+ { __( 'Add all pages' ) }
+ </Button>
+ <hr />
+ </>
  ) : undefined }
  <Button
  variant="tertiary"

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -324,6 +324,11 @@ $color-control-label-height: 20px;
  .wp-block-navigation-placeholder__actions {
  flex-direction: column;
  }
+
+ // Hide the separators in the vertical version.
+ .wp-block-navigation-placeholder__actions hr {
+ display: none;
+ }
  }
 
  .wp-block-navigation-placeholder__icon {
@@ -333,47 +338,50 @@ $color-control-label-height: 20px;
 
  // Block title
  .wp-block-navigation-placeholder__actions__indicator {
- margin-right: $grid-unit-15;
- padding: 0;
+ display: flex;
+ padding: 0 ($grid-unit-15 * 0.5) 0 0;
  align-items: center;
  justify-content: flex-start;
  line-height: 0;
+ min-height: $button-size;
 
  // Line up with the icon in the toolbar.
- margin-left: $grid-unit-05 + $border-width;
+ margin-left: $grid-unit-05;
 
  svg {
  margin-right: $grid-unit-05;
  }
-
- // Show only in big placeholders.
- display: none;
- .is-large & {
- display: inline-flex;
- }
  }
 }
 
 .wp-block-navigation-placeholder__actions {
  display: flex;
  font-size: $default-font-size;
  font-family: $default-font;
-
- .components-button.components-dropdown-menu__toggle.has-icon {
- padding:
- ( $grid-unit-15 * 0.5 ) $grid-unit-05 ( $grid-unit-15 * 0.5 )
- $grid-unit-15;
- display: flex;
- flex-direction: row-reverse; // This puts the chevron, which is hidden from screen readers, on the right.
- }
+ gap: $grid-unit-15 * 0.5;
 
  // Margins.
  .components-dropdown,
  > .components-button {
- margin-right: $grid-unit-15;
+ margin-right: 0;
+ }
+
+ // Separator.
+ height: 100%; // This allows the separator to scale vertically.
+
+ // Separator.
+ &.wp-block-navigation-placeholder__actions hr {
+ border: 0;
+ min-height: $border-width;
+ min-width: $border-width;
+ background-color: $gray-900;
+ margin: auto 0;
+ height: 100%;
+ max-height: $grid-unit-20;
  }
 }
 
+
 /**
  * Mobile menu.
  */