From afd99e42ad7ef54ed2f01df1065497f00d877da0 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 10 Oct 2022 10:44:08 +0100 Subject: [PATCH] Cleanup --- .../src/{new => components/app}/index.js | 4 +- .../block-editor/block-inspector-button.js | 2 +- .../src/components/block-editor/index.js | 2 +- .../src/{new => components}/canvas/index.js | 20 +- .../src/{new => components}/canvas/style.scss | 0 .../document-actions/index.js | 0 .../document-actions/style.scss | 0 .../src/components/header-edit-mode/index.js | 285 ++++++++++++++++ .../mode-switcher/index.js | 0 .../more-menu/copy-content-menu-item.js | 0 .../more-menu/index.js | 0 .../more-menu/site-export.js | 0 .../more-menu/welcome-guide-menu-item.js | 0 .../plugin-more-menu-item/index.js | 0 .../plugin-sidebar-more-menu-item/index.js | 0 .../components/header-edit-mode/style.scss | 222 +++++++++++++ .../tools-more-menu-group/index.js | 0 .../undo-redo/redo.js | 0 .../undo-redo/undo.js | 0 .../edit-site/src/components/header/index.js | 310 +++--------------- .../src/components/header/style.scss | 225 +------------ .../components/keyboard-shortcuts/index.js | 2 +- .../src/{new => components}/layout/index.js | 10 +- .../src/{new => components}/layout/style.scss | 16 +- .../navigation-inspector/index.js | 0 .../navigation-inspector/navigation-menu.js | 0 .../navigation-inspector/style.scss | 0 .../constants.js | 0 .../default-sidebar.js | 0 .../global-styles-sidebar.js | 0 .../src/components/sidebar-edit-mode/index.js | 88 +++++ .../plugin-sidebar/index.js | 2 +- .../settings-header/index.js | 4 +- .../settings-header/style.scss | 4 +- .../{sidebar => sidebar-edit-mode}/style.scss | 2 +- .../template-card/index.js | 0 .../template-card/style.scss | 0 .../template-card/template-actions.js | 0 .../template-card/template-areas.js | 0 .../sidebar-navigation/index.js | 0 .../edit-site/src/components/sidebar/index.js | 90 +---- .../site-icon-and-title/index.js | 6 +- .../site-icon-and-title/style.scss | 6 +- packages/edit-site/src/index.js | 10 +- packages/edit-site/src/new/header/index.js | 69 ---- packages/edit-site/src/new/header/style.scss | 3 - packages/edit-site/src/new/sidebar/index.js | 24 -- packages/edit-site/src/new/style.scss | 5 - packages/edit-site/src/style.scss | 17 +- 49 files changed, 713 insertions(+), 715 deletions(-) rename packages/edit-site/src/{new => components/app}/index.js (89%) rename packages/edit-site/src/{new => components}/canvas/index.js (89%) rename packages/edit-site/src/{new => components}/canvas/style.scss (100%) rename packages/edit-site/src/components/{header => header-edit-mode}/document-actions/index.js (100%) rename packages/edit-site/src/components/{header => header-edit-mode}/document-actions/style.scss (100%) create mode 100644 packages/edit-site/src/components/header-edit-mode/index.js rename packages/edit-site/src/components/{header => header-edit-mode}/mode-switcher/index.js (100%) rename packages/edit-site/src/components/{header => header-edit-mode}/more-menu/copy-content-menu-item.js (100%) rename packages/edit-site/src/components/{header => header-edit-mode}/more-menu/index.js (100%) rename packages/edit-site/src/components/{header => header-edit-mode}/more-menu/site-export.js (100%) rename packages/edit-site/src/components/{header => header-edit-mode}/more-menu/welcome-guide-menu-item.js (100%) rename packages/edit-site/src/components/{header => header-edit-mode}/plugin-more-menu-item/index.js (100%) rename packages/edit-site/src/components/{header => header-edit-mode}/plugin-sidebar-more-menu-item/index.js (100%) create mode 100644 packages/edit-site/src/components/header-edit-mode/style.scss rename packages/edit-site/src/components/{header => header-edit-mode}/tools-more-menu-group/index.js (100%) rename packages/edit-site/src/components/{header => header-edit-mode}/undo-redo/redo.js (100%) rename packages/edit-site/src/components/{header => header-edit-mode}/undo-redo/undo.js (100%) rename packages/edit-site/src/{new => components}/layout/index.js (79%) rename packages/edit-site/src/{new => components}/layout/style.scss (70%) rename packages/edit-site/src/{new => components}/navigation-inspector/index.js (100%) rename packages/edit-site/src/{new => components}/navigation-inspector/navigation-menu.js (100%) rename packages/edit-site/src/{new => components}/navigation-inspector/style.scss (100%) rename packages/edit-site/src/components/{sidebar => sidebar-edit-mode}/constants.js (100%) rename packages/edit-site/src/components/{sidebar => sidebar-edit-mode}/default-sidebar.js (100%) rename packages/edit-site/src/components/{sidebar => sidebar-edit-mode}/global-styles-sidebar.js (100%) create mode 100644 packages/edit-site/src/components/sidebar-edit-mode/index.js rename packages/edit-site/src/components/{sidebar => sidebar-edit-mode}/plugin-sidebar/index.js (98%) rename packages/edit-site/src/components/{sidebar => sidebar-edit-mode}/settings-header/index.js (92%) rename packages/edit-site/src/components/{sidebar => sidebar-edit-mode}/settings-header/style.scss (93%) rename packages/edit-site/src/components/{sidebar => sidebar-edit-mode}/style.scss (98%) rename packages/edit-site/src/components/{sidebar => sidebar-edit-mode}/template-card/index.js (100%) rename packages/edit-site/src/components/{sidebar => sidebar-edit-mode}/template-card/style.scss (100%) rename packages/edit-site/src/components/{sidebar => sidebar-edit-mode}/template-card/template-actions.js (100%) rename packages/edit-site/src/components/{sidebar => sidebar-edit-mode}/template-card/template-areas.js (100%) rename packages/edit-site/src/{new => components}/sidebar-navigation/index.js (100%) rename packages/edit-site/src/{new => components}/site-icon-and-title/index.js (87%) rename packages/edit-site/src/{new => components}/site-icon-and-title/style.scss (60%) delete mode 100644 packages/edit-site/src/new/header/index.js delete mode 100644 packages/edit-site/src/new/header/style.scss delete mode 100644 packages/edit-site/src/new/sidebar/index.js delete mode 100644 packages/edit-site/src/new/style.scss diff --git a/packages/edit-site/src/new/index.js b/packages/edit-site/src/components/app/index.js similarity index 89% rename from packages/edit-site/src/new/index.js rename to packages/edit-site/src/components/app/index.js index e19e74c171003..2a87de5fc8154 100644 --- a/packages/edit-site/src/new/index.js +++ b/packages/edit-site/src/components/app/index.js @@ -8,8 +8,8 @@ import { ShortcutProvider } from '@wordpress/keyboard-shortcuts'; /** * Internal dependencies */ -import { Routes } from '../components/routes'; -import Layout from './layout'; +import { Routes } from '../routes'; +import Layout from '../layout'; export default function App() { return ( diff --git a/packages/edit-site/src/components/block-editor/block-inspector-button.js b/packages/edit-site/src/components/block-editor/block-inspector-button.js index 91b5f0665f757..758ca50272ade 100644 --- a/packages/edit-site/src/components/block-editor/block-inspector-button.js +++ b/packages/edit-site/src/components/block-editor/block-inspector-button.js @@ -13,7 +13,7 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; */ import { store as editSiteStore } from '../../store'; import { STORE_NAME } from '../../store/constants'; -import { SIDEBAR_BLOCK } from '../sidebar/constants'; +import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants'; export default function BlockInspectorButton( { onClick = () => {} } ) { const { shortcut, isBlockInspectorOpen } = useSelect( diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index 82c560bc7ee04..36c69acbf65ea 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -29,7 +29,7 @@ import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks'; */ import TemplatePartConverter from '../template-part-converter'; import NavigateToLink from '../navigate-to-link'; -import { SidebarInspectorFill } from '../sidebar'; +import { SidebarInspectorFill } from '../sidebar-edit-mode'; import { store as editSiteStore } from '../../store'; import BlockInspectorButton from './block-inspector-button'; import BackButton from './back-button'; diff --git a/packages/edit-site/src/new/canvas/index.js b/packages/edit-site/src/components/canvas/index.js similarity index 89% rename from packages/edit-site/src/new/canvas/index.js rename to packages/edit-site/src/components/canvas/index.js index 846c539187bee..26f47251324fe 100644 --- a/packages/edit-site/src/new/canvas/index.js +++ b/packages/edit-site/src/components/canvas/index.js @@ -26,16 +26,16 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; */ import { store as editSiteStore } from '../../store'; import Header from '../header'; -import BlockEditor from '../../components/block-editor'; -import CodeEditor from '../../components/code-editor'; -import KeyboardShortcuts from '../../components/keyboard-shortcuts'; -import useInitEditedEntityFromURL from '../../components/use-init-edited-entity-from-url'; -import GlobalStylesRenderer from '../../components/global-styles-renderer'; -import { GlobalStylesProvider } from '../../components/global-styles/global-styles-provider'; -import ListViewSidebar from '../../components/secondary-sidebar/list-view-sidebar'; -import InserterSidebar from '../../components/secondary-sidebar/inserter-sidebar'; -import { SidebarComplementaryAreaFills } from '../../components/sidebar'; -import WelcomeGuide from '../../components/welcome-guide'; +import BlockEditor from '../block-editor'; +import CodeEditor from '../code-editor'; +import KeyboardShortcuts from '../keyboard-shortcuts'; +import useInitEditedEntityFromURL from '../use-init-edited-entity-from-url'; +import GlobalStylesRenderer from '../global-styles-renderer'; +import { GlobalStylesProvider } from '../global-styles/global-styles-provider'; +import ListViewSidebar from '../secondary-sidebar/list-view-sidebar'; +import InserterSidebar from '../secondary-sidebar/inserter-sidebar'; +import { SidebarComplementaryAreaFills } from '../sidebar-edit-mode'; +import WelcomeGuide from '../welcome-guide'; const interfaceLabels = { /* translators: accessibility text for the editor top bar landmark region. */ diff --git a/packages/edit-site/src/new/canvas/style.scss b/packages/edit-site/src/components/canvas/style.scss similarity index 100% rename from packages/edit-site/src/new/canvas/style.scss rename to packages/edit-site/src/components/canvas/style.scss diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js similarity index 100% rename from packages/edit-site/src/components/header/document-actions/index.js rename to packages/edit-site/src/components/header-edit-mode/document-actions/index.js diff --git a/packages/edit-site/src/components/header/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss similarity index 100% rename from packages/edit-site/src/components/header/document-actions/style.scss rename to packages/edit-site/src/components/header-edit-mode/document-actions/style.scss diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js new file mode 100644 index 0000000000000..1447ba76c3ac9 --- /dev/null +++ b/packages/edit-site/src/components/header-edit-mode/index.js @@ -0,0 +1,285 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { useCallback, useRef } from '@wordpress/element'; +import { useViewportMatch } from '@wordpress/compose'; +import { + ToolSelector, + __experimentalPreviewOptions as PreviewOptions, + NavigableToolbar, + store as blockEditorStore, +} from '@wordpress/block-editor'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { PinnedItems } from '@wordpress/interface'; +import { _x, __ } from '@wordpress/i18n'; +import { listView, plus, external, chevronUpDown } from '@wordpress/icons'; +import { + Button, + ToolbarItem, + MenuGroup, + MenuItem, + VisuallyHidden, +} from '@wordpress/components'; +import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; +import { store as preferencesStore } from '@wordpress/preferences'; +import { store as editorStore } from '@wordpress/editor'; +import { store as coreStore } from '@wordpress/core-data'; + +/** + * Internal dependencies + */ +import MoreMenu from './more-menu'; +import SaveButton from '../save-button'; +import UndoButton from './undo-redo/undo'; +import RedoButton from './undo-redo/redo'; +import DocumentActions from './document-actions'; +import TemplateDetails from '../template-details'; +import { store as editSiteStore } from '../../store'; + +const preventDefault = ( event ) => { + event.preventDefault(); +}; + +export default function Header() { + const inserterButton = useRef(); + const { + deviceType, + entityTitle, + template, + templateType, + isInserterOpen, + isListViewOpen, + listViewShortcut, + isLoaded, + isVisualMode, + settings, + blockEditorMode, + showIconLabels, + } = useSelect( ( select ) => { + const { + __experimentalGetPreviewDeviceType, + getEditedPostType, + getEditedPostId, + isInserterOpened, + isListViewOpened, + getEditorMode, + getSettings, + } = select( editSiteStore ); + const { getEditedEntityRecord } = select( coreStore ); + const { __experimentalGetTemplateInfo: getTemplateInfo } = + select( editorStore ); + const { getShortcutRepresentation } = select( keyboardShortcutsStore ); + const { __unstableGetEditorMode } = select( blockEditorStore ); + + const postType = getEditedPostType(); + const postId = getEditedPostId(); + const record = getEditedEntityRecord( 'postType', postType, postId ); + const _isLoaded = !! postId; + + return { + deviceType: __experimentalGetPreviewDeviceType(), + entityTitle: getTemplateInfo( record ).title, + isLoaded: _isLoaded, + template: record, + templateType: postType, + isInserterOpen: isInserterOpened(), + isListViewOpen: isListViewOpened(), + listViewShortcut: getShortcutRepresentation( + 'core/edit-site/toggle-list-view' + ), + isVisualMode: getEditorMode() === 'visual', + settings: getSettings(), + blockEditorMode: __unstableGetEditorMode(), + showIconLabels: select( preferencesStore ).get( + 'core/edit-site', + 'showIconLabels' + ), + }; + }, [] ); + + const { + __experimentalSetPreviewDeviceType: setPreviewDeviceType, + setIsInserterOpened, + setIsListViewOpened, + } = useDispatch( editSiteStore ); + const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); + + const isLargeViewport = useViewportMatch( 'medium' ); + + const openInserter = useCallback( () => { + if ( isInserterOpen ) { + // Focusing the inserter button closes the inserter popover. + inserterButton.current.focus(); + } else { + setIsInserterOpened( true ); + } + }, [ isInserterOpen, setIsInserterOpened ] ); + + const toggleListView = useCallback( + () => setIsListViewOpened( ! isListViewOpen ), + [ setIsListViewOpened, isListViewOpen ] + ); + + const isFocusMode = templateType === 'wp_template_part'; + + /* translators: button label text should, if possible, be under 16 characters. */ + const longLabel = _x( + 'Toggle block inserter', + 'Generic label for block inserter button' + ); + const shortLabel = ! isInserterOpen ? __( 'Add' ) : __( 'Close' ); + + const isZoomedOutViewExperimentEnabled = + window?.__experimentalEnableZoomedOutView && isVisualMode; + const isZoomedOutView = blockEditorMode === 'zoom-out'; + + return ( +
+ +
+ + { isLargeViewport && ( + <> + + + + + { isZoomedOutViewExperimentEnabled && ( + { + setPreviewDeviceType( 'desktop' ); + __unstableSetEditorMode( + isZoomedOutView + ? 'edit' + : 'zoom-out' + ); + } } + /> + ) } + + ) } +
+ + +
+ + { ( { onClose } ) => ( + + ) } + +
+ +
+
+ { ! isFocusMode && ( +
+ + + + { __( 'View site' ) } + + { + /* translators: accessibility text */ + __( '(opens in a new tab)' ) + } + + + + +
+ ) } + + + +
+
+
+ ); +} diff --git a/packages/edit-site/src/components/header/mode-switcher/index.js b/packages/edit-site/src/components/header-edit-mode/mode-switcher/index.js similarity index 100% rename from packages/edit-site/src/components/header/mode-switcher/index.js rename to packages/edit-site/src/components/header-edit-mode/mode-switcher/index.js diff --git a/packages/edit-site/src/components/header/more-menu/copy-content-menu-item.js b/packages/edit-site/src/components/header-edit-mode/more-menu/copy-content-menu-item.js similarity index 100% rename from packages/edit-site/src/components/header/more-menu/copy-content-menu-item.js rename to packages/edit-site/src/components/header-edit-mode/more-menu/copy-content-menu-item.js diff --git a/packages/edit-site/src/components/header/more-menu/index.js b/packages/edit-site/src/components/header-edit-mode/more-menu/index.js similarity index 100% rename from packages/edit-site/src/components/header/more-menu/index.js rename to packages/edit-site/src/components/header-edit-mode/more-menu/index.js diff --git a/packages/edit-site/src/components/header/more-menu/site-export.js b/packages/edit-site/src/components/header-edit-mode/more-menu/site-export.js similarity index 100% rename from packages/edit-site/src/components/header/more-menu/site-export.js rename to packages/edit-site/src/components/header-edit-mode/more-menu/site-export.js diff --git a/packages/edit-site/src/components/header/more-menu/welcome-guide-menu-item.js b/packages/edit-site/src/components/header-edit-mode/more-menu/welcome-guide-menu-item.js similarity index 100% rename from packages/edit-site/src/components/header/more-menu/welcome-guide-menu-item.js rename to packages/edit-site/src/components/header-edit-mode/more-menu/welcome-guide-menu-item.js diff --git a/packages/edit-site/src/components/header/plugin-more-menu-item/index.js b/packages/edit-site/src/components/header-edit-mode/plugin-more-menu-item/index.js similarity index 100% rename from packages/edit-site/src/components/header/plugin-more-menu-item/index.js rename to packages/edit-site/src/components/header-edit-mode/plugin-more-menu-item/index.js diff --git a/packages/edit-site/src/components/header/plugin-sidebar-more-menu-item/index.js b/packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js similarity index 100% rename from packages/edit-site/src/components/header/plugin-sidebar-more-menu-item/index.js rename to packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss new file mode 100644 index 0000000000000..1753589adf4e7 --- /dev/null +++ b/packages/edit-site/src/components/header-edit-mode/style.scss @@ -0,0 +1,222 @@ +$header-toolbar-min-width: 335px; + +.edit-site-header-edit-mode { + align-items: center; + background-color: $white; + display: flex; + height: $header-height; + box-sizing: border-box; + width: 100%; + justify-content: space-between; + + .edit-site-header-edit-mode__start { + display: flex; + border: none; + } + + .edit-site-header-edit-mode__end { + display: flex; + justify-content: flex-end; + } + + .edit-site-header-edit-mode__center { + display: flex; + align-items: center; + height: 100%; + flex-grow: 1; + justify-content: center; + // Flex items will, by default, refuse to shrink below a minimum + // intrinsic width. In order to shrink this flexbox item, and + // subsequently truncate child text, we set an explicit min-width. + // See https://dev.w3.org/csswg/css-flexbox/#min-size-auto + min-width: 0; + } +} + +.edit-site-header-edit-mode__toolbar { + display: flex; + align-items: center; + padding-left: $grid-unit-10; + + @include break-small() { + padding-left: $grid-unit-30; + } + + @include break-wide() { + padding-right: $grid-unit-10; + } + + .edit-site-header-edit-mode-toolbar__inserter-toggle { + margin-right: $grid-unit-10; + min-width: $grid-unit-40; + width: $grid-unit-40; + height: $grid-unit-40; + padding: 0; + + svg { + transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; + @include reduce-motion("transition"); + } + + &.is-pressed { + svg { + transform: rotate(45deg); + } + } + } +} + +.edit-site-header-edit-mode__toolbar-switchers { + align-items: center; + display: flex; +} + +.edit-site-header-edit-mode__toolbar-switchers-separator { + margin: 0 -6px 0; +} + + +/** + * Buttons on the right side + */ + +.edit-site-header-edit-mode__actions { + display: inline-flex; + align-items: center; + padding-right: $grid-unit-05; + + @include break-small () { + padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5); + } + + gap: $grid-unit-05; + + @include break-small() { + gap: $grid-unit-10; + } + + // Pinned items. + .interface-pinned-items { + display: none; + + @include break-medium() { + display: inline-flex; + } + } +} + +.edit-site-header-edit-mode__actions__preview-options { + opacity: 1; + transition: opacity 0.3s; + + &.is-zoomed-out { + opacity: 0; + } +} + +.edit-site-header-edit-mode__actions-more-menu { + margin-left: -4px; + + // The padding and margin of the more menu is intentionally non-standard. + .components-icon-button { + padding: 8px 2px; + width: auto; + } + + @include break-small() { + margin-left: 4px; + + .components-icon-button { + padding: 8px 4px; + } + } +} + +.edit-site-header-edit-mode__start { + display: flex; + border: none; + + // The Toolbar component adds different styles to buttons, so we reset them + // here to the original button styles + .edit-site-header-edit-mode__toolbar > .components-button.has-icon, + .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon { + height: $button-size; + min-width: $button-size; + padding: 6px; + + &.is-pressed { + background: $gray-900; + } + + &:focus:not(:disabled) { + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white; + outline: 1px solid transparent; + } + + &::before { + display: none; + } + } + + .eedit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode-toolbar__inserter-toggle.has-icon { + margin-right: $grid-unit-10; + // Special dimensions for this button. + min-width: 32px; + width: 32px; + height: 32px; + padding: 0; + } + + .edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode-toolbar__inserter-toggle.has-text.has-icon { + width: auto; + padding: 0 $grid-unit-10; + } +} + +// Button text label styles + +.edit-site-header-edit-mode.show-icon-labels { + .components-button.has-icon { + width: auto; + + // Hide the button icons when labels are set to display... + svg { + display: none; + } + // ... and display labels. + &::after { + content: attr(aria-label); + } + &[aria-disabled="true"] { + background-color: transparent; + } + } + .is-tertiary { + &:active { + box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); + background-color: transparent; + } + } + // Some margins and padding have to be adjusted so the buttons can still fit on smaller screens. + .edit-site-save-button__button { + padding-left: 6px; + padding-right: 6px; + } + + // The template details toggle has a custom label, different from its aria-label, so we don't want to display both. + .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info { + &::after { + content: none; + } + } + + .edit-site-header-edit-mode-toolbar__inserter-toggle.edit-site-header-edit-mode-toolbar__inserter-toggle, + .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info { + height: 36px; + padding: 0 $grid-unit-10; + } + + .edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > * + * { + margin-left: $grid-unit-10; + } +} diff --git a/packages/edit-site/src/components/header/tools-more-menu-group/index.js b/packages/edit-site/src/components/header-edit-mode/tools-more-menu-group/index.js similarity index 100% rename from packages/edit-site/src/components/header/tools-more-menu-group/index.js rename to packages/edit-site/src/components/header-edit-mode/tools-more-menu-group/index.js diff --git a/packages/edit-site/src/components/header/undo-redo/redo.js b/packages/edit-site/src/components/header-edit-mode/undo-redo/redo.js similarity index 100% rename from packages/edit-site/src/components/header/undo-redo/redo.js rename to packages/edit-site/src/components/header-edit-mode/undo-redo/redo.js diff --git a/packages/edit-site/src/components/header/undo-redo/undo.js b/packages/edit-site/src/components/header-edit-mode/undo-redo/undo.js similarity index 100% rename from packages/edit-site/src/components/header/undo-redo/undo.js rename to packages/edit-site/src/components/header-edit-mode/undo-redo/undo.js diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index 2630236b36f5b..cfad86f05fb5b 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -1,285 +1,69 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ -import { useCallback, useRef } from '@wordpress/element'; -import { useViewportMatch } from '@wordpress/compose'; -import { - ToolSelector, - __experimentalPreviewOptions as PreviewOptions, - NavigableToolbar, - store as blockEditorStore, -} from '@wordpress/block-editor'; import { useSelect, useDispatch } from '@wordpress/data'; -import { PinnedItems } from '@wordpress/interface'; -import { _x, __ } from '@wordpress/i18n'; -import { listView, plus, external, chevronUpDown } from '@wordpress/icons'; import { + __unstableAnimatePresence as AnimatePresence, + __experimentalHStack as HStack, + __unstableMotion as motion, Button, - ToolbarItem, - MenuGroup, - MenuItem, - VisuallyHidden, + FlexBlock, } from '@wordpress/components'; -import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; -import { store as preferencesStore } from '@wordpress/preferences'; -import { store as editorStore } from '@wordpress/editor'; -import { store as coreStore } from '@wordpress/core-data'; +import { __ } from '@wordpress/i18n'; +import { useReducedMotion } from '@wordpress/compose'; /** * Internal dependencies */ -import MoreMenu from './more-menu'; -import SaveButton from '../save-button'; -import UndoButton from './undo-redo/undo'; -import RedoButton from './undo-redo/redo'; -import DocumentActions from './document-actions'; -import TemplateDetails from '../template-details'; import { store as editSiteStore } from '../../store'; - -const preventDefault = ( event ) => { - event.preventDefault(); -}; +import EditorToolbars from '../header-edit-mode'; +import SiteIconAndTitle from '../site-icon-and-title'; export default function Header() { - const inserterButton = useRef(); - const { - deviceType, - entityTitle, - template, - templateType, - isInserterOpen, - isListViewOpen, - listViewShortcut, - isLoaded, - isVisualMode, - settings, - blockEditorMode, - showIconLabels, - } = useSelect( ( select ) => { - const { - __experimentalGetPreviewDeviceType, - getEditedPostType, - getEditedPostId, - isInserterOpened, - isListViewOpened, - getEditorMode, - getSettings, - } = select( editSiteStore ); - const { getEditedEntityRecord } = select( coreStore ); - const { __experimentalGetTemplateInfo: getTemplateInfo } = - select( editorStore ); - const { getShortcutRepresentation } = select( keyboardShortcutsStore ); - const { __unstableGetEditorMode } = select( blockEditorStore ); - - const postType = getEditedPostType(); - const postId = getEditedPostId(); - const record = getEditedEntityRecord( 'postType', postType, postId ); - const _isLoaded = !! postId; - - return { - deviceType: __experimentalGetPreviewDeviceType(), - entityTitle: getTemplateInfo( record ).title, - isLoaded: _isLoaded, - template: record, - templateType: postType, - isInserterOpen: isInserterOpened(), - isListViewOpen: isListViewOpened(), - listViewShortcut: getShortcutRepresentation( - 'core/edit-site/toggle-list-view' - ), - isVisualMode: getEditorMode() === 'visual', - settings: getSettings(), - blockEditorMode: __unstableGetEditorMode(), - showIconLabels: select( preferencesStore ).get( - 'core/edit-site', - 'showIconLabels' - ), - }; - }, [] ); - - const { - __experimentalSetPreviewDeviceType: setPreviewDeviceType, - setIsInserterOpened, - setIsListViewOpened, - } = useDispatch( editSiteStore ); - const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); - - const isLargeViewport = useViewportMatch( 'medium' ); - - const openInserter = useCallback( () => { - if ( isInserterOpen ) { - // Focusing the inserter button closes the inserter popover. - inserterButton.current.focus(); - } else { - setIsInserterOpened( true ); - } - }, [ isInserterOpen, setIsInserterOpened ] ); - - const toggleListView = useCallback( - () => setIsListViewOpened( ! isListViewOpen ), - [ setIsListViewOpened, isListViewOpen ] + const { canvasMode } = useSelect( + ( select ) => ( { + canvasMode: select( editSiteStore ).__unstableGetCanvasMode(), + } ), + [] ); - - const isFocusMode = templateType === 'wp_template_part'; - - /* translators: button label text should, if possible, be under 16 characters. */ - const longLabel = _x( - 'Toggle block inserter', - 'Generic label for block inserter button' - ); - const shortLabel = ! isInserterOpen ? __( 'Add' ) : __( 'Close' ); - - const isZoomedOutViewExperimentEnabled = - window?.__experimentalEnableZoomedOutView && isVisualMode; - const isZoomedOutView = blockEditorMode === 'zoom-out'; + const { __unstableSetCanvasMode } = useDispatch( editSiteStore ); + const disableMotion = useReducedMotion(); return ( -
- + + + + { canvasMode === 'edit' && ( + - - - - { __( 'View site' ) } - - { - /* translators: accessibility text */ - __( '(opens in a new tab)' ) - } - - - - -
+ + ) } - - - - - - + + + ); } diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss index bd6778426d8f5..c905c42fc5981 100644 --- a/packages/edit-site/src/components/header/style.scss +++ b/packages/edit-site/src/components/header/style.scss @@ -1,224 +1,3 @@ -$header-toolbar-min-width: 335px; - -.edit-site-header { - align-items: center; - background-color: $white; - display: flex; - height: $header-height; - box-sizing: border-box; - width: 100%; - justify-content: space-between; - - .edit-site-header_start { - display: flex; - border: none; - } - - .edit-site-header_end { - display: flex; - justify-content: flex-end; - } - - .edit-site-header_center { - display: flex; - align-items: center; - height: 100%; - flex-grow: 1; - justify-content: center; - // Flex items will, by default, refuse to shrink below a minimum - // intrinsic width. In order to shrink this flexbox item, and - // subsequently truncate child text, we set an explicit min-width. - // See https://dev.w3.org/csswg/css-flexbox/#min-size-auto - min-width: 0; - } -} - -.edit-site-header__toolbar { - display: flex; - align-items: center; - padding-left: $grid-unit-10; - - @include break-small() { - padding-left: $grid-unit-30; - } - - @include break-wide() { - padding-right: $grid-unit-10; - } - - .edit-site-header-toolbar__inserter-toggle { - margin-right: $grid-unit-10; - min-width: $grid-unit-40; - width: $grid-unit-40; - height: $grid-unit-40; - padding: 0; - - svg { - transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; - @include reduce-motion("transition"); - } - - &.is-pressed { - svg { - transform: rotate(45deg); - } - } - } -} - -.edit-site-header__toolbar-switchers { - align-items: center; - display: flex; -} - -.edit-site-header__toolbar-switchers-separator { - margin: 0 -6px 0; -} - - -/** - * Buttons on the right side - */ - -.edit-site-header__actions { - display: inline-flex; - align-items: center; - padding-right: $grid-unit-05; - - @include break-small () { - padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5); - } - - gap: $grid-unit-05; - - @include break-small() { - gap: $grid-unit-10; - } - - // Pinned items. - .interface-pinned-items { - display: none; - - @include break-medium() { - display: inline-flex; - } - } -} - -.edit-site-header__actions__preview-options { - opacity: 1; - transition: opacity 0.3s; - - &.is-zoomed-out { - opacity: 0; - } -} - -.edit-site-header__actions-more-menu { - margin-left: -4px; - - // The padding and margin of the more menu is intentionally non-standard. - .components-icon-button { - padding: 8px 2px; - width: auto; - } - - @include break-small() { - margin-left: 4px; - - .components-icon-button { - padding: 8px 4px; - } - } -} - -.edit-site-header_start { - display: flex; - border: none; - - // The Toolbar component adds different styles to buttons, so we reset them - // here to the original button styles - .edit-site-header__toolbar > .components-button.has-icon, - .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon { - height: $button-size; - min-width: $button-size; - padding: 6px; - - &.is-pressed { - background: $gray-900; - } - - &:focus:not(:disabled) { - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white; - outline: 1px solid transparent; - } - - &::before { - display: none; - } - } - - .edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-icon { - margin-right: $grid-unit-10; - // Special dimensions for this button. - min-width: 32px; - width: 32px; - height: 32px; - padding: 0; - } - - .edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-text.has-icon { - width: auto; - padding: 0 $grid-unit-10; - } - - -} - -// Button text label styles - -.edit-site-header.show-icon-labels { - .components-button.has-icon { - width: auto; - - // Hide the button icons when labels are set to display... - svg { - display: none; - } - // ... and display labels. - &::after { - content: attr(aria-label); - } - &[aria-disabled="true"] { - background-color: transparent; - } - } - .is-tertiary { - &:active { - box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); - background-color: transparent; - } - } - // Some margins and padding have to be adjusted so the buttons can still fit on smaller screens. - .edit-site-save-button__button { - padding-left: 6px; - padding-right: 6px; - } - - // The template details toggle has a custom label, different from its aria-label, so we don't want to display both. - .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info { - &::after { - content: none; - } - } - - .edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle, - .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info { - height: 36px; - padding: 0 $grid-unit-10; - } - - .edit-site-header_start .edit-site-header__toolbar > * + * { - margin-left: $grid-unit-10; - } +.edit-site-header__toggle { + min-height: 60px; } diff --git a/packages/edit-site/src/components/keyboard-shortcuts/index.js b/packages/edit-site/src/components/keyboard-shortcuts/index.js index 5937acc6d80db..3a2d82c842eab 100644 --- a/packages/edit-site/src/components/keyboard-shortcuts/index.js +++ b/packages/edit-site/src/components/keyboard-shortcuts/index.js @@ -15,7 +15,7 @@ import { store as interfaceStore } from '@wordpress/interface'; * Internal dependencies */ import { store as editSiteStore } from '../../store'; -import { SIDEBAR_BLOCK } from '../sidebar/constants'; +import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants'; import { STORE_NAME } from '../../store/constants'; function KeyboardShortcuts() { diff --git a/packages/edit-site/src/new/layout/index.js b/packages/edit-site/src/components/layout/index.js similarity index 79% rename from packages/edit-site/src/new/layout/index.js rename to packages/edit-site/src/components/layout/index.js index 8a02fcab469e2..81184fb2e06ec 100644 --- a/packages/edit-site/src/new/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -15,8 +15,8 @@ import { useReducedMotion } from '@wordpress/compose'; */ import { Sidebar } from '../sidebar'; import Canvas from '../canvas'; +import ErrorBoundary from '../error-boundary'; import { store as editSiteStore } from '../../store'; -import ErrorBoundary from '../../components/error-boundary'; export default function Layout() { const { canvasMode } = useSelect( @@ -31,16 +31,16 @@ export default function Layout() { return (
-
+
-
+
diff --git a/packages/edit-site/src/new/layout/style.scss b/packages/edit-site/src/components/layout/style.scss similarity index 70% rename from packages/edit-site/src/new/layout/style.scss rename to packages/edit-site/src/components/layout/style.scss index 69c739618f1f8..5c99829c0d49a 100644 --- a/packages/edit-site/src/new/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -1,30 +1,30 @@ -.edit-site-new__layout { +.edit-site-layout { background: $gray-900; color: $white; min-height: 100%; display: flex; } -.edit-site-new__sidebar { +.edit-site-layout__sidebar { width: $sidebar-width; padding: $grid-unit-20; - .edit-site-new__layout.is-full-canvas & { + .edit-site-layout.is-full-canvas & { display: none; } } -.edit-site-new__canvas-container { +.edit-site-layout__canvas-container { flex-grow: 1; padding: $grid-unit-30; position: relative; - .edit-site-new__layout.is-full-canvas & { + .edit-site-layout.is-full-canvas & { padding: 0; } } -.edit-site-new__canvas { +.edit-site-layout__canvas { background: $white; color: $gray-900; border-radius: $radius-block-ui * 2; @@ -35,7 +35,7 @@ bottom: $grid-unit-30; overflow-y: auto; - .edit-site-new__layout.is-full-canvas & { + .edit-site-layout.is-full-canvas & { top: 0; left: 0; right: 0; @@ -45,7 +45,7 @@ } // This shouldn't be necessary (we should have a way to say that a skeletton is relative -.edit-site-new__canvas .interface-interface-skeleton { +.edit-site-layout__canvas .interface-interface-skeleton { position: relative !important; max-height: auto !important; min-height: 100% !important; diff --git a/packages/edit-site/src/new/navigation-inspector/index.js b/packages/edit-site/src/components/navigation-inspector/index.js similarity index 100% rename from packages/edit-site/src/new/navigation-inspector/index.js rename to packages/edit-site/src/components/navigation-inspector/index.js diff --git a/packages/edit-site/src/new/navigation-inspector/navigation-menu.js b/packages/edit-site/src/components/navigation-inspector/navigation-menu.js similarity index 100% rename from packages/edit-site/src/new/navigation-inspector/navigation-menu.js rename to packages/edit-site/src/components/navigation-inspector/navigation-menu.js diff --git a/packages/edit-site/src/new/navigation-inspector/style.scss b/packages/edit-site/src/components/navigation-inspector/style.scss similarity index 100% rename from packages/edit-site/src/new/navigation-inspector/style.scss rename to packages/edit-site/src/components/navigation-inspector/style.scss diff --git a/packages/edit-site/src/components/sidebar/constants.js b/packages/edit-site/src/components/sidebar-edit-mode/constants.js similarity index 100% rename from packages/edit-site/src/components/sidebar/constants.js rename to packages/edit-site/src/components/sidebar-edit-mode/constants.js diff --git a/packages/edit-site/src/components/sidebar/default-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js similarity index 100% rename from packages/edit-site/src/components/sidebar/default-sidebar.js rename to packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js similarity index 100% rename from packages/edit-site/src/components/sidebar/global-styles-sidebar.js rename to packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js new file mode 100644 index 0000000000000..e69989db1015e --- /dev/null +++ b/packages/edit-site/src/components/sidebar-edit-mode/index.js @@ -0,0 +1,88 @@ +/** + * WordPress dependencies + */ +import { createSlotFill, PanelBody } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { cog } from '@wordpress/icons'; +import { useEffect } from '@wordpress/element'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { store as interfaceStore } from '@wordpress/interface'; +import { store as blockEditorStore } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import DefaultSidebar from './default-sidebar'; +import GlobalStylesSidebar from './global-styles-sidebar'; +import { STORE_NAME } from '../../store/constants'; +import SettingsHeader from './settings-header'; +import TemplateCard from './template-card'; +import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants'; +import { store as editSiteStore } from '../../store'; + +const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill( + 'EditSiteSidebarInspector' +); +export const SidebarInspectorFill = InspectorFill; + +export function SidebarComplementaryAreaFills() { + const { + sidebar, + isEditorSidebarOpened, + hasBlockSelection, + supportsGlobalStyles, + } = useSelect( ( select ) => { + const _sidebar = + select( interfaceStore ).getActiveComplementaryArea( STORE_NAME ); + const _isEditorSidebarOpened = [ + SIDEBAR_BLOCK, + SIDEBAR_TEMPLATE, + ].includes( _sidebar ); + const settings = select( editSiteStore ).getSettings(); + return { + sidebar: _sidebar, + isEditorSidebarOpened: _isEditorSidebarOpened, + hasBlockSelection: + !! select( blockEditorStore ).getBlockSelectionStart(), + supportsGlobalStyles: ! settings?.supportsTemplatePartsMode, + }; + }, [] ); + const { enableComplementaryArea } = useDispatch( interfaceStore ); + + useEffect( () => { + if ( ! isEditorSidebarOpened ) return; + if ( hasBlockSelection ) { + enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK ); + } else { + enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE ); + } + }, [ hasBlockSelection, isEditorSidebarOpened ] ); + + let sidebarName = sidebar; + if ( ! isEditorSidebarOpened ) { + sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE; + } + + return ( + <> + } + headerClassName="edit-site-sidebar-edit-mode__panel-tabs" + > + { sidebarName === SIDEBAR_TEMPLATE && ( + + + + ) } + { sidebarName === SIDEBAR_BLOCK && ( + + ) } + + { supportsGlobalStyles && } + + ); +} diff --git a/packages/edit-site/src/components/sidebar/plugin-sidebar/index.js b/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js similarity index 98% rename from packages/edit-site/src/components/sidebar/plugin-sidebar/index.js rename to packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js index e617ae9ac0041..d705d0724af9f 100644 --- a/packages/edit-site/src/components/sidebar/plugin-sidebar/index.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js @@ -83,7 +83,7 @@ export default function PluginSidebarEditSite( { className, ...props } ) { return ( {
  • - - - { canvasMode === 'edit' && ( - - - - ) } - - - - ); -} diff --git a/packages/edit-site/src/new/header/style.scss b/packages/edit-site/src/new/header/style.scss deleted file mode 100644 index c5794120f1ef7..0000000000000 --- a/packages/edit-site/src/new/header/style.scss +++ /dev/null @@ -1,3 +0,0 @@ -.edit-site-new-header__toggle { - min-height: 60px; -} diff --git a/packages/edit-site/src/new/sidebar/index.js b/packages/edit-site/src/new/sidebar/index.js deleted file mode 100644 index 5813e23f18c94..0000000000000 --- a/packages/edit-site/src/new/sidebar/index.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * WordPress dependencies - */ -import { __experimentalVStack as VStack } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import SiteIconAndTitle from '../site-icon-and-title'; -import SidebarNavigation from '../sidebar-navigation'; - -export function Sidebar() { - return ( - - - - - ); -} diff --git a/packages/edit-site/src/new/style.scss b/packages/edit-site/src/new/style.scss deleted file mode 100644 index e1fd3e60c15b4..0000000000000 --- a/packages/edit-site/src/new/style.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "./layout/style.scss"; -@import "./canvas/style.scss"; -@import "./header/style.scss"; -@import "./site-icon-and-title/style.scss"; -@import "./navigation-inspector/style.scss"; diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 7662abd924438..8b92eb29645a4 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -3,19 +3,24 @@ @import "./components/block-editor/style.scss"; @import "./components/code-editor/style.scss"; @import "./components/global-styles/style.scss"; -@import "./components/header/style.scss"; -@import "./components/header/document-actions/style.scss"; +@import "./components/header-edit-mode/style.scss"; +@import "./components/header-edit-mode/document-actions/style.scss"; @import "./components/list/style.scss"; @import "./components/add-new-template/style.scss"; -@import "./components/sidebar/style.scss"; -@import "./components/sidebar/settings-header/style.scss"; -@import "./components/sidebar/template-card/style.scss"; +@import "./components/sidebar-edit-mode/style.scss"; +@import "./components/sidebar-edit-mode/settings-header/style.scss"; +@import "./components/sidebar-edit-mode/template-card/style.scss"; @import "./components/template-details/style.scss"; @import "./components/create-template-part-modal/style.scss"; @import "./components/secondary-sidebar/style.scss"; @import "./components/welcome-guide/style.scss"; @import "./components/keyboard-shortcut-help-modal/style.scss"; -@import "./new/style.scss"; +@import "./components/layout/style.scss"; +@import "./components/canvas/style.scss"; +@import "./components/header/style.scss"; +@import "./components/site-icon-and-title/style.scss"; +@import "./components/navigation-inspector/style.scss"; + // In order to use mix-blend-mode, this element needs to have an explicitly set background-color. // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations.