Is it possible to change Gallery Block margin/padding between images?

Well, I went poking around and it looks like this bit of CSS controls it:

.wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item {
	margin: 8px;
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	justify-content: center;
	position: relative;
}

But this also affects the following CSS:

.wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item {
	width: calc(100% / 3 - 16px);
}

So, to make the separation 4px, use the following in your theme’s style.css:

.wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item {
	margin: 2px;
}
.wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item {
	width: calc(100% / 3 - 4px);
}

But, this will only affect it on the front-end. It will still be larger in the editor itself. But, yeah, would be nice if there was a way to change the separation in the UI directly.

In my playing around with it.. don’t care for the Image Caption shadow. It shouldn’t extend past the image itself I think. Anyway, separate issue. Well, adding the following to theme’s style.css corrects the caption shadow:

.wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption {
	padding: 40px 0px 5px;
}

• This reply was modified 6 years, 6 months ago by MarkRH.

Thanks for your help MarkRH! Unfortunately as I played around with the gallery block more I noticed that as of right now it uses full size images and doesn’t let you select sizes so I had to go back to using the regular editor (I did try out one of the fixes posted on Github but it causes php-fpm to be called at every page load and I use static caching).

• This reply was modified 6 years, 6 months ago by nleibert.

Yeah, I agree, using the Full Size images is rather bad. You’d think it would use the small or medium versions.

Hiya,

This is a known issue, and is actively being worked on in https://github.com/WordPress/gutenberg/issues/6177