Wide alignment control needs to be polished

[lindseymacmillan]

User Story

As an admin, I want Multi-Form Goal block wide alignment controls to be polished so that I have a simpler editing experience.

Details

When testing the wide alignment in the block editor, I expected the block to behave similarly an image block that is set to wide alignment. Instead I saw the Multi-form Goal block jump to the left margin and it not fill the entirety of the wide container.
Note: This is only an issue in the block editor (Astra theme). The wide alignment seems to work correctly on the front end.

Additional Context

Screencast: https://cln.sh/4GpcXD

Acceptance Criteria

• In wide alignment, block width should be limited to card width

[canny]

This issue has been linked to a Canny post: Wide alignment control needs polished 🎉

[lindseymacmillan]

Update: 10/7/20

After investigating this further, I am running into something of a blocker - related to the Block Editor's functionality around align-wide and InnerBlocks. Confusingly, then the block is set to "align wide", the parent div loses the wp-block class, and instead a child div with wp-block class is added to wrap the Multi-Form Goal block's contents. For reference, see these screenshots:

Markup of Multi-Form Goal block with normal align:

Markup of Multi-Form Goal block with wide align:

This ruuns contrary to other core Block Editor blocks (ex: Cover), where the setting of "align wide" does not result in the parent div losing the wp-block class, and having a child wrapper div added.

This issue can be resolved through a hardcoded set of styles like this:

But that solution fails to consider that every theme can define it's own content width.

I will be looking into this more this afternoon.

[lindseymacmillan]

This issue is related to an identified alignment bug with the Block Editor. It has been documented previously in these two issues of the Gutenberg repo:

WordPress/gutenberg#25088
WordPress/gutenberg#24721

In the issues, other devs point out various inconsistencies in the way alignment is handled by different core blocks, and how the block editor's current implementation produces issue for most custom blocks which make use of the alignment options.

Notably, the Multi-Form Goal block is the only block which presents users with alignment options - so this bug does not impact any other GiveWP core blocks.

With all this information, I'm going to close this issue for now, with plans to improve the wide alignment experience in a future release if changes to the block editor necessitate new styling on our end.