From 51522bcaa5ee64aafa08bce39f67821b843a31d3 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Thu, 28 Jan 2021 16:05:46 -0500 Subject: [PATCH 01/21] Just trying a few things out. --- .../src/components/editor/index.js | 4 +- .../src/components/editor/style.scss | 38 +++-------------- .../src/components/header/style.scss | 6 ++- .../src/components/layout/index.js | 18 ++++---- .../src/components/layout/style.scss | 15 ++----- .../src/components/toolbar/index.js | 8 ++-- .../src/components/toolbar/style.scss | 42 ++++++++----------- 7 files changed, 47 insertions(+), 84 deletions(-) diff --git a/packages/edit-navigation/src/components/editor/index.js b/packages/edit-navigation/src/components/editor/index.js index 9b4f756489b61..d3f8b28be2bc6 100644 --- a/packages/edit-navigation/src/components/editor/index.js +++ b/packages/edit-navigation/src/components/editor/index.js @@ -2,13 +2,11 @@ * Internal dependencies */ import BlockView from './block-view'; -import ListView from './list-view'; -export default function Editor( { isPending, blocks } ) { +export default function Editor( { isPending } ) { return (
-
); } diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss index a9a152f9681f9..5d3990de8ba3f 100644 --- a/packages/edit-navigation/src/components/editor/style.scss +++ b/packages/edit-navigation/src/components/editor/style.scss @@ -1,43 +1,17 @@ .edit-navigation-editor { - flex-grow: 1; + background: $white; + border: 1px solid $gray-300; + border-radius: 2px; + margin-top: 12px; - @include break-medium() { - align-items: flex-start; - display: flex; + .block-editor-block-list__block { + margin: 0; } } .edit-navigation-editor__block-view { - padding: $grid-unit-20; - @include break-medium() { - flex-grow: 1; - align-self: stretch; - } - .components-spinner { display: block; margin: 10px auto; } } - -.edit-navigation-editor__list-view { - border-top: 1px solid $gray-300; - padding: $grid-unit-20; - - @include break-medium() { - border-left: 1px solid $gray-300; - border-top: none; - margin-top: 0; - width: 300px; - } - - .edit-navigation-editor__list-view-title { - font-size: 1.2em; - margin: 0; - } - - .components-spinner { - display: block; - margin: 100px auto; - } -} diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss index ae8511d1da01e..9a8d34f15655c 100644 --- a/packages/edit-navigation/src/components/header/style.scss +++ b/packages/edit-navigation/src/components/header/style.scss @@ -1,6 +1,8 @@ .edit-navigation-header { - padding: $grid-unit-20; - background: #f1f1f1; // Need to find a variable for this + //padding: $grid-unit-20; + //background: #f1f1f1; // Need to find a variable for this + max-width: 500px; + margin: $grid-unit-20 auto; .edit-navigation-header__title { font-size: 23px; diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js index 357fc400d073a..a6210c2591613 100644 --- a/packages/edit-navigation/src/components/layout/index.js +++ b/packages/edit-navigation/src/components/layout/index.js @@ -78,14 +78,16 @@ export default function Layout( { blockEditorSettings } ) { - - +
+ + +
) : ( <> +
+ + + +
- - - ) } diff --git a/packages/edit-navigation/src/components/toolbar/style.scss b/packages/edit-navigation/src/components/toolbar/style.scss index 3e0e1551722ad..df2bc283af788 100644 --- a/packages/edit-navigation/src/components/toolbar/style.scss +++ b/packages/edit-navigation/src/components/toolbar/style.scss @@ -1,17 +1,6 @@ .edit-navigation-toolbar { - align-items: center; - background: $white; - border: $border-width solid $gray-300; - display: flex; - height: $grid-unit-60 * 2; - padding-bottom: $grid-unit-60; position: relative; - @include break-medium() { - height: $grid-unit-60; - padding-bottom: 0; - } - .components-spinner { left: 50%; margin: 0; @@ -21,22 +10,27 @@ } } -.edit-navigation-toolbar__block-tools { - border-bottom: none; - border-left: none; - border-right: none; - border-top: 1px solid $gray-300; +.edit-navigation-toolbar__menu-title { + small { + display: block; + font-size: 13px; + font-weight: normal; + } +} + +.edit-navigation-toolbar__editor-tools { + display: flex; position: absolute; - top: $grid-unit-60; - width: 100%; + top: 0; + right: 0; - @include break-medium() { - border-top: none; - position: static; - width: auto; + .edit-navigation-toolbar__save-button { + margin-right: 6px; } } -.edit-navigation-toolbar__save-button { - margin: 0 $grid-unit-10 0 auto; +.edit-navigation-toolbar__block-tools { + min-height: 48px; + background: $white; + overflow: hidden; } From 4c7f81a3f61ca21e2c6086c78671abd01b2a4726 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Fri, 29 Jan 2021 13:44:26 -0500 Subject: [PATCH 02/21] Moving things around. --- .../src/components/header/add-menu-form.js | 5 ++- .../block-inspector-dropdown.js | 0 .../src/components/header/index.js | 29 +++++++----- .../{toolbar => header}/save-button.js | 0 .../src/components/header/style.scss | 44 +++++++++++++++---- .../src/components/layout/index.js | 1 + .../src/components/toolbar/index.js | 20 ++------- packages/edit-navigation/src/index.js | 25 ----------- 8 files changed, 62 insertions(+), 62 deletions(-) rename packages/edit-navigation/src/components/{toolbar => header}/block-inspector-dropdown.js (100%) rename packages/edit-navigation/src/components/{toolbar => header}/save-button.js (100%) diff --git a/packages/edit-navigation/src/components/header/add-menu-form.js b/packages/edit-navigation/src/components/header/add-menu-form.js index 96fa4ce2f4d46..d46aa886ea427 100644 --- a/packages/edit-navigation/src/components/header/add-menu-form.js +++ b/packages/edit-navigation/src/components/header/add-menu-form.js @@ -58,7 +58,10 @@ export default function AddMenuForm( { menus, onCreate } ) { }; return ( -
+ -

- { __( 'Navigation' ) } -

- -
-

+
+

+ { __( 'Navigation' ) } +

+

{ actionHeaderText }

- +
+
{ () => ( @@ -83,7 +87,7 @@ export default function Header( { (

); diff --git a/packages/edit-navigation/src/components/toolbar/save-button.js b/packages/edit-navigation/src/components/header/save-button.js similarity index 100% rename from packages/edit-navigation/src/components/toolbar/save-button.js rename to packages/edit-navigation/src/components/header/save-button.js diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss index 9a8d34f15655c..aa9b5339c59c9 100644 --- a/packages/edit-navigation/src/components/header/style.scss +++ b/packages/edit-navigation/src/components/header/style.scss @@ -1,17 +1,42 @@ .edit-navigation-header { - //padding: $grid-unit-20; - //background: #f1f1f1; // Need to find a variable for this - max-width: 500px; - margin: $grid-unit-20 auto; + background: $white; + border-bottom: 1px solid #ccc; + display: flex; + align-items: center; + height: 48px; + margin-bottom: $grid-unit-40; +} + +.edit-navigation-header__title-subtitle { + flex-grow: 1; + padding-left: $grid-unit-10; +} + +.edit-navigation-header__title { + font-size: 13px; + line-height: $default-line-height; + margin: 0; +} - .edit-navigation-header__title { - font-size: 23px; - font-weight: 400; - line-height: $default-line-height; - margin: 0 0 $grid-unit-10; +.edit-navigation-header__subtitle { + margin: 0; + font-size: 15px; + font-weight: normal; +} + +.edit-navigation-header__actions { + display: flex; + + .components-button { + margin-right: $grid-unit-10; } } +.edit-navigation-header__add-menu-form { + min-width: 220px; +} + +/* // Lining up all the actions in a nice row. .edit-navigation-header__actions { display: flex; @@ -43,3 +68,4 @@ display: block; margin: $grid-unit-20 auto; } +*/ diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js index a6210c2591613..fc6e69f2e01eb 100644 --- a/packages/edit-navigation/src/components/layout/index.js +++ b/packages/edit-navigation/src/components/layout/index.js @@ -61,6 +61,7 @@ export default function Layout( { blockEditorSettings } ) { menus={ menus } selectedMenuId={ selectedMenuId } onSelectMenu={ selectMenu } + navigationPost={ navigationPost } /> { isPending ? ( ) : ( <> -
- - - -
- + ) } diff --git a/packages/edit-navigation/src/index.js b/packages/edit-navigation/src/index.js index ef67e940a6759..eff5a6c358f6d 100644 --- a/packages/edit-navigation/src/index.js +++ b/packages/edit-navigation/src/index.js @@ -11,7 +11,6 @@ import { __experimentalRegisterExperimentalCoreBlocks, } from '@wordpress/block-library'; import { render } from '@wordpress/element'; -import { createHigherOrderComponent } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; import apiFetch from '@wordpress/api-fetch'; import { addQueryArgs } from '@wordpress/url'; @@ -48,24 +47,6 @@ function removeNavigationBlockSettingsUnsupportedFeatures( settings, name ) { }; } -const removeNavigationBlockEditUnsupportedFeatures = createHigherOrderComponent( - ( BlockEdit ) => ( props ) => { - if ( props.name !== 'core/navigation' ) { - return ; - } - - return ( - - ); - }, - 'removeNavigationBlockEditUnsupportedFeatures' -); - /** * Fetches link suggestions from the API. This function is an exact copy of a function found at: * @@ -156,12 +137,6 @@ export function initialize( id, settings ) { removeNavigationBlockSettingsUnsupportedFeatures ); - addFilter( - 'editor.BlockEdit', - 'core/edit-navigation/remove-navigation-block-edit-unsupported-features', - removeNavigationBlockEditUnsupportedFeatures - ); - registerCoreBlocks(); if ( process.env.GUTENBERG_PHASE === 2 ) { From cd3911c9794c875da78f0be45706ec1b5a3219ca Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Mon, 1 Feb 2021 18:03:27 -0500 Subject: [PATCH 03/21] Cleaning up the unnecessary stuff from the editor component. --- .../src/components/editor/block-view.js | 38 ------------------- .../src/components/editor/index.js | 25 ++++++++++-- .../src/components/editor/list-view.js | 34 ----------------- 3 files changed, 22 insertions(+), 75 deletions(-) delete mode 100644 packages/edit-navigation/src/components/editor/block-view.js delete mode 100644 packages/edit-navigation/src/components/editor/list-view.js diff --git a/packages/edit-navigation/src/components/editor/block-view.js b/packages/edit-navigation/src/components/editor/block-view.js deleted file mode 100644 index 1a73f38afa62f..0000000000000 --- a/packages/edit-navigation/src/components/editor/block-view.js +++ /dev/null @@ -1,38 +0,0 @@ -/** - * WordPress dependencies - */ -import { - BlockList, - ObserveTyping, - WritingFlow, - __unstableUseBlockSelectionClearer, -} from '@wordpress/block-editor'; -import { Spinner } from '@wordpress/components'; -import { useRef } from '@wordpress/element'; - -/** - * The current navigation rendered in the form of a core Navigation block. - * - * @param {Object} props Component props. - * @param {boolean} props.isPending Whether the navigation post has loaded. - */ -export default function BlockView( { isPending } ) { - const layoutRef = useRef(); - __unstableUseBlockSelectionClearer( layoutRef ); - - return ( -
- { isPending ? ( - - ) : ( -
- - - - - -
- ) } -
- ); -} diff --git a/packages/edit-navigation/src/components/editor/index.js b/packages/edit-navigation/src/components/editor/index.js index d3f8b28be2bc6..25ec4096bc888 100644 --- a/packages/edit-navigation/src/components/editor/index.js +++ b/packages/edit-navigation/src/components/editor/index.js @@ -1,12 +1,31 @@ /** - * Internal dependencies + * WordPress dependencies + */ +import { BlockList, ObserveTyping, WritingFlow } from '@wordpress/block-editor'; +import { Spinner } from '@wordpress/components'; + +/** + * The current navigation rendered in the form of a core Navigation block. + * + * @param {Object} props Component props. + * @param {boolean} props.isPending Whether the navigation post has loaded. */ -import BlockView from './block-view'; export default function Editor( { isPending } ) { return (
- + { isPending ? ( + + ) : ( + // Do we need this div? +
+ + + + + +
+ ) }
); } diff --git a/packages/edit-navigation/src/components/editor/list-view.js b/packages/edit-navigation/src/components/editor/list-view.js deleted file mode 100644 index 8d20e1c1fa5d7..0000000000000 --- a/packages/edit-navigation/src/components/editor/list-view.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { useState } from '@wordpress/element'; -import { Spinner } from '@wordpress/components'; -import { __experimentalBlockNavigationTree } from '@wordpress/block-editor'; - -export default function ListView( { isPending, blocks } ) { - const [ selectedBlockId, setSelectedBlockId ] = useState( - blocks[ 0 ]?.clientId - ); - - return ( -
-

- { __( 'List view' ) } -

- { isPending ? ( - - ) : ( - <__experimentalBlockNavigationTree - blocks={ blocks } - selectedBlockClientId={ selectedBlockId } - selectBlock={ setSelectedBlockId } - __experimentalFeatures - showNestedBlocks - showAppender - showBlockMovers - /> - ) } -
- ); -} From 5a02a36339c748b0e90c96c63ed8e23d03384127 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Mon, 1 Feb 2021 18:04:04 -0500 Subject: [PATCH 04/21] Move the inspector out of the header and into the main layout. --- .../header/block-inspector-dropdown.js | 27 ------------------- .../src/components/header/index.js | 2 -- .../src/components/layout/index.js | 5 +++- 3 files changed, 4 insertions(+), 30 deletions(-) delete mode 100644 packages/edit-navigation/src/components/header/block-inspector-dropdown.js diff --git a/packages/edit-navigation/src/components/header/block-inspector-dropdown.js b/packages/edit-navigation/src/components/header/block-inspector-dropdown.js deleted file mode 100644 index dece6bd9d8bbb..0000000000000 --- a/packages/edit-navigation/src/components/header/block-inspector-dropdown.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * WordPress dependencies - */ -import { Dropdown, Button } from '@wordpress/components'; -import { cog } from '@wordpress/icons'; -import { __ } from '@wordpress/i18n'; -import { BlockInspector } from '@wordpress/block-editor'; - -export default function BlockInspectorDropdown() { - return ( - ( -