Site editor: Add hover animation to site editor canvas (#48575)

WordPress · Mar 3, 2023 · cae03de · cae03de · github-actions · Mar 3, 2023
1 parent 6be1e86
commit cae03de
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 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
@@ -44,7 +44,8 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 						// 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; }
-							body { position: relative; }`
+							body { position: relative;
+							${ canvasMode === 'view' ? 'cursor: pointer;' : '' }}}`
 					}</style>
 					{ enableResizing && (
 						<style>

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -277,6 +277,20 @@ export default function Layout() {
 							{ canvasResizer }
 							{ !! canvasSize.width && (
 								<motion.div
+									whileHover={
+										isEditorPage && canvasMode === 'view'
+											? {
+													scale: 1.01,
+													transition: {
+														duration:
+															disableMotion ||
+															isResizing
+																? 0
+																: 0.2,
+													},
+											  }
+											: {}
+									}
 									initial={ false }
 									layout="position"
 									className="edit-site-layout__canvas"