Allow clicking the site editor frame to enter edit mode (#47676)

WordPress · Feb 2, 2023 · 2f24c67 · 2f24c67
1 parent b0275ae
commit 2f24c67
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -19,6 +19,7 @@ import {
 	useResizeObserver,
 	useMergeRefs,
 	useRefEffect,
+	useDisabled,
 } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -207,7 +208,13 @@ function Iframe( {
 				forceRender();
 			} );
 	}, [] );
-	const bodyRef = useMergeRefs( [ contentRef, clearerRef, writingFlowRef ] );
+	const disabledRef = useDisabled( { isDisabled: ! readonly } );
+	const bodyRef = useMergeRefs( [
+		contentRef,
+		clearerRef,
+		writingFlowRef,
+		disabledRef,
+	] );
 
 	const styleAssets = (
 		<>
@@ -284,7 +291,6 @@ function Iframe( {
 									marginTop: frameSize,
 									transform: `scale( ${ scale } )`,
 								} }
-								inert={ readonly ? 'true' : undefined }
 							>
 								{ contentResizeListener }
 								<StyleProvider document={ iframeDocument }>

diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js
@@ -8,24 +8,27 @@ import {
 	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../../experiments';
 import { store as editSiteStore } from '../../store';
 
 function EditorCanvas( { enableResizing, settings, children, ...props } ) {
-	const { deviceType, isZoomOutMode } = useSelect(
+	const { canvasMode, deviceType, isZoomOutMode } = useSelect(
 		( select ) => ( {
 			deviceType:
 				select( editSiteStore ).__experimentalGetPreviewDeviceType(),
 			isZoomOutMode:
 				select( blockEditorStore ).__unstableGetEditorMode() ===
 				'zoom-out',
+			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
 		} ),
 		[]
 	);
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const deviceStyles = useResizeCanvas( deviceType );
 	const mouseMoveTypingRef = useMouseMoveTypingReset();
 	return (
@@ -57,6 +60,13 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			name="editor-canvas"
 			className="edit-site-visual-editor__editor-canvas"
 			{ ...props }
+			role={ canvasMode === 'view' ? 'button' : undefined }
+			onClick={
+				canvasMode === 'view'
+					? () => setCanvasMode( 'edit' )
+					: undefined
+			}
+			readonly={ canvasMode === 'view' }
 		>
 			{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
 			{ settings.svgFilters }

diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
@@ -158,3 +158,4 @@
 		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
 	}
 }
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -158,3 +158,4 @@
		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
		}
		}