[Mobile] Add support for full width/wide alignment options

[geriux]

Gutenberg Mobile PR -> wordpress-mobile/gutenberg-mobile#2559
WordPress iOS PR -> wordpress-mobile/WordPress-iOS#14679
WordPress Android PR -> wordpress-mobile/WordPress-Android#12720

Description

This PR adds full width / wide alignment options to mobile. For the first iteration it will support only some blocks, Group, Cover, and Image block.

Since we needed to filter the wanted blocks that we are going to support first, there's a new native version of the align hook, that uses the current functionality but adds a new filter to only show these alignments for the desired blocks.

There's a native file as well for the defaults file which reexports the same content but enabling the alignWide setting. This way we reuse the same code but adding something extra for mobile.

Most of this new logic goes into the block-list-item component. It will recalculate the horizontal margin depending on the block's alignment option and its parent block as well.

How has this been tested?

Steps to test full-width alignment

---

Full-width alignment with an inner block

• Open the app with metro running
• Start a new post
• Add a Group block
• Set the alignment to Full width
• Expect the block to be full width.
• Add a Cover block
• Set an image for the block
• Expect the block not to be full width
• Select the Cover block and change it's alignment to Full width
• Expect to see the block full width within the Group block

Full-width alignment without inner blocks

• Open the app with metro running
• Start a new post
• Add a Cover block
• Set an image for the block
• Select the Cover block and change it's alignment to Full width
• Expect to see the block full width

Full-width alignment with some inner blocks

• Open the app with metro running
• Start a new post
• Add a Group block
• Set the alignment to Full width
• Expect the block to be full width.
• Add a Cover block
• Set an image for the block
• Expect the block not to be full width
• Select the Cover block and change it's alignment to Full width
• Expect to see the block full width within the Group block
• Select the Cover block and add another Cover block within it
• Select an image or solid background for the block
• Change its alignment to full width
• Expect to see the second Cover block full width but with some horizontal margins

Steps to test wide alignment

---

Wide alignment with an inner block

• Open the app with metro running
• Start a new post
• Add a Group block
• Set the alignment to Wide
• Expect the block to be close to the edges but not fully.
• Add a Cover block
• Set an image for the block
• Expect the block not to be full width
• Select the Cover block and change it's alignment to Full width
• Expect to see the block full width within the Group block, it shouldn't reach the edges of the editor

Wide alignment without inner blocks

• Open the app with metro running
• Start a new post
• Add a Cover block
• Set an image for the block
• Select the Cover block and change it's alignment to Wide
• Expect the block to be close to the edges but not fully

Full-width alignment with some inner blocks

• Open the app with metro running
• Start a new post
• Add a Group block
• Set the alignment to Full width
• Expect the block to be full width.
• Add a Cover block
• Set an image for the block
• Expect the block not to be full width
• Select the Cover block and change it's alignment to Wide
• Expect to see the block close to the edges within the Group block
• Select the Cover block and add another Cover block within it
• Select an image or solid background for the block
• Change its alignment to full width
• Expect to see the second Cover block full width but with some horizontal margins

Screenshots

iPhone

Full width	Wide alignment

Full width	Wide alignment

Android Phone

Full width	Wide alignment

Full width	Wide alignment

iPad 11 inch

Full width	Wide alignment

Full width

Wide alignment

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[github-actions]

Size Change: 0 B

Total Size: 1.2 MB

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.67 kB	0 B
build/api-fetch/index.js	3.41 kB	0 B
build/autop/index.js	2.82 kB	0 B
build/blob/index.js	620 B	0 B
build/block-directory/index.js	8.5 kB	0 B
build/block-directory/style-rtl.css	953 B	0 B
build/block-directory/style.css	952 B	0 B
build/block-editor/index.js	128 kB	0 B
build/block-editor/style-rtl.css	11.1 kB	0 B
build/block-editor/style.css	11.1 kB	0 B
build/block-library/editor-rtl.css	8.64 kB	0 B
build/block-library/editor.css	8.64 kB	0 B
build/block-library/index.js	138 kB	0 B
build/block-library/style-rtl.css	7.6 kB	0 B
build/block-library/style.css	7.6 kB	0 B
build/block-library/theme-rtl.css	754 B	0 B
build/block-library/theme.css	754 B	0 B
build/block-serialization-default-parser/index.js	1.88 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	47.7 kB	0 B
build/components/index.js	200 kB	0 B
build/components/style-rtl.css	15.5 kB	0 B
build/components/style.css	15.5 kB	0 B
build/compose/index.js	9.67 kB	0 B
build/core-data/index.js	12.3 kB	0 B
build/data-controls/index.js	1.29 kB	0 B
build/data/index.js	8.55 kB	0 B
build/date/index.js	31.9 kB	0 B
build/deprecated/index.js	772 B	0 B
build/dom-ready/index.js	568 B	0 B
build/dom/index.js	4.48 kB	0 B
build/edit-navigation/index.js	11.7 kB	0 B
build/edit-navigation/style-rtl.css	1.16 kB	0 B
build/edit-navigation/style.css	1.16 kB	0 B
build/edit-post/index.js	305 kB	0 B
build/edit-post/style-rtl.css	6.26 kB	0 B
build/edit-post/style.css	6.25 kB	0 B
build/edit-site/index.js	17.1 kB	0 B
build/edit-site/style-rtl.css	3.06 kB	0 B
build/edit-site/style.css	3.06 kB	0 B
build/edit-widgets/index.js	12 kB	0 B
build/edit-widgets/style-rtl.css	2.46 kB	0 B
build/edit-widgets/style.css	2.45 kB	0 B
build/editor/editor-styles-rtl.css	492 B	0 B
build/editor/editor-styles.css	493 B	0 B
build/editor/index.js	45.6 kB	0 B
build/editor/style-rtl.css	3.81 kB	0 B
build/editor/style.css	3.81 kB	0 B
build/element/index.js	4.64 kB	0 B
build/escape-html/index.js	733 B	0 B
build/format-library/index.js	7.71 kB	0 B
build/format-library/style-rtl.css	547 B	0 B
build/format-library/style.css	548 B	0 B
build/hooks/index.js	2.13 kB	0 B
build/html-entities/index.js	622 B	0 B
build/i18n/index.js	3.57 kB	0 B
build/is-shallow-equal/index.js	711 B	0 B
build/keyboard-shortcuts/index.js	2.52 kB	0 B
build/keycodes/index.js	1.94 kB	0 B
build/list-reusable-blocks/index.js	3.12 kB	0 B
build/list-reusable-blocks/style-rtl.css	476 B	0 B
build/list-reusable-blocks/style.css	476 B	0 B
build/media-utils/index.js	5.32 kB	0 B
build/notices/index.js	1.79 kB	0 B
build/nux/index.js	3.4 kB	0 B
build/nux/style-rtl.css	671 B	0 B
build/nux/style.css	668 B	0 B
build/plugins/index.js	2.56 kB	0 B
build/primitives/index.js	1.41 kB	0 B
build/priority-queue/index.js	789 B	0 B
build/redux-routine/index.js	2.85 kB	0 B
build/rich-text/index.js	13.9 kB	0 B
build/server-side-render/index.js	2.77 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.27 kB	0 B
build/url/index.js	4.06 kB	0 B
build/viewport/index.js	1.85 kB	0 B
build/warning/index.js	1.13 kB	0 B
build/wordcount/index.js	1.17 kB	0 B

_{compressed-size-action}

[geriux]

Hey @lukewalczak thanks for the review! I've updated the code and the builds for another round of review, thanks!

[lukewalczak]

Tested on both platforms and works as expected 🎉 Great work @geriux!