[AMP Stories] Add any missing features necessary for templates

[miina]

AC: All the features needed for the templates exist.
AC: User can set border radius to Image and Text blocks via block style (accessible via block style button in the left top corner of the block, or in the right sidebar in the block settings.
AC: User can align the text in Text block.
AC: User can add a gradient to the Page block.

• Look through the templates and log the features that we need to add for templates.
• Implement any missing features.

Features needed:

• Add border radius setting to Text block and Image block [Done, see [AMP Stories] Optional rounded corners for Text and Image block #2055].
• Add alignment options for the Text block.
• Add gradient setting for Page. [Done, see [AMP Stories] Add overlay settings to Page #2046]

Add opacity Range control to allowed (child) blocks which use background color. Moved to a separate issue: #2058

[miina]

Based on the template designs the following features seem to be missing:

• Adding opacity to block (this would also be useful with a Color Fill block -- a resizable block which can be just filled with color and then placed on top of an image or background image is 100% size with opacity setting);
• Gradient (would also be useful with a Color Fill block).
• Aligning text to center;
• Rotation (is already logged in [AMP Stories] Element rotation #2005.)

cc @swissspidy @westonruter

[swissspidy]

Color Fill block: My immediate thought was WordPress/gutenberg#4900. The PR for that, WordPress/gutenberg#13964, is still in the works, but according to the comments there it might be ready soon.

[swissspidy]

Aligning text to center

Should be as easy as setting supports: { align: true } and adding the necessary text-align CSS.

[westonruter]

As I'm sure you're aware, also related to Section block is the Cover Image as a proto block: it allows you to add additional children to it. The Overlay has a color and opacity setting:

[westonruter]

• Adding opacity to block

What about adding opacity to a block as a whole, and not just the background color? I know this was done for layers in the previous incarnation of AMP Stories. Maybe that is just asking for trouble.

[miina]

What about adding opacity to a block as a whole, and not just the background color? I know this was done for layers in the previous incarnation of AMP Stories. Maybe that is just asking for trouble.

Unless there is a reason why not to then seems like we could add it generally for other blocks, too, or at least to Image and Text Block.

Another style-related thing that occurs frequently in the templates is having rounded corners for images and Text blocks with background color. Maybe that'd also be something necessary?

[westonruter]

It would indeed be useful if background colors everywhere in Gutenberg had the ability to specify the opacity. It's not currently provided normal Color Settings:

The Overlay has the opacity as a separate slider for Background Opacity as shown above:

By it would be cool if all color pickers just had opacity as a standard parameter.

Another style-related thing that occurs frequently in the templates is having rounded corners for images and Text blocks with background color. Maybe that'd also be something necessary?

Oh yeah, a border radius setting for the text block and image block would be very nice!

[miina]

Ticket description is now updated based on the discussion.

[swissspidy]

a border radius setting for the text block and image block would be very nice

Could this be a block style instead? Then one could choose between "Default" and "Rounded" without having to worry about the block radius always being consistent between blocks. Or is there a strong use case for a block radius range control?

[miina]

"Default" and "Rounded" should be sufficient, we can adjust later if it should become necessary.

[miina]

Will start working on adding the gradient/scrim setting to Page. cc @swissspidy

[csossi]

verified in QA