How to add CSS shapes to Gutenberg WordPress Gallery Block?

Published in

GutenbergHub

3 min readOct 29, 2018

The Gutenberg WordPress gallery block allows creating images gallery grid with the options to adjust columns. That itself looks good and neat. However, you can easily apply some CSS shapes to give your WordPress image gallery new look.

There are different ways to apply CSS shapes to your Gutenberg . I tried to choose the simplest and easiest way for you to follow using clip-path.

We will be using a free online CSS Shape Generator called Clippy to generate our desired shape’s CSS. Visit the generator site.

Create Gutenberg Gallery

Let’s start creating the images gallery simply by adding the Gutenberg to your page or post.

And add your images. You should now have a simple grid gallery like this.

Add CSS Shape to Gutenberg WordPress Gallery

Now let’s add some shapes to our gallery images.

Go to Clippy Website

The generator already has a collection of popular CSS shapes which you can click and copy the CSS code. Let’s start with Circle Image Gallery, click on circle shape and copy the CSS code.

Now to apply that code we just copied, we need to assign our Gutenberg Gallery block a CSS class. So that we can target that to apply the copied code.

Simply click on the Gallery Block we created, from the inspector panel/sidebar panel in the Gutenberg WordPress Editor click on the Advanced Section. And give it a CSS class circle-gallery.

Now go to the WordPress customizer > Additional CSS panel.

Paste the copied CSS from the Clippy generator with the class selector .circle-gallery li.

We are targeting the gallery list ( li ) as we need to apply the CSS shape to each image in our gallery. The complete code should look like this for this circle gallery shape.

.circle-gallery li { -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); }

This is it, we have successfully applied the circle CSS shape to the Gutenberg Images Gallery.

You can follow the same steps to apply any CSS shape to your WordPress galleries. Simply click on the preset shapes in clippy or create your own using the custom polygon option there. And copy the code to your website targeting a specific CSS class applied to your Gutenberg Gallery Block.

Here are some other examples I created.