Cart Block: Order summary inner blocks controls appear on the left side of the screen

[ralucaStan]

Describe the bug

Cart Block: Order summary inner blocks controls appear on the left side of the screen

To reproduce

Steps to reproduce the behaviour:

1. Go to the Cart Block
2. Click on the fee inner block
3. Notice that the controls appear on the left side

Expected behaviour

The controls should appear aligned with the left margin of the Order summary block. Like in the Checkout block.

Screenshots

[tarhi-saad]

Hi @tarunvijwani! I've done some debugging and found a potential solution, but there are still some questions to be answered:

Current behavior

The current behavior isn't a bug but an option: the toolbars of all child Blocks (applied deeply, recursive) can have their toolbars "captured" and shown on the Block which is consuming InnerBlocks.

And the option responsible for this change of behavior is __experimentalCaptureToolbars.

Potential fixe

I added the option __experimentalCaptureToolbars and set it to false as a prop of the InnerBlocks component in the assets/js/blocks/cart/edit.js file:

<CartProvider>
	<InnerBlocks
		allowedBlocks={ ALLOWED_BLOCKS }
		template={ defaultTemplate }
		templateLock={ false }
		__experimentalCaptureToolbars={ false } // This is the line in question!
	/>
</CartProvider>

Remaining questions

The default value of __experimentalCaptureToolbars is supposed to be false, so I was wondering how come this option has a value of true:

I console logged this value from this file.

After applying the above fixe, the templateLock value changes as well for some reason:

[tarunvijwani]

This is very useful. Thank you so much @tarhi-saad. 🙂