Editor: Move the sidebar component to the editor package (#61497)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: jameskoster <[email protected]>
WordPress · May 8, 2024 · 293537d · 293537d
1 parent 1eb7644
commit 293537d
Show file tree

Hide file tree

Showing 23 changed files with 137 additions and 253 deletions.
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -45,7 +45,6 @@ import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
 import InitPatternModal from '../init-pattern-modal';
 import BrowserURL from '../browser-url';
 import Header from '../header';
-import SettingsSidebar from '../sidebar/settings-sidebar';
 import MetaBoxes from '../meta-boxes';
 import WelcomeGuide from '../welcome-guide';
 import { store as editPostStore } from '../../store';
@@ -63,6 +62,7 @@ const {
 	SavePublishPanels,
 	InterfaceSkeleton,
 	interfaceStore,
+	Sidebar,
 } = unlock( editorPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
@@ -161,6 +161,7 @@ function Layout( { initialPost } ) {
 		hasHistory,
 		hasBlockBreadcrumbs,
 		blockEditorMode,
+		isEditingTemplate,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
@@ -198,6 +199,8 @@ function Layout( { initialPost } ) {
 			hasBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 			blockEditorMode:
 				select( blockEditorStore ).__unstableGetEditorMode(),
+			isEditingTemplate:
+				select( editorStore ).getCurrentPostType() === 'wp_template',
 		};
 	}, [] );
 
@@ -372,7 +375,13 @@ function Layout( { initialPost } ) {
 			<WelcomeGuide />
 			<InitPatternModal />
 			<PluginArea onError={ onPluginAreaError } />
-			{ ! isDistractionFree && <SettingsSidebar /> }
+			{ ! isDistractionFree && (
+				<Sidebar
+					extraPanels={
+						! isEditingTemplate && <MetaBoxes location="side" />
+					}
+				/>
+			) }
 		</>
 	);
 }

diff --git a/packages/edit-post/src/components/sidebar/post-format/style.scss b/packages/edit-post/src/components/sidebar/post-format/style.scss
diff --git a/packages/edit-post/src/components/sidebar/post-pending-status/index.js b/packages/edit-post/src/components/sidebar/post-pending-status/index.js
diff --git a/packages/edit-post/src/components/sidebar/post-sticky/index.js b/packages/edit-post/src/components/sidebar/post-sticky/index.js
diff --git a/packages/edit-post/src/components/sidebar/post-trash/index.js b/packages/edit-post/src/components/sidebar/post-trash/index.js
diff --git a/packages/edit-post/src/components/sidebar/post-visibility/index.js b/packages/edit-post/src/components/sidebar/post-visibility/index.js
diff --git a/packages/edit-post/src/components/sidebar/post-visibility/style.scss b/packages/edit-post/src/components/sidebar/post-visibility/style.scss
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
@@ -2,10 +2,6 @@
 @import "./components/header/fullscreen-mode-close/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/meta-boxes/meta-boxes-area/style.scss";
-@import "./components/sidebar/style.scss";
-@import "./components/sidebar/post-format/style.scss";
-@import "./components/sidebar/post-slug/style.scss";
-@import "./components/sidebar/post-visibility/style.scss";
 @import "./components/text-editor/style.scss";
 @import "./components/visual-editor/style.scss";
 @import "./components/welcome-guide/style.scss";

diff --git a/...c/components/sidebar/post-format/index.js → ...ditor/src/components/post-format/panel.js b/...c/components/sidebar/post-format/index.js → ...ditor/src/components/post-format/panel.js
@@ -2,15 +2,17 @@
  * WordPress dependencies
  */
 import { PanelRow } from '@wordpress/components';
-import {
-	PostFormat as PostFormatForm,
-	PostFormatCheck,
-} from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import PostFormatForm from './';
+import PostFormatCheck from './check';
 
 export function PostFormat() {
 	return (
 		<PostFormatCheck>
-			<PanelRow className="edit-post-post-format">
+			<PanelRow className="editor-post-format__panel">
 				<PostFormatForm />
 			</PanelRow>
 		</PostFormatCheck>

diff --git a/packages/editor/src/components/post-format/style.scss b/packages/editor/src/components/post-format/style.scss
@@ -1,3 +1,9 @@
 [class].editor-post-format__suggestion {
 	margin: $grid-unit-05 0 0 0;
 }
+
+.editor-post-format__panel {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+}
diff --git a/...src/components/sidebar/post-slug/index.js → .../editor/src/components/post-slug/panel.js b/...src/components/sidebar/post-slug/index.js → .../editor/src/components/post-slug/panel.js
@@ -2,12 +2,17 @@
  * WordPress dependencies
  */
 import { PanelRow } from '@wordpress/components';
-import { PostSlug as PostSlugForm, PostSlugCheck } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import PostSlugForm from './';
+import PostSlugCheck from './check';
 
 export function PostSlug() {
 	return (
 		<PostSlugCheck>
-			<PanelRow className="edit-post-post-slug">
+			<PanelRow className="editor-post-slug">
 				<PostSlugForm />
 			</PanelRow>
 		</PostSlugCheck>

diff --git a/...c/components/sidebar/post-slug/style.scss → ...ditor/src/components/post-slug/style.scss b/...c/components/sidebar/post-slug/style.scss → ...ditor/src/components/post-slug/style.scss
@@ -1,4 +1,4 @@
-.edit-post-post-slug {
+.editor-post-slug {
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;

diff --git a/packages/editor/src/components/post-sticky/panel.js b/packages/editor/src/components/post-sticky/panel.js
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import PostPanelRow from '../post-panel-row';
+import PostStickyForm from './';
+import PostStickyCheck from './check';
+
+export function PostStickyPanel() {
+	return (
+		<PostStickyCheck>
+			<PostPanelRow>
+				<PostStickyForm />
+			</PostPanelRow>
+		</PostStickyCheck>
+	);
+}
+
+export default PostStickyPanel;
diff --git a/packages/editor/src/components/post-trash/panel.js b/packages/editor/src/components/post-trash/panel.js
@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import PostTrashCheck from './check';
+import PostTrashLink from './';
+
+export default function PostTrashPanel() {
+	return (
+		<PostTrashCheck>
+			<PostTrashLink />
+		</PostTrashCheck>
+	);
+}
diff --git a/packages/editor/src/components/sidebar/constants.js b/packages/editor/src/components/sidebar/constants.js
@@ -0,0 +1,4 @@
+export const sidebars = {
+	document: 'edit-post/document',
+	block: 'edit-post/block',
+};
diff --git a/...mponents/sidebar/settings-header/index.js → ...s/editor/src/components/sidebar/header.js b/...mponents/sidebar/settings-header/index.js → ...s/editor/src/components/sidebar/header.js
@@ -5,17 +5,17 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
-import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../../lock-unlock';
-import { sidebars } from '../settings-sidebar';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { sidebars } from './constants';
 
 const { Tabs } = unlock( componentsPrivateApis );
 
-const SettingsHeader = ( _, ref ) => {
+const SidebarHeader = ( _, ref ) => {
 	const { documentLabel } = useSelect( ( select ) => {
 		const { getPostTypeLabel } = select( editorStore );
 
@@ -46,4 +46,4 @@ const SettingsHeader = ( _, ref ) => {
 	);
 };
 
-export default forwardRef( SettingsHeader );
+export default forwardRef( SidebarHeader );