Explanation of how to simplify styling for the WP gallery block.

[1] wp-gallery-block-fixes.md

How to: Simplifying the WordPress gallery block

TL;DR = The WordPress gallery block markup is fine. But its styling could use a slight overhaul.

---

Intro:

While looking through the CSS for wp-block-gallery, I noticed several aspects that could be simplified considerably.

Specifically, the way that "gutters" are created between gallery items. It currently uses margin-right, which necessitates a lot of tweaks based on the number of columns, and involves overrides to handle :nth-of-type(…) exceptions.

Instead, I ended up refactoring this code for our own usage at Reaktiv Studios, so that we can use WP generated markup in a stand-alone "headless" Gatsby context.

I simply used interior padding-left and padding-right for each gallery item <li>. With a negative margin-left and margin-right offset applied to the parent <ul>.

For what it's worth, this is also how the wp-block-columns work. That CSS could be similarly refactored. I fixed it for our own internal usage, and would be happy to share the code if anyone is interested.

---

Flexbox caveat:

It is worth noting that the outermost <figure> element should not have display: flex on it, as that breaks the gallery layout as the page loads. It is also unnecessary, because we are not using any flex based positioning on its one and only child, the <ul> that houses the gallery items.

<!--
  This should be left as default:

  `display: block`

  ^ That is sufficient.
-->
<figure class="wp-block-gallery">

  <!--
    This element is the only one that needs:

    `display: flex`
  -->
  <ul class="blocks-gallery-grid">

    <li class="blocks-gallery-item">
      <figure>
        <a href="…">
          <img alt="…" src="…" />
        </a>
        <figcaption>
          image caption
        </figcaption>
      </figure>
    </li>

  </ul>

</figure>

---

Here area few before and after examples, along with the entirety of the file(s) included below.

BEFORE:

/*
  This is how the `wp-block-gallery` CSS works.

  It is "clever," but actually unnecessary.
*/

.blocks-gallery-grid,
.wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

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

@media (min-width: 600px) {
  .wp-block-gallery.columns-4 .blocks-gallery-item {
    width: calc((100% - 48px) / 4);
    margin-right: 16px;
  }

  /*
    NOTE:

    This has to be done for every column count.

    There is code for this in the WP styles for…

    …3, 4, 5, 6, 7, 8 columns. It is overkill.
  */
  .wp-block-gallery.columns-4 .blocks-gallery-item:nth-of-type(4n) {
    margin-right: 0;
  }
}

AFTER:

.blocks-gallery-grid,
.blocks-gallery-item,
.wp-block-gallery {
  padding: 0;
  margin: 0;
}

.blocks-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;

  /*
    NOTE:

    Offset the parent container, by the amount
    of side padding applied to each child item.
  */
  margin-left: -8px;
  margin-right: -8px;
}

.blocks-gallery-item {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  position: relative;

  /*
    The left and right padding combine, to create
    the equivalent of a `16px` gutter "margin"
    between content within each of the items.
  */
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 16px;
}

@media (min-width: 600px) {
  .wp-block-gallery.columns-4 .blocks-gallery-item {
    width: calc(100% / 4);
  }
}

[2] wp-block-gallery-BEFORE.scss

.blocks-gallery-grid,
.wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

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

.blocks-gallery-grid .blocks-gallery-image figure,
.blocks-gallery-grid .blocks-gallery-item figure,
.wp-block-gallery .blocks-gallery-image figure,
.wp-block-gallery .blocks-gallery-item figure {
  margin: 0;
  height: 100%;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .blocks-gallery-grid .blocks-gallery-image figure,
  .blocks-gallery-grid .blocks-gallery-item figure,
  .wp-block-gallery .blocks-gallery-image figure,
  .wp-block-gallery .blocks-gallery-item figure {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
  }
}

.blocks-gallery-grid .blocks-gallery-image img,
.blocks-gallery-grid .blocks-gallery-item img,
.wp-block-gallery .blocks-gallery-image img,
.wp-block-gallery .blocks-gallery-item img {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .blocks-gallery-grid .blocks-gallery-image img,
  .blocks-gallery-grid .blocks-gallery-item img,
  .wp-block-gallery .blocks-gallery-image img,
  .wp-block-gallery .blocks-gallery-item img {
    width: auto;
  }
}

.blocks-gallery-grid .blocks-gallery-image figcaption,
.blocks-gallery-grid .blocks-gallery-item figcaption,
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption {
  position: absolute;
  bottom: 0;
  width: 100%;
  max-height: 100%;
  overflow: auto;
  padding: 40px 10px 9px;
  color: #fff;
  text-align: center;
  font-size: 13px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3) 70%, transparent);
}

.blocks-gallery-grid .blocks-gallery-image figcaption img,
.blocks-gallery-grid .blocks-gallery-item figcaption img,
.wp-block-gallery .blocks-gallery-image figcaption img,
.wp-block-gallery .blocks-gallery-item figcaption img {
  display: inline;
}

.blocks-gallery-grid.is-cropped .blocks-gallery-image a,
.blocks-gallery-grid.is-cropped .blocks-gallery-image img,
.blocks-gallery-grid.is-cropped .blocks-gallery-item a,
.blocks-gallery-grid.is-cropped .blocks-gallery-item img,
.wp-block-gallery.is-cropped .blocks-gallery-image a,
.wp-block-gallery.is-cropped .blocks-gallery-image img,
.wp-block-gallery.is-cropped .blocks-gallery-item a,
.wp-block-gallery.is-cropped .blocks-gallery-item img {
  width: 100%;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .blocks-gallery-grid.is-cropped .blocks-gallery-image a,
  .blocks-gallery-grid.is-cropped .blocks-gallery-image img,
  .blocks-gallery-grid.is-cropped .blocks-gallery-item a,
  .blocks-gallery-grid.is-cropped .blocks-gallery-item img,
  .wp-block-gallery.is-cropped .blocks-gallery-image a,
  .wp-block-gallery.is-cropped .blocks-gallery-image img,
  .wp-block-gallery.is-cropped .blocks-gallery-item a,
  .wp-block-gallery.is-cropped .blocks-gallery-item img {
    height: 100%;
    flex: 1;
    -o-object-fit: cover;
    object-fit: cover;
  }
}

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

.blocks-gallery-grid .blocks-gallery-image:nth-of-type(2n),
.blocks-gallery-grid .blocks-gallery-item:nth-of-type(2n),
.wp-block-gallery .blocks-gallery-image:nth-of-type(2n),
.wp-block-gallery .blocks-gallery-item:nth-of-type(2n) {
  margin-right: 0;
}

.blocks-gallery-grid.columns-1 .blocks-gallery-image,
.blocks-gallery-grid.columns-1 .blocks-gallery-item,
.wp-block-gallery.columns-1 .blocks-gallery-image,
.wp-block-gallery.columns-1 .blocks-gallery-item {
  width: 100%;
  margin-right: 0;
}

