Add support for wide/full-width Alignment options

[pinarol]

Let's start to think about how we can bring wide/full-width Alignment options into mobile. They are very useful in pages and starter page layouts(mostly homepage layouts).

For this issue I am thinking about only focusing on wide/full-width, but not on 'left, right, center'.

Current blocks that support wide/full-width:

• Gallery
• Cover
• Columns
• Image
• Group
• Media-Text
• Pull Quote
• Video

Describe the solution you'd like

Technically I would like to focus on a solution that can work based on the support flags "align", "alignWide" to keep parity with web. If align:true is present in the support flags we should display the alignment options in the toolbar. There's one exception, if we have alignWide:false then we shouldn't be displaying wide/full-width options.

supports: {
    align: true
}

I'll leave the UX side for @iamthomasbishop.

• How wide/full-width should be looking on portrait/landscape modes?

[pinarol]

Let's start with Cover > Group > Columns as they are the ones commonly used in layouts with full/wide width.

[iamthomasbishop]

Design update: I spent some time last week and earlier this week tinkering with wide/full-width alignments on the web and some other applications. I have a bunch of notes jotted down, but as a summary, I'll share the high-level overview, some digital sketches, static designs, and a Codepen playground I created to get a feel for these alignments on different screen sizes. My notes are mostly focused on the "wide" alignment, because its logic is a bit more complex than the full width alignment.

Note: @geriux I know you're already well on your way to implementing this, but let me know if there's anything that stands out or doesn't align with your work thus far. 😄

Current State

Content-width

• On the web, both the default content-width and the "wide" container can vary, depending on the theme. Typically, content-widths are max-width of between ~500-700px.

• On mobile, our "default" alignment is limited to the max-width of the centered content-container, which is ~580px right now (iOS uses system-defined readableWidth).

Canvas left/right spacing

• On web, the canvas typically has some spacing on the left/right sides of the canvas, which tends to be between 16-40px depending on the theme/viewport size.

• On mobile, specifically on narrow viewports, (most) blocks are flush to the edges of the screen -- with inset borders and padding so that the contents of the block align to the 16px margins. (on wider viewports, the content aligns to the 580px content-width).

Wide container

• On web, "Wide" containers typically have a max-width of ~1000-1200 (e.g. "TwentyTwenty" theme = 1100, "Mayland" = 1020).

• On mobile we don't have an equivalent, hence this project 😄.

Full width container

• On web, full width containers extend edge-to-edge of the viewport

• Mobile doesn't have an equivalent, hence this project 😄

Proposal

• Content-width: We will stay with the current 580px content-width, but wide and full blocks will be able to extend beyond these boundaries

• Canvas spacing: I'll show in examples below, but on wider screens, something around ~32px seems to feel most appropriate based on my explorations. Narrow screens would keep our current spacings.

• Wide container: Let's find a nice natural middle-ground for the wide container's max-width. I started with 1100 based on the TwentyTwenty theme, but maybe we should decide this based on what the most common themes are on mobile and align closer to that. For example, all of the Varia theme variations use 1020 so that might be a better starting point

• Full width container: We'll use the same display as the web, where the container is 100% of the viewport-width (surpassing the canvas spacing)

Static Designs

Based on the above logic, here's some mockups of the "wide" alignment would look like on different device sizes:

Codepen

As mentioned, I put together a little Codepen in order to get a better feel for how the spacing would look on various device sizes. By no means is this intended to be perfect (or even final), but rather a reference during exploration. View on Codepen

---

cc @pinarol

[geriux]

Thank you for the detailed explanation of the different cases @iamthomasbishop!

So far everything looks good, I don't see any issues as of yet but If some come up I'll let you know.

[geriux]

I'm reopening this issue to track adding support for the rest of the blocks.

Group, Cover, and Image are done and merged in develop. ✅

[geriux]

Closing since the rest of the blocks have support now, WordPress/gutenberg#25184 and WordPress/gutenberg#25621