I have ran across this before. The code looks fine and this should work. What the error indicates is that those imports are not being found. This can be for several of reasons. Did you import the @wordpress/icons package through npm? Is the package a current or recent version? Can run npm outdated to see … Read more
Put simply, your block misbehaves. Given a set of parameters, the block should always give you the same result. The editor uses this as a check, and if the result does not match, then something is wrong and the blocks implementation has a bug. In your blocks case, this is because when generating the markup, … Read more
The first argument $handle of wp_set_script_translations() expects the script handle the text domain will be attached to. In your case it’s simpletoc and not simpletoc-js. The correct call would be: wp_set_script_translations( ‘simpletoc’, ‘simpletoc’ ); Another note: wp_set_script_translations() is available since WordPress 5.0 thus the function_exists() check isn’t necessary.
I found the solution. addFilter( ‘blocks.registerBlockType ) needs to be called before the call to registerBlockType.
I have discovered a way of creating a label and a help property for a component that doesn’t have it’s own label or help properties, by wrapping that component in a BaseControl component. Here is my working solution: createElement(PanelRow, {}, createElement(BaseControl, { label: __(‘N element alignment’, ‘my-textdomain’), help: __(‘Set the alignment for n element in … Read more
I would recommend moving to a dynamic block as opposed to a static one. The difference being that dynamic blocks are rendered via PHP and don’t save the markup in the database. This allows you to make any changes you want to the block output and it will be reflected without needing to update each … Read more
You might try a useEffect hook subscribed to the attributes.identifier to call the script. something like: function Edit( { attributes, setAttributes } ) { useEffect( () => { // this will fire whenever the attribute changes. thirdPartyScriptFunctionName(); },[attributes.identifier]) const onChangeIdentifier = (value) => { setAttributes({ identifier: value }); }; return ( <div id = {`embed-${ … Read more
I solved the problem by rendering my block’s content, a component, to a string and making that string the value of a RichText component in my block’s save function. To make my component a string, I used renderToString: // Create the content and the block const myContent = ( <MyComponent>{“Some content”}</MyComponent> ); const myBlock = … Read more
You have two options: You write only one InspectorControls and put it in your main component/block and remove the InpertorControls from your Title and PreTitle js files. Don’t forget to change the onChange function name ‘onChangeToggleField’ cause they both share the same function name. Whatever props you change now, should be now passed to Title … Read more
You are already using the correct Gutenberg/JS code, but it’s a limitation in the REST API which exposes the parent field only for hierarchical post types like page. But you can force the field to appear in the REST API responses via register_rest_field() — example for a my_cpt post type: register_rest_field( ‘my_cpt’, ‘parent’, array( ‘schema’ … Read more