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
To partly answer my own question: As mentioned in this git issue you can use console.log(wp.blocks.getBlockTypes()); in the browser console after all the Gutenberg magic loaded (e.g. in the editor window of a post) to show all currently registered blocks, inluding their attributes. Another Info-Source: The Git-Project of Gutenberg holds all core blocks and their … 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
The getEntityRecords() method uses the REST API, so make sure the taxonomy is enabled for the REST API. You can enable it via the show_in_rest parameter when registering the taxonomy using register_taxonomy(). With getEntityRecords(), if you set per_page to -1, it will actually be changed to 100, which as you’ve figured it out, is the … Read more
Yes, and it works exactly the same as any other block, no fake attributes are necessary. When the JS needs to display the component it will make the AJAX request to fetch the markup and pass the attributes with it. The important part to note is that a block in the block editor is still … Read more
My question is, is there a similar selector for when you don’t know the post type of a post beforehand? No, at the current time of writing there is not. The fundamental problem is that the REST API doesn’t provide a generic mechanism for getting a post type given a post ID. You can retrieve … 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
I agree with Nathan’s answer, but you can copy the source and create your own SelectControl component based on that source. Here’s an example, with basically just the aria-label addition: <option key={ `${ option.label }-${ option.value }-${ index }` } value={ option.value } disabled={ option.disabled } aria-label={ option.ariaLabel || ” } > { option.label } … Read more
I am not sure this is possible in a straightforward way. You could add an attribute which checks if the block has innerBlocks. Then use it in save to render the wrapper or not. It works but it’s not a very clean solution: const { __ } = wp.i18n; const { registerBlockType } = wp.blocks; … Read more
Gutenberg-examples isn’t a single plugin, you can consider it five plugins at once, it is intended to be working example for each part of the tutorial. You have a lot of patterns you can follow, currently, core blocks are defined each in a folder like this, coblocks also follows the same pattern. block-library/ – image/ … Read more