tandem
/
tipus
2
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Move the styles declaration inside BlockEditor 

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.
This commit is contained in:
jordi fita mas 2024-06-15 23:28:58 +02:00
parent fbe4728053
commit 5b1a63a69c
2 changed files with 13 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
editor/BlockEditor.jsx
View File

@ -1,4 +1,3 @@
import { useSelect } from '@wordpress/data';
import { InterfaceSkeleton, FullscreenMode, ComplementaryArea } from '@wordpress/interface'; import { InterfaceSkeleton, FullscreenMode, ComplementaryArea } from '@wordpress/interface';
import { BlockBreadcrumb, BlockCanvas, store as blockEditorStore } from '@wordpress/block-editor'; import { BlockBreadcrumb, BlockCanvas, store as blockEditorStore } from '@wordpress/block-editor';
@ -6,13 +5,20 @@ import Header from './Header';
import Sidebar from './Sidebar'; import Sidebar from './Sidebar';
import { scope } from './constants'; import { scope } from './constants';
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 BlockEditor() { export default function BlockEditor() {
const { styles } = useSelect(( select ) => { const styles = [
const { getSettings, getBlockSelectionStart } = select( blockEditorStore ); { css: componentsStyle },
return { { css: blockLibraryCommon },
styles: getSettings().styles, { css: blockLibraryStyle },
}; { css: blockLibraryEditor },
}, []); { css: formatLibraryStyle },
];
return ( return (
<> <>

13
editor/Editor.jsx
View File

@ -5,12 +5,6 @@ import BlockEditor from './BlockEditor';
import './editor.scss'; 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() { export default function Editor() {
const [ blocks, updateBlocks ] = useState(); const [ blocks, updateBlocks ] = useState();
@ -19,13 +13,6 @@ export default function Editor() {
onInput={ updateBlocks } onInput={ updateBlocks }
onChange={ updateBlocks } onChange={ updateBlocks }
settings={ { settings={ {
styles: [
{ css: componentsStyle },
{ css: blockLibraryCommon },
{ css: blockLibraryStyle },
{ css: blockLibraryEditor },
{ css: formatLibraryStyle },
],
__experimentalFeatures: { __experimentalFeatures: {
typography: { typography: {
defaultFontSizes: true, defaultFontSizes: true,