Can’t publish custom type posts that don’t support title and editor, instead they’re saved as draft

After thorough investigation, I identified the root cause of the issue. TL;DR: A bug in my JavaScript code was causing the post form to be submitted without the necessary publish parameter. Consequently, WordPress interpreted the request as an attempt to save a draft. I resolved the issue by updating the code to include the publish … Read more

Update a server-side render Block when woocommerce cart block changed

Something like this should work: const {select, subscribe} = window.wp.data; const cartStoreKey = window.wc.wcBlocksData.CART_STORE_KEY; const unsub = subscribe( onCartChange, cartStoreKey ); function onCartChange() { const cart = select( cartStoreKey ).getCartData(); console.log( ‘¡ cart change !’, cart ); } The block’s frontend script should have the woocommerce script’s handle as a dependency so the window.wc.wcBlocksData will … Read more

Metabox conditionals depending on post format and template in Gutenberg

Better way is to listen to Gutenberg events. Template change can be observed with something like this: wp.data.subscribe(() => { console.log(wp.data.select( ‘core/editor’ ).getEditedPostAttribute(‘template’)); }); It will fire on many wp.data events, not only for template change. But you can add some checks and do your actions only when it’s needed. Example: const editor = wp.data.select( … Read more

Get generated block styles programmatically

We can look at the source of the wp_head() function: function wp_head() { /** * Prints scripts or data in the head tag on the front end. * * @since 1.5.0 */ do_action( ‘wp_head’ ); } And see that it really only calls the wp_head hook. We can then look through the WordPress core code … Read more

Embed dynamic media query in a Gutenberg block

If we stick to your exact example, I would define the value as a custom property in an inline style: <div class=”item” style=”–my-gap: <?php echo esc_attr( $attributes[‘gap’] ); ?>;”> Then in CSS use a media query to use the property as the appropriate margin: .item { margin-bottom: var(–my-gap); } @media ( min-width: 768px ) { … Read more