Gutenberg Gallery


That was a default gallery. Let’s see some other ways of displaying media.

Image with Overlay

The single image with a large heading on top is a great way to introduce a new section of a page.

Now here’s an image-with-text two-column block:

Fatsia japonica ‘Spider’s Web’ with Dicentra scandens growing all over it.

Text color and size can be easily changed to anything at the block level. This is cool if you want to have fun with headings.

Like This…

The image and text block can be switched around with just a click. And the text can be aligned to the top of the image, the center, or the bottom, also with just a click. You can choose to crop the image to match the height of the text block, and it even gives you a focal point picker so you have control over how it crops.

Column blocks – you can have up to 6 columns, and if you use a group block and put other blocks in it, you can set the group to have a background color.

Wide width and Full width are options for certain types of blocks.

A Heading with Background Color

A newspaper-like layout can be achieved with a two-column block like this. This could be great for some blog posts or sections. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

The rest of it went in a doublet of fine cloth and velvet breeches and shoes to match for holidays, while on week-days he made a brave figure in his best homespun. He had in his house a housekeeper past forty, a niece under twenty, and a lad for the field and market-place, who used to saddle the hack as well as handle the bill-hook. The age of this gentleman of ours was bordering on fifty; he was of a hardy habit, spare, gaunt-featured, a very early riser and a great sportsman.

Can a gallery be full width? Looks like yes! You can also choose the number of columns, and the image size.

And galleries can be wide width. That just makes them 80px wider than the regular content width on either side. Let’s see what that looks like.

Have to say I prefer the full width setting for the most immersive experience. It is interesting how the gallery automatically makes the last images larger to fill the row if there aren’t exactly the right number for a full row.