Image block markup in the front-end

[samikeijonen]

There are some changes in the markup compared to current editor. And also some of the things that are missing.

Gutenberg Markup:

<figure class="wp-block-image">
	<img src="http://wordpress-svn/src/wp-content/uploads/2017/03/sandwich-2-1024x614.jpg" alt="Eating healthy">
</figure>

Old Markup:

<p>
	<img src="URL" alt="Eating healthy">
</p>

Gutenberg Markup with caption:

<figure class="wp-block-image">
	<img src="http://wordpress-svn/src/wp-content/uploads/2017/03/sandwich-2.jpg" alt="">
	<figcaption>
		This is <a href="http://wordpress-svn/src/">caption</a>
	</figcaption>
</figure>

Old Markup with caption:

<figure id="attachment_6431" style="width: 1024px" class="wp-caption alignnone">
	<img class="wp-image-6431 size-large" src="URL" alt="Array Themes are ok" width="1024" height="907" srcset="stuff in here">
	<figcaption class="wp-caption-text">Array Themes are more than Okay</figcaption>
</figure>

• Markup is semantic HTML5, which is nice.
• But in old editor markup without caption is with <p> tags like this <p><img scr="URL"></p>. This might potentially have small design issues.
• Gutenberg also uses different classes for <figure> and <figcaption> so old styles won't work.
• Caption color #8f98a1 has too low color contrast even on white.
• Gutenberg doesn't use srcset for responsive images.
• Old editor also used several classes like wp-image-{ID} size-large.

Conclusion and proposal

• Markup is good semantic HTML5.
• Gutenberg should output srcset for responsive images just like the old editor.
• New markup should use the same classes as the old editor so that old styles would work out of the box. I'm proposing the following markup:

<figure class="wp-block-image wp-caption">
	<img class="wp-image-{ID} size-{image-size}" src="http://wordpress-svn/src/wp-content/uploads/2017/03/sandwich-2.jpg" alt="">
	<figcaption class="wp-caption-text">
		This is <a href="http://wordpress-svn/src/">caption</a>
	</figcaption>
</figure>

With same classes there is no need to output any styles in the front-end from image block.

[mtias]

Gutenberg should output srcset for responsive images just like the old editor.

This was discussed in the media chats. The plan is for it to happen dynamically on the server.

New markup should use the same classes as the old editor so that old styles would work out of the box.

I think we can include the wp-image-{ID} and the wp-caption-text classes. Not sure about the size-{image_size}, as that one is fairly generic and something I wish we got away from.

[afercia]

Interesting point:

Caption color #8f98a1 has too low color contrast even on white.

Gutenberg default output should be accessible. Although themes can change everything, I guess the base assumption is a white background and all colors output by Gutenberg in the front-end should have a sufficient contrast ratio of 4.5:1. Among the new colors proposed for WordPress (not officially yet) the gray that has a minimum sufficient contrast with white is:

DARK GRAY 300
#6C7781

[samikeijonen]

Fixed in #3439.