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

Add a missing parameter to useSelect call
Add @wordpress/data to package.json
2024-06-14 20:36:37 +02:00 · 2024-06-14 19:41:17 +02:00 · 2024-06-14 19:40:49 +02:00 · 2024-06-14 18:04:59 +02:00 · 2024-06-14 17:37:36 +02:00
5 changed files with 114 additions and 12 deletions
--- a/editor/BlockEditor.jsx
+++ b/editor/BlockEditor.jsx
@ -1,11 +1,39 @@
-import { useSelect } from '@wordpress/data';
-import { BlockCanvas, store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+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';

-export default function BlockEditor({ rootClientId }) {
-		const styles = useSelect(( select ) => {
-				const { getSettings } = select( blockEditorStore );
-				return getSettings().styles;
-		});
-		console.log(styles);
-		return <BlockCanvas height="100%" styles={styles} />
+import Sidebar from './Sidebar';
+
+export default function BlockEditor() {
+		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
+								content={ <BlockCanvas height="100%" styles={styles} /> }
+								sidebar={ sidebarIsOpen && <ComplementaryArea.Slot scope="tipus/editor" /> }
+								footer={ <BlockBreadcrumb /> }
+						/>
+				</>
+		);
 }
--- a/editor/Sidebar.jsx
+++ b/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>
+		);
+}
--- a/editor/editor.scss
+++ b/editor/editor.scss
@ -1,6 +1,7 @@
+@import '@wordpress/components/build-style/style.css';
+@import '@wordpress/interface/build-style/style.css';
@import '@wordpress/block-editor/build-style/style.css';
@import '@wordpress/block-editor/build-style/content.css';
-@import '@wordpress/components/build-style/style.css';

 body, html {
    height: 100%;
--- a/package-lock.json
+++ b/package-lock.json
@ -12,8 +12,10 @@
 								"@wordpress/block-editor": "13.0.0",
 								"@wordpress/block-library": "9.0.0",
 								"@wordpress/components": "28.0.0",
+								"@wordpress/data": "^10.0.0",
 								"@wordpress/element": "6.0.0",
-								"@wordpress/format-library": "5.0.0"
+								"@wordpress/format-library": "5.0.0",
+								"@wordpress/interface": "6.0.0"
 						},
 						"devDependencies": {
 								"@vitejs/plugin-react": "^4.3.1",
@ -2259,6 +2261,35 @@
 								"npm": ">=8.19.2"
 						}
 				},
+				"node_modules/@wordpress/interface": {
+						"version": "6.0.0",
+						"resolved": "https://registry.npmjs.org/@wordpress/interface/-/interface-6.0.0.tgz",
+						"integrity": "sha512-7nx+3cJfGzpR/0+i2I8nVLH+OtkNEVGP9eG7oVli+IrCisOzIqK2d5R6+c7mmD8m16ypul+PKnhTRF3QGmt+4Q==",
+						"dependencies": {
+								"@babel/runtime": "^7.16.0",
+								"@wordpress/a11y": "^4.0.0",
+								"@wordpress/components": "^28.0.0",
+								"@wordpress/compose": "^7.0.0",
+								"@wordpress/data": "^10.0.0",
+								"@wordpress/deprecated": "^4.0.0",
+								"@wordpress/element": "^6.0.0",
+								"@wordpress/i18n": "^5.0.0",
+								"@wordpress/icons": "^10.0.0",
+								"@wordpress/plugins": "^7.0.0",
+								"@wordpress/preferences": "^4.0.0",
+								"@wordpress/private-apis": "^1.0.0",
+								"@wordpress/viewport": "^6.0.0",
+								"clsx": "^2.1.1"
+						},
+						"engines": {
+								"node": ">=18.12.0",
+								"npm": ">=8.19.2"
+						},
+						"peerDependencies": {
+								"react": "^18.0.0",
+								"react-dom": "^18.0.0"
+						}
+				},
 				"node_modules/@wordpress/is-shallow-equal": {
 						"version": "5.0.0",
 						"resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-5.0.0.tgz",
@ -2349,6 +2380,29 @@
 								"react-dom": "^18.0.0"
 						}
 				},
+				"node_modules/@wordpress/plugins": {
+						"version": "7.0.0",
+						"resolved": "https://registry.npmjs.org/@wordpress/plugins/-/plugins-7.0.0.tgz",
+						"integrity": "sha512-X/dMJbbW/Rl3epjS482iAP0mj9V1kW+QnyNjGBYkBoQxn+DG3v2Ok6A31lrzxiebl1yACVvwxSKR85xHNFcZ6A==",
+						"dependencies": {
+								"@babel/runtime": "^7.16.0",
+								"@wordpress/components": "^28.0.0",
+								"@wordpress/compose": "^7.0.0",
+								"@wordpress/element": "^6.0.0",
+								"@wordpress/hooks": "^4.0.0",
+								"@wordpress/icons": "^10.0.0",
+								"@wordpress/is-shallow-equal": "^5.0.0",
+								"memize": "^2.0.1"
+						},
+						"engines": {
+								"node": ">=18.12.0",
+								"npm": ">=8.19.2"
+						},
+						"peerDependencies": {
+								"react": "^18.0.0",
+								"react-dom": "^18.0.0"
+						}
+				},
 				"node_modules/@wordpress/preferences": {
 						"version": "4.0.0",
 						"resolved": "https://registry.npmjs.org/@wordpress/preferences/-/preferences-4.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -14,8 +14,10 @@
 				"@wordpress/block-editor": "13.0.0",
 				"@wordpress/block-library": "9.0.0",
 				"@wordpress/components": "28.0.0",
+				"@wordpress/data": "^10.0.0",
 				"@wordpress/element": "6.0.0",
-				"@wordpress/format-library": "5.0.0"
+				"@wordpress/format-library": "5.0.0",
+				"@wordpress/interface": "6.0.0"
 		},
 		"devDependencies": {
 				"@vitejs/plugin-react": "^4.3.1",
Author	SHA1	Message	Date
jordi fita mas	9916afc768	Add the side bar with all the “complementary area” added complexity	2024-06-14 20:36:37 +02:00
jordi fita mas	79bdee916b	Add a missing parameter to useSelect call	2024-06-14 19:41:17 +02:00
jordi fita mas	bb9748b2cc	Add @wordpress/data to package.json I use it for the useSelect in BlockEditor, to get the styles.	2024-06-14 19:40:49 +02:00
jordi fita mas	26e3268579	Use InterfaceSkelete to start building a WordPress-like editor I want this only to later on show the sidebars with the inserter and inspector, but for now, since i do not understand yet how i am supposed to use ComplementaryArea, i add the interface with the breadcrumb at the bottom. The FullscreenMode block is to “cancel out” the 160px margin on the left, and 32px on the top, that @wordpress/interface’s style add by default.	2024-06-14 18:04:59 +02:00
jordi fita mas	bd237d43e5	Remove a console.log call	2024-06-14 17:37:36 +02:00