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:
jordi fita mas 2024-06-15 02:01:22 +02:00
parent b6665b67ba
commit e39ee28b9f
3 changed files with 18 additions and 12 deletions

View File

@ -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 /> }
/> />
</> </>

View File

@ -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 />

1
editor/constants.js Normal file
View File

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