From 588f76ecaaaa80159dbbadce9603f2da32953b3a Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 16 Feb 2022 00:44:35 +0100
Subject: fix: update wordpress gallery block styles

Since v5.9, the gallery block does not use the same markup than the
previous one. So I need to duplicate the styles to make the older posts
and the new ones consistent.
---
 src/styles/components/_wp-blocks.scss | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/styles/components/_wp-blocks.scss b/src/styles/components/_wp-blocks.scss
index 3deee18..efd6db5 100644
--- a/src/styles/components/_wp-blocks.scss
+++ b/src/styles/components/_wp-blocks.scss
@@ -63,9 +63,15 @@
 }
 
 .wp-block-gallery {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--spacing-sm);
+
   .blocks-gallery-grid {
     @extend %reset-list;
 
+    grid-column: 1 / -1;
+    grid-row: 1 / -1;
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     gap: var(--spacing-sm);
@@ -115,17 +121,23 @@
     }
   }
 
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      &.columns-2 {
-        .blocks-gallery-grid {
+  @for $i from 0 to 6 {
+    &.columns-#{$i} {
+      @include mix.media("screen") {
+        @include mix.dimensions("xs") {
           grid-template-columns: repeat(2, minmax(0, 1fr));
+
+          .blocks-gallery-grid {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+          }
         }
-      }
 
-      &.columns-3 {
-        .blocks-gallery-grid {
-          grid-template-columns: repeat(3, minmax(0, 1fr));
+        @include mix.dimensions("sm") {
+          grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+
+          .blocks-gallery-grid {
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+          }
         }
       }
     }
-- 
cgit v1.2.3