From f3c20a5eb8154385dc3ea413aa977ead551ba152 Mon Sep 17 00:00:00 2001 From: Kerry Liu Date: Thu, 3 Feb 2022 14:47:48 -0800 Subject: [PATCH 01/10] Navigation: try adding dedicated sidebar for managing layout of navigation menus --- packages/core-data/src/entities.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/core-data/src/entities.js b/packages/core-data/src/entities.js index c2437916901b9..21784673a30e4 100644 --- a/packages/core-data/src/entities.js +++ b/packages/core-data/src/entities.js @@ -176,6 +176,14 @@ export const rootEntitiesConfig = [ baseURLParams: { context: 'edit' }, key: 'plugin', }, + { + label: __( 'Navigation' ), + name: 'navigationMenu', + kind: 'root', + baseURL: '/wp/v2/navigation', + baseURLParams: { context: 'edit' }, + plural: 'navigationMenus', + }, ]; export const additionalEntityConfigLoaders = [ From 520e9b335ddd20545a3ab1d1d41de76e5c918cac Mon Sep 17 00:00:00 2001 From: Kerry Liu Date: Wed, 2 Feb 2022 14:09:34 -0800 Subject: [PATCH 02/10] Navigation Sidebar: experiment with a persistent vertical display --- .../src/components/list-view/index.js | 16 ++++++++++++ .../src/components/list-view/style.scss | 13 ++++++++++ .../src/components/block-editor/index.js | 4 +-- .../edit-site/src/components/editor/index.js | 5 +++- .../src/components/header/style.scss | 5 ++-- .../global-styles-sidebar.js | 5 ++-- .../components/navigation-sidebar/index.js | 4 +++ .../navigation-menu-sidebar/index.js | 8 +++++- .../navigation-inspector.js | 0 .../navigation-menu.js | 1 + .../navigation-menu-sidebar/style.scss | 9 ++++++- .../navigation-panel/style.scss | 2 +- .../navigation-toggle/index.js | 2 ++ .../navigation-toggle/style.scss | 26 +++++++------------ .../src/components/sidebar/default-sidebar.js | 5 ++-- .../edit-site/src/components/sidebar/index.js | 5 +--- packages/edit-site/src/style.scss | 2 +- .../components/interface-skeleton/style.scss | 5 ++++ 18 files changed, 83 insertions(+), 34 deletions(-) rename packages/edit-site/src/components/{sidebar => navigation-sidebar}/global-styles-sidebar.js (92%) rename packages/edit-site/src/components/{sidebar => navigation-sidebar}/navigation-menu-sidebar/index.js (64%) rename packages/edit-site/src/components/{sidebar => navigation-sidebar}/navigation-menu-sidebar/navigation-inspector.js (100%) rename packages/edit-site/src/components/{sidebar => navigation-sidebar}/navigation-menu-sidebar/navigation-menu.js (98%) rename packages/edit-site/src/components/{sidebar => navigation-sidebar}/navigation-menu-sidebar/style.scss (72%) diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js index a910c75de8a95..33169846e4eec 100644 --- a/packages/block-editor/src/components/list-view/index.js +++ b/packages/block-editor/src/components/list-view/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -59,8 +64,12 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36; * @param {boolean} props.__experimentalFeatures Flag to enable experimental features. * @param {boolean} props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment. * @param {boolean} props.__experimentalHideContainerBlockActions Flag to hide actions of top level blocks (like core/widget-area) +<<<<<<< HEAD * @param {string} props.id Unique identifier for the root list element (primarily for a11y purposes). * @param {boolean} props.expandNested Flag to determine whether nested levels are expanded by default. +======= + * @param {boolean} props.__experimentalDarkMode Flag to turn on dark mode +>>>>>>> 0231f0b300 (Navigation Sidebar: experiment with a persistent vertical display) * @param {Object} ref Forwarded ref */ function ListView( @@ -69,6 +78,7 @@ function ListView( __experimentalFeatures, __experimentalPersistentListViewFeatures, __experimentalHideContainerBlockActions, + __experimentalDarkMode, showNestedBlocks, showBlockMovers, id, @@ -209,8 +219,14 @@ function ListView( blockDropTarget={ blockDropTarget } /> >>>>>> 0231f0b300 (Navigation Sidebar: experiment with a persistent vertical display) aria-label={ __( 'Block navigation structure' ) } ref={ treeGridRef } onCollapseRow={ collapseRow } diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 9b1cb8b88229a..f4156058276b5 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -366,3 +366,16 @@ $block-navigation-max-indent: 8; height: 36px; } +.block-editor-list-view-tree.is-dark { + background: $gray-900; + .block-editor-list-view-block-contents { + color: $gray-100; + } + .block-editor-list-view-leaf.is-branch-selected:not(.is-selected) .block-editor-list-view-block-contents { + color: var(--wp-admin-theme-color-darker-20); + } + .block-editor-block-mover-button, + .block-editor-list-view-block__menu { + color: $gray-100; + } +} diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index ffac252f3caaa..5a8637eed8de4 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -102,8 +102,8 @@ export default function BlockEditor( { setIsInserterOpen } ) { const { enableComplementaryArea } = useDispatch( interfaceStore ); const openNavigationSidebar = useCallback( () => { enableComplementaryArea( - 'core/edit-site', - 'edit-site/navigation-menu' + 'core/edit-global', + 'edit-global/navigation-menu' ); }, [ enableComplementaryArea ] ); const contentRef = useRef(); diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 73bc535184f9d..6258f3df89656 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -220,7 +220,10 @@ function Editor( { onError } ) { ) } drawer={ - + <> + + + } header={
+ + ); diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/index.js similarity index 64% rename from packages/edit-site/src/components/sidebar/navigation-menu-sidebar/index.js rename to packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/index.js index 1681cf4714852..295bb7fd35a11 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/index.js @@ -8,15 +8,21 @@ import { navigation } from '@wordpress/icons'; /** * Internal dependencies */ -import DefaultSidebar from '../default-sidebar'; +import DefaultSidebar from '../../sidebar/default-sidebar'; import NavigationInspector from './navigation-inspector'; export default function NavigationMenuSidebar() { return ( >>>>>> 0231f0b300 (Navigation Sidebar: experiment with a persistent vertical display):packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/index.js icon={ navigation } closeLabel={ __( 'Close navigation menu sidebar' ) } panelClassName="edit-site-navigation-menu-sidebar__panel" diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js b/packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/navigation-inspector.js similarity index 100% rename from packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js rename to packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/navigation-inspector.js diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js b/packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/navigation-menu.js similarity index 98% rename from packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js rename to packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/navigation-menu.js index f5601447dd318..a7b1077702095 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/navigation-menu.js @@ -57,6 +57,7 @@ export default function NavigationMenu( { innerBlocks, id } ) { expandNested={ false } __experimentalFeatures __experimentalPersistentListViewFeatures + __experimentalDarkMode /> ); diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/style.scss similarity index 72% rename from packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss rename to packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/style.scss index 7b5e6ca281dec..6c52a80691a4e 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/style.scss @@ -31,7 +31,7 @@ .edit-site-navigation-inspector__placeholder { padding: $grid-unit-10; margin: $grid-unit-10; - background-color: $gray-100; + background-color: $gray-300; animation: loadingpulse 1s linear infinite; animation-delay: 0.5s; // avoid animating for fast network responses @@ -40,3 +40,10 @@ width: 50%; } } +.edit-site-navigation-menu-sidebar, +.edit-site-navigation-menu-sidebar .components-panel__header, +.edit-site-navigation-inspector, +.edit-site-navigation-menu-sidebar .components-button { + background: $gray-900; + color: $gray-100; +} diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss index 6bab3a634fe78..d627daaf6dac6 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss @@ -39,7 +39,7 @@ .edit-site-navigation-panel__site-title-container { height: $header-height; - padding-left: $header-height; + padding-left: $grid-unit-30; margin: 0 $grid-unit-20 0 $grid-unit-10; display: flex; align-items: center; diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js index 2cdc68858e480..44b20d495d76a 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js @@ -17,6 +17,7 @@ import { __ } from '@wordpress/i18n'; import { wordpress } from '@wordpress/icons'; import { store as coreDataStore } from '@wordpress/core-data'; import { useReducedMotion } from '@wordpress/compose'; +import { PinnedItems } from '@wordpress/interface'; /** * Internal dependencies @@ -107,6 +108,7 @@ function NavigationToggle( { icon } ) { > { buttonIcon } + ); } diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss index 39f53df6c94d9..99107eb45047e 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss @@ -6,17 +6,20 @@ background: $gray-900; border-radius: 0; display: flex; - position: absolute; z-index: z-index(".edit-site-navigation-toggle"); height: $header-height; width: $header-height; + flex-direction: column; + + button { + color: $white; + } } .edit-site-navigation-toggle__button.components-button { align-items: center; background: $gray-900; border-radius: 0; - color: $white; height: $header-height + $border-width; width: $header-height; z-index: 1; @@ -32,20 +35,6 @@ box-shadow: none; } - &::before { - transition: box-shadow 0.1s ease; - @include reduce-motion("transition"); - content: ""; - display: block; - position: absolute; - top: 9px; - right: 9px; - bottom: 9px; - left: 9px; - border-radius: $radius-block-ui + $border-width + $border-width; - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900; - } - // Hover color. &:hover::before { box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700; @@ -69,3 +58,8 @@ margin-top: -($border-width); } } + +.edit-site-navigation-toggle .interface-pinned-items { + padding-top: $grid-unit-20; + flex-direction: column; +} diff --git a/packages/edit-site/src/components/sidebar/default-sidebar.js b/packages/edit-site/src/components/sidebar/default-sidebar.js index ea494a67b6390..6dcac97cb8737 100644 --- a/packages/edit-site/src/components/sidebar/default-sidebar.js +++ b/packages/edit-site/src/components/sidebar/default-sidebar.js @@ -8,6 +8,7 @@ import { export default function DefaultSidebar( { className, + scope, identifier, title, icon, @@ -21,7 +22,7 @@ export default function DefaultSidebar( { <> diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index 3788a3aece74b..1f3633afb9e53 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -13,8 +13,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; * Internal dependencies */ import DefaultSidebar from './default-sidebar'; -import GlobalStylesSidebar from './global-styles-sidebar'; -import NavigationMenuSidebar from './navigation-menu-sidebar'; import { STORE_NAME } from '../../store/constants'; import SettingsHeader from './settings-header'; import TemplateCard from './template-card'; @@ -62,6 +60,7 @@ export function SidebarComplementaryAreaFills() { <> ) } - - ); } diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index b61d06574c7aa..524e6571bf634 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -11,7 +11,7 @@ @import "./components/add-new-template/style.scss"; @import "./components/sidebar/style.scss"; @import "./components/sidebar/settings-header/style.scss"; -@import "./components/sidebar/navigation-menu-sidebar/style.scss"; +@import "./components/navigation-sidebar/navigation-menu-sidebar/style.scss"; @import "./components/sidebar/template-card/style.scss"; @import "./components/editor/style.scss"; @import "./components/template-details/style.scss"; diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss index 12c14cfcd2e31..69edadaf9323c 100644 --- a/packages/interface/src/components/interface-skeleton/style.scss +++ b/packages/interface/src/components/interface-skeleton/style.scss @@ -178,3 +178,8 @@ html.interface-interface-skeleton__html-container { bottom: 0; } } + +.interface-interface-skeleton__drawer { + background: $gray-900; + display: flex; +} From 89162177f70f8dc8db171b286c43d05c44bfebcb Mon Sep 17 00:00:00 2001 From: Kerry Liu Date: Thu, 17 Feb 2022 08:37:09 -0800 Subject: [PATCH 03/10] Update e2e selector for global styles button --- .../src/components/list-view/style.scss | 4 +- packages/e2e-test-utils/src/site-editor.js | 6 +- .../navigation-menu-sidebar/style.scss | 2 +- .../navigation-toggle/index.js | 10 +-- .../components/navigation-sidebar/style.scss | 82 +++++++++++++++++++ .../src/components/sidebar/style.scss | 70 ---------------- packages/edit-site/src/style.scss | 1 + 7 files changed, 90 insertions(+), 85 deletions(-) create mode 100644 packages/edit-site/src/components/navigation-sidebar/style.scss diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index f4156058276b5..905bc0af0779b 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -371,8 +371,8 @@ $block-navigation-max-indent: 8; .block-editor-list-view-block-contents { color: $gray-100; } - .block-editor-list-view-leaf.is-branch-selected:not(.is-selected) .block-editor-list-view-block-contents { - color: var(--wp-admin-theme-color-darker-20); + .block-editor-list-view-leaf.is-branch-selected:not(.is-selected) { + background: var(--wp-admin-theme-color-darker-20); } .block-editor-block-mover-button, .block-editor-list-view-block__menu { diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js index e32ad01cc396e..1523edc1e1d16 100644 --- a/packages/e2e-test-utils/src/site-editor.js +++ b/packages/e2e-test-utils/src/site-editor.js @@ -265,7 +265,7 @@ export async function visitSiteEditor( query, skipWelcomeGuide = true ) { */ export async function toggleGlobalStyles() { await page.click( - '.edit-site-header__actions button[aria-label="Styles"]' + '.interface-interface-skeleton__drawer button[aria-label="Styles"]' ); } @@ -275,7 +275,7 @@ export async function toggleGlobalStyles() { * @param {string} panelName Name of the panel that is going to be opened. */ export async function openGlobalStylesPanel( panelName ) { - const selector = `//div[@aria-label="Settings"]//button[.//*[text()="${ panelName }"]]`; + const selector = `//div[contains(@class, "edit-site-global-styles-sidebar__panel")]//button[.//*[text()="${ panelName }"]]`; await ( await page.waitForXPath( selector ) ).click(); } @@ -284,6 +284,6 @@ export async function openGlobalStylesPanel( panelName ) { */ export async function openPreviousGlobalStylesPanel() { await page.click( - 'div[aria-label="Settings"] button[aria-label="Navigate to the previous view"]' + '.edit-site-global-styles-sidebar__panel button[aria-label="Navigate to the previous view"]' ); } diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/style.scss index 6c52a80691a4e..c138dacab7f58 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/style.scss +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/style.scss @@ -43,7 +43,7 @@ .edit-site-navigation-menu-sidebar, .edit-site-navigation-menu-sidebar .components-panel__header, .edit-site-navigation-inspector, -.edit-site-navigation-menu-sidebar .components-button { +.edit-site-navigation-menu-sidebar .interface-complementary-area-header .components-button { background: $gray-900; color: $gray-100; } diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js index 44b20d495d76a..df0981724b138 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { useEffect, useRef } from '@wordpress/element'; +import { useRef } from '@wordpress/element'; import { Button, Icon, @@ -49,14 +49,6 @@ function NavigationToggle( { icon } ) { const navigationToggleRef = useRef(); - useEffect( () => { - // TODO: Remove this effect when alternative solution is merged. - // See: https://github.com/WordPress/gutenberg/pull/37314 - if ( ! isNavigationOpen ) { - navigationToggleRef.current.focus(); - } - }, [ isNavigationOpen ] ); - const toggleNavigationPanel = () => setIsNavigationPanelOpened( ! isNavigationOpen ); diff --git a/packages/edit-site/src/components/navigation-sidebar/style.scss b/packages/edit-site/src/components/navigation-sidebar/style.scss new file mode 100644 index 0000000000000..62d9d2438b2aa --- /dev/null +++ b/packages/edit-site/src/components/navigation-sidebar/style.scss @@ -0,0 +1,82 @@ +.edit-site-global-styles-sidebar { + display: flex; + flex-direction: column; + height: 100%; + + &__panel, + &__navigator-provider { + display: flex; + flex-direction: column; + flex: 1; + } + + &__navigator-screen { + flex: 1; + } +} + +.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon { + margin-left: 0; +} + +.edit-site-global-styles-sidebar__reset-button.components-button { + margin-left: auto; +} + +.edit-site-global-styles-sidebar .components-navigation__menu-title-heading { + font-size: $default-font-size * 1.2; + font-weight: 500; +} + +.edit-site-global-styles-sidebar .components-navigation__item > button span { + font-weight: 500; +} + +.edit-site-typography-panel, +.edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings { + border: 0; +} + +.edit-site-global-styles-sidebar .components-tools-panel-item.single-column { + grid-column: span 1; +} + +.edit-site-global-styles-sidebar__blocks-group { + padding-top: $grid-unit-30; + border-top: $border-width solid $gray-200; +} + +.edit-site-global-styles-sidebar__blocks-group-help { + padding: 0 $grid-unit-20; +} + +.edit-site-global-styles-color-palette-panel, +.edit-site-global-styles-gradient-palette-panel { + padding: $grid-unit-20; +} + +.edit-site-global-styles-sidebar__beta { + display: inline-flex; + margin-left: $grid-unit-10; + padding: 0 $grid-unit-10; + height: $grid-unit-30; + border-radius: $radius-block-ui; + background-color: $black; + color: $white; + align-items: center; + font-size: $helptext-font-size; + line-height: 1; +} + +//TODO: add dark mode support to base components instead using emotion +.interface-complementary-area.edit-site-global-styles-sidebar, +.edit-site-global-styles-sidebar .interface-complementary-area-header, +.edit-site-global-styles-sidebar .edit-site-global-styles-sidebar__navigator-provider, +.edit-site-global-styles-sidebar .components-card__body, +.edit-site-global-styles-sidebar .components-card, +.edit-site-global-styles-sidebar .components-flex-item, +.edit-site-global-styles-sidebar .components-heading { + background: $gray-900; + color: $gray-100; + fill: $gray-100; +} diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index 134efcbc2f142..d9947460aa6c2 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -16,73 +16,3 @@ margin: 0; } } - -.edit-site-global-styles-sidebar { - display: flex; - flex-direction: column; - min-height: 100%; - - &__panel, - &__navigator-provider { - display: flex; - flex-direction: column; - flex: 1; - } - - &__navigator-screen { - flex: 1; - } -} - -.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon { - margin-left: 0; -} - -.edit-site-global-styles-sidebar__reset-button.components-button { - margin-left: auto; -} - -.edit-site-global-styles-sidebar .components-navigation__menu-title-heading { - font-size: $default-font-size * 1.2; - font-weight: 500; -} - -.edit-site-global-styles-sidebar .components-navigation__item > button span { - font-weight: 500; -} - -.edit-site-typography-panel, -.edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings { - border: 0; -} - -.edit-site-global-styles-sidebar .components-tools-panel-item.single-column { - grid-column: span 1; -} - -.edit-site-global-styles-sidebar__blocks-group { - padding-top: $grid-unit-30; - border-top: $border-width solid $gray-200; -} - -.edit-site-global-styles-sidebar__blocks-group-help { - padding: 0 $grid-unit-20; -} - -.edit-site-global-styles-color-palette-panel, -.edit-site-global-styles-gradient-palette-panel { - padding: $grid-unit-20; -} - -.edit-site-global-styles-sidebar__beta { - display: inline-flex; - margin-left: $grid-unit-10; - padding: 0 $grid-unit-10; - height: $grid-unit-30; - border-radius: $radius-block-ui; - background-color: $black; - color: $white; - align-items: center; - font-size: $helptext-font-size; - line-height: 1; -} diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 524e6571bf634..09f83394f0a7b 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -12,6 +12,7 @@ @import "./components/sidebar/style.scss"; @import "./components/sidebar/settings-header/style.scss"; @import "./components/navigation-sidebar/navigation-menu-sidebar/style.scss"; +@import "./components/navigation-sidebar/style.scss"; @import "./components/sidebar/template-card/style.scss"; @import "./components/editor/style.scss"; @import "./components/template-details/style.scss"; From 81768a844b53dcd39ea1ae99ef3f5ba71bbe6b92 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 30 Mar 2022 11:57:05 +0100 Subject: [PATCH 04/10] Try Dark sidebar for Navigation and Global Styles --- packages/block-editor/src/components/list-view/index.js | 7 ------- .../navigation-sidebar/navigation-menu-sidebar/index.js | 5 ----- 2 files changed, 12 deletions(-) diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js index 33169846e4eec..e50fd086daacb 100644 --- a/packages/block-editor/src/components/list-view/index.js +++ b/packages/block-editor/src/components/list-view/index.js @@ -64,12 +64,9 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36; * @param {boolean} props.__experimentalFeatures Flag to enable experimental features. * @param {boolean} props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment. * @param {boolean} props.__experimentalHideContainerBlockActions Flag to hide actions of top level blocks (like core/widget-area) -<<<<<<< HEAD * @param {string} props.id Unique identifier for the root list element (primarily for a11y purposes). * @param {boolean} props.expandNested Flag to determine whether nested levels are expanded by default. -======= * @param {boolean} props.__experimentalDarkMode Flag to turn on dark mode ->>>>>>> 0231f0b300 (Navigation Sidebar: experiment with a persistent vertical display) * @param {Object} ref Forwarded ref */ function ListView( @@ -219,14 +216,10 @@ function ListView( blockDropTarget={ blockDropTarget } /> >>>>>> 0231f0b300 (Navigation Sidebar: experiment with a persistent vertical display) aria-label={ __( 'Block navigation structure' ) } ref={ treeGridRef } onCollapseRow={ collapseRow } diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/index.js index 295bb7fd35a11..e1d97dc808017 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/index.js @@ -15,14 +15,9 @@ export default function NavigationMenuSidebar() { return ( >>>>>> 0231f0b300 (Navigation Sidebar: experiment with a persistent vertical display):packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/index.js icon={ navigation } closeLabel={ __( 'Close navigation menu sidebar' ) } panelClassName="edit-site-navigation-menu-sidebar__panel" From 7ebc0b011e6bf204db1bda570289134f48ec3b6d Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 31 Mar 2022 09:52:22 +0100 Subject: [PATCH 05/10] try moving the pinned items to the header --- .../edit-site/src/components/header/style.scss | 6 +++--- .../navigation-toggle/style.scss | 18 +++++++++++------- .../components/complementary-area/style.scss | 1 + .../components/interface-skeleton/style.scss | 2 +- 4 files changed, 16 insertions(+), 11 deletions(-) diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss index 195aa9070c4ed..207a8ba1fd77b 100644 --- a/packages/edit-site/src/components/header/style.scss +++ b/packages/edit-site/src/components/header/style.scss @@ -64,14 +64,14 @@ body.is-navigation-sidebar-open { .edit-site-header__toolbar { display: flex; align-items: center; - padding-left: $grid-unit-20; + padding-left: $grid-unit-20 + 170; @include break-small() { - padding-left: $grid-unit-20; + padding-left: $grid-unit-20 + 170; } @include break-wide() { - padding-right: $grid-unit-10; + padding-right: $grid-unit-10 + 170; } .edit-site-header-toolbar__inserter-toggle { diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss index 99107eb45047e..2b1495c37bcb9 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss @@ -3,13 +3,13 @@ .edit-site-navigation-toggle { align-items: center; - background: $gray-900; + background: $black; border-radius: 0; display: flex; + position: absolute; z-index: z-index(".edit-site-navigation-toggle"); height: $header-height; - width: $header-height; - flex-direction: column; + width: $header-height + 94px; button { color: $white; @@ -18,9 +18,9 @@ .edit-site-navigation-toggle__button.components-button { align-items: center; - background: $gray-900; + background: $black; border-radius: 0; - height: $header-height + $border-width; + height: $header-height - 1px; width: $header-height; z-index: 1; margin-bottom: - $border-width; @@ -60,6 +60,10 @@ } .edit-site-navigation-toggle .interface-pinned-items { - padding-top: $grid-unit-20; - flex-direction: column; + button { + background: $black; + } + .is-pressed { + background: $gray-900; + } } diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss index a3e7dc949ca12..ff6ad045ac4e1 100644 --- a/packages/interface/src/components/complementary-area/style.scss +++ b/packages/interface/src/components/complementary-area/style.scss @@ -1,6 +1,7 @@ .interface-complementary-area { background: $white; color: $gray-900; + margin-top: $header-height; @include break-small() { -webkit-overflow-scrolling: touch; diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss index 69edadaf9323c..b286738a2f241 100644 --- a/packages/interface/src/components/interface-skeleton/style.scss +++ b/packages/interface/src/components/interface-skeleton/style.scss @@ -180,6 +180,6 @@ html.interface-interface-skeleton__html-container { } .interface-interface-skeleton__drawer { - background: $gray-900; + //background: $gray-900; display: flex; } From 81838c29f8f23a7652c1b2d1672904b582747867 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 31 Mar 2022 14:45:17 +0100 Subject: [PATCH 06/10] move header to the top --- .../edit-site/src/components/header/index.js | 2 + .../src/components/header/style.scss | 25 ++- .../components/navigation-sidebar/index.js | 2 - .../navigation-panel/index.js | 156 +++++++++--------- .../navigation-panel/style.scss | 3 +- .../navigation-toggle/style.scss | 4 +- .../src/components/sidebar/default-sidebar.js | 2 + .../complementary-area-header/style.scss | 1 - .../complementary-area-toggle/index.js | 3 + .../components/complementary-area/index.js | 2 + .../components/complementary-area/style.scss | 1 - .../components/interface-skeleton/index.js | 96 +++++------ .../components/interface-skeleton/style.scss | 9 +- .../src/components/pinned-items/style.scss | 5 - 14 files changed, 160 insertions(+), 151 deletions(-) diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index 6257fa70a33be..3f64143c02ad5 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -110,6 +110,8 @@ export default function Header( {
+ + + /> { isModalOpen && ( setIsModalOpen( false ) } diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js index 3340d37fb2139..7a1ccdc997428 100644 --- a/packages/edit-site/src/components/add-new-template/new-template.js +++ b/packages/edit-site/src/components/add-new-template/new-template.js @@ -24,6 +24,7 @@ import { media, notFound, page, + plus, post, postAuthor, postDate, @@ -149,14 +150,14 @@ export default function NewTemplate( { postType } ) { return ( { () => ( diff --git a/packages/edit-site/src/components/navigation-sidebar/index.js b/packages/edit-site/src/components/navigation-sidebar/index.js index 4202e138bb745..cd223f37edeab 100644 --- a/packages/edit-site/src/components/navigation-sidebar/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/index.js @@ -16,7 +16,6 @@ import TemplatesSidebar from './templates-sidebar'; import PartsSidebar from './parts-sidebar'; import NavigationMenuSidebar from './navigation-menu-sidebar'; - export const { Fill: NavigationPanelPreviewFill, Slot: NavigationPanelPreviewSlot, diff --git a/packages/edit-site/src/components/navigation-sidebar/parts-sidebar.js b/packages/edit-site/src/components/navigation-sidebar/parts-sidebar.js new file mode 100644 index 0000000000000..48c17c51f2143 --- /dev/null +++ b/packages/edit-site/src/components/navigation-sidebar/parts-sidebar.js @@ -0,0 +1,39 @@ +/** + * WordPress dependencies + */ +import { FlexBlock, Flex } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { sidebar } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import DefaultSidebar from '../sidebar/default-sidebar'; +import TemplateList from './template-list'; +import AddNewTemplate from '../add-new-template'; + +export default function PartsSidebar() { + return ( + + + { __( 'Parts' ) } + + + + + + } + > + + + ); +} diff --git a/packages/edit-site/src/components/navigation-sidebar/style.scss b/packages/edit-site/src/components/navigation-sidebar/style.scss index 3775f4b3e4b5a..b5b45c0008376 100644 --- a/packages/edit-site/src/components/navigation-sidebar/style.scss +++ b/packages/edit-site/src/components/navigation-sidebar/style.scss @@ -74,6 +74,7 @@ .edit-site-global-styles-sidebar .edit-site-global-styles-sidebar__navigator-provider, .edit-site-global-styles-sidebar .components-card__body, .edit-site-global-styles-sidebar .components-card, +.edit-site-global-styles-sidebar .components-button, .edit-site-global-styles-sidebar .components-flex-item, .edit-site-global-styles-sidebar .components-heading { background: $gray-900; @@ -94,6 +95,10 @@ color: $white; text-decoration: none; } + + .components-button { + color: $gray-100; + } } .edit-site-navigation-sidebar-template-list { diff --git a/packages/edit-site/src/components/navigation-sidebar/template-list.js b/packages/edit-site/src/components/navigation-sidebar/template-list.js new file mode 100644 index 0000000000000..e0bdc884863f4 --- /dev/null +++ b/packages/edit-site/src/components/navigation-sidebar/template-list.js @@ -0,0 +1,126 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { + store as coreStore, + __experimentalUseEntityRecords as useEntityRecords, +} from '@wordpress/core-data'; +import { __, sprintf } from '@wordpress/i18n'; +import { + Icon, +} from '@wordpress/components'; +import { decodeEntities } from '@wordpress/html-entities'; +import { + archive, + blockMeta, + category, + footer, + header, + home, + layout, + list, + media, + notFound, + page, + post, + postAuthor, + postDate, + search, + sidebar, + tag, +} from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import Link from '../routes/link'; +import Actions from '../list/actions'; + +const TEMPLATE_ICONS = { + 'front-page': home, + 'single-post': post, + page, + archive, + search, + 404: notFound, + index: list, + category, + author: postAuthor, + taxonomy: blockMeta, + date: postDate, + tag, + attachment: media, + footer, + header, + sidebar, +}; + +export default function TemplateList( { templateType } ) { + const { records: templates, isResolving: isLoading } = useEntityRecords( + 'postType', + templateType, + { + per_page: -1, + } + ); + const postType = useSelect( + ( select ) => select( coreStore ).getPostType( templateType ), + [ templateType ] + ); + + if ( ! templates || isLoading ) { + return null; + } + + if ( ! templates.length ) { + return ( +
+ { sprintf( + // translators: The template type name, should be either "templates" or "template parts". + __( 'No %s found.' ), + postType?.labels?.name?.toLowerCase() + ) } +
+ ); + } + + const getIcon = ( slug ) => { + if ( TEMPLATE_ICONS[ slug ] ) { + return TEMPLATE_ICONS[ slug ]; + } + + if ( templateType === 'wp_template' ) { + return layout; + } + + return sidebar; + }; + + return ( +
+ { templates.map( ( template ) => ( +
+
+ + + { decodeEntities( + template.title?.rendered || template.slug + ) } + +
+ +
+ ) ) } +
+ ); +} diff --git a/packages/edit-site/src/components/navigation-sidebar/templates-sidebar.js b/packages/edit-site/src/components/navigation-sidebar/templates-sidebar.js new file mode 100644 index 0000000000000..0c4c55898d048 --- /dev/null +++ b/packages/edit-site/src/components/navigation-sidebar/templates-sidebar.js @@ -0,0 +1,39 @@ +/** + * WordPress dependencies + */ +import { FlexBlock, Flex } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { layout } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import DefaultSidebar from '../sidebar/default-sidebar'; +import TemplateList from './template-list'; +import AddNewTemplate from '../add-new-template'; + +export default function TemplatesSidebar() { + return ( + + + { __( 'Templates' ) } + + + + + + } + > + + + ); +} From 28c6abd5dac03bf7744a33623c857fa2cbeff34b Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 31 Mar 2022 17:57:33 +0100 Subject: [PATCH 10/10] reformat --- .../src/components/navigation-sidebar/template-list.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/navigation-sidebar/template-list.js b/packages/edit-site/src/components/navigation-sidebar/template-list.js index e0bdc884863f4..512dc5fbc4d59 100644 --- a/packages/edit-site/src/components/navigation-sidebar/template-list.js +++ b/packages/edit-site/src/components/navigation-sidebar/template-list.js @@ -7,9 +7,7 @@ import { __experimentalUseEntityRecords as useEntityRecords, } from '@wordpress/core-data'; import { __, sprintf } from '@wordpress/i18n'; -import { - Icon, -} from '@wordpress/components'; +import { Icon } from '@wordpress/components'; import { decodeEntities } from '@wordpress/html-entities'; import { archive,