@wordpress/edit-post 8.8.8 → 8.10.0

package/src/components/layout/index.js

@@ -87,27 +87,17 @@ const DESIGN_POST_TYPES = [
 	'wp_navigation',
 ];
 
-function useEditorStyles() {
-	const {
-		hasThemeStyleSupport,
-		editorSettings,
-		isZoomedOutView,
-		renderingMode,
-		postType,
-	} = useSelect( ( select ) => {
-		const { __unstableGetEditorMode } = select( blockEditorStore );
-		const { getCurrentPostType, getRenderingMode } = select( editorStore );
-		const _postType = getCurrentPostType();
+function useEditorStyles( ...additionalStyles ) {
+	const { hasThemeStyleSupport, editorSettings } = useSelect( ( select ) => {
 		return {
 			hasThemeStyleSupport:
 				select( editPostStore ).isFeatureActive( 'themeStyles' ),
 			editorSettings: select( editorStore ).getEditorSettings(),
-			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
-			renderingMode: getRenderingMode(),
-			postType: _postType,
 		};
 	}, [] );
 
+	const addedStyles = additionalStyles.join( '\n' );
+
 	// Compute the default styles.
 	return useMemo( () => {
 		const presetStyles =
@@ -144,19 +134,8 @@ function useEditorStyles() {
 			? editorSettings.styles ?? []
 			: defaultEditorStyles;
 
-		// Add a space for the typewriter effect. When typing in the last block,
-		// there needs to be room to scroll up.
-		if (
-			! isZoomedOutView &&
-			renderingMode === 'post-only' &&
-			! DESIGN_POST_TYPES.includes( postType )
-		) {
-			return [
-				...baseStyles,
-				{
-					css: ':root :where(.editor-styles-wrapper)::after {content: ""; display: block; height: 40vh;}',
-				},
-			];
+		if ( addedStyles ) {
+			return [ ...baseStyles, { css: addedStyles } ];
 		}
 
 		return baseStyles;
@@ -165,7 +144,7 @@ function useEditorStyles() {
 		editorSettings.disableLayoutStyles,
 		editorSettings.styles,
 		hasThemeStyleSupport,
-		postType,
+		addedStyles,
 	] );
 }
 
@@ -393,7 +372,6 @@ function Layout( {
 } ) {
 	useCommands();
 	useEditPostCommands();
-	const paddingAppenderRef = usePaddingAppender();
 	const shouldIframe = useShouldIframe();
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const {
@@ -417,6 +395,7 @@ function Layout( {
 		hasHistory,
 		isWelcomeGuideVisible,
 		templateId,
+		enablePaddingAppender,
 	} = useSelect(
 		( select ) => {
 			const { get } = select( preferencesStore );
@@ -432,9 +411,12 @@ function Layout( {
 				kind: 'postType',
 				name: 'wp_template',
 			} );
+			const { __unstableGetEditorMode } = select( blockEditorStore );
+			const { getEditorMode, getRenderingMode } = select( editorStore );
+			const isRenderingPostOnly = getRenderingMode() === 'post-only';
 
 			return {
-				mode: select( editorStore ).getEditorMode(),
+				mode: getEditorMode(),
 				isFullscreenActive:
 					select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
 				hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
@@ -444,7 +426,7 @@ function Layout( {
 				isDistractionFree: get( 'core', 'distractionFree' ),
 				showMetaBoxes:
 					! DESIGN_POST_TYPES.includes( currentPostType ) &&
-					select( editorStore ).getRenderingMode() === 'post-only',
+					isRenderingPostOnly,
 				isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
 				templateId:
 					supportsTemplateMode &&
@@ -453,10 +435,17 @@ function Layout( {
 					! isEditingTemplate
 						? getEditedPostTemplateId()
 						: null,
+				enablePaddingAppender:
+					__unstableGetEditorMode() !== 'zoom-out' &&
+					isRenderingPostOnly &&
+					! DESIGN_POST_TYPES.includes( currentPostType ),
 			};
 		},
 		[ currentPostType, isEditingTemplate, settings.supportsTemplateMode ]
 	);
+	const [ paddingAppenderRef, paddingStyle ] = usePaddingAppender(
+		enablePaddingAppender
+	);
 
 	// Set the right context for the command palette
 	const commandContext = hasBlockSelected
@@ -472,7 +461,7 @@ function Layout( {
 		} ),
 		[ settings, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord ]
 	);
-	const styles = useEditorStyles();
+	const styles = useEditorStyles( paddingStyle );
 
 	// We need to add the show-icon-labels class to the body element so it is applied to modals.
 	if ( showIconLabels ) {

package/src/components/layout/use-padding-appender.js

@@ -6,24 +6,23 @@ import { useRefEffect } from '@wordpress/compose';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 
-export function usePaddingAppender() {
+// 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();
-	return useRefEffect(
+	const effect = useRefEffect(
 		( node ) => {
 			function onMouseDown( event ) {
-				if ( event.target !== node ) {
-					return;
-				}
-
-				const { ownerDocument } = node;
-				const { defaultView } = ownerDocument;
-
-				const pseudoHeight = defaultView.parseInt(
-					defaultView.getComputedStyle( node, ':after' ).height,
-					10
-				);
-
-				if ( ! pseudoHeight ) {
+				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;
 				}
 
@@ -38,7 +37,7 @@ export function usePaddingAppender() {
 					return;
 				}
 
-				event.stopPropagation();
+				event.preventDefault();
 
 				const blockOrder = registry
 					.select( blockEditorStore )
@@ -57,11 +56,15 @@ export function usePaddingAppender() {
 					insertDefaultBlock();
 				}
 			}
-			node.addEventListener( 'mousedown', onMouseDown );
+			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( 'mousedown', onMouseDown );
 			return () => {
-				node.removeEventListener( 'mousedown', onMouseDown );
+				ownerDocument.removeEventListener( 'mousedown', onMouseDown );
 			};
 		},
 		[ registry ]
 	);
+	return enabled ? [ effect, CSS ] : [];
 }

package/src/components/preferences-modal/enable-custom-fields.js

@@ -39,9 +39,7 @@ export function CustomFieldsConfirmation( { willEnable } ) {
 				) }
 			</p>
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
-				className="edit-post-preferences-modal__custom-fields-confirmation-button"
+				__next40pxDefaultSize
 				variant="secondary"
 				isBusy={ isReloading }
 				accessibleWhenDisabled

package/src/components/preferences-modal/test/__snapshots__/enable-custom-fields.js.snap

@@ -97,7 +97,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
       A page reload is required for this change. Make sure your content is saved before reloading.
     </p>
     <button
-      class="components-button edit-post-preferences-modal__custom-fields-confirmation-button is-secondary"
+      class="components-button is-next-40px-default-size is-secondary"
       type="button"
     >
       Show & Reload Page
@@ -300,7 +300,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
       A page reload is required for this change. Make sure your content is saved before reloading.
     </p>
     <button
-      class="components-button edit-post-preferences-modal__custom-fields-confirmation-button is-secondary"
+      class="components-button is-next-40px-default-size is-secondary"
       type="button"
     >
       Hide & Reload Page

package/src/index.js

@@ -28,7 +28,6 @@ import { unlock } from './lock-unlock';
 const {
 	BackButton: __experimentalMainDashboardButton,
 	registerCoreBlockBindingsSources,
-	bootstrapBlockBindingsSourcesFromServer,
 } = unlock( editorPrivateApis );
 
 /**
@@ -95,7 +94,6 @@ export function initializeEditor(
 	}
 
 	registerCoreBlocks();
-	bootstrapBlockBindingsSourcesFromServer( settings?.blockBindingsSources );
 	registerCoreBlockBindingsSources();
 	registerLegacyWidgetBlock( { inserter: false } );
 	registerWidgetGroupBlock( { inserter: false } );

package/src/store/actions.js

@@ -481,7 +481,7 @@ export const initializeMetaBoxes =
 		addAction(
 			'editor.savePost',
 			'core/edit-post/save-metaboxes',
-			async ( options ) => {
+			async ( post, options ) => {
 				if ( ! options.isAutosave && select.hasMetaBoxes() ) {
 					await dispatch.requestMetaBoxUpdates();
 				}

package/src/store/selectors.js

@@ -506,7 +506,7 @@ export const __experimentalGetInsertionPoint = createRegistrySelector(
 				version: '6.7',
 			}
 		);
-		return unlock( select( editorStore ) ).getInsertionPoint();
+		return unlock( select( editorStore ) ).getInserter();
 	}
 );