Move enableComplementaryArea call to Sidebar
It makes more sense, i believe, to enable the sidebar complementary area from within the sidebar component, as this is called when the component is included in the hierarchy. I also moved the scope string to a constants file, so i can find where it is used with code analysis instead of relaying on grep.
This commit is contained in:
parent
b6665b67ba
commit
e39ee28b9f
|
@ -1,9 +1,9 @@
|
||||||
import { useSelect, useDispatch } from '@wordpress/data';
|
import { useSelect } from '@wordpress/data';
|
||||||
import { useEffect } from '@wordpress/element';
|
import { InterfaceSkeleton, FullscreenMode, ComplementaryArea } from '@wordpress/interface';
|
||||||
import { InterfaceSkeleton, FullscreenMode, ComplementaryArea, store as interfaceStore } from '@wordpress/interface';
|
|
||||||
import { BlockBreadcrumb, BlockCanvas, store as blockEditorStore } from '@wordpress/block-editor';
|
import { BlockBreadcrumb, BlockCanvas, store as blockEditorStore } from '@wordpress/block-editor';
|
||||||
|
|
||||||
import Sidebar from './Sidebar';
|
import Sidebar from './Sidebar';
|
||||||
|
import { scope } from './constants';
|
||||||
|
|
||||||
export default function BlockEditor() {
|
export default function BlockEditor() {
|
||||||
const { styles } = useSelect(( select ) => {
|
const { styles } = useSelect(( select ) => {
|
||||||
|
@ -13,18 +13,13 @@ export default function BlockEditor() {
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const { enableComplementaryArea } = useDispatch( interfaceStore );
|
|
||||||
useEffect(() => {
|
|
||||||
enableComplementaryArea( 'tipus/editor', 'edit-post/block' );
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<FullscreenMode isActive={ true } />
|
<FullscreenMode isActive={ true } />
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
<InterfaceSkeleton
|
<InterfaceSkeleton
|
||||||
content={ <BlockCanvas height="100%" styles={styles} /> }
|
content={ <BlockCanvas height="100%" styles={styles} /> }
|
||||||
sidebar={ <ComplementaryArea.Slot scope="tipus/editor" /> }
|
sidebar={ <ComplementaryArea.Slot scope={ scope } /> }
|
||||||
footer={ <BlockBreadcrumb /> }
|
footer={ <BlockBreadcrumb /> }
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -1,13 +1,23 @@
|
||||||
import { useSelect } from '@wordpress/data';
|
import { useSelect, useDispatch } from '@wordpress/data';
|
||||||
|
import { useEffect } from '@wordpress/element';
|
||||||
import { ComplementaryArea, store as interfaceStore } from '@wordpress/interface';
|
import { ComplementaryArea, store as interfaceStore } from '@wordpress/interface';
|
||||||
import { Panel } from '@wordpress/components';
|
import { Panel } from '@wordpress/components';
|
||||||
import { BlockInspector } from '@wordpress/block-editor';
|
import { BlockInspector } from '@wordpress/block-editor';
|
||||||
|
|
||||||
|
import { scope } from './constants';
|
||||||
|
const SIDEBARS_BLOCK = 'tipus/block';
|
||||||
|
|
||||||
export default function Sidebar () {
|
export default function Sidebar () {
|
||||||
|
const { enableComplementaryArea } = useDispatch( interfaceStore );
|
||||||
|
useEffect(() => {
|
||||||
|
enableComplementaryArea( scope, SIDEBARS_BLOCK );
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ComplementaryArea
|
<ComplementaryArea
|
||||||
scope="tipus/editor"
|
scope={ scope }
|
||||||
identifier="edit-post/block"
|
identifier={ SIDEBARS_BLOCK }
|
||||||
|
isActiveByDefault={ true }
|
||||||
>
|
>
|
||||||
<Panel>
|
<Panel>
|
||||||
<BlockInspector />
|
<BlockInspector />
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
export const scope = 'tipus/editor';
|
Loading…
Reference in New Issue