WordPress Classic Editor Media Gallery CSS

readme_wp_classic_editor_media_gallery_css.md

WordPress Classic Editor Media Gallery CSS

Adapted from Gutenberg's Gallery Block CSS

Ensure your theme is using add_theme_support( 'html5', array( 'gallery', 'caption' ) ); in functions.php to suppress inline CSS styles.

wp_classic_editor_media_gallery.css

.gallery {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  margin: 0 -.5rem;
}

.gallery .gallery-item {
  margin: .5rem;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

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

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

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

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

.gallery .gallery-item figcaption {
  position: absolute;
  bottom: 0;
  width: 100%;
  max-height: 100%;
  overflow: auto;
  padding: 2.5rem .5rem .25rem;
  color: #fff;
  text-align: center;
  font-size: .875rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .3) 60%, transparent);
}

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

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

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

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

.gallery-columns-1 .gallery-item {
  width: calc(100% / 1 - 1rem);
}

@media (min-width: 600px) {
  .gallery-columns-3 .gallery-item {
    width:calc(100% / 3 - 1rem)
  }

  .gallery-columns-4 .gallery-item {
    width: calc(100% / 4 - 1rem);
  }

  .gallery-columns-5 .gallery-item {
    width: calc(100% / 5 - 1rem);
  }

  .gallery-columns-6 .gallery-item {
    width: calc(100% / 6 - 1rem);
  }

  .gallery-columns-7 .gallery-item {
    width: calc(100% / 7 - 1rem);
  }

  .gallery-columns-8 .gallery-item {
    width: calc(100% / 8 - 1rem);
  }
}

wp_classic_editor_media_gallery.min.css

.gallery{display:flex;flex-wrap:wrap;list-style-type:none;padding:0;margin:0 -.5rem}.gallery .gallery-item{margin:.5rem;display:flex;flex-grow:1;flex-direction:column;justify-content:center;position:relative}.gallery .gallery-item figure{margin:0;height:100%}@supports ((position:-webkit-sticky) or (position:sticky)){.gallery .gallery-item figure{display:flex;align-items:flex-end;justify-content:flex-start}}.gallery .gallery-item img{display:block;max-width:100%;height:auto;width:100%}@supports ((position:-webkit-sticky) or (position:sticky)){.gallery .gallery-item img{width:auto}.gallery.is-cropped .gallery-item a,.gallery.is-cropped .gallery-item img,.is-cropped .gallery .gallery-item a,.is-cropped .gallery .gallery-item img{height:100%;flex:1;-o-object-fit:cover;object-fit:cover}}.gallery .gallery-item figcaption{position:absolute;bottom:0;width:100%;max-height:100%;overflow:auto;padding:2.5rem .5rem .25rem;color:#fff;text-align:center;font-size:.875rem;background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.3) 60%,transparent)}.gallery .gallery-item figcaption img{display:inline}.gallery.is-cropped .gallery-item a,.gallery.is-cropped .gallery-item img,.is-cropped .gallery .gallery-item a,.is-cropped .gallery .gallery-item img{width:100%}.gallery .gallery-item{width:calc(100% / 2 - 1rem)}.gallery-columns-1 .gallery-item{width:calc(100% / 1 - 1rem)}@media (min-width:600px){.gallery-columns-3 .gallery-item{width:calc(100% / 3 - 1rem)}.gallery-columns-4 .gallery-item{width:calc(100% / 4 - 1rem)}.gallery-columns-5 .gallery-item{width:calc(100% / 5 - 1rem)}.gallery-columns-6 .gallery-item{width:calc(100% / 6 - 1rem)}.gallery-columns-7 .gallery-item{width:calc(100% / 7 - 1rem)}.gallery-columns-8 .gallery-item{width:calc(100% / 8 - 1rem)}}