block-editor

All datas seems to be stored in JS objects, and not in HTML-DOM. We can use: wp.data.select(“core”).getXXXXXXXXXXXX() wp.data.select(“core/editor”).getXXXXXXXXXXXX() … There are many areas too, you can list them with: console.log(wp.blocks.getBlockTypes());

After trial and error, I’ve figured out a way. It may not be perfect but it works for every circumstance I’ve tried. We need to use the wp.data.select function, and select the ‘core/block-editor’, and finally use the getSelectionStart() function. That will tell us if the current block has selectable text, and if so, where our … Read more

Change column width value from string to number, like this array(‘core/column’, array(‘width’ => 33.33)

Without the root id the block is looked for at the top-level1. Something like this seems to work: useSelect(select => { const editor = select(‘core/block-editor’) const rootId = editor.getBlockRootClientId(blockId) return editor.getBlockIndex(blockId, rootId) }, [blockId]) [1] https://github.com/WordPress/gutenberg/blob/v9.9.3/packages/block-editor/src/store/selectors.js#L945

I ended up implementing my own ColorControl. I’m not satisfied with this solution and I don’t advice you to follow this route blindly. However, if you want to get the job done and don’t want to spend two hours on something that might not exist as I did, here you go. Install two extra packages: … Read more

As an answer to @RiddleMeThis, here is a working solution by parsing the default output from the core/image-Block with DOMDocument: In the init-Hook, register your custom output function: register_block_type( ‘core/image’, [ ‘render_callback’ => ‘myImageOutput’ ] ); Define your custom output function: In this function render the default output ($content) which is passed as the second … Read more

The generated id is added to the component’s props. So it can be accessed through this.props.instanceId inside the component. In the example you posted it is being used to assign a unique id attribute to the html element. However it can be used for custom logic inside react. Just as an example, you can assign … Read more

It turns out that in order to get to the value of an input field, you must point to it in your callback function, like so… const onChangeBorderWidth = newBorderWidth => { props.setAttributes( { borderWidth: newBorderWidth.target.value }) } This grabs the event’s input target value and assigns it to the correct attribute. HINT: You don’t … Read more