@media (min-width: 600px) {
  .blocks-gallery-grid.columns-3 .blocks-gallery-image,
  .blocks-gallery-grid.columns-3 .blocks-gallery-item,
  .wp-block-gallery.columns-3 .blocks-gallery-image,
  .wp-block-gallery.columns-3 .blocks-gallery-item {
    width: calc((100% - 32px) / 3);
    margin-right: 16px;
  }

  @supports (-ms-ime-align: auto) {
    .blocks-gallery-grid.columns-3 .blocks-gallery-image,
    .blocks-gallery-grid.columns-3 .blocks-gallery-item,
    .wp-block-gallery.columns-3 .blocks-gallery-image,
    .wp-block-gallery.columns-3 .blocks-gallery-item {
      width: calc((100% - 32px) / 3 - 1px);
    }
  }

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

  @supports (-ms-ime-align: auto) {
    .blocks-gallery-grid.columns-4 .blocks-gallery-image,
    .blocks-gallery-grid.columns-4 .blocks-gallery-item,
    .wp-block-gallery.columns-4 .blocks-gallery-image,
    .wp-block-gallery.columns-4 .blocks-gallery-item {
      width: calc((100% - 48px) / 4 - 1px);
    }
  }

  .blocks-gallery-grid.columns-5 .blocks-gallery-image,
  .blocks-gallery-grid.columns-5 .blocks-gallery-item,
  .wp-block-gallery.columns-5 .blocks-gallery-image,
  .wp-block-gallery.columns-5 .blocks-gallery-item {
    width: calc((100% - 64px) / 5);
    margin-right: 16px;
  }

  @supports (-ms-ime-align: auto) {
    .blocks-gallery-grid.columns-5 .blocks-gallery-image,
    .blocks-gallery-grid.columns-5 .blocks-gallery-item,
    .wp-block-gallery.columns-5 .blocks-gallery-image,
    .wp-block-gallery.columns-5 .blocks-gallery-item {
      width: calc((100% - 64px) / 5 - 1px);
    }
  }

  .blocks-gallery-grid.columns-6 .blocks-gallery-image,
  .blocks-gallery-grid.columns-6 .blocks-gallery-item,
  .wp-block-gallery.columns-6 .blocks-gallery-image,
  .wp-block-gallery.columns-6 .blocks-gallery-item {
    width: calc((100% - 80px) / 6);
    margin-right: 16px;
  }

  @supports (-ms-ime-align: auto) {
    .blocks-gallery-grid.columns-6 .blocks-gallery-image,
    .blocks-gallery-grid.columns-6 .blocks-gallery-item,
    .wp-block-gallery.columns-6 .blocks-gallery-image,
    .wp-block-gallery.columns-6 .blocks-gallery-item {
      width: calc((100% - 80px) / 6 - 1px);
    }
  }

  .blocks-gallery-grid.columns-7 .blocks-gallery-image,
  .blocks-gallery-grid.columns-7 .blocks-gallery-item,
  .wp-block-gallery.columns-7 .blocks-gallery-image,
  .wp-block-gallery.columns-7 .blocks-gallery-item {
    width: calc((100% - 96px) / 7);
    margin-right: 16px;
  }

  @supports (-ms-ime-align: auto) {
    .blocks-gallery-grid.columns-7 .blocks-gallery-image,
    .blocks-gallery-grid.columns-7 .blocks-gallery-item,
    .wp-block-gallery.columns-7 .blocks-gallery-image,
    .wp-block-gallery.columns-7 .blocks-gallery-item {
      width: calc((100% - 96px) / 7 - 1px);
    }
  }

  .blocks-gallery-grid.columns-8 .blocks-gallery-image,
  .blocks-gallery-grid.columns-8 .blocks-gallery-item,
  .wp-block-gallery.columns-8 .blocks-gallery-image,
  .wp-block-gallery.columns-8 .blocks-gallery-item {
    width: calc((100% - 112px) / 8);
    margin-right: 16px;
  }

  @supports (-ms-ime-align: auto) {
    .blocks-gallery-grid.columns-8 .blocks-gallery-image,
    .blocks-gallery-grid.columns-8 .blocks-gallery-item,
    .wp-block-gallery.columns-8 .blocks-gallery-image,
    .wp-block-gallery.columns-8 .blocks-gallery-item {
      width: calc((100% - 112px) / 8 - 1px);
    }
  }

  .blocks-gallery-grid.columns-1 .blocks-gallery-image:nth-of-type(1n),
  .blocks-gallery-grid.columns-1 .blocks-gallery-item:nth-of-type(1n),
  .wp-block-gallery.columns-1 .blocks-gallery-image:nth-of-type(1n),
  .wp-block-gallery.columns-1 .blocks-gallery-item:nth-of-type(1n) {
    margin-right: 0;
  }

  .blocks-gallery-grid.columns-2 .blocks-gallery-image:nth-of-type(2n),
  .blocks-gallery-grid.columns-2 .blocks-gallery-item:nth-of-type(2n),
  .wp-block-gallery.columns-2 .blocks-gallery-image:nth-of-type(2n),
  .wp-block-gallery.columns-2 .blocks-gallery-item:nth-of-type(2n) {
    margin-right: 0;
  }

  .blocks-gallery-grid.columns-3 .blocks-gallery-image:nth-of-type(3n),
  .blocks-gallery-grid.columns-3 .blocks-gallery-item:nth-of-type(3n),
  .wp-block-gallery.columns-3 .blocks-gallery-image:nth-of-type(3n),
  .wp-block-gallery.columns-3 .blocks-gallery-item:nth-of-type(3n) {
    margin-right: 0;
  }

  .blocks-gallery-grid.columns-4 .blocks-gallery-image:nth-of-type(4n),
  .blocks-gallery-grid.columns-4 .blocks-gallery-item:nth-of-type(4n),
  .wp-block-gallery.columns-4 .blocks-gallery-image:nth-of-type(4n),
  .wp-block-gallery.columns-4 .blocks-gallery-item:nth-of-type(4n) {
    margin-right: 0;
  }

  .blocks-gallery-grid.columns-5 .blocks-gallery-image:nth-of-type(5n),
  .blocks-gallery-grid.columns-5 .blocks-gallery-item:nth-of-type(5n),
  .wp-block-gallery.columns-5 .blocks-gallery-image:nth-of-type(5n),
  .wp-block-gallery.columns-5 .blocks-gallery-item:nth-of-type(5n) {
    margin-right: 0;
  }

  .blocks-gallery-grid.columns-6 .blocks-gallery-image:nth-of-type(6n),
  .blocks-gallery-grid.columns-6 .blocks-gallery-item:nth-of-type(6n),
  .wp-block-gallery.columns-6 .blocks-gallery-image:nth-of-type(6n),
  .wp-block-gallery.columns-6 .blocks-gallery-item:nth-of-type(6n) {
    margin-right: 0;
  }

  .blocks-gallery-grid.columns-7 .blocks-gallery-image:nth-of-type(7n),
  .blocks-gallery-grid.columns-7 .blocks-gallery-item:nth-of-type(7n),
  .wp-block-gallery.columns-7 .blocks-gallery-image:nth-of-type(7n),
  .wp-block-gallery.columns-7 .blocks-gallery-item:nth-of-type(7n) {
    margin-right: 0;
  }

  .blocks-gallery-grid.columns-8 .blocks-gallery-image:nth-of-type(8n),
  .blocks-gallery-grid.columns-8 .blocks-gallery-item:nth-of-type(8n),
  .wp-block-gallery.columns-8 .blocks-gallery-image:nth-of-type(8n),
  .wp-block-gallery.columns-8 .blocks-gallery-item:nth-of-type(8n) {
    margin-right: 0;
  }
}

