Docs

Gallery block

The Gallery block is an alternative to the WordPress core Gallery block.

The main advantage of the ska/gallery block is that it can render an image gallery with a simple and predictable markup: .wp-block-ska-gallery > .image > img.

When disabling the Wrap option, the gallery will not render any parent element, only .image > img elements. This makes it possible to use the Gallery block inside the Slider block for example, making each image a separate slide. How ever when using the Gallery block without a wrapper you shouldn’t add any Tailwind classes to it, instead add them to its’ parent block.

Basic gallery

Images: https://picsum.photos

<!-- wp:ska/gallery {"ids":[697,698,699,700,701,702,703,704,705],"size":"medium","linkTo":"full","lightbox":true,"skaBlocks":{"cx":"grid grid-cols-2 sm:grid-cols-3 gap-3.5","css":".grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}@media (width\u003e=40rem){.sm\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}.gap-3\\.5{gap:var(\u002d\u002dspacing-3_5)}","t":1740957313},"skaBlocksDisplay":{"v":{"$":{"@":"grid"}}},"skaBlocksGridTemplateColumns":{"v":{"$":{"@":"2"},"sm":{"@":"3"}}},"skaBlocksGap":{"v":{"$":{"@":"3.5"}}}} -->
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3.5 wp-block-ska-gallery"><span class="ska-gallery-content-placeholder"></span></div>
<!-- /wp:ska/gallery -->

Logos with individual links

Images: https://logoipsum.com

<!-- wp:ska/gallery {"ids":[708,709,710,711,712,713,714,715],"linkTo":"list","links":"#logo-1-link\n#logo-2-link\n#logo-3-link\n#logo-4-link\n#logo-5-link\n#logo-6-link\n#logo-7-link\n#logo-8-link","skaBlocks":{"cx":"grid grid-cols-2 lg:grid-cols-4 gap-4 gap-x-6 gap-y-12 place-items-center","css":".grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}@media (width\u003e=64rem){.lg\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.gap-4{gap:var(\u002d\u002dspacing-4)}.gap-x-6{column-gap:var(\u002d\u002dspacing-6)}.gap-y-12{row-gap:var(\u002d\u002dspacing-12)}.place-items-center{place-items:center}","t":1740957313},"skaBlocksDisplay":{"v":{"$":{"@":"grid"}}},"skaBlocksGridTemplateColumns":{"v":{"$":{"@":"2"},"lg":{"@":"4"}}},"skaBlocksGap":{"v":{"$":{"@":"4","column":"6","row":"12"}}},"skaBlocksPlaceItems":{"v":{"$":{"@":"center"}}}} -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 gap-x-6 gap-y-12 place-items-center wp-block-ska-gallery"><span class="ska-gallery-content-placeholder"></span></div>
<!-- /wp:ska/gallery -->