Insert the block anywhere

[mikejolley]

I think this might be more useful if you could insert it at page level, or as an inner block. Finding the parent block where this can be inserted is fairly difficult (totals only), but it could have wider applications, for instance:

1. Showing progress in the shop, or above the cart
2. Showing progress above cart items
3. Showing progress in other areas as themes develop block support

What are your thoughts?

[nielslange]

Thanks for the suggestion, @mikejolley. I agree that using the block at a page level makes sense. Initially, the block could be inserted that way. I then limited it in a way that it can only be added as an inner block at within the checkout block, assuming that this is the place where a buyer could be convinced to purchase more to get free shipping. That said, I like your suggestion and will update the block accordingly.

[nielslange]

@mikejolley I looked up this change and currently, the Free Shipping Progress Bar block can be used as an inner block in the Checkout block of the Woo Blocks plugin. The functionality to add the Free Shipping Progress Bar block as an inner block, can be found here:

woocommerce-free-shipping-progress-bar-block/block.json

Line 8 in 78f43d8

"parent": [ "woocommerce/cart-totals-block" ],

I couldn't find a way to make the block available both globally and as an inner block when manipulating the file I mentioned before. The only way, I found, was to remove the code I pointed out and instead change [this part] (https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/94ac511dc90b682590baf6538b65ff7eaad468b8/assets/js/blocks/cart-checkout/shared/editor-utils.ts#L1-L19) from

/**
 * External dependencies
 */
import { getBlockTypes } from '@wordpress/blocks';

// List of core block types to allow in inner block areas.
const coreBlockTypes = [ 'core/paragraph', 'core/image', 'core/separator' ];

/**
 * Gets a list of allowed blocks types under a specific parent block type.
 */
export const getAllowedBlocks = ( block: string ): string[] => [
	...getBlockTypes()
		.filter( ( blockType ) =>
			( blockType?.parent || [] ).includes( block )
		)
		.map( ( { name } ) => name ),
	...coreBlockTypes,
];

to

 * External dependencies
 */
import { getBlockTypes } from '@wordpress/blocks';

// List of core block types to allow in inner block areas.
const coreBlockTypes = [ 'core/paragraph', 'core/image', 'core/separator' ];

// List of external block types to allow in inner block areas.
const externalBlockTypes = [ 'nielslange/free-shipping-progress-bar' ];

/**
 * Gets a list of allowed blocks types under a specific parent block type.
 */
export const getAllowedBlocks = ( block: string ): string[] => [
	...getBlockTypes()
		.filter( ( blockType ) =>
			( blockType?.parent || [] ).includes( block )
		)
		.map( ( { name } ) => name ),
	...coreBlockTypes,
	...externalBlockTypes,
];

Do you happen to know about an alternative way that does not require a change within the WooCommerce Blocks plugin itself? Or would you say that option I pointed out is the only way to achieve this?

[mikejolley]

@nielslange Does adding a '' to the array of parents work?

[nielslange]

@nielslange Does adding a '' to the array of parents work?

Unfortunately, that does not work. Would you suggest removing "parent": [ "woocommerce/cart-totals-block" ], for now so that the block can be inserted anywhere, and follow up in a second step to allow inserting the block into the cart and checkout block as an inner block?