Skip to main content

Gallery

An image gallery — grid, masonry or carousel — with captions and a lightbox. Core has a Gallery block; this is the one with layout families, image treatments and caption sources.

The block renders through the gallery element — the same PHP that runs in the page builder, so the front end is identical either way.

What the sidebar exposes

OptionWhat it does
sourceWhere the images come from, and which ones
design_settingsLayout family, and the settings it needs
container_typeHow wide the gallery runs
clickWhat a click does — lightbox, link, nothing
captionsWhether and where captions show
caption_sourceWhich media field the caption comes from
hover_zoomZoom an image slightly on hover
box_styleBox / border preset
image_styleImage treatment preset
text_colorText colour
bg_colorBackground
caption_colorCaption colour
font_size_presetText size preset

Anything not listed stays available in the page builder, and round-trips untouched — the block only writes the values you change, so an element styled in the builder keeps every setting this sidebar does not show.

Three pickers, because that is what a gallery is

source, design_settings and click are all multi-pickers: where the images come from, how they are laid out, and what happens when one is clicked. Each reveals a different set of fields, and only the chosen branch is saved.

The images are chosen here

The media picker inside source is a multi-upload: thumbnails with reorder and remove controls, and WordPress's own media modal behind an Add media button. Everything a gallery needs is in the sidebar.

An empty canvas usually means an empty source

With the source set to a post's attached media, the preview shows what this post has attached — which for a new draft is nothing. The element says so in place of rendering a broken grid.

The lightbox does not open in the editor

Neither does a carousel design advance. Both would take the click the editor needs to select the block.

Margin and padding come from Gutenberg

The block declares core spacing support, so the element's own spacing option is not exposed here — use the Dimensions panel at the top of the sidebar.