Cover image block - Allow text element choice

[mrmadhat]

Is your feature request related to a problem? Please describe.
The cover image block specifies in the description "Add a full-width image, and layer text over it — great for headers." However, the text outputs in a paragraph tag and not a header.

Describe the solution you'd like
The option for the text to be treated as a heading instead of a paragraph. When the text should be a heading the user should be able to select which heading they would like to use.

[designsimply]

Adding a screenshot for reference:

^{Seen at http://alittletestblog.com/2018/10/22/buzz/ running WordPress 4.9.8 and Gutenberg 4.1.0-rc.2 using Firefox 62.0.3 on macOS 10.13.6.}

[timnicholson]

FWIW, I agree completely with this. It would be great to be able to pick a heading H1, H2, etc. or even a font size like with the paragraph block. I think most people are going to want to actually mix a heading with text and be able to control the relative size of both.

[mrmadhat]

I'm hoping to get some time to work on this this week and would like some opinions on what the change should be.

My thoughts are, a heading should be favoured over a paragraph because, a user who see's "Great for headings" may mistakenly think that a heading is automatically added which is not only bad for SEO but also for users who use screen readers as authors may mistakenly think the cover block text will be a part of the document outline, when it wont.

I think initially it would be best to remove the paragraph and exchange it for a heading. Then later add the option to select a paragraph/other element instead of a heading.

Another approach could be to update the description removing the great for headings.

[timnicholson]

I think in a perfect world, the cover image overlay would be a container in which the user could add a heading, paragraph, maybe even a button to it. However, I understand containers in GB are hotly debated right now as to whether and how to handle them.

Next best would be to have the cover image overlay contain two lines of editable text. One that is a heading and one that is a paragraph. Then of course the h2, h3, etc. and paragraph font sizes could be chosen to get the look the user wants.

If we need to keep this dead-simple for now, I guess I would suggest that the text be a paragraph style. Hopefully GB sets the large, etc. font sizes to match h2, etc. so that would be OK. It would be nice if the user could specify <big> and <small> embedded in the text as well so that you could essentially get a really large "heading" followed by a normal or small-font paragraph.

[mrmadhat]

I think in a perfect world, the cover image overlay would be a container

I completely agree with this and think a container would be the right way forward. However, I think until containers arrive the best solution would be to update the cover block so that the user can select a heading instead of just using a paragraph tag.

Next best would be to have the cover image overlay contain two lines of editable text.

I also initially thought adding a subheading would be a good improvement. But after thinking about it adding a subheading/additional text would introduce a new problem; what if I want the cover and just a heading? Do we then introduce a checkbox/toggle to enable disable sub-heading/secondary text? It seems unnecessary to add more complexity than is needed if containers are around the corner.

[timnicholson]

I’ve noticed that on cover images, if you don’t type over the placeholder text, no text is displayed. So I figure that a user could just type their text into the heading line or the paragraph line or both. The placeholder text could be updated like this to make it clear:

Type heading text here (if desired)…
Type paragraph text here (if desired)…

[mrmadhat]

@timnicholson that's a good point, didn't even think of that!

[gziolo]

@jorgefilipecosta - this looks like a duplicate of the efforts to convert the Cover block to use nested blocks internally. Can you confirm and consolidate under the parent issue if this is the case?

[mrmadhat]

Hi @gziolo would #4900 be the appropriate issue?

[gziolo]

I think that #10639 was the last try to allow to use a few block types inside Cover block. Looking at the code I can notice that @jorgefilipecosta was exploring how to allow the following blocks to be used on top of the cover image/video (https://github.com/WordPress/gutenberg/pull/10639/files#diff-04b4f9f3332a93f24a032e821240c800R37):

• button
• heading
• paragraph

I can't find any open PRs, so you might want to team up with @jorgefilipecosta and figure out what would be next steps :)

[gziolo]

It looks like @jorgefilipecosta has opened a fresh PR with nested blocks support for Cover block: #10746. I would give it a spin and check if it would solve this issue. If not, let's help to solve it :)