block-editor

<RichText> has a property, isSelected. When isSelected is true, the controls show. By default isSelected is representative of the current block being selected. from the docs isSelected: Boolean Optional. Whether to show the input is selected or not in order to show the formatting controls. By default it renders the controls when the block is … Read more

Although I’m unsure on how to achieve this in php, within javascript you can change the category by hooking into the blocks.registerBlockType hook. Here is a small example how it would work, although I’d recommend using lodash to deepClone the settings object to keep everything immutable. const rearrangeBlockCategories = { ‘core/table’: ‘common’, }; wp.hooks.addFilter(‘blocks.registerBlockType’, ‘[namespace]’, … Read more

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