Reverts first attempt and now tries to harmonize the editor canvas is…

…-focus-mode between site and post editors. By "harmonize", I mean use the same approach by driving the padding via a classname `is-focus-mode` on the edit-${site/post}-layout element, not centralize the code. The latter is difficult because the site editor has "modes", such as edit and view, which also affect the styles. Reverts first attempt and now tries to harmonize the editor canvas is-focus-mode between site and post editors. By "harmonize", I mean use the same approach by driving the padding via a classname `is-focus-mode` on the edit-${site/post}-layout element, not centralize the code. The latter is difficult because the site editor has "modes", such as edit and view, which also affect the styles.
WordPress · Feb 1, 2024 · 63e4b3f · 63e4b3f
1 parent 8851c24
commit 63e4b3f
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 24 deletions.
diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
@@ -2,12 +2,5 @@ iframe[name="editor-canvas"] {
 	width: 100%;
 	height: 100%;
 	display: block;
-}
-
-iframe[name="editor-canvas"]:not(.has-editor-padding) {
 	background-color: $white;
 }
-
-iframe[name="editor-canvas"].has-editor-padding {
-	padding: $grid-unit-60 $grid-unit-60 0;
-}
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -31,11 +31,14 @@ export default function VisualEditor( { styles } ) {
 		isBlockBasedTheme,
 		hasV3BlocksOnly,
 		isEditingTemplate,
+		isEditingPattern,
 	} = useSelect( ( select ) => {
 		const { isFeatureActive } = select( editPostStore );
-		const { getEditorSettings, getRenderingMode } = select( editorStore );
+		const { getEditorSettings, getRenderingMode, getCurrentPostType } =
+			select( editorStore );
 		const { getBlockTypes } = select( blocksStore );
 		const editorSettings = getEditorSettings();
+		const currentPostType = getCurrentPostType();
 
 		return {
 			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
@@ -44,8 +47,8 @@ export default function VisualEditor( { styles } ) {
 			hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
 				return type.apiVersion >= 3;
 			} ),
-			isEditingTemplate:
-				select( editorStore ).getCurrentPostType() === 'wp_template',
+			isEditingPattern: currentPostType === 'wp_block',
+			isEditingTemplate: currentPostType === 'wp_template',
 		};
 	}, [] );
 	const hasMetaBoxes = useSelect(
@@ -83,6 +86,7 @@ export default function VisualEditor( { styles } ) {
 		<div
 			className={ classnames( 'edit-post-visual-editor', {
 				'has-inline-canvas': ! isToBeIframed,
+				'is-focus-mode': isEditingPattern || isEditingTemplate,
 			} ) }
 		>
 			<EditorCanvas
@@ -91,6 +95,13 @@ export default function VisualEditor( { styles } ) {
 				// We should auto-focus the canvas (title) on load.
 				// eslint-disable-next-line jsx-a11y/no-autofocus
 				autoFocus={ ! isWelcomeGuideVisible }
+				iframeProps={ {
+					style: {
+						background: isEditingPattern
+							? 'transparent'
+							: undefined,
+					},
+				} }
 			/>
 		</div>
 	);

diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
@@ -36,6 +36,12 @@
 	// as align-items: stretch is inherited by default.Additionally due to older browser's flex height
 	// interpretation, any percentage value is likely going to cause issues, such as metaboxes overlapping.
 	// See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property.
+
+	// Matches `.is-focus-mode` padding in
+	// packages/edit-site/src/components/block-editor/style.scss.
+	&.is-focus-mode {
+		padding: $grid-unit-60;
+	}
 }
 
 .edit-post-visual-editor__content-area {

diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
@@ -27,14 +27,6 @@
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
 
-	// Controls height of editor and editor canvas container (style book, global styles revisions previews etc.)
-	iframe {
-		display: block;
-		width: 100%;
-		height: 100%;
-		background: $white;
-	}
-
 	.edit-site-visual-editor__editor-canvas {
 		&.is-focused {
 			outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);

diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js
@@ -92,7 +92,6 @@ function EditorCanvas( {
 		wrapperBlockName,
 		wrapperUniqueId,
 		deviceType,
-		showEditorPadding,
 	} = useSelect( ( select ) => {
 		const {
 			getCurrentPostId,
@@ -139,7 +138,6 @@ function EditorCanvas( {
 			wrapperBlockName: _wrapperBlockName,
 			wrapperUniqueId: getCurrentPostId(),
 			deviceType: getDeviceType(),
-			showEditorPadding: !! editorSettings.goBack,
 		};
 	}, [] );
 	const { isCleanNewPost } = useSelect( editorStore );
@@ -305,14 +303,11 @@ function EditorCanvas( {
 			styles={ styles }
 			height="100%"
 			iframeProps={ {
-				className: classnames( 'editor-canvas__iframe', {
-					'has-editor-padding': showEditorPadding,
-				} ),
+				className: 'editor-canvas__iframe',
 				...iframeProps,
 				style: {
 					...iframeProps?.style,
 					...deviceStyles,
-					border: showEditorPadding ? undefined : 0,
 				},
 			} }
 		>