From ba85e8ee1f7b86ed8c098cfd7608b21137087e18 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Fri, 22 Nov 2024 09:50:41 -0800 Subject: [PATCH 1/4] =?UTF-8?q?Initialize=20meta=20boxes=20whether=20or=20?= =?UTF-8?q?not=20they=E2=80=99re=20visible?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../edit-post/src/components/layout/index.js | 35 ++++++++++++++++-- .../src/components/meta-boxes/index.js | 37 ++----------------- 2 files changed, 36 insertions(+), 36 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index aec14eab989f03..d3a21711af2a9e 100644 --- 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 index 14728c97cf6b68..fdc74a5df4ce95 100644 --- 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 } ) => ( From 0b4af6ff15256b04f9fb450239a61dbbf6167ac1 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Sat, 23 Nov 2024 09:41:12 -0800 Subject: [PATCH 2/4] Add hook for initialization of meta boxes --- .../edit-post/src/components/layout/index.js | 47 ++++--------------- .../meta-boxes/use-meta-box-initialization.js | 44 +++++++++++++++++ 2 files changed, 53 insertions(+), 38 deletions(-) create mode 100644 packages/edit-post/src/components/meta-boxes/use-meta-box-initialization.js diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index d3a21711af2a9e..916823070db3d7 100644 --- 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, useRegistry } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { privateApis as blockEditorPrivateApis, store as blockEditorStore, @@ -26,7 +26,6 @@ import { PluginArea } from '@wordpress/plugins'; import { __, sprintf } from '@wordpress/i18n'; import { useCallback, - useEffect, useMemo, useId, useRef, @@ -75,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 ); @@ -154,37 +154,17 @@ function useEditorStyles( ...additionalStyles ) { * @param {boolean} props.isLegacy True when the editor canvas is not in an iframe. */ function MetaBoxesMain( { isLegacy } ) { - const [ - hasInitialized, - isEditorReady, - isOpen, - openHeight, - hasAny, - hasAnyVisible, - ] = useSelect( ( select ) => { - const { __unstableIsEditorReady } = select( editorStore ); + const [ isOpen, openHeight, hasAnyVisible ] = useSelect( ( select ) => { const { get } = select( preferencesStore ); - const { - areMetaBoxesInitialized, - getMetaBoxesPerLocation, - isMetaBoxLocationVisible, - } = select( editPostStore ); + const { 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)' ); @@ -247,14 +227,6 @@ 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; } @@ -443,6 +415,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(), @@ -453,9 +427,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 && @@ -465,9 +437,7 @@ function Layout( { ? getTemplateId( currentPostType, currentPostId ) : null, enablePaddingAppender: - ! isZoomOut() && - isRenderingPostOnly && - ! DESIGN_POST_TYPES.includes( currentPostType ), + ! isZoomOut() && isRenderingPostOnly && isNotDesignPostType, }; }, [ @@ -477,6 +447,7 @@ function Layout( { settings.supportsTemplateMode, ] ); + useMetaBoxInitialization( showMetaBoxes ); const [ paddingAppenderRef, paddingStyle ] = usePaddingAppender( enablePaddingAppender ); 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 new file mode 100644 index 00000000000000..d5383a911999ef --- /dev/null +++ b/packages/edit-post/src/components/meta-boxes/use-meta-box-initialization.js @@ -0,0 +1,44 @@ +/** + * 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 postboxes (wp core script) and meta box saving for all meta box locations. + * + * @param { boolean } enabled + */ +export default ( enabled ) => { + const { areInitialized, isEditorReady, hasAny } = useSelect( + ( select ) => { + if ( ! enabled ) { + return {}; + } + const { __unstableIsEditorReady } = select( editorStore ); + const { areMetaBoxesInitialized, getMetaBoxesPerLocation } = + select( editPostStore ); + return { + areInitialized: areMetaBoxesInitialized(), + isEditorReady: __unstableIsEditorReady(), + hasAny: + getMetaBoxesPerLocation( 'normal' ).length > 0 || + getMetaBoxesPerLocation( 'advanced' ).length > 0 || + getMetaBoxesPerLocation( 'side' ).length > 0, + }; + }, + [ enabled ] + ); + const { initializeMetaBoxes } = useDispatch( editPostStore ); + useEffect( () => { + if ( isEditorReady && hasAny && ! areInitialized ) { + initializeMetaBoxes(); + } + }, [ isEditorReady, hasAny, areInitialized, initializeMetaBoxes ] ); +}; From db46c07d5e0f4a87db9784fb7143b6b976e0947e Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Mon, 25 Nov 2024 09:49:54 -0800 Subject: [PATCH 3/4] Minimize hook for meta boxes initialization --- .../edit-post/src/components/layout/index.js | 3 +- .../meta-boxes/use-meta-box-initialization.js | 28 ++++++------------- 2 files changed, 10 insertions(+), 21 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 916823070db3d7..6d8a00e72b4782 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -447,7 +447,8 @@ function Layout( { settings.supportsTemplateMode, ] ); - useMetaBoxInitialization( showMetaBoxes ); + useMetaBoxInitialization( hasActiveMetaboxes ); + const [ paddingAppenderRef, paddingStyle ] = usePaddingAppender( enablePaddingAppender ); 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 index d5383a911999ef..ced9a9a07e98b6 100644 --- 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 @@ -11,34 +11,22 @@ import { useEffect } from '@wordpress/element'; import { store as editPostStore } from '../../store'; /** - * Initializes postboxes (wp core script) and meta box saving for all meta box locations. + * Initializes WordPress `postboxes` script and the logic for saving meta boxes. * * @param { boolean } enabled */ export default ( enabled ) => { - const { areInitialized, isEditorReady, hasAny } = useSelect( - ( select ) => { - if ( ! enabled ) { - return {}; - } - const { __unstableIsEditorReady } = select( editorStore ); - const { areMetaBoxesInitialized, getMetaBoxesPerLocation } = - select( editPostStore ); - return { - areInitialized: areMetaBoxesInitialized(), - isEditorReady: __unstableIsEditorReady(), - hasAny: - getMetaBoxesPerLocation( 'normal' ).length > 0 || - getMetaBoxesPerLocation( 'advanced' ).length > 0 || - getMetaBoxesPerLocation( 'side' ).length > 0, - }; - }, + 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 ( isEditorReady && hasAny && ! areInitialized ) { + if ( isEnabledAndEditorReady ) { initializeMetaBoxes(); } - }, [ isEditorReady, hasAny, areInitialized, initializeMetaBoxes ] ); + }, [ isEnabledAndEditorReady, initializeMetaBoxes ] ); }; From 030c6a5b25ca1b6b1f0e054a48f8258199495a53 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Fri, 29 Nov 2024 07:43:45 -0800 Subject: [PATCH 4/4] Name the export --- packages/edit-post/src/components/layout/index.js | 2 +- .../src/components/meta-boxes/use-meta-box-initialization.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 6d8a00e72b4782..253704f8f2d76e 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -74,7 +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'; +import { useMetaBoxInitialization } from '../meta-boxes/use-meta-box-initialization'; const { getLayoutStyles } = unlock( blockEditorPrivateApis ); const { useCommands } = unlock( coreCommandsPrivateApis ); 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 index ced9a9a07e98b6..4309d85e3c22bf 100644 --- 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 @@ -15,7 +15,7 @@ import { store as editPostStore } from '../../store'; * * @param { boolean } enabled */ -export default ( enabled ) => { +export const useMetaBoxInitialization = ( enabled ) => { const isEnabledAndEditorReady = useSelect( ( select ) => enabled && select( editorStore ).__unstableIsEditorReady(),