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
|
|
|
import { useState } from '@wordpress/element';
|
|
|
|
import { BlockEditorProvider } from '@wordpress/block-editor';
|
|
|
|
|
|
|
|
import BlockEditor from './BlockEditor';
|
|
|
|
|
|
|
|
import './editor.scss';
|
|
|
|
|
|
|
|
import blockLibraryCommon from '@wordpress/block-library/build-style/common.css?inline';
|
|
|
|
import blockLibraryEditor from '@wordpress/block-library/build-style/editor.css?inline';
|
|
|
|
import blockLibraryStyle from '@wordpress/block-library/build-style/style.css?inline';
|
|
|
|
import componentsStyle from '@wordpress/components/build-style/style.css?inline';
|
|
|
|
import formatLibraryStyle from '@wordpress/format-library/build-style/style.css?inline';
|
|
|
|
|
|
|
|
export default function Editor() {
|
|
|
|
const [ blocks, updateBlocks ] = useState();
|
|
|
|
|
|
|
|
return <BlockEditorProvider
|
|
|
|
value={ blocks }
|
|
|
|
onInput={ updateBlocks }
|
|
|
|
onChange={ updateBlocks }
|
|
|
|
settings={ {
|
|
|
|
styles: [
|
|
|
|
{ css: componentsStyle },
|
|
|
|
{ css: blockLibraryCommon },
|
|
|
|
{ css: blockLibraryStyle },
|
|
|
|
{ css: blockLibraryEditor },
|
|
|
|
{ css: formatLibraryStyle },
|
|
|
|
],
|
2024-06-15 02:22:51 +00:00
|
|
|
__experimentalFeatures: {
|
|
|
|
typography: {
|
|
|
|
defaultFontSizes: true,
|
|
|
|
dropCap: true,
|
|
|
|
fontSizes: {
|
|
|
|
default: [
|
|
|
|
{
|
|
|
|
name: "Small",
|
|
|
|
slug: "small",
|
|
|
|
size: "13px",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "Medium",
|
|
|
|
slug: "medium",
|
|
|
|
size: "20px",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "Large",
|
|
|
|
slug: "large",
|
|
|
|
size: "36px",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "Extra Large",
|
|
|
|
slug: "x-large",
|
|
|
|
size: "42px",
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
customFontSize: true,
|
|
|
|
fontStyle: true,
|
|
|
|
fontWeight: true,
|
|
|
|
letterSpacing: true,
|
|
|
|
textAlign: true,
|
|
|
|
textColumns: false,
|
|
|
|
textDecoration: true,
|
|
|
|
textTransform: true,
|
|
|
|
writingMode: false,
|
|
|
|
},
|
|
|
|
},
|
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
|
|
|
} }
|
|
|
|
>
|
|
|
|
<BlockEditor/>
|
|
|
|
</BlockEditorProvider>;
|
|
|
|
}
|