Block audit: Cover image

[kjellr]

Note: We'll be doing these audits in waves and editing this as we work through the blocks, so this text will be updated and fleshed out as we progress. See the full picture here.

Overview

Name: Cover Image
Icon:

Description: Add a full-width image, and layer text over it — great for headers.
Category: Common blocks
CSS class: wp-block-cover-image, also adds has-background-dim if the "Background Opacity" slider is set to anything other than 0.
Can be converted to: Heading

Empty/placeholder state

The placeholder state is identical to the Image Block placeholder state, except for the icon and block name.

Selected State

After adding an image, you're prompted to "Write title...".

When you do add text, inline text style controls appear:

Primary (toolbar) settings

Alignment, text alignment, edit image

Secondary (sidebar) settings

Cover Image Settings: Fixed Background, Background Opacity

Frontend appearance

Gutenberg starter theme:

Atomic Blocks

twentyseventeen:

twentyten:

Documentation

No devdocs in https://github.com/WordPress/gutenberg/tree/master/core-blocks/cover-image

Suggestion for user-facing docs: The Cover Image block consists of a large image, with text layered on top of it.

Performance on mobile

• Basic functionality works.
• Adjusting the Background Opacity slider is difficult when you can't see the result in real time.
• When alignment is changed to left/right, it's impossible to access the block toolbar (see Bug 4 below)

Accessibility

Bugs/errors

Note: I'm holding off on opening bugs for some of these until there's a definite conclusion on #5452

1. The text styles here are unique to the Cover Image block. The text size is 2em, and is close to our H2s (Currently 1.95em). But our H2s are bold, and this text is not. This text should match the text size of our h2s. I'd also suggest we make it bold by default, as that'll naturally have better readability against a potentially busy background.

2. If you consider the "Image" to be the background, the "Background Opacity" slider values are the opposite of what you'd expect: when they're set to 0, the image is at full opacity, and when they're set to 100%, the image is invisible. We're clearly considering the color to be the background right now, but that seems backwards. (Consider reversing the Cover Image "Background Opacity" slider.  #8600)

3. It's currently impossible make the cover iamge text appear bold inside of Gutenberg. Even if you select the bold toggle, there's a CSS rule that overrides it. (Unable to make cover image text appear bold in the editor. #8202)

4. Selecting left/right alignment on mobile completely hides the Block toolbar. This makes it impossible to change the alignment back to any other setting, to change the text alignment, or to change the image. (Left/Right aligning a cover image block hides the block toolbar on mobile. #8203)

5. This suffers from the left/right alignment issues raised in Left- or right-aligning block-level elements leads to unexpected behaviour #8293.

6. Block toolbar overlaps with inline toolbar when there is a lot of text. (Cover Image: Block toolbar overlaps with inline toolbar when there is a lot of text. #9974)

Suggestions

Note: I'm holding off on opening bugs for some of these until there's a definite conclusion on #5452

• For consistency, text should be rendered as a heading. We could potentially allow people to select a header size.

• Consider allowing users to provide a caption below the image.

• Allow users to transform this into an image block. (Add ability to transform between Image and Cover Image blocks #6475)

• Allow users to select the color of the background: black won't work with all themes. (Cover Image: Allow user to customize the color of the overlay #9329)

• Description could be clearer: The use of the term "full-width image" is a little confusing considering "full width" is the name of one of the alignment options. Also, we say this is "Great for headers", but the text in a Cover Image gets rendered in a p tag.

[ZebulanStanphill]

This block was supposed to switch to using nested blocks. See #5452. I do not know what the status of that PR is, though. Is it still planned for inclusion in 5.0?

[ZebulanStanphill]

Actually, come to think of it... is there even a need for the Cover Image block if the Container block was added? The theoretical Container block would have background image and color options, the ability to nest just about anything, and could have a parallax background if desired. The Cover Image concept could just become a pre-made template of a Container containing a Heading block. See #4900.

[mtias]

A few things I want to add to this block:

• Ability to change the color of the overlay.
• Ability to set a video instead of an image as background (video can be from media library or an embed like YouTube).
• Once that support is in, likely rename to "Cover".

[bph]

Discovered toolbar overlaps when text is spread out to the top of the image.
Screenshot:

Here is a short video on the various scenarios when that happens, also on left and right alignment of the text...
http://recordit.co/mXAe1TpA38

[kjellr]

Thanks @bph — I've opened #9974 so we can track that, and added it to the list above.

[webmandesign]

Hi, for reference, here is my addition to Cover Image audit. #10558

[marybaum]

And in Genesis only renders text at the size of the p tag -- no way to change. Workaround is to add the image, edit as html to render h2 heading, convert to html block because cover block has a heart attack at discovering I snuck an h2 in there ... ;-P

[mtias]

because cover block has a heart attack at discovering I snuck an h2 in there

:)

@marybaum it won't make it in 5.0, but there is a plan to allow any block inside "Cover". That means you'll get the controls for paragraph (color and font sizes) as well as the ability to add any heading.

[marybaum]

Excellent!

[strarsis]

@mtias: Yes! I really need this right now (I am currently using an atomic block container as workaround).
An "infobox" with title, paragraphs and a button should be added over the cover image.

[KaiBuskirk]

is this block available?
or has it been shelved?
is there a download
?
test, test, test, fix...

[ZebulanStanphill]

@KaiBuskirk The Cover Image block is now the Cover block. It was renamed because it now supports background videos in addition to images.

[strarsis]

IMHO the cover block should offer a general way to superimpose elements (z-index),
like text block on image block or text block on video block or
a block of formatted textblock on top of a tinted image block.

[marybaum]

Absolutely!

[karmatosed]

Most of the suggestions in the original audit are now made into issues or added to block. Let's close this and consider splitting out any other issues that need to be into separate logs.