@wordpress/editor 14.34.1-next.2f1c7c01b.0 → 14.35.1-next.16d95556a.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,
@@ -350,6 +352,10 @@ function VisualEditor( {
 		return canvasMinHeight + scrollTop;
 	}, [ canvasMinHeight ] );
 
+	const [ paddingAppenderRef, paddingStyle ] = usePaddingAppender(
+		! isPreview && renderingMode === 'post-only' && ! isDesignPostType
+	);
+
 	const iframeStyles = useMemo( () => {
 		return [
 			...( styles ?? [] ),
@@ -366,6 +372,7 @@ function VisualEditor( {
 					// 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%;}`
@@ -375,7 +382,7 @@ function VisualEditor( {
 				// color to the iframe HTML element to match the background color of the editor canvas.
 			},
 		];
-	}, [ styles, enableResizing, calculatedMinHeight ] );
+	}, [ styles, enableResizing, calculatedMinHeight, paddingStyle ] );
 
 	const typewriterRef = useTypewriter();
 	contentRef = useMergeRefs( [
@@ -389,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 } ) => {