@wordpress/edit-site 5.24.1 → 5.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.24.1",
+	"version": "5.25.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,46 +27,46 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@tanstack/react-table": "^8.10.3",
-		"@wordpress/a11y": "^3.47.0",
-		"@wordpress/api-fetch": "^6.44.0",
-		"@wordpress/blob": "^3.47.0",
-		"@wordpress/block-editor": "^12.15.0",
-		"@wordpress/block-library": "^8.24.1",
-		"@wordpress/blocks": "^12.24.0",
-		"@wordpress/commands": "^0.18.0",
-		"@wordpress/components": "^25.13.0",
-		"@wordpress/compose": "^6.24.0",
-		"@wordpress/core-commands": "^0.16.0",
-		"@wordpress/core-data": "^6.24.0",
-		"@wordpress/data": "^9.17.0",
-		"@wordpress/date": "^4.47.0",
-		"@wordpress/deprecated": "^3.47.0",
-		"@wordpress/dom": "^3.47.0",
-		"@wordpress/editor": "^13.24.1",
-		"@wordpress/element": "^5.24.0",
-		"@wordpress/escape-html": "^2.47.0",
-		"@wordpress/hooks": "^3.47.0",
-		"@wordpress/html-entities": "^3.47.0",
-		"@wordpress/i18n": "^4.47.0",
-		"@wordpress/icons": "^9.38.0",
-		"@wordpress/interface": "^5.24.0",
-		"@wordpress/keyboard-shortcuts": "^4.24.0",
-		"@wordpress/keycodes": "^3.47.0",
-		"@wordpress/media-utils": "^4.38.0",
-		"@wordpress/notices": "^4.15.0",
-		"@wordpress/patterns": "^1.8.0",
-		"@wordpress/plugins": "^6.15.0",
-		"@wordpress/preferences": "^3.24.0",
-		"@wordpress/primitives": "^3.45.0",
-		"@wordpress/private-apis": "^0.29.0",
-		"@wordpress/reusable-blocks": "^4.24.0",
-		"@wordpress/router": "^0.16.0",
-		"@wordpress/style-engine": "^1.30.0",
-		"@wordpress/url": "^3.48.0",
-		"@wordpress/viewport": "^5.24.0",
-		"@wordpress/widgets": "^3.24.0",
-		"@wordpress/wordcount": "^3.47.0",
+		"@wordpress/a11y": "^3.48.0",
+		"@wordpress/api-fetch": "^6.45.0",
+		"@wordpress/blob": "^3.48.0",
+		"@wordpress/block-editor": "^12.16.0",
+		"@wordpress/block-library": "^8.25.0",
+		"@wordpress/blocks": "^12.25.0",
+		"@wordpress/commands": "^0.19.0",
+		"@wordpress/components": "^25.14.0",
+		"@wordpress/compose": "^6.25.0",
+		"@wordpress/core-commands": "^0.17.0",
+		"@wordpress/core-data": "^6.25.0",
+		"@wordpress/data": "^9.18.0",
+		"@wordpress/dataviews": "^0.2.0",
+		"@wordpress/date": "^4.48.0",
+		"@wordpress/deprecated": "^3.48.0",
+		"@wordpress/dom": "^3.48.0",
+		"@wordpress/editor": "^13.25.0",
+		"@wordpress/element": "^5.25.0",
+		"@wordpress/escape-html": "^2.48.0",
+		"@wordpress/hooks": "^3.48.0",
+		"@wordpress/html-entities": "^3.48.0",
+		"@wordpress/i18n": "^4.48.0",
+		"@wordpress/icons": "^9.39.0",
+		"@wordpress/interface": "^5.25.0",
+		"@wordpress/keyboard-shortcuts": "^4.25.0",
+		"@wordpress/keycodes": "^3.48.0",
+		"@wordpress/media-utils": "^4.39.0",
+		"@wordpress/notices": "^4.16.0",
+		"@wordpress/patterns": "^1.9.0",
+		"@wordpress/plugins": "^6.16.0",
+		"@wordpress/preferences": "^3.25.0",
+		"@wordpress/primitives": "^3.46.0",
+		"@wordpress/private-apis": "^0.30.0",
+		"@wordpress/reusable-blocks": "^4.25.0",
+		"@wordpress/router": "^0.17.0",
+		"@wordpress/style-engine": "^1.31.0",
+		"@wordpress/url": "^3.49.0",
+		"@wordpress/viewport": "^5.25.0",
+		"@wordpress/widgets": "^3.25.0",
+		"@wordpress/wordcount": "^3.48.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "12b897d7feff1cb00ddbf9016b62c1177d9c0081"
+	"gitHead": "fcf61b4beff747222c2c81d09d757ca1a0abd925"
 }

