From d0dca3bee4b6efd2f79b1bd892905b301b9669ac Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 22 Dec 2022 09:45:44 +0100 Subject: [PATCH 1/5] Resize the edit button --- packages/edit-site/src/components/layout/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 8884ab56a07cce..53c9ce98935ac6 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -55,6 +55,10 @@ $hub-height: $grid-unit-20 * 2 + $button-size; .components-button { height: $grid-unit-40; } + + .components-button { + height: $grid-unit-40; + } } .edit-site-layout__header { From 946cce3ab6a529c4b4c6d35192316e1ecbb92f5a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 22 Dec 2022 11:34:22 +0100 Subject: [PATCH 2/5] Add the template title and type to the site hub --- .../components/edited-entity-title/index.js | 37 +++++ .../document-actions/index.js | 55 +++---- .../edit-site/src/components/layout/index.js | 93 ++---------- .../src/components/layout/style.scss | 13 -- .../src/components/site-hub/index.js | 142 ++++++++++++++++++ .../src/components/site-hub/style.scss | 14 ++ packages/edit-site/src/style.scss | 1 + 7 files changed, 225 insertions(+), 130 deletions(-) create mode 100644 packages/edit-site/src/components/edited-entity-title/index.js create mode 100644 packages/edit-site/src/components/site-hub/index.js create mode 100644 packages/edit-site/src/components/site-hub/style.scss diff --git a/packages/edit-site/src/components/edited-entity-title/index.js b/packages/edit-site/src/components/edited-entity-title/index.js new file mode 100644 index 00000000000000..5d72877095782e --- /dev/null +++ b/packages/edit-site/src/components/edited-entity-title/index.js @@ -0,0 +1,37 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; +import { store as editorStore } from '@wordpress/editor'; +import { decodeEntities } from '@wordpress/html-entities'; + +/** + * Internal dependencies + */ +import { store as editSiteStore } from '../../store'; + +export default function useEditedEntityRecord() { + const { record, title, isLoaded } = useSelect( ( select ) => { + const { getEditedPostType, getEditedPostId } = select( editSiteStore ); + const { getEditedEntityRecord } = select( coreStore ); + const { __experimentalGetTemplateInfo: getTemplateInfo } = + select( editorStore ); + const postType = getEditedPostType(); + const postId = getEditedPostId(); + const _record = getEditedEntityRecord( 'postType', postType, postId ); + const _isLoaded = !! postId; + + return { + record: _record, + title: getTemplateInfo( _record ).title, + isLoaded: _isLoaded, + }; + }, [] ); + + return { + isLoaded, + record, + getTitle: () => ( title ? decodeEntities( title ) : null ), + }; +} diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js index b829e19f01342a..1ceba9cc4e0cd1 100644 --- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js +++ b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js @@ -25,16 +25,13 @@ import { useBlockDisplayInformation, BlockIcon, } from '@wordpress/block-editor'; -import { store as coreStore } from '@wordpress/core-data'; -import { store as editorStore } from '@wordpress/editor'; import { store as preferencesStore } from '@wordpress/preferences'; -import { decodeEntities } from '@wordpress/html-entities'; /** * Internal dependencies */ import TemplateDetails from '../../template-details'; -import { store as editSiteStore } from '../../../store'; +import useEditedEntityRecord from '../../edited-entity-title'; function getBlockDisplayText( block ) { if ( block ) { @@ -70,36 +67,15 @@ function useSecondaryText() { } export default function DocumentActions() { - const { showIconLabels, entityTitle, template, templateType, isLoaded } = - useSelect( ( select ) => { - const { getEditedPostType, getEditedPostId } = - select( editSiteStore ); - const { getEditedEntityRecord } = select( coreStore ); - const { __experimentalGetTemplateInfo: getTemplateInfo } = - select( editorStore ); - const postType = getEditedPostType(); - const postId = getEditedPostId(); - const record = getEditedEntityRecord( - 'postType', - postType, - postId - ); - const _isLoaded = !! postId; - - return { - showIconLabels: select( preferencesStore ).get( - 'core/edit-site', - 'showIconLabels' - ), - entityTitle: getTemplateInfo( record ).title, - isLoaded: _isLoaded, - template: record, - templateType: postType, - }; - }, [] ); - - const entityLabel = - templateType === 'wp_template_part' ? 'template part' : 'template'; + const showIconLabels = useSelect( + ( select ) => + select( preferencesStore ).get( + 'core/edit-site', + 'showIconLabels' + ), + [] + ); + const { isLoaded, record, getTitle } = useEditedEntityRecord(); const { label, icon } = useSecondaryText(); // Use internal state instead of a ref to make sure that the component @@ -126,7 +102,7 @@ export default function DocumentActions() { } // Return feedback that the template does not seem to exist. - if ( ! entityTitle ) { + if ( ! record ) { return (
{ __( 'Template not found' ) } @@ -134,6 +110,11 @@ export default function DocumentActions() { ); } + const entityLabel = + record.type === 'wp_template_part' + ? __( 'template part' ) + : __( 'template' ); + return (
- { decodeEntities( entityTitle ) } + { getTitle() }
@@ -186,7 +167,7 @@ export default function DocumentActions() { contentClassName="edit-site-document-actions__info-dropdown" renderContent={ ( { onClose } ) => ( ) } diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index f8fe55873526bd..0868e08bae289c 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -6,9 +6,8 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { - Button, __unstableMotion as motion, __unstableAnimatePresence as AnimatePresence, __unstableUseNavigateRegions as useNavigateRegions, @@ -19,7 +18,6 @@ import { useResizeObserver, } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; -import { store as blockEditorStore } from '@wordpress/block-editor'; import { useState, useEffect } from '@wordpress/element'; import { NavigableRegion } from '@wordpress/interface'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; @@ -35,11 +33,10 @@ import { store as editSiteStore } from '../../store'; import { useLocation } from '../routes'; import getIsListPage from '../../utils/get-is-list-page'; import Header from '../header-edit-mode'; -import SiteIcon from '../site-icon'; import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url'; +import SiteHub from '../site-hub'; const ANIMATION_DURATION = 0.5; -const HUB_ANIMATION_DURATION = 0.3; export default function Layout( { onError } ) { // This ensures the edited entity id and type are initialized properly. @@ -48,16 +45,14 @@ export default function Layout( { onError } ) { const { params } = useLocation(); const isListPage = getIsListPage( params ); const isEditorPage = ! isListPage; - const { canvasMode, dashboardLink, previousShortcut, nextShortcut } = - useSelect( ( select ) => { + const { canvasMode, previousShortcut, nextShortcut } = useSelect( + ( select ) => { const { getAllShortcutKeyCombinations } = select( keyboardShortcutsStore ); - const { __unstableGetCanvasMode, getSettings } = - select( editSiteStore ); + const { __unstableGetCanvasMode } = select( editSiteStore ); return { canvasMode: __unstableGetCanvasMode(), - dashboardLink: getSettings().__experimentalDashboardLink, previousShortcut: getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ), @@ -65,13 +60,13 @@ export default function Layout( { onError } ) { 'core/edit-site/next-region' ), }; - }, [] ); + }, + [] + ); const navigateRegionsProps = useNavigateRegions( { previous: previousShortcut, next: nextShortcut, } ); - const { __unstableSetCanvasMode } = useDispatch( editSiteStore ); - const { clearSelectedBlock } = useDispatch( blockEditorStore ); const disableMotion = useReducedMotion(); const isMobileViewport = useViewportMatch( 'medium', '<' ); const [ isMobileCanvasVisible, setIsMobileCanvasVisible ] = @@ -84,12 +79,7 @@ export default function Layout( { onError } ) { ( isMobileViewport && isMobileCanvasVisible ) || ! isMobileViewport; const showFrame = ! isEditorPage || ( canvasMode === 'view' && ! isMobileViewport ); - const showEditButton = - ( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) || - ( isMobileViewport && canvasMode === 'view' && isMobileCanvasVisible ); - const isBackToDashboardButton = - ( ! isMobileViewport && canvasMode === 'view' ) || - ( isMobileViewport && ! isMobileCanvasVisible ); + const isFullCanvas = ( isEditorPage && canvasMode === 'edit' && ! isMobileViewport ) || isMobileCanvasVisible; @@ -105,19 +95,6 @@ export default function Layout( { onError } ) { setIsMobileCanvasVisible( true ); } }, [ canvasMode, isMobileViewport ] ); - const siteIconButtonProps = isBackToDashboardButton - ? { - href: dashboardLink || 'index.php', - 'aria-label': __( 'Go back to the dashboard' ), - } - : { - label: __( 'Open Navigation Sidebar' ), - onClick: () => { - clearSelectedBlock(); - setIsMobileCanvasVisible( false ); - __unstableSetCanvasMode( 'view' ); - }, - }; return ( <> @@ -134,55 +111,11 @@ export default function Layout( { onError } ) { } ) } > - - - - - { showEditButton && ( - - ) } - - { isMobileViewport && ! isMobileCanvasVisible && ( - - ) } - + isMobileCanvasVisible={ isMobileCanvasVisible } + setIsMobileCanvasVisible={ setIsMobileCanvasVisible } + /> { isEditorPage && diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 53c9ce98935ac6..55277141a472f4 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -22,11 +22,6 @@ $hub-height: $grid-unit-20 * 2 + $button-size; border-radius: $radius-block-ui * 4; box-shadow: $shadow-modal; - display: flex; - align-items: center; - justify-content: space-between; - gap: $grid-unit-10; - .edit-site-layout.is-full-canvas & { top: 0; left: 0; @@ -51,14 +46,6 @@ $hub-height: $grid-unit-20 * 2 + $button-size; @include break-small { width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2}); } - - .components-button { - height: $grid-unit-40; - } - - .components-button { - height: $grid-unit-40; - } } .edit-site-layout__header { diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js new file mode 100644 index 00000000000000..10332138d03323 --- /dev/null +++ b/packages/edit-site/src/components/site-hub/index.js @@ -0,0 +1,142 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { useSelect, useDispatch } from '@wordpress/data'; +import { + Button, + __unstableMotion as motion, + __experimentalHStack as HStack, + __experimentalVStack as VStack, +} from '@wordpress/components'; +import { useReducedMotion, useViewportMatch } from '@wordpress/compose'; +import { __ } from '@wordpress/i18n'; +import { store as blockEditorStore } from '@wordpress/block-editor'; +import { store as coreStore } from '@wordpress/core-data'; + +/** + * Internal dependencies + */ +import { store as editSiteStore } from '../../store'; +import { useLocation } from '../routes'; +import getIsListPage from '../../utils/get-is-list-page'; +import SiteIcon from '../site-icon'; +import useEditedEntityRecord from '../edited-entity-title'; + +const HUB_ANIMATION_DURATION = 0.3; + +function SiteHub( { + className, + isMobileCanvasVisible, + setIsMobileCanvasVisible, +} ) { + const { params } = useLocation(); + const isListPage = getIsListPage( params ); + const isEditorPage = ! isListPage; + const { canvasMode, dashboardLink, entityConfig } = useSelect( + ( select ) => { + select( editSiteStore ).getEditedPostType(); + const { __unstableGetCanvasMode, getSettings, getEditedPostType } = + select( editSiteStore ); + return { + canvasMode: __unstableGetCanvasMode(), + dashboardLink: getSettings().__experimentalDashboardLink, + entityConfig: select( coreStore ).getEntityConfig( + 'postType', + getEditedPostType() + ), + }; + }, + [] + ); + const disableMotion = useReducedMotion(); + const isMobileViewport = useViewportMatch( 'medium', '<' ); + const { __unstableSetCanvasMode } = useDispatch( editSiteStore ); + const { clearSelectedBlock } = useDispatch( blockEditorStore ); + const showEditButton = + ( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) || + ( isMobileViewport && canvasMode === 'view' && isMobileCanvasVisible ); + const isBackToDashboardButton = + ( ! isMobileViewport && canvasMode === 'view' ) || + ( isMobileViewport && ! isMobileCanvasVisible ); + const siteIconButtonProps = isBackToDashboardButton + ? { + href: dashboardLink || 'index.php', + 'aria-label': __( 'Go back to the dashboard' ), + } + : { + label: __( 'Open Navigation Sidebar' ), + onClick: () => { + clearSelectedBlock(); + setIsMobileCanvasVisible( false ); + __unstableSetCanvasMode( 'view' ); + }, + }; + const { getTitle } = useEditedEntityRecord(); + + return ( + + + + + + + +
{ getTitle() }
+
+ { entityConfig?.label } +
+ + + + { showEditButton && ( + + ) } + + { isMobileViewport && ! isMobileCanvasVisible && ( + + ) } + + ); +} + +export default SiteHub; diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss new file mode 100644 index 00000000000000..06bf1a1770256a --- /dev/null +++ b/packages/edit-site/src/components/site-hub/style.scss @@ -0,0 +1,14 @@ +.edit-site-site-hub { + display: flex; + align-items: center; + justify-content: space-between; + gap: $grid-unit-10; +} + +.edit-site-site-hub__edit-button { + height: $grid-unit-40; +} + +.edit-site-site-hub__post-type { + opacity: 0.6; +} diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 8b37e2314e237f..b98f6b817e368c 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -22,6 +22,7 @@ @import "./components/sidebar-navigation-item/style.scss"; @import "./components/sidebar-navigation-screen/style.scss"; @import "./components/sidebar-navigation-screen-templates/style.scss"; +@import "./components/site-hub/style.scss"; @import "./components/site-icon/style.scss"; @import "./components/style-book/style.scss"; @import "./hooks/push-changes-to-global-styles/style.scss"; From 665595d60b4b5d13f720b0e2599fbda5182d9421 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 22 Dec 2022 12:04:36 +0100 Subject: [PATCH 3/5] Address review --- .../document-actions/index.js | 2 +- .../src/components/layout/style.scss | 4 --- .../src/components/site-hub/index.js | 26 ++++++++++++------- .../src/components/site-hub/style.scss | 17 ++++++++++++ .../index.js | 0 5 files changed, 35 insertions(+), 14 deletions(-) rename packages/edit-site/src/components/{edited-entity-title => use-edited-entity-record}/index.js (100%) diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js index 1ceba9cc4e0cd1..30acc5fe04d443 100644 --- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js +++ b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js @@ -31,7 +31,7 @@ import { store as preferencesStore } from '@wordpress/preferences'; * Internal dependencies */ import TemplateDetails from '../../template-details'; -import useEditedEntityRecord from '../../edited-entity-title'; +import useEditedEntityRecord from '../../use-edited-entity-record'; function getBlockDisplayText( block ) { if ( block ) { diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 55277141a472f4..3d4b4e1913eb05 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -135,10 +135,6 @@ $hub-height: $grid-unit-20 * 2 + $button-size; min-height: 100% !important; } -.edit-site-layout__view-mode-toggle-container { - height: $header-height; - width: $header-height; -} .edit-site-layout__view-mode-toggle.components-button { position: relative; color: $white; diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js index 10332138d03323..6f6112985d598b 100644 --- a/packages/edit-site/src/components/site-hub/index.js +++ b/packages/edit-site/src/components/site-hub/index.js @@ -25,7 +25,7 @@ import { store as editSiteStore } from '../../store'; import { useLocation } from '../routes'; import getIsListPage from '../../utils/get-is-list-page'; import SiteIcon from '../site-icon'; -import useEditedEntityRecord from '../edited-entity-title'; +import useEditedEntityRecord from '../use-edited-entity-record'; const HUB_ANIMATION_DURATION = 0.3; @@ -63,6 +63,7 @@ function SiteHub( { const isBackToDashboardButton = ( ! isMobileViewport && canvasMode === 'view' ) || ( isMobileViewport && ! isMobileCanvasVisible ); + const showLabels = canvasMode !== 'edit'; const siteIconButtonProps = isBackToDashboardButton ? { href: dashboardLink || 'index.php', @@ -88,9 +89,12 @@ function SiteHub( { ease: 'easeOut', } } > - + - -
{ getTitle() }
-
- { entityConfig?.label } -
- + { showLabels && ( + +
+ { getTitle() } +
+
+ { entityConfig?.label } +
+ + ) } { showEditButton && ( diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss index 06bf1a1770256a..51bb78a75a1d3f 100644 --- a/packages/edit-site/src/components/site-hub/style.scss +++ b/packages/edit-site/src/components/site-hub/style.scss @@ -12,3 +12,20 @@ .edit-site-site-hub__post-type { opacity: 0.6; } + +.edit-site-site-hub__view-mode-toggle-container { + height: $header-height; + width: $header-height; + flex-shrink: 0; +} + +.edit-site-site-hub__text-content { + // Necessary for the ellipsis to work. + overflow: hidden; +} + +.edit-site-site-hub__title { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} diff --git a/packages/edit-site/src/components/edited-entity-title/index.js b/packages/edit-site/src/components/use-edited-entity-record/index.js similarity index 100% rename from packages/edit-site/src/components/edited-entity-title/index.js rename to packages/edit-site/src/components/use-edited-entity-record/index.js From 3477451e82d034e0d347f870ca060338333f3982 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 23 Dec 2022 14:59:30 +0100 Subject: [PATCH 4/5] Fix CSS breakpoint --- packages/edit-site/src/components/layout/style.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 3d4b4e1913eb05..24bb0b77688e71 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -32,7 +32,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size; width: 100vw; box-shadow: none; - @include break-small { + @include break-medium { width: auto; padding-right: 0; } @@ -43,7 +43,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size; padding-right: 0; } - @include break-small { + @include break-medium { width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2}); } } @@ -74,7 +74,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size; width: 100vw; @include custom-scrollbars-on-hover; - @include break-small { + @include break-medium { width: $nav-sidebar-width; } @@ -105,7 +105,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size; color: $gray-900; background: $white; } - @include break-small { + @include break-medium { top: $canvas-padding; bottom: $canvas-padding; width: calc(100% - #{$canvas-padding}); From 9d1bdbf88f506c7cff0c457b146df793aea79016 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 23 Dec 2022 15:05:59 +0100 Subject: [PATCH 5/5] Fix e2e tests --- .../src/site-editor/toggle-canvas-mode.js | 2 +- packages/e2e-test-utils/src/site-editor.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js b/packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js index c30a7b09ded992..01340eb085d889 100644 --- a/packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js +++ b/packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js @@ -4,5 +4,5 @@ * @this {import('.').SiteEditor} */ export async function enterEditMode() { - await this.page.click( '.edit-site-layout__edit-button' ); + await this.page.click( '.edit-site-site-hub__edit-button' ); } diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js index 674152746fa9bf..425931ccf9cbca 100644 --- a/packages/e2e-test-utils/src/site-editor.js +++ b/packages/e2e-test-utils/src/site-editor.js @@ -166,11 +166,11 @@ export async function openPreviousGlobalStylesPanel() { * Enters edit mode. */ export async function enterEditMode() { - const editSiteToggle = await page.$( '.edit-site-layout__edit-button' ); + const editSiteToggle = await page.$( '.edit-site-site-hub__edit-button' ); // This check is necessary for the performance tests in old branches // where the site editor toggle was not implemented yet. if ( ! editSiteToggle ) { return; } - await page.click( '.edit-site-layout__edit-button' ); + await page.click( '.edit-site-site-hub__edit-button' ); }