Gutenberg programmatically move block to position

You can use getBlockRootClientId() from the block editor’s data store. E.g. wp.data.select( ‘core/block-editor’ ).getBlockRootClientId( clientId ) And here’s a working example for you to see how it can be used in an edit() function, where my block contains a demo button which will move the block to the very last or first position: WordPress dependencies: … Read more

Gutenberg RangeControl

When using a control that modifies a block attribute, you need to set the value of the control to the value of the attribute and the onChange function needs to change the attribute using the setAttributes function: el( RangeControl, { label: ‘Columns’, value: props.attributes.my_attribute, initialPosition: 1, min: 0, max: 3, onChange: function( val ) { … Read more

How to read inline-CSS from Gutenberg block?

Turns out Gutenberg has another way of storing attribute values: the block’s comment delimiter: If no attribute source is specified, the attribute will be saved to (and read from) the block’s comment delimiter. source When I inspected the database entry, I indeed found the size attribute there: <!– wp:XXX {“size”:48} –> <div>…</div> <!– /wp:XXX –> … Read more

Gutenberg Block: Image resolution

I was asking the same question in the comments of another question. The solution is (thanks to Кирилл-Меркушев), to get another URL from the onSelect Callback. Before I had this: function onSelectImage( media ) { props.setAttributes( { mediaURL: media.url } ); props.setAttributes( { mediaID: media.id } ); } Then I console logged the media parameter, … Read more

Is it possible (and how to) query single Gutenberg blocks?

My own answer is: somewhat yes, but not so easily. We can use 2 functions: https://developer.wordpress.org/reference/functions/parse_blocks/ https://developer.wordpress.org/reference/functions/render_block/ Not very well documented yet. But you can pass raw content to parse_blocks to have them back in array form. The thing is that they don’t have some sort of ID. So this approach is not always usefult, … Read more

Block properties, attributes and settings

Settings is what you define in registerBlockType() in the block.js file. Here you have to add most basic settings like title:, category: and icon:. (Handbook link). Attributes are optional, also in registerBlockType(). You can extract values from markup i.e. for saving the block content (Handbook link). Properties get passed from the editor. You can find … Read more