editor/BlockEditor.jsx

@@ -1,27 +1,37 @@
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
-import { InterfaceSkeleton, FullscreenMode, ComplementaryArea } from '@wordpress/interface';
+import { useEffect } from '@wordpress/element';
+import { InterfaceSkeleton, FullscreenMode, ComplementaryArea, store as interfaceStore } from '@wordpress/interface';
 import { BlockBreadcrumb, BlockCanvas, store as blockEditorStore } from '@wordpress/block-editor';
 
-import Header from './Header';
 import Sidebar from './Sidebar';
-import { scope } from './constants';
 
 export default function BlockEditor() {
-		const { styles } = useSelect(( select ) => {
+		const { styles, sidebarIsOpen, hasBlockSelected } = useSelect(( select ) => {
 				const { getSettings, getBlockSelectionStart } = select( blockEditorStore );
+				const { getActiveComplementaryArea } = select( interfaceStore );
 				return {
 						styles: getSettings().styles,
+						hasBlockSelected: !!getBlockSelectionStart(),
+						sidebarIsOpen: !!getActiveComplementaryArea( 'tipus/editor' )
 				};
 		}, []);
 
+		const { enableComplementaryArea, disableComplementaryArea } = useDispatch( interfaceStore );
+		useEffect(() => {
+				if (hasBlockSelected) {
+						enableComplementaryArea( 'tipus/editor', 'edit-post/block' );
+				} else {
+						disableComplementaryArea( 'tipus/editor' );
+				}
+		}, [ hasBlockSelected ]);
+
 		return (
 				<>
 						<FullscreenMode isActive={ true } />
 						<Sidebar />
 						<InterfaceSkeleton
-								header={ <Header /> }
 								content={ <BlockCanvas height="100%" styles={styles} /> }
-								sidebar={ <ComplementaryArea.Slot scope={ scope } /> }
+								sidebar={ sidebarIsOpen && <ComplementaryArea.Slot scope="tipus/editor" /> }
 								footer={ <BlockBreadcrumb /> }
 						/>
 				</>

editor/Header.jsx

@@ -1,15 +0,0 @@
-import { PinnedItems } from '@wordpress/interface';
-
-import { scope } from './constants';
-
-export default function Header() {
-		return (
-				<div className="tipus-header">
-						<div>
-						</div>
-						<div className="tipus-header__settings">
-								<PinnedItems.Slot scope={ scope } />
-						</div>
-				</div>
-		);
-}

editor/Sidebar.jsx

@@ -1,19 +1,13 @@
 import { useSelect } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { ComplementaryArea, store as interfaceStore } from '@wordpress/interface';
-import { ComplementaryArea } from '@wordpress/interface';
 import { Panel } from '@wordpress/components';
 import { BlockInspector } from '@wordpress/block-editor';
-import { drawerRight } from '@wordpress/icons';
-
-import { scope } from './constants';
 
 export default function Sidebar () {
 		return (
 				<ComplementaryArea
-						scope={ scope }
+						scope="tipus/editor"
-						identifier="tipus/block"
+						identifier="edit-post/block"
-						isActiveByDefault={ true }
-						icon={ drawerRight }
 				>
 						<Panel>
 								<BlockInspector />

editor/constants.js

@@ -1 +0,0 @@
-export const scope = 'tipus/editor';

editor/editor.scss

@@ -15,19 +15,3 @@ main {
     display: flex;
     flex-direction: column;
 }
-
-.tipus-header {
-    height: 3.75rem;
-    background: white;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    max-width: 100vw;
-}
-
-.tipus-header__settings {
-    display: inline-flex;
-    align-items: center;
-    gap: .5rem;
-    padding-right: .5rem;
-}

package-lock.json

@@ -15,7 +15,6 @@
 								"@wordpress/data": "^10.0.0",
 								"@wordpress/element": "6.0.0",
 								"@wordpress/format-library": "5.0.0",
-								"@wordpress/icons": "10.0.0",
 								"@wordpress/interface": "6.0.0"
 						},
 						"devDependencies": {

package.json

@@ -17,7 +17,6 @@
 				"@wordpress/data": "^10.0.0",
 				"@wordpress/element": "6.0.0",
 				"@wordpress/format-library": "5.0.0",
-				"@wordpress/icons": "10.0.0",
 				"@wordpress/interface": "6.0.0"
 		},
 		"devDependencies": {