I do not know why, but when the styles are declared as settings of the
BlockEditorProvider, then typing anything is too slow to be usable.
But, when the styles are declared within the BlockEditor, without the
useSelect hook, then it works as expected (not fast, not that, but at
least not intolerably slow.)
I tried with a useMemo to keep the styles the same when there is no
change, which is most of the time, but the behaviour is the same.
Since i do not need to pass the styles from without the application,
at least not for now, my only option is to have them directly in
BlockEditor.
I only wanted to have a button to open and close the sidebar, like
“regular” site editor does in WordPress. Apparently, this is done via
a “pinned” slot/fill thing, that make the visibility of that button a
user decision, by default—WordPress removes the pin button to avoid
that.
The thing is that it does not work: ComplementaryArea adds a
ComplementaryAreaToggle in the PinnedItems fill, and that toggle is a
button-like compenent that calls enableComplementaryArea or
disableComplementaryArea on the interface store, however
disableComplementaryArea does **not** update the interface store,
instead updates preferences, meaning that the useSelect inside the
toggle, that only subscribes to the interface store, is never called
when the area is disabled, and can not be enabled again with that
toggle button.
I worked around the issue by adding
dispatch({
type: 'ENABLE_COMPLEMENTARY_AREA',
scope,
area: undefined
});
at the end of disableComplementaryArea. I suspect this is not the
proper solution, and that there must be another way, because WordPress
does not exhibit that behaviour, however it signals that there _is_ an
error in the library, but i could not find any bug report within the
5k+ issues currently reported to Gutenberg’s project.
For now, it will do.
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.
I want this only to later on show the sidebars with the inserter and
inspector, but for now, since i do not understand yet how i am
supposed to use ComplementaryArea, i add the interface with the
breadcrumb at the bottom.
The FullscreenMode block is to “cancel out” the 160px margin on the
left, and 32px on the top, that @wordpress/interface’s style add by
default.
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
jordi fita mas