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 cd7720a1a34f9..8b2a822c44703 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,15 +1,11 @@ /** * 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, + store as editorStore, } from '@wordpress/editor'; /** @@ -19,11 +15,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 +23,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" - /> - ) } - + /> ); } 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 3414a2c95ea31..39c5c927a24a8 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 { diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js index d78ef020fe232..961936d4b1542 100644 --- a/packages/editor/src/components/preview-dropdown/index.js +++ b/packages/editor/src/components/preview-dropdown/index.js @@ -14,7 +14,7 @@ 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'; - +import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies */ @@ -22,22 +22,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 = { @@ -74,24 +87,55 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { <> setDeviceType( 'Desktop' ) } + onClick={ () => { + setDeviceType( 'Desktop' ); + __unstableSetEditorMode( 'edit' ); + } } icon={ deviceType === 'Desktop' && 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 && ( + + { + __unstableSetEditorMode( 'edit' ); + } } + icon={ ! isZoomedOutView && check } + > + { __( 'Zoom to 100%' ) } + + { + setDeviceType( 'Desktop' ); + __unstableSetEditorMode( 'zoom-out' ); + } } + icon={ isZoomedOutView && check } + disabled={ deviceType !== 'Desktop' } + > + { __( 'Zoom to 50%' ) } + + + ) } { isTemplate && (