From 2086a8af4ca0bc0df72801149d4399c25b4fe159 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 24 Jan 2024 09:17:21 -0500 Subject: [PATCH 01/11] Stop hiding icon when zoomed out --- .../edit-site/src/components/header-edit-mode/style.scss | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss index 3414a2c95ea312..39c5c927a24a8d 100644 --- a/packages/edit-site/src/components/header-edit-mode/style.scss +++ b/packages/edit-site/src/components/header-edit-mode/style.scss @@ -107,15 +107,6 @@ gap: $grid-unit-10; } -.edit-site-header-edit-mode__preview-options { - opacity: 1; - transition: opacity 0.3s; - - &.is-zoomed-out { - opacity: 0; - } -} - // Button text label styles .edit-site-header-edit-mode.show-icon-labels { From 38a86cf691ecafb5a22bbdf8d61fe84f00cae0d2 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 24 Jan 2024 09:17:52 -0500 Subject: [PATCH 02/11] Move zoom out to the preview dropdown --- .../src/components/preview-dropdown/index.js | 83 ++++++++++++++----- 1 file changed, 64 insertions(+), 19 deletions(-) diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js index d78ef020fe232f..aa04122482707d 100644 --- a/packages/editor/src/components/preview-dropdown/index.js +++ b/packages/editor/src/components/preview-dropdown/index.js @@ -10,11 +10,18 @@ import { Icon, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { check, desktop, mobile, tablet, external } from '@wordpress/icons'; +import { + check, + desktop, + mobile, + tablet, + external, + chevronUpDown, +} from '@wordpress/icons'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { store as preferencesStore } from '@wordpress/preferences'; - +import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies */ @@ -22,22 +29,35 @@ import { store as editorStore } from '../../store'; import PostPreviewButton from '../post-preview-button'; export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { - const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } = - useSelect( ( select ) => { - const { getDeviceType, getCurrentPostType } = select( editorStore ); - const { getUnstableBase, getPostType } = select( coreStore ); - const { get } = select( preferencesStore ); - const _currentPostType = getCurrentPostType(); - return { - deviceType: getDeviceType(), - homeUrl: getUnstableBase()?.home, - isTemplate: _currentPostType === 'wp_template', - isViewable: getPostType( _currentPostType )?.viewable ?? false, - showIconLabels: get( 'core', 'showIconLabels' ), - }; - }, [] ); + const { + deviceType, + homeUrl, + isTemplate, + isViewable, + showIconLabels, + blockEditorMode, + } = useSelect( ( select ) => { + const { __unstableGetEditorMode } = select( blockEditorStore ); + const { getDeviceType, getCurrentPostType } = select( editorStore ); + const { getUnstableBase, getPostType } = select( coreStore ); + const { get } = select( preferencesStore ); + const _currentPostType = getCurrentPostType(); + return { + blockEditorMode: __unstableGetEditorMode(), + deviceType: getDeviceType(), + homeUrl: getUnstableBase()?.home, + isTemplate: _currentPostType === 'wp_template', + isViewable: getPostType( _currentPostType )?.viewable ?? false, + showIconLabels: get( 'core', 'showIconLabels' ), + }; + }, [] ); const { setDeviceType } = useDispatch( editorStore ); + const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); + const isZoomedOutViewExperimentEnabled = + window?.__experimentalEnableZoomedOutView; + const isZoomedOutView = blockEditorMode === 'zoom-out'; const isMobile = useViewportMatch( 'medium', '<' ); + if ( isMobile ) return null; const popoverProps = { @@ -75,23 +95,48 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { setDeviceType( 'Desktop' ) } - icon={ deviceType === 'Desktop' && check } + icon={ + deviceType === 'Desktop' && + ! isZoomedOutView && + check + } > { __( 'Desktop' ) } setDeviceType( 'Tablet' ) } + onClick={ () => { + setDeviceType( 'Tablet' ); + __unstableSetEditorMode( 'edit' ); + } } icon={ deviceType === 'Tablet' && check } > { __( 'Tablet' ) } setDeviceType( 'Mobile' ) } + onClick={ () => { + setDeviceType( 'Mobile' ); + __unstableSetEditorMode( 'edit' ); + } } icon={ deviceType === 'Mobile' && check } > { __( 'Mobile' ) } + { isZoomedOutViewExperimentEnabled && ( + + { + setDeviceType( 'Desktop' ); + __unstableSetEditorMode( + isZoomedOutView ? 'edit' : 'zoom-out' + ); + } } + icon={ isZoomedOutView ? check : chevronUpDown } + > + { __( 'Zoom out' ) } + + + ) } { isTemplate && ( Date: Wed, 24 Jan 2024 09:20:12 -0500 Subject: [PATCH 03/11] Remove existing control from document tools --- .../header-edit-mode/document-tools/index.js | 46 ++----------------- 1 file changed, 4 insertions(+), 42 deletions(-) diff --git a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js index cd7720a1a34f97..d076b330667cf2 100644 --- a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js +++ b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js @@ -1,16 +1,9 @@ /** * WordPress dependencies */ -import { useViewportMatch } from '@wordpress/compose'; -import { store as blockEditorStore } from '@wordpress/block-editor'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -import { chevronUpDown } from '@wordpress/icons'; -import { Button, ToolbarItem } from '@wordpress/components'; -import { - store as editorStore, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; /** * Internal dependencies @@ -19,11 +12,7 @@ import { unlock } from '../../../lock-unlock'; const { DocumentTools: EditorDocumentTools } = unlock( editorPrivateApis ); -export default function DocumentTools( { - blockEditorMode, - hasFixedToolbar, - isDistractionFree, -} ) { +export default function DocumentTools() { const { isVisualMode } = useSelect( ( select ) => { const { getEditorMode } = select( editorStore ); @@ -31,38 +20,11 @@ export default function DocumentTools( { isVisualMode: getEditorMode() === 'visual', }; }, [] ); - const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); - const { setDeviceType } = useDispatch( editorStore ); - const isLargeViewport = useViewportMatch( 'medium' ); - const isZoomedOutViewExperimentEnabled = - window?.__experimentalEnableZoomedOutView && isVisualMode; - const isZoomedOutView = blockEditorMode === 'zoom-out'; return ( - { isZoomedOutViewExperimentEnabled && - isLargeViewport && - ! isDistractionFree && - ! hasFixedToolbar && ( - { - setDeviceType( 'Desktop' ); - __unstableSetEditorMode( - isZoomedOutView ? 'edit' : 'zoom-out' - ); - } } - size="compact" - /> - ) } - + /> ); } From 1ca9cd00b169d0e3dbe3c38a29171473cc9a82de Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 24 Jan 2024 10:22:57 -0500 Subject: [PATCH 04/11] Logic and display tweak --- .../src/components/preview-dropdown/index.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js index aa04122482707d..529960b47477cc 100644 --- a/packages/editor/src/components/preview-dropdown/index.js +++ b/packages/editor/src/components/preview-dropdown/index.js @@ -86,7 +86,11 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { popoverProps={ popoverProps } toggleProps={ toggleProps } menuProps={ menuProps } - icon={ deviceIcons[ deviceType.toLowerCase() ] } + icon={ + isZoomedOutView + ? chevronUpDown + : deviceIcons[ deviceType.toLowerCase() ] + } label={ __( 'View' ) } disableOpenOnArrowDown={ disabled } > @@ -94,7 +98,10 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { <> setDeviceType( 'Desktop' ) } + onClick={ () => { + setDeviceType( 'Desktop' ); + __unstableSetEditorMode( 'edit' ); + } } icon={ deviceType === 'Desktop' && ! isZoomedOutView && @@ -131,9 +138,9 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { isZoomedOutView ? 'edit' : 'zoom-out' ); } } - icon={ isZoomedOutView ? check : chevronUpDown } + icon={ isZoomedOutView && check } > - { __( 'Zoom out' ) } + { __( 'Zoom to 50%' ) } ) } From bd345a7ff987126457e9cabe4c849a850522d664 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 24 Jan 2024 10:23:21 -0500 Subject: [PATCH 05/11] Use 50% for zoom out scale --- packages/edit-site/src/components/block-editor/editor-canvas.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js index acb136d226f02a..81cae19113f723 100644 --- a/packages/edit-site/src/components/block-editor/editor-canvas.js +++ b/packages/edit-site/src/components/block-editor/editor-canvas.js @@ -158,6 +158,7 @@ function EditorCanvas( { renderAppender={ showBlockAppender } styles={ styles } iframeProps={ { + expand: isZoomOutMode, scale, frameSize, className: classnames( From f3839ed550569750cf20e90810d1ad05e0fdeb45 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 29 Jan 2024 13:12:31 -0500 Subject: [PATCH 06/11] try stacking with device previews --- .../src/components/preview-dropdown/index.js | 34 +++++++------------ 1 file changed, 12 insertions(+), 22 deletions(-) diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js index 529960b47477cc..897362dd9cf5f6 100644 --- a/packages/editor/src/components/preview-dropdown/index.js +++ b/packages/editor/src/components/preview-dropdown/index.js @@ -10,14 +10,7 @@ import { Icon, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { - check, - desktop, - mobile, - tablet, - external, - chevronUpDown, -} from '@wordpress/icons'; +import { check, desktop, mobile, tablet, external } from '@wordpress/icons'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -86,11 +79,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { popoverProps={ popoverProps } toggleProps={ toggleProps } menuProps={ menuProps } - icon={ - isZoomedOutView - ? chevronUpDown - : deviceIcons[ deviceType.toLowerCase() ] - } + icon={ deviceIcons[ deviceType.toLowerCase() ] } label={ __( 'View' ) } disableOpenOnArrowDown={ disabled } > @@ -102,11 +91,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { setDeviceType( 'Desktop' ); __unstableSetEditorMode( 'edit' ); } } - icon={ - deviceType === 'Desktop' && - ! isZoomedOutView && - check - } + icon={ deviceType === 'Desktop' && check } > { __( 'Desktop' ) } @@ -133,10 +118,15 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { { - setDeviceType( 'Desktop' ); - __unstableSetEditorMode( - isZoomedOutView ? 'edit' : 'zoom-out' - ); + __unstableSetEditorMode( 'edit' ); + } } + icon={ ! isZoomedOutView && check } + > + { __( 'Zoom to 100%' ) } + + { + __unstableSetEditorMode( 'zoom-out' ); } } icon={ isZoomedOutView && check } > From 9ab160fc6e56b939108647df4f5faf2b650da71d Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 8 Feb 2024 13:38:48 -0500 Subject: [PATCH 07/11] Revert "try stacking with device previews" This reverts commit 8b8f2fb4d501687f0d36ca9c6f47d90cc98b60bf. --- .../src/components/preview-dropdown/index.js | 34 ++++++++++++------- 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js index 897362dd9cf5f6..529960b47477cc 100644 --- a/packages/editor/src/components/preview-dropdown/index.js +++ b/packages/editor/src/components/preview-dropdown/index.js @@ -10,7 +10,14 @@ import { Icon, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { check, desktop, mobile, tablet, external } from '@wordpress/icons'; +import { + check, + desktop, + mobile, + tablet, + external, + chevronUpDown, +} from '@wordpress/icons'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -79,7 +86,11 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { popoverProps={ popoverProps } toggleProps={ toggleProps } menuProps={ menuProps } - icon={ deviceIcons[ deviceType.toLowerCase() ] } + icon={ + isZoomedOutView + ? chevronUpDown + : deviceIcons[ deviceType.toLowerCase() ] + } label={ __( 'View' ) } disableOpenOnArrowDown={ disabled } > @@ -91,7 +102,11 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { setDeviceType( 'Desktop' ); __unstableSetEditorMode( 'edit' ); } } - icon={ deviceType === 'Desktop' && check } + icon={ + deviceType === 'Desktop' && + ! isZoomedOutView && + check + } > { __( 'Desktop' ) } @@ -118,15 +133,10 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { { - __unstableSetEditorMode( 'edit' ); - } } - icon={ ! isZoomedOutView && check } - > - { __( 'Zoom to 100%' ) } - - { - __unstableSetEditorMode( 'zoom-out' ); + setDeviceType( 'Desktop' ); + __unstableSetEditorMode( + isZoomedOutView ? 'edit' : 'zoom-out' + ); } } icon={ isZoomedOutView && check } > From b4079568d00933ef3294d361866be969e797dbe1 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 8 Feb 2024 13:49:45 -0500 Subject: [PATCH 08/11] Add 100% control, adjust logic --- .../src/components/preview-dropdown/index.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js index 529960b47477cc..e066afe1782de9 100644 --- a/packages/editor/src/components/preview-dropdown/index.js +++ b/packages/editor/src/components/preview-dropdown/index.js @@ -102,11 +102,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { setDeviceType( 'Desktop' ); __unstableSetEditorMode( 'edit' ); } } - icon={ - deviceType === 'Desktop' && - ! isZoomedOutView && - check - } + icon={ deviceType === 'Desktop' && check } > { __( 'Desktop' ) } @@ -134,9 +130,16 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { { setDeviceType( 'Desktop' ); - __unstableSetEditorMode( - isZoomedOutView ? 'edit' : 'zoom-out' - ); + __unstableSetEditorMode( 'edit' ); + } } + icon={ ! isZoomedOutView && check } + > + { __( 'Zoom to 100%' ) } + + { + setDeviceType( 'Desktop' ); + __unstableSetEditorMode( 'zoom-out' ); } } icon={ isZoomedOutView && check } > From 214ee29451a3e4b64fabe84a78a5caa91552e8d7 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 8 Feb 2024 13:59:05 -0500 Subject: [PATCH 09/11] Try disabling 50% when its not possible --- .../src/components/preview-dropdown/index.js | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js index e066afe1782de9..961936d4b15420 100644 --- a/packages/editor/src/components/preview-dropdown/index.js +++ b/packages/editor/src/components/preview-dropdown/index.js @@ -10,14 +10,7 @@ import { Icon, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { - check, - desktop, - mobile, - tablet, - external, - chevronUpDown, -} from '@wordpress/icons'; +import { check, desktop, mobile, tablet, external } from '@wordpress/icons'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -86,11 +79,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { popoverProps={ popoverProps } toggleProps={ toggleProps } menuProps={ menuProps } - icon={ - isZoomedOutView - ? chevronUpDown - : deviceIcons[ deviceType.toLowerCase() ] - } + icon={ deviceIcons[ deviceType.toLowerCase() ] } label={ __( 'View' ) } disableOpenOnArrowDown={ disabled } > @@ -129,7 +118,6 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { { - setDeviceType( 'Desktop' ); __unstableSetEditorMode( 'edit' ); } } icon={ ! isZoomedOutView && check } @@ -142,6 +130,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { __unstableSetEditorMode( 'zoom-out' ); } } icon={ isZoomedOutView && check } + disabled={ deviceType !== 'Desktop' } > { __( 'Zoom to 50%' ) } From b23f43d8e7893906d2d7b02fb3645911943bf6eb Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 21 Feb 2024 12:35:06 +0100 Subject: [PATCH 10/11] Fix missing store --- .../src/components/header-edit-mode/document-tools/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js index d076b330667cf2..8b2a822c447035 100644 --- a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js +++ b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js @@ -3,7 +3,10 @@ */ import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -import { privateApis as editorPrivateApis } from '@wordpress/editor'; +import { + privateApis as editorPrivateApis, + store as editorStore, +} from '@wordpress/editor'; /** * Internal dependencies From cfe99a5d665531420923420e6a2f14c8baa398e2 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 23 Apr 2024 15:04:22 +0100 Subject: [PATCH 11/11] fix rebase --- packages/edit-site/src/components/block-editor/editor-canvas.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js index 81cae19113f723..acb136d226f02a 100644 --- a/packages/edit-site/src/components/block-editor/editor-canvas.js +++ b/packages/edit-site/src/components/block-editor/editor-canvas.js @@ -158,7 +158,6 @@ function EditorCanvas( { renderAppender={ showBlockAppender } styles={ styles } iframeProps={ { - expand: isZoomOutMode, scale, frameSize, className: classnames(