@wordpress/editor 14.34.0 → 14.35.0

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

@@ -38,6 +38,8 @@ import {
 	TEMPLATE_POST_TYPE,
 } from '../../store/constants';
 import { useZoomOutModeExit } from './use-zoom-out-mode-exit';
+import { usePaddingAppender } from './use-padding-appender';
+import { useEditContentOnlySectionExit } from './use-edit-content-only-section-exit';
 
 const {
 	LayoutStyle,
@@ -114,6 +116,7 @@ function VisualEditor( {
 		postType,
 		isPreview,
 		styles,
+		canvasMinHeight,
 	} = useSelect( ( select ) => {
 		const {
 			getCurrentPostId,
@@ -122,7 +125,8 @@ function VisualEditor( {
 			getEditorSettings,
 			getRenderingMode,
 			getDeviceType,
-		} = select( editorStore );
+			getCanvasMinHeight,
+		} = unlock( select( editorStore ) );
 		const { getPostType, getEditedEntityRecord } = select( coreStore );
 		const postTypeSlug = getCurrentPostType();
 		const _renderingMode = getRenderingMode();
@@ -163,6 +167,7 @@ function VisualEditor( {
 			postType: postTypeSlug,
 			isPreview: editorSettings.isPreviewMode,
 			styles: editorSettings.styles,
+			canvasMinHeight: getCanvasMinHeight(),
 		};
 	}, [] );
 	const { isCleanNewPost } = useSelect( editorStore );
@@ -186,6 +191,7 @@ function VisualEditor( {
 		};
 	}, [] );
 
+	const localRef = useRef();
 	const deviceStyles = useResizeCanvas( deviceType );
 	const [ globalLayoutSettings ] = useSettings( 'layout' );
 
@@ -332,30 +338,52 @@ 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 [ paddingAppenderRef, paddingStyle ] = usePaddingAppender(
+		! isPreview && renderingMode === 'post-only' && ! isDesignPostType
+	);
+
 	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;' : ''
 				}}
+				${ paddingStyle ? paddingStyle : '' }
 				${
 					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, paddingStyle ] );
 
