2024-06-14 18:36:37 +00:00
|
|
|
import { useSelect, useDispatch } from '@wordpress/data';
|
|
|
|
import { useEffect } from '@wordpress/element';
|
|
|
|
import { InterfaceSkeleton, FullscreenMode, ComplementaryArea, store as interfaceStore } from '@wordpress/interface';
|
2024-06-14 16:04:59 +00:00
|
|
|
import { BlockBreadcrumb, BlockCanvas, store as blockEditorStore } from '@wordpress/block-editor';
|
Replace isolated-block-editor in favor of @wordpress/block-editor
Despite the fact that Gutenberg developers did not care at all about
uses of this library outside WordPress until last year[0], and that it
is almost impossible to do something that goes beyond the very basic
without using “private APIs”, they insist that the isolated block
editor should be “deprecated”[1].
I do not particularly care much about the isolated block editor, as it
_does_ use all these private APIs and, thus, it is very difficult to
use unless you use the exact same dependencies, otherwise it emits a
weird error regarding “unlocking” things that are not “locked” (i.e.,
the new-fangled way of “protecting” private APIs[2]). And,
apparently, things got easier with Gutenberg 18.5 with the
introduction of the BlockCanvas.
However, it is still a very frustrating experience, and the
documentation for most components and packages is next to
non-existent.
Nevertheless, i managed to get a barely functional editor that still
has some missing features, like the color of rich texts’ highlight
format[3], but it i believe it is a good base to grow the custom
editor on top of.
[0]: https://github.com/WordPress/gutenberg/issues/53874
[1]: https://github.com/WordPress/gutenberg/issues/57672#issuecomment-1883119040
[2]: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-private-apis/
[3]: https://github.com/WordPress/gutenberg/issues/55036
2024-06-14 01:24:07 +00:00
|
|
|
|
2024-06-14 18:36:37 +00:00
|
|
|
import Sidebar from './Sidebar';
|
|
|
|
|
2024-06-14 17:41:17 +00:00
|
|
|
export default function BlockEditor() {
|
2024-06-14 18:36:37 +00:00
|
|
|
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' )
|
|
|
|
};
|
2024-06-14 17:41:17 +00:00
|
|
|
}, []);
|
2024-06-14 18:36:37 +00:00
|
|
|
|
|
|
|
const { enableComplementaryArea, disableComplementaryArea } = useDispatch( interfaceStore );
|
|
|
|
useEffect(() => {
|
|
|
|
if (hasBlockSelected) {
|
|
|
|
enableComplementaryArea( 'tipus/editor', 'edit-post/block' );
|
|
|
|
} else {
|
|
|
|
disableComplementaryArea( 'tipus/editor' );
|
|
|
|
}
|
|
|
|
}, [ hasBlockSelected ]);
|
|
|
|
|
2024-06-14 16:04:59 +00:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<FullscreenMode isActive={ true } />
|
2024-06-14 18:36:37 +00:00
|
|
|
<Sidebar />
|
2024-06-14 16:04:59 +00:00
|
|
|
<InterfaceSkeleton
|
|
|
|
content={ <BlockCanvas height="100%" styles={styles} /> }
|
2024-06-14 18:36:37 +00:00
|
|
|
sidebar={ sidebarIsOpen && <ComplementaryArea.Slot scope="tipus/editor" /> }
|
2024-06-14 16:04:59 +00:00
|
|
|
footer={ <BlockBreadcrumb /> }
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
Replace isolated-block-editor in favor of @wordpress/block-editor
Despite the fact that Gutenberg developers did not care at all about
uses of this library outside WordPress until last year[0], and that it
is almost impossible to do something that goes beyond the very basic
without using “private APIs”, they insist that the isolated block
editor should be “deprecated”[1].
I do not particularly care much about the isolated block editor, as it
_does_ use all these private APIs and, thus, it is very difficult to
use unless you use the exact same dependencies, otherwise it emits a
weird error regarding “unlocking” things that are not “locked” (i.e.,
the new-fangled way of “protecting” private APIs[2]). And,
apparently, things got easier with Gutenberg 18.5 with the
introduction of the BlockCanvas.
However, it is still a very frustrating experience, and the
documentation for most components and packages is next to
non-existent.
Nevertheless, i managed to get a barely functional editor that still
has some missing features, like the color of rich texts’ highlight
format[3], but it i believe it is a good base to grow the custom
editor on top of.
[0]: https://github.com/WordPress/gutenberg/issues/53874
[1]: https://github.com/WordPress/gutenberg/issues/57672#issuecomment-1883119040
[2]: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-private-apis/
[3]: https://github.com/WordPress/gutenberg/issues/55036
2024-06-14 01:24:07 +00:00
|
|
|
}
|