From c5a425c5d23f8cd209414de60a31ee7fedf51c98 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Wed, 21 Feb 2024 15:21:34 +0100
Subject: [PATCH] Move legacy meta boxes to toggle

---
 .../data/data-core-edit-post.md               |  8 +++++
 .../edit-post/src/components/header/index.js  | 17 ++++++++--
 .../edit-post/src/components/layout/index.js  |  3 +-
 .../src/components/layout/style.scss          |  9 ++++++
 .../src/components/visual-editor/index.js     | 32 ++-----------------
 packages/edit-post/src/store/actions.js       |  4 +++
 packages/edit-post/src/store/reducer.js       |  9 ++++++
 packages/edit-post/src/store/selectors.js     |  4 +++
 8 files changed, 54 insertions(+), 32 deletions(-)

diff --git a/docs/reference-guides/data/data-core-edit-post.md b/docs/reference-guides/data/data-core-edit-post.md
index 0401734597d248..e5dd8917e6167c 100644
--- a/docs/reference-guides/data/data-core-edit-post.md
+++ b/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.
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index b7e42d0217eefc..9b4d0a6e0ebf1d 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -18,9 +18,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, box } from '@wordpress/icons';
 import { PinnedItems } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
 import {
@@ -63,6 +63,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 		isTextEditor,
 		hasBlockSelection,
 		hasActiveMetaboxes,
+		showMetaBoxes,
 		hasFixedToolbar,
 		isPublishSidebarOpened,
 		showIconLabels,
@@ -76,6 +77,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 			hasBlockSelection:
 				!! 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 [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
 		useState( true );
@@ -187,6 +190,16 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 						setEntitiesSavedStatesCallback
 					}
 				/>
+				{ hasActiveMetaboxes && (
+					<Button
+						icon={ box }
+						onClick={ () => {
+							toggleMetaBoxes();
+						} }
+						label={ __( 'Show meta boxes' ) }
+						isPressed={ showMetaBoxes }
+					/>
+				) }
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<PinnedItems.Slot scope="core/edit-post" />
 				) }
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index c17a16d11c81b1..ff82713f691f04 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -168,7 +168,8 @@ function Layout( { initialPost } ) {
 
 		return {
 			showMetaBoxes:
-				select( editorStore ).getRenderingMode() === 'post-only',
+				select( editorStore ).getRenderingMode() === 'post-only' &&
+				select( editPostStore ).showMetaBoxes(),
 			sidebarIsOpened: !! (
 				select( interfaceStore ).getActiveComplementaryArea(
 					editPostStore.name
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 229ab58a4e14b0..51fb99c3e45c6b 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/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
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 74dffb35fcd273..06f28d9b4e1a2f 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -10,7 +10,6 @@ import {
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
-import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
 
@@ -27,7 +26,6 @@ const isGutenbergPlugin = process.env.IS_GUTENBERG_PLUGIN ? true : false;
 export default function VisualEditor( { styles } ) {
 	const {
 		isWelcomeGuideVisible,
-		renderingMode,
 		isBlockBasedTheme,
 		hasV3BlocksOnly,
 		isEditingTemplate,
@@ -48,35 +46,11 @@ 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' ) {
-		paddingBottom = '40vh';
-	}
-
-	styles = useMemo(
-		() => [
-			...styles,
-			{
-				// We should move this in to future to the body.
-				css: paddingBottom
-					? `body{padding-bottom:${ paddingBottom }}`
-					: '',
-			},
-		],
-		[ styles, paddingBottom ]
-	);
 
 	const isToBeIframed =
-		( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) &&
-			! hasMetaBoxes ) ||
+		hasV3BlocksOnly ||
+		isGutenbergPlugin ||
+		isBlockBasedTheme ||
 		isEditingTemplate;
 
 	return (
diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js
index 5c5430787cad3d..dba7e35e4c3dd1 100644
--- a/packages/edit-post/src/store/actions.js
+++ b/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
diff --git a/packages/edit-post/src/store/reducer.js b/packages/edit-post/src/store/reducer.js
index d3cf1d40492053..a2956c3e71b450 100644
--- a/packages/edit-post/src/store/reducer.js
+++ b/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( {
diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js
index b9fe954e79ad55..b8abd10adc95ff 100644
--- a/packages/edit-post/src/store/selectors.js
+++ b/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.
  *