Move legacy meta boxes to toggle

docs/reference-guides/data/data-core-edit-post.md

@@ -328,6 +328,10 @@ _Returns_
 
 -   `boolean`: Whether the metaboxes are being saved.
 
+### showMetaBoxes
+
+Undocumented declaration.
+
 <!-- END TOKEN(Autogenerated selectors|../../../packages/edit-post/src/store/selectors.js) -->
 
 ## Actions
@@ -522,6 +526,10 @@ _Parameters_
 
 -   _feature_ `string`: Feature name.
 
+### toggleMetaBoxes
+
+Undocumented declaration.
+
 ### togglePinnedPluginItem
 
 Triggers an action object used to toggle a plugin name flag.

packages/edit-post/src/components/header/index.js

@@ -19,9 +19,9 @@ import {
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { next, previous } from '@wordpress/icons';
+import { next, previous, metabox } from '@wordpress/icons';
 import { PinnedItems } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
 import {
@@ -65,6 +65,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 		isTextEditor,
 		blockSelectionStart,
 		hasActiveMetaboxes,
+		showMetaBoxes,
 		isPublishSidebarOpened,
 		showIconLabels,
 		hasHistory,
@@ -77,6 +78,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 			blockSelectionStart:
 				select( blockEditorStore ).getBlockSelectionStart(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
+			showMetaBoxes: select( editPostStore ).showMetaBoxes(),
 			hasHistory:
 				!! select( editorStore ).getEditorSettings()
 					.onNavigateToPreviousEntityRecord,
@@ -85,6 +87,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 			showIconLabels: getPreference( 'core', 'showIconLabels' ),
 		};
 	}, [] );
+	const { toggleMetaBoxes } = useDispatch( editPostStore );
 
 	const { showFixedToolbar } = useShowBlockTools();
 	const showTopToolbar = isLargeViewport && showFixedToolbar;
@@ -189,6 +192,16 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 						setEntitiesSavedStatesCallback
 					}
 				/>
+				{ hasActiveMetaboxes && (
+					<Button
+						icon={ metabox }
+						onClick={ () => {
+							toggleMetaBoxes();
+						} }
+						label={ __( 'Show meta boxes' ) }
+						isPressed={ showMetaBoxes }
+					/>
+				) }
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<PinnedItems.Slot scope="core/edit-post" />
 				) }

packages/edit-post/src/components/layout/index.js

