From 69446b6ce6759bc69bb75fbf6f881d565cc7e087 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 5 Nov 2021 17:33:32 +0800 Subject: [PATCH 1/2] Adds a create new button to navigation block --- .../src/navigation/edit/index.js | 9 ++++ .../edit/navigation-menu-selector.js | 48 ++++++++++++------- .../block-library/src/navigation/editor.scss | 31 ++++++++++++ 3 files changed, 71 insertions(+), 17 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 294ee51835942..5e9a69ae9046e 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -326,6 +326,15 @@ function Navigation( { setNavigationMenuId( id ); onClose(); } } + onCreateNew={ () => { + if ( navigationArea ) { + setAreaMenu( 0 ); + } + setAttributes( { + navigationMenuId: undefined, + } ); + setIsPlaceholderShown( true ); + } } /> ) } diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js index c696019cd2b7e..9e45629365561 100644 --- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js +++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js @@ -1,34 +1,48 @@ /** * WordPress dependencies */ -import { MenuGroup, MenuItemsChoice } from '@wordpress/components'; +import { MenuGroup, MenuItem, MenuItemsChoice } from '@wordpress/components'; import { useEntityId } from '@wordpress/core-data'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import useNavigationMenu from '../use-navigation-menu'; -export default function NavigationMenuSelector( { onSelect } ) { +export default function NavigationMenuSelector( { onSelect, onCreateNew } ) { const { navigationMenus } = useNavigationMenu(); const navigationMenuId = useEntityId( 'postType', 'wp_navigation' ); return ( - - - onSelect( - navigationMenus.find( - ( post ) => post.id === selectedId + <> + + + onSelect( + navigationMenus.find( + ( post ) => post.id === selectedId + ) ) - ) - } - choices={ navigationMenus.map( ( { id, title } ) => ( { - value: id, - label: title.rendered, - } ) ) } - /> - + } + choices={ navigationMenus.map( ( { id, title } ) => ( { + value: id, + label: title.rendered, + } ) ) } + /> + + + + { __( 'Create new menu' ) } + + + ); } diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 7e5d6708009d0..9a3bbe76fcf1a 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -568,3 +568,34 @@ body.editor-styles-wrapper width: 100%; justify-content: center; } + +// This unfortunately needs a lot of specificity. +.components-menu-group.has-hidden-separator.wp-navigation-block__create-new-menu-group { + padding: 0; +} + +.wp-navigation-block__create-new-menu-button.components-button { + justify-content: center; + background: $gray-900; + color: $white; + height: ($button-size + $grid-unit-10); + border-radius: 0; + + &:hover { + color: $white; + } + + &:active { + color: $gray-400; + } + + &:focus:not(:disabled) { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px $white; + } + + // This is needed to center the button text. + .components-menu-item__item { + min-width: 0; + margin: 0; + } +} From d8d882dc0549192058f9465240bf52ab99e0b8d0 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 5 Nov 2021 19:39:29 +0800 Subject: [PATCH 2/2] Keep it simple --- .../edit/navigation-menu-selector.js | 10 ++---- .../block-library/src/navigation/editor.scss | 31 ------------------- 2 files changed, 2 insertions(+), 39 deletions(-) diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js index 9e45629365561..f915fb268e3fe 100644 --- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js +++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js @@ -32,14 +32,8 @@ export default function NavigationMenuSelector( { onSelect, onCreateNew } ) { } ) ) } /> - - + + { __( 'Create new menu' ) } diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 9a3bbe76fcf1a..7e5d6708009d0 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -568,34 +568,3 @@ body.editor-styles-wrapper width: 100%; justify-content: center; } - -// This unfortunately needs a lot of specificity. -.components-menu-group.has-hidden-separator.wp-navigation-block__create-new-menu-group { - padding: 0; -} - -.wp-navigation-block__create-new-menu-button.components-button { - justify-content: center; - background: $gray-900; - color: $white; - height: ($button-size + $grid-unit-10); - border-radius: 0; - - &:hover { - color: $white; - } - - &:active { - color: $gray-400; - } - - &:focus:not(:disabled) { - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px $white; - } - - // This is needed to center the button text. - .components-menu-item__item { - min-width: 0; - margin: 0; - } -}