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
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
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
To get the categories from inside the editor of a post you can make use of the following selectors: The categories the post has in the published version: wp.data.select(“core/editor”).getCurrentPostAttribute(“categories”) The current categories of the edit (for example if the user has selected a new category but hasn’t saved the post it will appear with this … Read more
Gutenberg is not intended to do dynamic React stuff in front-end. Nevertheless there is a way to bypass this problem: I assume the structure of gutenberg block when using npm init @wordpress/block my-block to init your block. You have to register your own client-side script in my-block.php to be executed on front-end; one drawback: it … Read more
You have two choices. The first one you’ve discovered: change the block’s underlying code, and you will trigger validation errors. The benefit is, you’re only including the JS currently required for your block – so it keeps the code as lightweight as possible. The second option: add deprecated code into your block. In this case, … Read more
What you asked for is not possible for blocks that rely on frontend javascript, this includes embeds. It’s also not possible using the Swiper react library. The Swiper library made the questionable choice of manually inspecting child components for the SwiperSlide component name, preventing it from ever being used with child blocks. Edit: Actually maybe … Read more