Cover block: overlay covers the text when the block is aligned to the left/right/center

[dashkevych]

Describe the bug
When the Cover block is aligned to the left or to the right or to the center, the overlay covers the text and causes readability issues.

If the block does not have any alignment then it works fine. The text appears above the overlay.

Also, the content is not vertically aligned on the front end.

To Reproduce
Steps to reproduce the behavior:

1. Create the Cover block;
2. Select block alignment (left/right/center);
3. Select overlay color;
4. Set background opacity (I've set it to 80);
5. Update post and see front end;

Expected behavior
The text of the Cover block should appear above the overlay.

Screenshots

Dashboard:

Front end:

Desktop (please complete the following information):

• OS: macOS 10.13.6
• Chrome
• Version 69.0.3497.100
• WordPress: 5.0-beta2-43852
• Theme: Twenty Seventeen (1.7)

[designsimply]

Tested with WordPress 4.9.8 and Gutenberg 4.2.0 and confirmed and found that this problem happens even without changing the overlay color or opacity.

1. Add a cover block.
2. Add some text into the cover block.
3. Select "Align right" in the block toolbar.
4. Publish and view the post.
5. Check to see if the cover block view reasonably matches with what was showing in the editor.

Result: when the cover block is aligned right, the text added appears at the top instead of centered vertically like it is in the editor and the text is behind the overlay which also looks different in the editor view. I expected the vertical alignment of the text and the overlay order to match.

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=15605&action=edit running and http://alittletestblog.com/2018/11/07/cover-block-alignment-test/ WordPress 4.9.8 and Gutenberg 4.2.0 and theme Twenty Seventeen 1.7 using Firefox 63.0.1 on macOS 10.13.6.}

[m-e-h]

This should be fixed in #11990