when I try to edit the fontsize in Gutenberg with the FontSizePicker Component the editor crashes with "Cannot destructure property ‘frameElement’ of ‘r’ as it is null." and reloads itself. I am pretty sure that this happens because I do something wrong here:
export default function Edit( { attributes, setAttributes } ) {
const blockProps = useBlockProps();
const fontSizes = [
{
name: __( 'Big' ),
slug: 'big',
size: 45,
},
{
name: __( 'Bigger' ),
slug: 'bigger',
size: 60,
}
];
const fallbackFontSize = 16;
const MyFontSizePicker = () => {
const [ fontSize, setFontSize ] = useState( 12 );
return (
<FontSizePicker
fontSizes={ fontSizes }
value={ attributes.fontsize }
fallbackFontSize={ fallbackFontSize }
onChange={ ( newFontSize ) => {
setAttributes( { fontsize: newFontSize } );
} }
/>
);
};
return (
<div { ...blockProps } >
<InspectorControls>
<Panel>
<PanelBody>
<PanelRow>
<MyFontSizePicker />
</PanelRow>
<PanelRow>
</PanelBody>
</Panel>
</InspectorControls>
<ServerSideRender
block="game-review/random-game"
attributes={ attributes }
/>
</div>
);
}
Any idea why this happens? Other blocks from my other plugins run fine. Here is the full source code for context: https://github.com/mtoensing/game-review-block/tree/main/blocks/random-game Maybe this is the wrong why to use typography for server-side-blocks?