@wordpress/editor 14.33.3 → 14.33.5

package/src/components/visual-editor/index.js

@@ -114,6 +114,7 @@ function VisualEditor( {
 		isDesignPostType,
 		postType,
 		isPreview,
+		canvasMinHeight,
 	} = useSelect( ( select ) => {
 		const {
 			getCurrentPostId,
@@ -122,7 +123,8 @@ function VisualEditor( {
 			getEditorSettings,
 			getRenderingMode,
 			getDeviceType,
-		} = select( editorStore );
+			getCanvasMinHeight,
+		} = unlock( select( editorStore ) );
 		const { getPostType, getEditedEntityRecord } = select( coreStore );
 		const postTypeSlug = getCurrentPostType();
 		const _renderingMode = getRenderingMode();
@@ -162,6 +164,7 @@ function VisualEditor( {
 			isFocusedEntity: !! editorSettings.onNavigateToPreviousEntityRecord,
 			postType: postTypeSlug,
 			isPreview: editorSettings.isPreviewMode,
+			canvasMinHeight: getCanvasMinHeight(),
 		};
 	}, [] );
 	const { isCleanNewPost } = useSelect( editorStore );
@@ -185,6 +188,7 @@ function VisualEditor( {
 		};
 	}, [] );
 
+	const localRef = useRef();
 	const deviceStyles = useResizeCanvas( deviceType );
 	const [ globalLayoutSettings ] = useSettings( 'layout' );
 
@@ -331,30 +335,47 @@ function VisualEditor( {
 		// Disable resizing in zoomed-out mode.
 		! isZoomedOut;
 
+	// Calculate the minimum height including scroll offset to fit all notes.
+	const calculatedMinHeight = useMemo( () => {
+		if ( ! localRef.current ) {
+			return canvasMinHeight;
+		}
+
+		const { ownerDocument } = localRef.current;
+		const scrollTop =
+			ownerDocument.documentElement.scrollTop ||
+			ownerDocument.body.scrollTop;
+
+		return canvasMinHeight + scrollTop;
+	}, [ canvasMinHeight ] );
+
 	const iframeStyles = useMemo( () => {
 		return [
 			...( styles ?? [] ),
 			{
 				// Ensures margins of children are contained so that the body background paints behind them.
-				// Otherwise, the background of html (when zoomed out) would show there and appear broken. It’s
+				// Otherwise, the background of html (when zoomed out) would show there and appear broken. It's
 				// important mostly for post-only views yet conceivably an issue in templated views too.
-				css: `:where(.block-editor-iframe__body){display:flow-root;}.is-root-container{display:flow-root;${
+				css: `:where(.block-editor-iframe__body){display:flow-root;${
+					calculatedMinHeight
+						? `min-height:${ calculatedMinHeight }px;`
+						: ''
+				}}.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;' : ''
 				}}
 				${
 					enableResizing
-						? '.block-editor-iframe__html{background:var(--wp-editor-canvas-background);display:flex;align-items:center;justify-content:center;min-height:100vh;}.block-editor-iframe__body{width:100%;}'
+						? `.block-editor-iframe__html{background:var(--wp-editor-canvas-background);display:flex;align-items:center;justify-content:center;min-height:100vh;}.block-editor-iframe__body{width:100%;}`
 						: ''
 				}`,
 				// The CSS above centers the body content vertically when resizing is enabled and applies a background
 				// color to the iframe HTML element to match the background color of the editor canvas.
 			},
 		];
-	}, [ styles, enableResizing ] );
+	}, [ styles, enableResizing, calculatedMinHeight ] );
 
-	const localRef = useRef();
 	const typewriterRef = useTypewriter();
 	contentRef = useMergeRefs( [
 		localRef,

package/src/store/private-actions.js

@@ -526,3 +526,16 @@ export const setDefaultRenderingMode =
 			.dispatch( preferencesStore )
 			.set( 'core', 'renderingModes', newModes );
 	};
+
+/**
+ * Set the minimum height of the canvas.
+ *
+ * @param {number} minHeight
+ * @return {Object} Action object.
+ */
+export function setCanvasMinHeight( minHeight ) {
+	return {
+		type: 'SET_CANVAS_MIN_HEIGHT',
+		minHeight,
+	};
+}

package/src/store/private-selectors.js

@@ -270,3 +270,13 @@ export const getDefaultRenderingMode = createRegistrySelector(
 		return defaultMode;
 	}
 );
+
+/**
+ * Get the canvas minimum height.
+ *
+ * @param {Object} state Global application state.
+ * @return {number} The canvas minimum height.
+ */
+export function getCanvasMinHeight( state ) {
+	return state.canvasMinHeight;
+}

package/src/store/reducer.js

@@ -384,6 +384,21 @@ export function publishSidebarActive( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer for the canvas minimum height.
+ *
+ * @param {number} state  Current state.
+ * @param {Object} action Dispatched action.
+ * @return {number} Updated state.
+ */
+export function canvasMinHeight( state = 0, action ) {
+	switch ( action.type ) {
+		case 'SET_CANVAS_MIN_HEIGHT':
+			return action.minHeight;
+	}
+	return state;
+}
+
 export default combineReducers( {
 	postId,
 	postType,
@@ -403,5 +418,6 @@ export default combineReducers( {
 	listViewPanel,
 	listViewToggleRef,
 	publishSidebarActive,
+	canvasMinHeight,
 	dataviews: dataviewsReducer,
 } );