.blocks-gallery-grid .blocks-gallery-image:last-child,
.blocks-gallery-grid .blocks-gallery-item:last-child,
.wp-block-gallery .blocks-gallery-image:last-child,
.wp-block-gallery .blocks-gallery-item:last-child {
  margin-right: 0;
}

.blocks-gallery-grid.alignleft,
.blocks-gallery-grid.alignright,
.wp-block-gallery.alignleft,
.wp-block-gallery.alignright {
  max-width: 305px;
  width: 100%;
}

.blocks-gallery-grid.aligncenter .blocks-gallery-item figure,
.wp-block-gallery.aligncenter .blocks-gallery-item figure {
  justify-content: center;
}

wp-block-gallery-AFTER.css

.blocks-gallery-grid,
.blocks-gallery-item,
.wp-block-gallery {
  padding: 0;
  margin: 0;
}

.blocks-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;

  /*
    NOTE:

    Offset the parent container, by the amount
    of side padding applied to each child item.
  */
  margin-left: -8px;
  margin-right: -8px;
}

.blocks-gallery-item {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  position: relative;

  /*
    The left and right padding combine, to create
    the equivalent of a `16px` gutter "margin"
    between content within each of the items.
  */
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 16px;
}

.blocks-gallery-item figure {
  margin: 0;
  height: 100%;
}

