Fix issues with selecting the container width via the alignment toolbar button in the Cart Block

[nerrad]

I was just running through some testing of the Cart block to prepare for an upcoming demo and I noticed some issues with setting the alignment for the block. I've recorded a video that demonstrates what I'm seeing:

CleanShot.2021-11-20.at.08.10.59.mp4

I suspect some of this is due to how the views are switched between empty and full cart, however, it'd be great to improve the following:

• There's a lot of nested containers that require clicking through (I realize this may be an issue at the GB level).
• Changing alignment for the parent block should be easier and provide better feedback around how the selection changes the current container.

[nerrad]

Another issue I'm spotting as I play around with this more is that if you click the alignment toolbar when the empty cart is the visible view and you are on the top parent block for the Cart (Document -> Cart), it will switch back to the Filled Cart view.

[senadir]

Another issue I'm spotting as I play around with this more is that if you click the alignment toolbar when the empty cart is the visible view and you are on the top parent block for the Cart (Document -> Cart), it will switch back to the Filled Cart view.

This is a known bug on Gutenberg level WordPress/gutenberg#35949, setting alignment from "none" to anything else wraps the block in a div, causing it to unmount/mount and local state to be lost.

We can use a non-persisted attribute to solve this, I will explore this solution later.

[senadir]

There's a lot of nested containers that require clicking through (I realize this may be an issue at the GB level).
Changing alignment for the parent block should be easier and provide better feedback around how the selection changes the current container.

Yes, this is an issue we discovered during Cart i2 migration (reported by Thomas here).

The issue is that Cart block is just a wrapper to accommodate for two inner blocks that are actually rendered. Ideally we want to either:

• Have Filled/Empty always stretch to Cart width (I believe Cart isn't rendered on frontend, so this would be an issue).
• Sync Cart, and Filled/Empty Cart alignment attributes, so changing one would change the rest, bit hacky, but can be explored.

[github-actions]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.