@@ -139,7 +139,7 @@ function Layout( { initialPost } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 
-	const { openGeneralSidebar, closeGeneralSidebar } =
+	const { openGeneralSidebar, closeGeneralSidebar, initializeMetaBoxes } =
 		useDispatch( editPostStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { setIsInserterOpened } = useDispatch( editorStore );
@@ -158,6 +158,8 @@ function Layout( { initialPost } ) {
 		isDistractionFree,
 		showBlockBreadcrumbs,
 		showMetaBoxes,
+		areMetaBoxesInitialized,
+		isEditorReady,
 		documentLabel,
 		hasHistory,
 	} = useSelect( ( select ) => {
@@ -168,7 +170,12 @@ function Layout( { initialPost } ) {
 
 		return {
 			showMetaBoxes:
-				select( editorStore ).getRenderingMode() === 'post-only',
+				select( editorStore ).getRenderingMode() === 'post-only' &&
+				select( editPostStore ).areMetaBoxesInitialized() &&
+				select( editPostStore ).showMetaBoxes(),
+			areMetaBoxesInitialized:
+				select( editPostStore ).areMetaBoxesInitialized(),
+			isEditorReady: select( editorStore ).__unstableIsEditorReady(),
 			sidebarIsOpened: !! (
 				select( interfaceStore ).getActiveComplementaryArea(
 					editPostStore.name
@@ -222,6 +229,22 @@ function Layout( { initialPost } ) {
 			closeGeneralSidebar();
 		}
 	}, [ closeGeneralSidebar, isInserterOpened, isHugeViewport ] );
+	// When editor is ready, initialize postboxes (wp core script) and metabox
+	// saving.
+	useEffect( () => {
+		if (
+			isEditorReady &&
+			hasActiveMetaboxes &&
+			! areMetaBoxesInitialized
+		) {
+			initializeMetaBoxes();
+		}
+	}, [
+		isEditorReady,
+		hasActiveMetaboxes,
+		areMetaBoxesInitialized,
+		initializeMetaBoxes,
+	] );
 
 	// Local state for save panel.
 	// Note 'truthy' callback implies an open panel.
@@ -340,7 +363,7 @@ function Layout( { initialPost } ) {
 						{ isRichEditingEnabled && mode === 'visual' && (
 							<VisualEditor styles={ styles } />
 						) }
-						{ ! isDistractionFree && showMetaBoxes && (
+						{ showMetaBoxes && (
 							<div className="edit-post-layout__metaboxes">
 								<MetaBoxes location="normal" />
 								<MetaBoxes location="advanced" />

packages/edit-post/src/components/layout/style.scss

@@ -1,6 +1,15 @@
 .edit-post-layout__metaboxes {
 	flex-shrink: 0;
 	clear: both;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	background: $white;
+	z-index: 100;
+	padding: 20px;
+	box-sizing: border-box;
 }
 
 // Adjust the position of the notices

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,12 @@ 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(),
-			};
-		},
+	const metaBoxes = useSelect(
+		( select ) =>
+			select( editPostStore ).getMetaBoxesPerLocation( location ),
 		[ 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 } ) => (

packages/edit-post/src/components/visual-editor/index.js

@@ -48,16 +48,12 @@ export default function VisualEditor( { styles } ) {
 				select( editorStore ).getCurrentPostType() === 'wp_template',
 		};
 	}, [] );
-	const hasMetaBoxes = useSelect(
-		( select ) => select( editPostStore ).hasMetaBoxes(),
-		[]
-	);
 
 	let paddingBottom;
 
 	// Add a constant padding for the typewritter effect. When typing at the
 	// bottom, there needs to be room to scroll up.
-	if ( ! hasMetaBoxes && renderingMode === 'post-only' ) {
+	if ( renderingMode === 'post-only' ) {
 		paddingBottom = '40vh';
 	}
 
@@ -75,8 +71,8 @@ export default function VisualEditor( { styles } ) {
 	);
 
 	const isToBeIframed =
-		( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) &&
-			! hasMetaBoxes ) ||
+		hasV3BlocksOnly ||
+		( isGutenbergPlugin && isBlockBasedTheme ) ||
 		isEditingTemplate;
 
 	return (

packages/edit-post/src/store/actions.js

@@ -477,6 +477,10 @@ export const initializeMetaBoxes =
 		} );
 	};
 
+export function toggleMetaBoxes() {
+	return { type: 'TOGGLE_META_BOXES' };
+}
+
 /**
  * Action that toggles Distraction free mode.
  * Distraction free mode expects there are no sidebars, as due to the

packages/edit-post/src/store/reducer.js

@@ -95,10 +95,19 @@ function metaBoxesInitialized( state = false, action ) {
 	return state;
 }
 
+function showMetaBoxes( state = false, action ) {
+	switch ( action.type ) {
+		case 'TOGGLE_META_BOXES':
+			return ! state;
+	}
+	return state;
+}
+
 const metaBoxes = combineReducers( {
 	isSaving: isSavingMetaBoxes,
 	locations: metaBoxLocations,
 	initialized: metaBoxesInitialized,
+	showMetaBoxes,
 } );
 
 export default combineReducers( {

packages/edit-post/src/store/selectors.js

@@ -552,6 +552,10 @@ export function areMetaBoxesInitialized( state ) {
 	return state.metaBoxes.initialized;
 }
 
+export function showMetaBoxes( state ) {
+	return state.metaBoxes.showMetaBoxes;
+}
+
 /**
  * Retrieves the template of the currently edited post.
  *

packages/icons/src/index.js

@@ -152,6 +152,7 @@ export { default as media } from './library/media';
 export { default as mediaAndText } from './library/media-and-text';
 export { default as megaphone } from './library/megaphone';
 export { default as menu } from './library/menu';
+export { default as metabox } from './library/metabox';
 export { default as mobile } from './library/mobile';
 export { default as more } from './library/more';
 export { default as moreHorizontal } from './library/more-horizontal';

packages/icons/src/library/metabox.js

@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const metabox = (
+	<SVG width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M20 14v4c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2v-4h16Zm0-1.5V6c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v6.5h1.5V6c0-.3.2-.5.5-.5h12c.3 0 .5.2.5.5v6.5H20ZM5.5 18c0 .3.2.5.5.5h12c.3 0 .5-.2.5-.5v-2.5h-13V18Z"
+		/>
+	</SVG>
+);
+
+export default metabox;