package/src/components/add-new-template/add-custom-template-modal-content.js

@@ -15,12 +15,12 @@ import {
 } from '@wordpress/components';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { useDebouncedInput } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import useDebouncedInput from '../../utils/use-debounced-input';
 import { mapToIHasNameAndId } from './utils';
 
 const {

package/src/components/block-editor/editor-canvas.js

@@ -6,46 +6,44 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalUseResizeCanvas as useResizeCanvas,
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
+import {
+	FOCUSABLE_ENTITIES,
+	NAVIGATION_POST_TYPE,
+} from '../../utils/constants';
 
-const { ExperimentalBlockCanvas: BlockCanvas } = unlock(
-	blockEditorPrivateApis
-);
+const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
 
-function EditorCanvas( {
-	enableResizing,
-	settings,
-	children,
-	contentRef,
-	...props
-} ) {
-	const { canvasMode, deviceType, isZoomOutMode } = useSelect(
-		( select ) => ( {
-			deviceType:
-				select( editSiteStore ).__experimentalGetPreviewDeviceType(),
-			isZoomOutMode:
-				select( blockEditorStore ).__unstableGetEditorMode() ===
-				'zoom-out',
-			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
-		} ),
-		[]
-	);
+function EditorCanvas( { enableResizing, settings, children, ...props } ) {
+	const { hasBlocks, isFocusMode, templateType, canvasMode, isZoomOutMode } =
+		useSelect( ( select ) => {
+			const { getBlockCount, __unstableGetEditorMode } =
+				select( blockEditorStore );
+			const { getEditedPostType, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
+			const _templateType = getEditedPostType();
+
+			return {
+				templateType: _templateType,
+				isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
+				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+				canvasMode: getCanvasMode(),
+				hasBlocks: !! getBlockCount(),
+			};
+		}, [] );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const deviceStyles = useResizeCanvas( deviceType );
 	const [ isFocused, setIsFocused ] = useState( false );
 
 	useEffect( () => {
@@ -70,15 +68,48 @@ function EditorCanvas( {
 		onClick: () => setCanvasMode( 'edit' ),
 		readonly: true,
 	};
+	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
+	const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
+	// Hide the appender when:
+	// - In navigation focus mode (should only allow the root Nav block).
+	// - In view mode (i.e. not editing).
+	const showBlockAppender =
+		( isNavigationFocusMode && hasBlocks ) || canvasMode === 'view'
+			? false
+			: undefined;
+
+	const styles = useMemo(
+		() => [
+			...settings.styles,
+			{
+				// Forming a "block formatting context" to prevent margin collapsing.
+				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+
+				css: `.is-root-container{display:flow-root;${
+					// Some themes will have `min-height: 100vh` for the root container,
+					// which isn't a requirement in auto resize mode.
+					enableResizing ? 'min-height:0!important;' : ''
+				}}body{position:relative; ${
+					canvasMode === 'view'
+						? 'cursor: pointer; min-height: 100vh;'
+						: ''
+				}}}`,
+			},
+		],
+		[ settings.styles, enableResizing, canvasMode ]
+	);
 
 	return (
-		<BlockCanvas
-			height="100%"
+		<EditorCanvasRoot
+			className={ classnames( 'edit-site-editor-canvas__block-list', {
+				'is-navigation-block': isTemplateTypeNavigation,
+			} ) }
+			renderAppender={ showBlockAppender }
+			styles={ styles }
 			iframeProps={ {
 				expand: isZoomOutMode,
 				scale: isZoomOutMode ? 0.45 : undefined,
 				frameSize: isZoomOutMode ? 100 : undefined,
-				style: enableResizing ? {} : deviceStyles,
 				className: classnames(
 					'edit-site-visual-editor__editor-canvas',
 					{
@@ -88,24 +119,9 @@ function EditorCanvas( {
 				...props,
 				...( canvasMode === 'view' ? viewModeProps : {} ),
 			} }
-			styles={ settings.styles }
-			contentRef={ contentRef }
 		>
-			<style>{
-				// Forming a "block formatting context" to prevent margin collapsing.
-				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-				`.is-root-container{display:flow-root;${
-					// Some themes will have `min-height: 100vh` for the root container,
-					// which isn't a requirement in auto resize mode.
-					enableResizing ? 'min-height:0!important;' : ''
-				}}body{position:relative; ${
-					canvasMode === 'view'
-						? 'cursor: pointer; min-height: 100vh;'
-						: ''
-				}}}`
-			}</style>
 			{ children }
-		</BlockCanvas>
+		</EditorCanvasRoot>
 	);
 }
 

package/src/components/block-editor/site-editor-canvas.js

@@ -5,14 +5,9 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useRef } from '@wordpress/element';
-import {
-	BlockList,
-	BlockTools,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
@@ -27,17 +22,8 @@ import {
 	NAVIGATION_POST_TYPE,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
-import PageContentFocusNotifications from '../page-content-focus-notifications';
-
-const LAYOUT = {
-	type: 'default',
-	// At the root level of the site editor, no alignments should be allowed.
-	alignments: [],
-};
 
 export default function SiteEditorCanvas() {
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-
 	const { templateType, isFocusMode, isViewMode } = useSelect( ( select ) => {
 		const { getEditedPostType, getCanvasMode } = unlock(
 			select( editSiteStore )
@@ -56,16 +42,6 @@ export default function SiteEditorCanvas() {
 
 	const settings = useSiteEditorSettings();
 
-	const { hasBlocks } = useSelect( ( select ) => {
-		const { getBlockCount } = select( blockEditorStore );
-
-		const blocks = getBlockCount();
-
-		return {
-			hasBlocks: !! blocks,
-		};
-	}, [] );
-
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const enableResizing =
 		isFocusMode &&
@@ -73,83 +49,43 @@ export default function SiteEditorCanvas() {
 		// Disable resizing in mobile viewport.
 		! isMobileViewport;
 
-	const contentRef = useRef();
 	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
-
 	const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
-
-	// Hide the appender when:
-	// - In navigation focus mode (should only allow the root Nav block).
-	// - In view mode (i.e. not editing).
-	const showBlockAppender =
-		( isNavigationFocusMode && hasBlocks ) || isViewMode
-			? false
-			: undefined;
-
 	const forceFullHeight = isNavigationFocusMode;
 
 	return (
-		<>
-			<EditorCanvasContainer.Slot>
-				{ ( [ editorCanvasView ] ) =>
-					editorCanvasView ? (
-						<div className="edit-site-visual-editor is-focus-mode">
-							{ editorCanvasView }
-						</div>
-					) : (
-						<BlockTools
-							className={ classnames( 'edit-site-visual-editor', {
-								'is-focus-mode':
-									isFocusMode || !! editorCanvasView,
-								'is-view-mode': isViewMode,
-							} ) }
-							__unstableContentRef={ contentRef }
-							onClick={ ( event ) => {
-								// Clear selected block when clicking on the gray background.
-								if ( event.target === event.currentTarget ) {
-									clearSelectedBlock();
-								}
-							} }
+		<EditorCanvasContainer.Slot>
+			{ ( [ editorCanvasView ] ) =>
+				editorCanvasView ? (
+					<div className="edit-site-visual-editor is-focus-mode">
+						{ editorCanvasView }
+					</div>
+				) : (
+					<div
+						className={ classnames( 'edit-site-visual-editor', {
+							'is-focus-mode': isFocusMode || !! editorCanvasView,
+							'is-view-mode': isViewMode,
+						} ) }
+					>
+						<BackButton />
+						<ResizableEditor
+							enableResizing={ enableResizing }
+							height={
+								sizes.height && ! forceFullHeight
+									? sizes.height
+									: '100%'
+							}
 						>
-							<BackButton />
-							<ResizableEditor
+							<EditorCanvas
 								enableResizing={ enableResizing }
-								height={
-									sizes.height && ! forceFullHeight
-										? sizes.height
-										: '100%'
-								}
+								settings={ settings }
 							>
-								<EditorCanvas
-									enableResizing={ enableResizing }
-									settings={ settings }
-									contentRef={ contentRef }
-								>
-									{ resizeObserver }
-									<BlockList
-										className={ classnames(
-											'edit-site-block-editor__block-list wp-site-blocks',
-											{
-												'is-navigation-block':
-													isTemplateTypeNavigation,
-											}
-										) }
-										dropZoneElement={
-											// Pass in the html element of the iframe to ensure that
-											// the drop zone extends to the very edges of the iframe,
-											// even if the template is shorter than the viewport.
-											contentRef.current?.parentNode
-										}
-										layout={ LAYOUT }
-										renderAppender={ showBlockAppender }
-									/>
-								</EditorCanvas>
-							</ResizableEditor>
-						</BlockTools>
-					)
-				}
-			</EditorCanvasContainer.Slot>
-			<PageContentFocusNotifications contentRef={ contentRef } />
-		</>
+								{ resizeObserver }
+							</EditorCanvas>
+						</ResizableEditor>
+					</div>
+				)
+			}
+		</EditorCanvasContainer.Slot>
 	);
 }

package/src/components/block-editor/style.scss

@@ -14,7 +14,7 @@
 
 // Navigation focus mode requires padding around the root Navigation block
 // for presentational purposes.
-.edit-site-block-editor__block-list.is-navigation-block {
+.edit-site-editor-canvas__block-list.is-navigation-block {
 	padding: $grid-unit-30;
 }
 
@@ -69,17 +69,6 @@
 
 	&.is-view-mode {
 		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
-
-		/*
-			Temporary to hide the contextual toolbar in view mode.
-			See: https://github.com/WordPress/gutenberg/pull/46298
-			This rule can possibly be removed once the
-			contextual toolbar has been redesigned.
-			See: https://github.com/WordPress/gutenberg/issues/40450
-		*/
-		.block-editor-block-contextual-toolbar.is-fixed {
-			display: none;
-		}
 	}
 }
 
@@ -96,6 +85,11 @@
 	}
 }
 
+// The toolbar header in distraction mode sits over the back button, which renders it unreachable.
+.is-distraction-free .edit-site-visual-editor__back-button {
+	display: none;
+}
+
 .resizable-editor__drag-handle {
 	position: absolute;
 	top: 0;

package/src/components/block-editor/use-site-editor-settings.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { useViewportMatch } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
@@ -89,6 +90,7 @@ function useArchiveLabel( templateSlug ) {
 
 export function useSpecificEditorSettings() {
 	const { setIsInserterOpened } = useDispatch( editSiteStore );
+	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
 		templateSlug,
 		focusMode,
@@ -97,52 +99,60 @@ export function useSpecificEditorSettings() {
 		keepCaretInsideBlock,
 		canvasMode,
 		settings,
-	} = useSelect( ( select ) => {
-		const {
-			getEditedPostType,
-			getEditedPostId,
-			getCanvasMode,
-			getSettings,
-		} = unlock( select( editSiteStore ) );
-		const { get: getPreference } = select( preferencesStore );
-		const { getEditedEntityRecord } = select( coreStore );
-		const usedPostType = getEditedPostType();
-		const usedPostId = getEditedPostId();
-		const _record = getEditedEntityRecord(
-			'postType',
-			usedPostType,
-			usedPostId
-		);
-		return {
-			templateSlug: _record.slug,
-			focusMode: !! getPreference( 'core/edit-site', 'focusMode' ),
-			isDistractionFree: !! getPreference(
-				'core/edit-site',
-				'distractionFree'
-			),
-			hasFixedToolbar: !! getPreference(
-				'core/edit-site',
-				'fixedToolbar'
-			),
-			keepCaretInsideBlock: !! getPreference(
-				'core/edit-site',
-				'keepCaretInsideBlock'
-			),
-			canvasMode: getCanvasMode(),
-			settings: getSettings(),
-		};
-	}, [] );
+		postWithTemplate,
+	} = useSelect(
+		( select ) => {
+			const {
+				getEditedPostType,
+				getEditedPostId,
+				getEditedPostContext,
+				getCanvasMode,
+				getSettings,
+			} = unlock( select( editSiteStore ) );
+			const { get: getPreference } = select( preferencesStore );
+			const { getEditedEntityRecord } = select( coreStore );
+			const usedPostType = getEditedPostType();
+			const usedPostId = getEditedPostId();
+			const _record = getEditedEntityRecord(
+				'postType',
+				usedPostType,
+				usedPostId
+			);
+			const _context = getEditedPostContext();
+			return {
+				templateSlug: _record.slug,
+				focusMode: !! getPreference( 'core/edit-site', 'focusMode' ),
+				isDistractionFree: !! getPreference(
+					'core/edit-site',
+					'distractionFree'
+				),
+				hasFixedToolbar:
+					!! getPreference( 'core/edit-site', 'fixedToolbar' ) ||
+					! isLargeViewport,
+				keepCaretInsideBlock: !! getPreference(
+					'core/edit-site',
+					'keepCaretInsideBlock'
+				),
+				canvasMode: getCanvasMode(),
+				settings: getSettings(),
+				postWithTemplate: _context?.postId,
+			};
+		},
+		[ isLargeViewport ]
+	);
 	const archiveLabels = useArchiveLabel( templateSlug );
-
+	const defaultRenderingMode = postWithTemplate ? 'template-locked' : 'all';
 	const defaultEditorSettings = useMemo( () => {
 		return {
 			...settings,
 
+			supportsTemplateMode: true,
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
 			focusMode: canvasMode === 'view' && focusMode ? false : focusMode,
 			isDistractionFree,
 			hasFixedToolbar,
 			keepCaretInsideBlock,
+			defaultRenderingMode,
 
 			// I wonder if they should be set in the post editor too
 			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
@@ -158,6 +168,7 @@ export function useSpecificEditorSettings() {
 		canvasMode,
 		archiveLabels.archiveTypeLabel,
 		archiveLabels.archiveNameLabel,
+		defaultRenderingMode,
 	] );
 
 	return defaultEditorSettings;

package/src/components/editor/index.js

@@ -6,12 +6,13 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { Notice } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useViewportMatch } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	BlockBreadcrumb,
+	BlockToolbar,
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 	BlockInspector,
@@ -29,7 +30,6 @@ import {
 } from '@wordpress/editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreDataStore } from '@wordpress/core-data';
-import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -93,6 +93,8 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 
 	const { type: editedPostType } = editedPost;
 
+	const isLargeViewport = useViewportMatch( 'medium' );
+
 	const {
 		context,
 		contextPost,
@@ -149,7 +151,6 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 			),
 		};
 	}, [] );
-	const { setRenderingMode } = useDispatch( editorStore );
 
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
@@ -169,8 +170,8 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 	let title;
 	if ( hasLoadedPost ) {
 		title = sprintf(
-			// translators: A breadcrumb trail in browser tab. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
-			__( '%1$s ‹ %2$s ‹ Editor' ),
+			// translators: A breadcrumb trail for the Admin document title. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
+			__( '%1$s ‹ %2$s' ),
 			getTitle(),
 			POST_TYPE_LABELS[ editedPostType ] ??
 				POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ]
@@ -192,16 +193,6 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 		( ( postWithTemplate && !! contextPost && !! editedPost ) ||
 			( ! postWithTemplate && !! editedPost ) );
 
-	// This is the only reliable way I've found to reinitialize the rendering mode
-	// when the canvas mode or the edited entity changes.
-	useEffect( () => {
-		if ( canvasMode === 'edit' && postWithTemplate ) {
-			setRenderingMode( 'template-locked' );
-		} else {
-			setRenderingMode( 'all' );
-		}
-	}, [ canvasMode, postWithTemplate, setRenderingMode ] );
-
 	return (
 		<>
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
@@ -244,6 +235,9 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 										<SidebarInspectorFill>
 											<BlockInspector />
 										</SidebarInspectorFill>
+										{ ! isLargeViewport && (
+											<BlockToolbar hideDragHandle />
+										) }
 										<SiteEditorCanvas />
 										<BlockRemovalWarningModal
 											rules={ blockRemovalRules }