.blocks-gallery-item img {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
}

.blocks-gallery-item figcaption {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3) 70%, transparent);
  color: #fff;
  font-size: 13px;
  overflow: auto;
  padding: 8px;
  text-align: center;

  width: auto;
  max-height: calc(100% - 16px);

  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 16px;
}

.blocks-gallery-item figcaption a {
  color: inherit;
  text-decoration: underline;
}

.blocks-gallery-item figcaption img {
  display: inline;
}

.wp-block-gallery.is-cropped .blocks-gallery-item a,
.wp-block-gallery.is-cropped .blocks-gallery-item img {
  width: 100%;
}

/*
// ============================
// Tweaks for "sticky" support.
// ============================
*/

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .blocks-gallery-item img {
    width: auto;
  }

  .blocks-gallery-item figure {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
  }

  .wp-block-gallery.is-cropped .blocks-gallery-item a,
  .wp-block-gallery.is-cropped .blocks-gallery-item img {
    height: 100%;
    flex: 1;
    -o-object-fit: cover;
    object-fit: cover;
  }
}

/*
// =====================
// Unscoped item widths.
// =====================
*/

.blocks-gallery-item {
  width: calc(100% / 2);
}

.wp-block-gallery.columns-1 .blocks-gallery-item {
  width: 100%;
}

/*
// =======================
// Page width media query.
// =======================
*/

@media (min-width: 600px) {
  .wp-block-gallery.columns-3 .blocks-gallery-item {
    width: calc(100% / 3);
  }

  .wp-block-gallery.columns-4 .blocks-gallery-item {
    width: calc(100% / 4);
  }

  .wp-block-gallery.columns-5 .blocks-gallery-item {
    width: calc(100% / 5);
  }

  .wp-block-gallery.columns-6 .blocks-gallery-item {
    width: calc(100% / 6);
  }

  .wp-block-gallery.columns-7 .blocks-gallery-item {
    width: calc(100% / 7);
  }

  .wp-block-gallery.columns-8 .blocks-gallery-item {
    width: calc(100% / 8);
  }

  /*
  // ==============
  // Tweaks for IE.
  // ==============
  */

  @supports (-ms-ime-align: auto) {
    .wp-block-gallery.columns-3 .blocks-gallery-item {
      width: calc((100% / 3) - 1px);
    }

    .wp-block-gallery.columns-4 .blocks-gallery-item {
      width: calc((100% / 4) - 1px);
    }

    .wp-block-gallery.columns-5 .blocks-gallery-item {
      width: calc((100% / 5) - 1px);
    }

    .wp-block-gallery.columns-6 .blocks-gallery-item {
      width: calc((100% / 6) - 1px);
    }

    .wp-block-gallery.columns-7 .blocks-gallery-item {
      width: calc((100% / 7) - 1px);
    }

    .wp-block-gallery.columns-8 .blocks-gallery-item {
      width: calc((100% / 8) - 1px);
    }
  }
}

/*
// ===========================
// Tweaks for "align" classes.
// ===========================
*/

.wp-block-gallery.alignleft,
.wp-block-gallery.alignright {
  max-width: 305px;
  width: 100%;
}

.wp-block-gallery.aligncenter .blocks-gallery-item figure {
  justify-content: center;
}