I have doubts while creating a custom Gutenberg block are we allowed to directly manipulate DOM? Yes but not in the way you’ve done, that’s not how React code works. When a react component is no longer shown it ceases to exist, and the associated DOM node vanishes, along with all its event handlers. This … Read more
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
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
Turns out, this is a regression in the block editor of WP 6.5. The issue has been fixed in the Gutenberg Plugin at version 18.2. Installing the plugin will remedy the problem until the fix lands in WP Core.
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
I’m sharing my solution here in case it can help someone, as I believe this type of shortcode transform is a common use case. As fetching data inside a transform is not possible right now, I’m creating the block inside the transform by passing just the carousel id attribute from the carousel shortcode. I then … Read more
According to Carolina’s excellent reference on full site editing, hybrid themes (that use both PHP and block template parts) can only allow users to add new template parts if you activate the Gutenberg plugin.
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
As far as I can tell, that’s still not possible. getEntityRecords() uses the REST API, but that doesn’t support meta queries by default. You can follow ticket #47194 if you’d like to keep tabs on the request to add support, or contribute to it. For now, using rest_{posttype}_query seems to be the conventional way to … Read more
Try this: function wrapPostFeaturedImage( OriginalComponent ) { const currentPostType = wp.data.select( ‘core/editor’ ).getCurrentPostType(); // Do nothing, if the post type is not rt_brands. if ( ‘rt_brands’ !== currentPostType ) { return OriginalComponent; } return function( props ) { // Your code here. }; } You can also: Conditionally add your filter: // Check if the … Read more