Add header with “pinned items”

I only wanted to have a button to open and close the sidebar, like
“regular” site editor does in WordPress.  Apparently, this is done via
a “pinned” slot/fill thing, that make the visibility of that button a
user decision, by default—WordPress removes the pin button to avoid
that.

The thing is that it does not work: ComplementaryArea adds a
ComplementaryAreaToggle in the PinnedItems fill, and that toggle is a
button-like compenent that calls enableComplementaryArea or
disableComplementaryArea on the interface store, however
disableComplementaryArea does **not** update the interface store,
instead updates preferences, meaning that the useSelect inside the
toggle, that only subscribes to the interface store, is never called
when the area is disabled, and can not be enabled again with that
toggle button.

I worked around the issue by adding

dispatch({
    type: 'ENABLE_COMPLEMENTARY_AREA',
    scope,
    area: undefined
 });

at the end of disableComplementaryArea.  I suspect this is not the
proper solution, and that there must be another way, because WordPress
does not exhibit that behaviour, however it signals that there _is_ an
error in the library, but i could not find any bug report within the
5k+ issues currently reported to Gutenberg’s project.

For now, it will do.

editor/BlockEditor.jsx

@@ -1,37 +1,27 @@
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
-import { InterfaceSkeleton, FullscreenMode, ComplementaryArea, store as interfaceStore } from '@wordpress/interface';
+import { useSelect } from '@wordpress/data';
+import { InterfaceSkeleton, FullscreenMode, ComplementaryArea } 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, sidebarIsOpen, hasBlockSelected } = useSelect(( select ) => {
+		const { styles } = 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={ sidebarIsOpen && <ComplementaryArea.Slot scope="tipus/editor" /> }
+								sidebar={ <ComplementaryArea.Slot scope={ scope } /> }
 								footer={ <BlockBreadcrumb /> }
 						/>
 				</>

editor/Header.jsx

@@ -0,0 +1,15 @@
+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,13 +1,19 @@
 import { useSelect } from '@wordpress/data';
-import { ComplementaryArea, store as interfaceStore } from '@wordpress/interface';
+import { useEffect } from '@wordpress/element';
+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="tipus/editor"
-						identifier="edit-post/block"
+						scope={ scope }
+						identifier="tipus/block"
+						isActiveByDefault={ true }
+						icon={ drawerRight }
 				>
 						<Panel>
 								<BlockInspector />

editor/constants.js

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

editor/editor.scss

@@ -15,3 +15,19 @@ 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,6 +15,7 @@
 								"@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,6 +17,7 @@
 				"@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": {