Gallery

1–2 minutes
106 words

The Gallery block displays multiple images in a responsive grid layout, automatically managing the spacing and alignment of the nested image elements

Gallery example

Block example

theme.json

Gallery

  • core/gallery
CategoryConfiguration
Colorbackground: Available
gradient: Available
text: —
TypographyfontSize: —
lineHeight: —
Spacingpadding: Available
margin: Available
blockGap: Available*
Borderborder: Available
radius: Available
Filterduotone: —
Shadow
CssAvailable

*blockGap is being overridden by –wp–style–gallery-gap-default rendering the setting ineffective

Possible fix:

"styles": {
    "css":root {
        --wp--style--gallery-gap-default: var(--wp--preset--spacing--small);
    }
}

Json example

"core/gallery": {
    "border": {
        "radius": {
            "bottomLeft": "var(--wp--preset--border-radius--extra-large-increased)",
            "bottomRight": "var(--wp--preset--border-radius--extra-large-increased)",
            "topLeft": "var(--wp--preset--border-radius--extra-large-increased)",
            "topRight": "var(--wp--preset--border-radius--extra-large-increased)"
        }
    },
    "css": "overflow: hidden;",
    "spacing": {
        "blockGap": "var(--wp--preset--spacing--small)",
        "margin": {
            "bottom": "0",
            "left": "0",
            "right": "0",
            "top": "0"
        },
        "padding": {
            "bottom": "0",
            "left": "0",
            "right": "0",
            "top": "0"
        }
    }
}