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
Because { content } is shorthand for { content: content } it’s a JS thing not a WordPress thing. Both methods work and do the same thing, but the { content } syntax is shorter, so the variable was named content in newer examples to allow it. Otherwise, there are no security or performance improvements, … Read more
As far as I understand the wp_head and wp_footer actions should still work under FSE in WP 5.9+, through the template canvas PHP file that’s loaded through the locate_block_template(). That PHP file contains the basic HTML structure and there we find e.g. the familiar wp_head() and wp_footer() function calls that we usually had in the … Read more
Due to the getDocumentTitle selector being deprecated as mentioned here https://stackoverflow.com/questions/51674293/use-page-title-in-gutenberg-custom-banner-block/51792096#comment92130728_51792096 I managed to get it working with a slight tweak to the code by Jim-miraidev var GetTitle = function GetTitle(props) { return el(“h1”, {className: “jab-banner-title”}, props.title); }; var selectTitle = withSelect(function (select) { var title; if (typeof select(“core/editor”).getPostEdits().title !== ‘undefined’) { title = select(“core/editor”).getPostEdits().title; … Read more