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 > .wp-block-ska-gallery__image > img while the core/gallery has differences in the markup in the block editor and front end, making it harder to style with Tailwind classes.
When disabling the Wrap option, the gallery will not render any parent element, only .wp-block-ska-gallery__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.
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":1738813197},"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":1738813197},"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 -->