Add the side bar with all the “complementary area” added complexity

editor/BlockEditor.jsx

@@ -1,17 +1,37 @@
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
-import { InterfaceSkeleton, FullscreenMode } 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 Sidebar from './Sidebar';
+
 export default function BlockEditor() {
-		const styles = useSelect(( select ) => {
+		const { styles, sidebarIsOpen, hasBlockSelected } = useSelect(( select ) => {
-				const { getSettings } = select( blockEditorStore );
+				const { getSettings, getBlockSelectionStart } = select( blockEditorStore );
-				return getSettings().styles;
+				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
 								content={ <BlockCanvas height="100%" styles={styles} /> }
+								sidebar={ sidebarIsOpen && <ComplementaryArea.Slot scope="tipus/editor" /> }
 								footer={ <BlockBreadcrumb /> }
 						/>
 				</>

editor/Sidebar.jsx

@@ -0,0 +1,17 @@
+import { useSelect } from '@wordpress/data';
+import { ComplementaryArea, store as interfaceStore } from '@wordpress/interface';
+import { Panel } from '@wordpress/components';
+import { BlockInspector } from '@wordpress/block-editor';
+
+export default function Sidebar () {
+		return (
+				<ComplementaryArea
+						scope="tipus/editor"
+						identifier="edit-post/block"
+				>
+						<Panel>
+								<BlockInspector />
+						</Panel>
+				</ComplementaryArea>
+		);
+}