diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 63d64290cfa5c..7e3ae9c7a85f7 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -17,6 +17,7 @@ import { import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useDebouncedInput } from '@wordpress/compose'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -31,6 +32,7 @@ import InserterSearchResults from './search-results'; import useInsertionPoint from './hooks/use-insertion-point'; import InserterTabs from './tabs'; import { useZoomOut } from '../../hooks/use-zoom-out'; +import { store as blockEditorStore } from '../../store'; const NOOP = () => {}; function InserterMenu( @@ -48,6 +50,11 @@ function InserterMenu( }, ref ) { + const isZoomOutMode = useSelect( + ( select ) => + select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out', + [] + ); const [ filterValue, setFilterValue, delayedFilterValue ] = useDebouncedInput( __experimentalFilterValue ); const [ hoveredItem, setHoveredItem ] = useState( null ); @@ -289,6 +296,7 @@ function InserterMenu(
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 5e35180ae7c45..bf9d184b81843 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -700,12 +700,9 @@ $block-inserter-tabs-height: 44px; display: none; } -.is-zoom-out { - .block-editor-inserter__menu { - display: flex; - } - - .show-panel::after { +.block-editor-inserter__menu.is-zoom-out { + display: flex; + &.show-panel::after { // Makes space for the inserter flyout panel @include break-medium { content: ""; diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 65a9636a6ddb6..86c928ff15766 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -18,6 +18,7 @@ import { useViewportMatch } from '@wordpress/compose'; import { __unstableMotion as motion } from '@wordpress/components'; import { store as preferencesStore } from '@wordpress/preferences'; import { useState } from '@wordpress/element'; +import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -60,9 +61,11 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) { showIconLabels, hasHistory, hasFixedToolbar, + isZoomedOutView, } = useSelect( ( select ) => { const { get: getPreference } = select( preferencesStore ); const { getEditorMode } = select( editorStore ); + const { __unstableGetEditorMode } = select( blockEditorStore ); return { isTextEditor: getEditorMode() === 'text', @@ -74,6 +77,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) { select( editorStore ).isPublishSidebarOpened(), showIconLabels: getPreference( 'core', 'showIconLabels' ), hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ), + isZoomedOutView: __unstableGetEditorMode() === 'zoom-out', }; }, [] ); @@ -131,7 +135,10 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) { // when the publish sidebar has been closed. ) } - + { const { get } = select( preferencesStore ); const { getEditorSettings, getPostTypeLabel } = select( editorStore ); @@ -195,6 +196,8 @@ function Layout( { initialPost } ) { !! select( blockEditorStore ).getBlockSelectionStart(), hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord, hasBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ), + blockEditorMode: + select( blockEditorStore ).__unstableGetEditorMode(), }; }, [] ); @@ -342,6 +345,7 @@ function Layout( { initialPost } ) { ! isMobileViewport && showBlockBreadcrumbs && isRichEditingEnabled && + blockEditorMode !== 'zoom-out' && mode === 'visual' && (
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 56c6bb0404c2a..3bb50999c2a92 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -13,6 +13,7 @@ import { import { useMemo } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { store as blocksStore } from '@wordpress/blocks'; +import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -32,12 +33,13 @@ export default function VisualEditor( { styles } ) { isBlockBasedTheme, hasV3BlocksOnly, isEditingTemplate, + isZoomedOutView, } = useSelect( ( select ) => { const { isFeatureActive } = select( editPostStore ); const { getEditorSettings, getRenderingMode } = select( editorStore ); const { getBlockTypes } = select( blocksStore ); + const { __unstableGetEditorMode } = select( blockEditorStore ); const editorSettings = getEditorSettings(); - return { isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ), renderingMode: getRenderingMode(), @@ -47,6 +49,7 @@ export default function VisualEditor( { styles } ) { } ), isEditingTemplate: select( editorStore ).getCurrentPostType() === 'wp_template', + isZoomedOutView: __unstableGetEditorMode() === 'zoom-out', }; }, [] ); const hasMetaBoxes = useSelect( @@ -60,7 +63,11 @@ export default function VisualEditor( { styles } ) { // Add a constant padding for the typewritter effect. When typing at the // bottom, there needs to be room to scroll up. - if ( ! hasMetaBoxes && renderingMode === 'post-only' ) { + if ( + ! isZoomedOutView && + ! hasMetaBoxes && + renderingMode === 'post-only' + ) { paddingBottom = '40vh'; } 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 0c8b474e9a9c5..321749fa70c84 100644 --- a/packages/edit-site/src/components/block-editor/editor-canvas.js +++ b/packages/edit-site/src/components/block-editor/editor-canvas.js @@ -25,7 +25,6 @@ import { FOCUSABLE_ENTITIES, NAVIGATION_POST_TYPE, } from '../../utils/constants'; -import { computeIFrameScale } from '../../utils/math'; const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis ); @@ -41,11 +40,9 @@ function EditorCanvas( { isFocusMode, templateType, canvasMode, - isZoomOutMode, currentPostIsTrashed, } = useSelect( ( select ) => { - const { getBlockCount, __unstableGetEditorMode } = - select( blockEditorStore ); + const { getBlockCount } = select( blockEditorStore ); const { getEditedPostType, getCanvasMode } = unlock( select( editSiteStore ) ); @@ -54,7 +51,6 @@ function EditorCanvas( { return { templateType: _templateType, isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ), - isZoomOutMode: __unstableGetEditorMode() === 'zoom-out', canvasMode: getCanvasMode(), hasBlocks: !! getBlockCount(), currentPostIsTrashed: @@ -139,17 +135,6 @@ function EditorCanvas( { [ settings.styles, enableResizing, canvasMode, currentPostIsTrashed ] ); - const frameSize = isZoomOutMode ? 20 : undefined; - - const scale = isZoomOutMode - ? ( contentWidth ) => - computeIFrameScale( - { width: 1000, scale: 0.55 }, - { width: 400, scale: 0.9 }, - contentWidth - ) - : undefined; - return ( { - const { getEditorMode } = select( editorStore ); - - return { - 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/index.js b/packages/edit-site/src/components/header-edit-mode/index.js index 4ae9db1fea80c..921ff61dd23a1 100644 --- a/packages/edit-site/src/components/header-edit-mode/index.js +++ b/packages/edit-site/src/components/header-edit-mode/index.js @@ -18,13 +18,13 @@ import { store as editorStore, privateApis as editorPrivateApis, } from '@wordpress/editor'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import SiteEditorMoreMenuItems from './more-menu'; import SaveButton from '../save-button'; -import DocumentTools from './document-tools'; import { store as editSiteStore } from '../../store'; import { getEditorCanvasContainerTitle, @@ -36,6 +36,7 @@ import { isPreviewingTheme } from '../../utils/is-previewing-theme'; const { CollapsableBlockToolbar, + DocumentTools, MoreMenu, PostViewLink, PreviewDropdown, @@ -52,11 +53,12 @@ export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) { editorCanvasView, isFixedToolbar, isPublishSidebarOpened, + isVisualMode, } = useSelect( ( select ) => { const { getEditedPostType } = select( editSiteStore ); const { __unstableGetEditorMode } = select( blockEditorStore ); const { get: getPreference } = select( preferencesStore ); - const { getDeviceType } = select( editorStore ); + const { getDeviceType, getEditorMode } = select( editorStore ); return { deviceType: getDeviceType(), @@ -70,6 +72,7 @@ export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) { isFixedToolbar: getPreference( 'core', 'fixedToolbar' ), isPublishSidebarOpened: select( editorStore ).isPublishSidebarOpened(), + isVisualMode: getEditorMode() === 'visual', }; }, [] ); @@ -115,8 +118,8 @@ export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) { transition={ toolbarTransition } > { showTopToolbar && ( { isLargeViewport && ( -
- -
+ ) } { 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 5963a1c815141..39a1a3418395a 100644 --- a/packages/edit-site/src/components/header-edit-mode/style.scss +++ b/packages/edit-site/src/components/header-edit-mode/style.scss @@ -120,15 +120,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/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 9a3c3100c4be7..d8b0d85e484ed 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -72,7 +72,6 @@ export default function Layout() { const { isDistractionFree, - isZoomOutMode, hasFixedToolbar, hasBlockSelected, canvasMode, @@ -104,9 +103,6 @@ export default function Layout() { 'core', 'showBlockBreadcrumbs' ), - isZoomOutMode: - select( blockEditorStore ).__unstableGetEditorMode() === - 'zoom-out', hasBlockSelected: select( blockEditorStore ).getBlockSelectionStart(), }; @@ -186,7 +182,6 @@ export default function Layout() { 'is-full-canvas': canvasMode === 'edit', 'has-fixed-toolbar': hasFixedToolbar, 'is-block-toolbar-visible': hasBlockSelected, - 'is-zoom-out': isZoomOutMode, 'has-block-breadcrumbs': hasBlockBreadcrumbs && ! isDistractionFree && diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js index 64d94cc2e9165..c799e9eae30de 100644 --- a/packages/editor/src/components/document-tools/index.js +++ b/packages/editor/src/components/document-tools/index.js @@ -15,7 +15,7 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { Button, ToolbarItem } from '@wordpress/components'; -import { listView, plus } from '@wordpress/icons'; +import { listView, plus, chevronUpDown } from '@wordpress/icons'; import { useRef, useCallback } from '@wordpress/element'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -35,13 +35,13 @@ const preventDefault = ( event ) => { function DocumentTools( { className, disableBlockTools = false, - children, // This is a temporary prop until the list view is fully unified between post and site editors. listViewLabel = __( 'Document Overview' ), } ) { const inserterButton = useRef(); - const { setIsInserterOpened, setIsListViewOpened } = + const { setIsInserterOpened, setIsListViewOpened, setDeviceType } = useDispatch( editorStore ); + const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); const { isDistractionFree, isInserterOpened, @@ -50,13 +50,15 @@ function DocumentTools( { listViewToggleRef, hasFixedToolbar, showIconLabels, + isVisualMode, + isZoomedOutView, } = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); const { get } = select( preferencesStore ); - const { isListViewOpened, getListViewToggleRef } = unlock( - select( editorStore ) - ); + const { isListViewOpened, getListViewToggleRef, getEditorMode } = + unlock( select( editorStore ) ); const { getShortcutRepresentation } = select( keyboardShortcutsStore ); + const { __unstableGetEditorMode } = select( blockEditorStore ); return { isInserterOpened: select( editorStore ).isInserterOpened(), @@ -68,11 +70,15 @@ function DocumentTools( { hasFixedToolbar: getSettings().hasFixedToolbar, showIconLabels: get( 'core', 'showIconLabels' ), isDistractionFree: get( 'core', 'distractionFree' ), + isVisualMode: getEditorMode() === 'visual', + isZoomedOutView: __unstableGetEditorMode() === 'zoom-out', }; }, [] ); const isLargeViewport = useViewportMatch( 'medium' ); const isWideViewport = useViewportMatch( 'wide' ); + const isZoomedOutViewExperimentEnabled = + window?.__experimentalEnableZoomedOutView && isVisualMode; /* translators: accessibility text for the editor toolbar */ const toolbarAriaLabel = __( 'Document tools' ); @@ -179,7 +185,27 @@ function DocumentTools( { ) } ) } - { children } + + { isZoomedOutViewExperimentEnabled && + isLargeViewport && + ! isDistractionFree && + ! hasFixedToolbar && ( + { + setDeviceType( 'Desktop' ); + __unstableSetEditorMode( + isZoomedOutView ? 'edit' : 'zoom-out' + ); + } } + size="compact" + /> + ) }
); diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index 8f63ee6980aac..7608b7bc856e0 100644 --- a/packages/editor/src/components/editor-canvas/index.js +++ b/packages/editor/src/components/editor-canvas/index.js @@ -30,6 +30,7 @@ import { store as editorStore } from '../../store'; import { unlock } from '../../lock-unlock'; import EditTemplateBlocksNotification from './edit-template-blocks-notification'; import useSelectNearestEditableBlock from '../../hooks/use-select-nearest-editable-block'; +import { computeIFrameScale } from './utils'; const { LayoutStyle, @@ -161,13 +162,17 @@ function EditorCanvas( { hasRootPaddingAwareAlignments, themeHasDisabledLayoutStyles, themeSupportsLayout, + isZoomOutMode, } = useSelect( ( select ) => { - const _settings = select( blockEditorStore ).getSettings(); + const { getSettings, __unstableGetEditorMode } = + select( blockEditorStore ); + const _settings = getSettings(); return { themeHasDisabledLayoutStyles: _settings.disableLayoutStyles, themeSupportsLayout: _settings.supportsLayout, hasRootPaddingAwareAlignments: _settings.__experimentalFeatures?.useRootPaddingAwareAlignments, + isZoomOutMode: __unstableGetEditorMode() === 'zoom-out', }; }, [] ); @@ -319,6 +324,16 @@ function EditorCanvas( { } ), ] ); + const frameSize = isZoomOutMode ? 20 : undefined; + const scale = isZoomOutMode + ? ( contentWidth ) => + computeIFrameScale( + { width: 1000, scale: 0.55 }, + { width: 400, scale: 0.9 }, + contentWidth + ) + : undefined; + return ( { themeSupportsLayout && diff --git a/packages/edit-site/src/utils/math.js b/packages/editor/src/components/editor-canvas/utils.js similarity index 100% rename from packages/edit-site/src/utils/math.js rename to packages/editor/src/components/editor-canvas/utils.js