-	const localRef = useRef();
 	const typewriterRef = useTypewriter();
 	contentRef = useMergeRefs( [
 		localRef,
@@ -368,6 +396,8 @@ function VisualEditor( {
 			isEnabled: renderingMode === 'template-locked',
 		} ),
 		useZoomOutModeExit(),
+		paddingAppenderRef,
+		useEditContentOnlySectionExit(),
 	] );
 
 	return (

package/src/components/visual-editor/use-edit-content-only-section-exit.js

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+/**
+ * Allows content only section editing to be exited by clicking outside of the
+ * edited blocks.
+ */
+export function useEditContentOnlySectionExit() {
+	const { getEditedContentOnlySection } = unlock(
+		useSelect( blockEditorStore )
+	);
+	const { stopEditingContentOnlySection } = unlock(
+		useDispatch( blockEditorStore )
+	);
+
+	return useRefEffect(
+		( node ) => {
+			function onClick( event ) {
+				const editedContentOnlySection = getEditedContentOnlySection();
+				if ( ! editedContentOnlySection ) {
+					return;
+				}
+
+				if ( ! event.defaultPrevented ) {
+					event.preventDefault();
+
+					// If the user clicks outside the edited block, stop editing.
+					if (
+						! event.target.closest(
+							`[data-block="${ editedContentOnlySection }"]`
+						)
+					) {
+						stopEditingContentOnlySection();
+					}
+				}
+			}
+
+			node.addEventListener( 'click', onClick );
+
+			return () => {
+				node.removeEventListener( 'click', onClick );
+			};
+		},
+		[ getEditedContentOnlySection, stopEditingContentOnlySection ]
+	);
+}

package/src/components/visual-editor/use-padding-appender.js

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { useRegistry } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
+
+// Ruleset to add space for the typewriter effect. When typing in the last
+// block, there needs to be room to scroll up.
+const CSS =
+	':root :where(.editor-styles-wrapper)::after {content: ""; display: block; height: 40vh;}';
+
+export function usePaddingAppender( enabled ) {
+	const registry = useRegistry();
+	const effect = useRefEffect(
+		( node ) => {
+			function onMouseDown( event ) {
+				if (
+					event.target !== node &&
+					// Tests for the parent element because in the iframed editor if the click is
+					// below the padding the target will be the parent element (html) and should
+					// still be treated as intent to append.
+					event.target !== node.parentElement
+				) {
+					return;
+				}
+
+				// Only handle clicks under the last child.
+				const lastChild = node.lastElementChild;
+				if ( ! lastChild ) {
+					return;
+				}
+
+				const lastChildRect = lastChild.getBoundingClientRect();
+				if ( event.clientY < lastChildRect.bottom ) {
+					return;
+				}
+
+				event.preventDefault();
+
+				const blockOrder = registry
+					.select( blockEditorStore )
+					.getBlockOrder( '' );
+				const lastBlockClientId = blockOrder[ blockOrder.length - 1 ];
+
+				const lastBlock = registry
+					.select( blockEditorStore )
+					.getBlock( lastBlockClientId );
+				const { selectBlock, insertDefaultBlock } =
+					registry.dispatch( blockEditorStore );
+
+				if ( lastBlock && isUnmodifiedDefaultBlock( lastBlock ) ) {
+					selectBlock( lastBlockClientId );
+				} else {
+					insertDefaultBlock();
+				}
+			}
+			const { ownerDocument } = node;
+			// Adds the listener on the document so that in the iframed editor clicks below the
+			// padding can be handled as they too should be treated as intent to append.
+			ownerDocument.addEventListener( 'pointerdown', onMouseDown );
+			return () => {
+				ownerDocument.removeEventListener( 'pointerdown', onMouseDown );
+			};
+		},
+		[ registry ]
+	);
+	return enabled ? [ effect, CSS ] : [];
+}

package/src/dataviews/fields/content-preview/content-preview-view.tsx

@@ -6,8 +6,6 @@ import {
 	// @ts-ignore
 	BlockPreview,
 	// @ts-ignore
-	privateApis as blockEditorPrivateApis,
-	// @ts-ignore
 } from '@wordpress/block-editor';
 import type { BasePost } from '@wordpress/fields';
 import { useSelect } from '@wordpress/data';
@@ -17,12 +15,11 @@ import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { EditorProvider } from '../../../components/provider';
+import { useStyle } from '../../../components/global-styles';
 import { unlock } from '../../../lock-unlock';
 // @ts-ignore
 import { store as editorStore } from '../../../store';
 
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-
 function PostPreviewContainer( {
 	template,
 	post,
@@ -30,7 +27,7 @@ function PostPreviewContainer( {
 	template: any;
 	post: any;
 } ) {
-	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
+	const [ backgroundColor = 'white' ] = useStyle( 'color.background' );
 	const [ postBlocks ] = useEntityBlockEditor( 'postType', post.type, {
 		id: post.id,
 	} );

package/src/hooks/pattern-overrides.js

@@ -19,7 +19,6 @@ import { unlock } from '../lock-unlock';
 const {
 	PatternOverridesControls,
 	ResetOverridesControl,
-	PatternOverridesBlockControls,
 	PATTERN_TYPES,
 	PARTIAL_SYNCING_SUPPORTED_BLOCKS,
 	PATTERN_SYNC_TYPES,
@@ -45,7 +44,6 @@ const withPatternOverrideControls = createHigherOrderComponent(
 				{ props.isSelected && isSupportedBlock && (
 					<ControlsWithStoreSubscription { ...props } />
 				) }
-				{ isSupportedBlock && <PatternOverridesBlockControls /> }
 			</>
 		);
 	},

package/src/store/actions.js

@@ -62,7 +62,7 @@ export const setupEditor =
 		}
 		if (
 			edits &&
-			Object.values( edits ).some(
+			Object.entries( edits ).some(
 				( [ key, edit ] ) =>
 					edit !== ( post[ key ]?.raw ?? post[ key ] )
 			)
@@ -476,6 +476,14 @@ export const autosave =
 		}
 	};
 
+/**
+ * Save for preview.
+ *
+ * @param {Object}  options                     Options object.
+ * @param {boolean} options.forceIsAutosaveable Whether to force the post to be autosaveable.
+ *
+ * @return {Function} Thunk that saves for preview and returns the preview link.
+ */
 export const __unstableSaveForPreview =
 	( { forceIsAutosaveable } = {} ) =>
 	async ( { select, dispatch } ) => {

package/src/store/private-actions.js

@@ -563,3 +563,16 @@ export function resetStylesNavigation() {
 		type: 'RESET_STYLES_NAVIGATION',
 	};
 }
+
+/**
+ * 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

@@ -290,3 +290,13 @@ export function getStylesPath( state ) {
 export function getShowStylebook( state ) {
 	return state.showStylebook ?? false;
 }
+
+/**
+ * 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

@@ -418,6 +418,21 @@ export function showStylebook( 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,
@@ -439,5 +454,6 @@ export default combineReducers( {
 	publishSidebarActive,
 	stylesPath,
 	showStylebook,
+	canvasMinHeight,
 	dataviews: dataviewsReducer,
 } );

package/src/store/selectors.js

@@ -1870,8 +1870,6 @@ export const getPostTypeLabel = createRegistrySelector(
 	( select ) => ( state ) => {
 		const currentPostType = getCurrentPostType( state );
 		const postType = select( coreStore ).getPostType( currentPostType );
-		// Disable reason: Post type labels object is shaped like this.
-		// eslint-disable-next-line camelcase
 		return postType?.labels?.singular_name;
 	}
 );