Fix Meta boxes saving when they’re not present (#67254)

* Initialize meta boxes whether or not they’re visible * Add hook for initialization of meta boxes * Minimize hook for meta boxes initialization * Name the export Co-authored-by: stokesman <[email protected]> Co-authored-by: afercia <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: enricobattocchi <[email protected]>
WordPress · Dec 2, 2024 · cd26001 · cd26001 · github-actions · Dec 2, 2024
1 parent d3f344f
commit cd26001
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 39 deletions.
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -74,6 +74,7 @@ import useEditPostCommands from '../../commands/use-commands';
 import { usePaddingAppender } from './use-padding-appender';
 import { useShouldIframe } from './use-should-iframe';
 import useNavigateToEntityRecord from '../../hooks/use-navigate-to-entity-record';
+import { useMetaBoxInitialization } from '../meta-boxes/use-meta-box-initialization';
 
 const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 const { useCommands } = unlock( coreCommandsPrivateApis );
@@ -413,6 +414,8 @@ function Layout( {
 			const { isZoomOut } = unlock( select( blockEditorStore ) );
 			const { getEditorMode, getRenderingMode } = select( editorStore );
 			const isRenderingPostOnly = getRenderingMode() === 'post-only';
+			const isNotDesignPostType =
+				! DESIGN_POST_TYPES.includes( currentPostType );
 
 			return {
 				mode: getEditorMode(),
@@ -423,9 +426,7 @@ function Layout( {
 					!! select( blockEditorStore ).getBlockSelectionStart(),
 				showIconLabels: get( 'core', 'showIconLabels' ),
 				isDistractionFree: get( 'core', 'distractionFree' ),
-				showMetaBoxes:
-					! DESIGN_POST_TYPES.includes( currentPostType ) &&
-					! isZoomOut(),
+				showMetaBoxes: isNotDesignPostType && ! isZoomOut(),
 				isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
 				templateId:
 					supportsTemplateMode &&
@@ -435,9 +436,7 @@ function Layout( {
 						? getTemplateId( currentPostType, currentPostId )
 						: null,
 				enablePaddingAppender:
-					! isZoomOut() &&
-					isRenderingPostOnly &&
-					! DESIGN_POST_TYPES.includes( currentPostType ),
+					! isZoomOut() && isRenderingPostOnly && isNotDesignPostType,
 			};
 		},
 		[
@@ -447,6 +446,8 @@ function Layout( {
 			settings.supportsTemplateMode,
 		]
 	);
+	useMetaBoxInitialization( hasActiveMetaboxes );
+
 	const [ paddingAppenderRef, paddingStyle ] = usePaddingAppender(
 		enablePaddingAppender
 	);

diff --git a/packages/edit-post/src/components/meta-boxes/index.js b/packages/edit-post/src/components/meta-boxes/index.js
@@ -1,9 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useRegistry } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
-import { store as editorStore } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -13,38 +11,11 @@ import MetaBoxVisibility from './meta-box-visibility';
 import { store as editPostStore } from '../../store';
 
 export default function MetaBoxes( { location } ) {
-	const registry = useRegistry();
-	const { metaBoxes, areMetaBoxesInitialized, isEditorReady } = useSelect(
-		( select ) => {
-			const { __unstableIsEditorReady } = select( editorStore );
-			const {
-				getMetaBoxesPerLocation,
-				areMetaBoxesInitialized: _areMetaBoxesInitialized,
-			} = select( editPostStore );
-			return {
-				metaBoxes: getMetaBoxesPerLocation( location ),
-				areMetaBoxesInitialized: _areMetaBoxesInitialized(),
-				isEditorReady: __unstableIsEditorReady(),
-			};
-		},
-		[ location ]
+	const metaBoxes = useSelect(
+		( select ) =>
+			select( editPostStore ).getMetaBoxesPerLocation[ location ]
 	);
 
-	const hasMetaBoxes = !! metaBoxes?.length;
-
-	// When editor is ready, initialize postboxes (wp core script) and metabox
-	// saving. This initializes all meta box locations, not just this specific
-	// one.
-	useEffect( () => {
-		if ( isEditorReady && hasMetaBoxes && ! areMetaBoxesInitialized ) {
-			registry.dispatch( editPostStore ).initializeMetaBoxes();
-		}
-	}, [ isEditorReady, hasMetaBoxes, areMetaBoxesInitialized ] );
-
-	if ( ! areMetaBoxesInitialized ) {
-		return null;
-	}
-
 	return (
 		<>
 			{ ( metaBoxes ?? [] ).map( ( { id } ) => (

diff --git a/packages/edit-post/src/components/meta-boxes/use-meta-box-initialization.js b/packages/edit-post/src/components/meta-boxes/use-meta-box-initialization.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../store';
+
+/**
+ * Initializes WordPress `postboxes` script and the logic for saving meta boxes.
+ *
+ * @param { boolean } enabled
+ */
+export const useMetaBoxInitialization = ( enabled ) => {
+	const isEnabledAndEditorReady = useSelect(
+		( select ) =>
+			enabled && select( editorStore ).__unstableIsEditorReady(),
+		[ enabled ]
+	);
+	const { initializeMetaBoxes } = useDispatch( editPostStore );
+	// The effect has to rerun when the editor is ready because initializeMetaBoxes
+	// will noop until then.
+	useEffect( () => {
+		if ( isEnabledAndEditorReady ) {
+			initializeMetaBoxes();
+		}
+	}, [ isEnabledAndEditorReady, initializeMetaBoxes ] );
+};