40 lines
1.4 KiB
JavaScript
40 lines
1.4 KiB
JavaScript
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';
|
|
|
|
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 /> }
|
|
/>
|
|
</>
|
|
);
|
|
}
|