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.
This commit is contained in:
parent
bd237d43e5
commit
26e3268579
|
@ -1,10 +1,19 @@
|
|||
import { useSelect } from '@wordpress/data';
|
||||
import { BlockCanvas, store as blockEditorStore } from '@wordpress/block-editor';
|
||||
import { InterfaceSkeleton, FullscreenMode } 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;
|
||||
});
|
||||
return <BlockCanvas height="100%" styles={styles} />
|
||||
return (
|
||||
<>
|
||||
<FullscreenMode isActive={ true } />
|
||||
<InterfaceSkeleton
|
||||
content={ <BlockCanvas height="100%" styles={styles} /> }
|
||||
footer={ <BlockBreadcrumb /> }
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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%;
|
||||
|
|
|
@ -13,7 +13,8 @@
|
|||
"@wordpress/block-library": "9.0.0",
|
||||
"@wordpress/components": "28.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 +2260,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 +2379,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",
|
||||
|
|
|
@ -15,7 +15,8 @@
|
|||
"@wordpress/block-library": "9.0.0",
|
||||
"@wordpress/components": "28.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",
|
||||
|
|
Loading…
Reference in New Issue