Gallery block markup in the front-end

[samikeijonen]

Gutenberg markup:

<div class="wp-block-gallery alignnone columns-3 is-cropped">
	<figure class="blocks-gallery-image"><img src="http://wordpress-svn/src/wp-content/uploads/2017/03/espresso-2.jpg" alt="Alt text" data-id="28"></figure>
	<figure class="blocks-gallery-image"><img src="http://wordpress-svn/src/wp-content/uploads/2017/03/coffee-2.jpg" alt="" data-id="30"></figure>
	<figure class="blocks-gallery-image"><img src="http://wordpress-svn/src/wp-content/uploads/2017/03/sandwich-2.jpg" alt="" data-id="29"></figure>
	<figure class="blocks-gallery-image"><img src="http://wordpress-svn/src/wp-content/uploads/2013/03/unicorn-wallpaper.jpg" alt="Unicorn Wallpaper" data-id="1045"></figure>
</div>

Old markup:

<div id="gallery-1" class="gallery galleryid-1976 gallery-columns-3 gallery-size-thumbnail">
	<figure class="gallery-item">
		<div class="gallery-icon landscape">
			<img width="150" height="150" src="URL" class="attachment-thumbnail size-thumbnail" alt="" aria-describedby="gallery-1-29" srcset="stuff" sizes="100vw">
		</div>
		<figcaption class="wp-caption-text gallery-caption" id="gallery-1-29">
			This is caption
		</figcaption>
	</figure>
	
	<figure class="gallery-item">
		<div class="gallery-icon landscape">
			<img width="150" height="150" src="URL" class="attachment-thumbnail size-thumbnail" alt="" srcset="stuff" sizes="100vw">
		</div>
	</figure>

</div>

• Should user have ability to select image size for galleries like in the current editor? I'm kind of scared if user can only put original (really big) images in the gallery.
• Responsive image srcset="stuff" sizes="stuff" is missing anyways.
• Markup and classes are changing a little which means new Galleries styles are Gutenberg-looking and old galleries are theme-looking. I guess that's OK, or not. I'm not sure yet :)
• See also issue Image block markup in the front-end #2899 for image block markup and similar concerns.

Conclusion and proposal

• I don't have a clear vision should markup and old classes match.
• Atleast accessibility stuff like aria-describedby should be used in the Gutenberg also.
• Gutenberg should output srcsetand any responsive images related stuff just like the old editor.

[mtias]

Should user have ability to select image size for galleries like in the current editor? I'm kind of scared if user can only put original (really big) images in the gallery.

See #1450

Markup and classes are changing a little which means new Galleries styles are Gutenberg-looking and old galleries are theme-looking. I guess that's OK, or not. I'm not sure yet :)

Yes, galleries have one of the biggest departures, and I think that's alright :) The new ones have a different presentation and approach, and we can consider them separate blocks. We'll have the ability to convert old ones to the new ones if desired (on demand).

Atleast accessibility stuff like aria-describedby should be used in the Gutenberg also.

Are these supposed to be saved with the markup or filtered like srcser will be?

[samikeijonen]

Are these supposed to be saved with the markup or filtered like srcser will be?

Not sure, I need to check this.

[afercia]

galleries have one of the biggest departures, and I think that's alright :)

Then, since changing markup from the old one is OK, I'd suggest to improve it further. A gallery of images is basically a list of images. Wrapping the gallery images in a list would be semantically correct: a list is a list and should be marked up as such.

Additionally, this would allow assistive technologies to announce the number of items in the list, helping users decide if they want to go through the list or skip it.

[samikeijonen]

@afercia Silently inside my head I was thinking about list too. Could we just use minimum of elements like this:

<ul class="wp-block-gallery alignnone columns-3 is-cropped">
	<li><figure class="blocks-gallery-image"><img src="http://wordpress-svn/src/wp-content/uploads/2017/03/espresso-2.jpg" alt="Alt text" data-id="28"></figure></li>
	<li><figure class="blocks-gallery-image"><img src="http://wordpress-svn/src/wp-content/uploads/2017/03/coffee-2.jpg" alt="" data-id="30"></figure></li>
	<li><figure class="blocks-gallery-image"><img src="http://wordpress-svn/src/wp-content/uploads/2017/03/sandwich-2.jpg" alt="" data-id="29"></figure></li>
	<li><figure class="blocks-gallery-image"><img src="http://wordpress-svn/src/wp-content/uploads/2013/03/unicorn-wallpaper.jpg" alt="Unicorn Wallpaper" data-id="1045"></figure></li>
</ul>

[afercia]

@samikeijonen minimum is nice. 🙂

[klihelp]

Was looking for filters to add srcset

[samikeijonen]

Fixed in #3441.

[klihelp]

Add scrset please:)