Initialize meta boxes whether or not they’re visible

WordPress · Nov 22, 2024 · ba85e8e · ba85e8e
1 parent 2027fdb
commit ba85e8e
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 36 deletions.
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -17,7 +17,7 @@ import {
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
@@ -26,6 +26,7 @@ import { PluginArea } from '@wordpress/plugins';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	useCallback,
+	useEffect,
 	useMemo,
 	useId,
 	useRef,
@@ -153,17 +154,37 @@ function useEditorStyles( ...additionalStyles ) {
  * @param {boolean} props.isLegacy True when the editor canvas is not in an iframe.
  */
 function MetaBoxesMain( { isLegacy } ) {
-	const [ isOpen, openHeight, hasAnyVisible ] = useSelect( ( select ) => {
+	const [
+		hasInitialized,
+		isEditorReady,
+		isOpen,
+		openHeight,
+		hasAny,
+		hasAnyVisible,
+	] = useSelect( ( select ) => {
+		const { __unstableIsEditorReady } = select( editorStore );
 		const { get } = select( preferencesStore );
-		const { isMetaBoxLocationVisible } = select( editPostStore );
+		const {
+			areMetaBoxesInitialized,
+			getMetaBoxesPerLocation,
+			isMetaBoxLocationVisible,
+		} = select( editPostStore );
 		return [
+			areMetaBoxesInitialized(),
+			__unstableIsEditorReady(),
 			get( 'core/edit-post', 'metaBoxesMainIsOpen' ),
 			get( 'core/edit-post', 'metaBoxesMainOpenHeight' ),
+			[
+				...getMetaBoxesPerLocation( 'normal' ),
+				...getMetaBoxesPerLocation( 'advanced' ),
+				...getMetaBoxesPerLocation( 'side' ),
+			].length > 0,
 			isMetaBoxLocationVisible( 'normal' ) ||
 				isMetaBoxLocationVisible( 'advanced' ) ||
 				isMetaBoxLocationVisible( 'side' ),
 		];
 	}, [] );
+	const registry = useRegistry();
 	const { set: setPreference } = useDispatch( preferencesStore );
 	const metaBoxesMainRef = useRef();
 	const isShort = useMediaQuery( '(max-height: 549px)' );
@@ -226,6 +247,14 @@ function MetaBoxesMain( { isLegacy } ) {
 		}
 	};
 
+	// When editor is ready, initialize postboxes (wp core script) and meta box
+	// saving. This initializes all meta box locations.
+	useEffect( () => {
+		if ( isEditorReady && hasAny && ! hasInitialized ) {
+			registry.dispatch( editPostStore ).initializeMetaBoxes();
+		}
+	}, [ isEditorReady, hasAny, hasInitialized, registry ] );
+
 	if ( ! hasAnyVisible ) {
 		return;
 	}

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 } ) => (