Merge pull request #1711 from INN/1702-add-box-sizing-attribute-to-ga…

…llery-captions

Added `box-sizing: border-box;` to...

changelog.md

@@ -20,6 +20,7 @@ though this project doesn't succeed in adhering to [Semantic Versioning](https:/
 - Fixes a `ReferenceError` in navigation menu JavaScript. [Pull request #1715](https://github.com/INN/largo/pull/1715) for [issue #1714](https://github.com/INN/largo/issues/1714).
 - Fixes an undefined variable error in certain edge cases of the site `og:description` and `description` meta tags. [Pull request #1724](https://github.com/INN/largo/pull/1724) for [issue #1721](https://github.com/INN/largo/issues/1721).
 - Co-Authors Plus profile field descriptions no longer contain escaped HTML. [Pull request #1726](https://github.com/INN/largo/pull/1726) for [issue #1720](https://github.com/INN/largo/issues/1720).
+- Added `box-sizing: border-box;` style attribute to `figcaption` and `.wp-caption-text` elements to prevent caption text from overflowing from the parent container. Also modified Gutenberg block image caption styling to be consistent with the classic image caption styling when the image is expanded into a lightbox. [Pull request #1711](https://github.com/INN/largo/pull/1711) for [issue #1702](https://github.com/INN/largo/issues/1702).
 - Fixes multiple `Undefined variable: post` errors in `homepage/templates/top-stories.php`. [Pull request #1728](https://github.com/INN/largo/pull/1728) for [issue #1723](https://github.com/INN/largo/issues/1723).
 - Fixes an issue where the widget title wasn't displaying in the Largo Image Widget, due to trying to use the `$title` variable which was removed when we stopped using `extract` in [pull request #1565](https://github.com/INN/largo/pull/1565/). [Pull request #]() for [issue #1717](https://github.com/INN/largo/issues/1717).
 - Added support for `wp_body_open` hook below opening body tag. [Pull request #1735](https://github.com/INN/largo/pull/1735) for [issue #1698](https://github.com/INN/largo/issues/1698).

less/inc/blocks.less

@@ -31,6 +31,53 @@
     > figcaption {
       display: table-caption;
       caption-side: bottom;
+      box-sizing: border-box;
+    }
+  }
+}
+.wp-block-gallery {
+  // standard block display
+  .blocks-gallery-image,
+  .blocks-gallery-item {
+    figcaption {
+      box-sizing: border-box;
+      text-align: left; // override Gutenberg's figcaption centering
+      padding: 10px; // reduce blank space, because clicking on the figcaption doesn't trigger a click on the image to open the gallery.
+      max-height: 50%; // to prevent very long captions from covering the image.
+    }
+  }
+
+  // block in Navis slideshow
+  .blocks-gallery-image,
+  .blocks-gallery-item {
+    .navis-single {
+      figcaption {
+        // these styles are to match styles in largo/lib/navis-slideshows/css/slides.css
+        background-color: rgba(0,0,0,.7);
+        color: #ccc;
+        padding: 1em 17.023%!important;
+        padding-bottom: 32px!important;
+        margin: 0!important;
+        bottom: 0;
+        position: absolute;
+        border: none;
+        font-size: 16px;
+      }
+    }
+  }
+
+  &ul {
+    list-style: none;
+    margin-left: 0;
+  }
+  &.is-cropped {
+    .blocks-gallery-image,
+    .blocks-gallery-item {
+      a, img {
+        height: auto;
+        -o-object-fit: scale-down;
+        object-fit: scale-down;
+      }
     }
   }
 }

less/inc/images.less

@@ -14,20 +14,3 @@
   background-position: 50% 50%;
   background-size: 20%;
 }
-
-.wp-block-gallery {
-  &ul {
-    list-style: none;
-    margin-left: 0;
-  }
-  &.is-cropped {
-    .blocks-gallery-image,
-    .blocks-gallery-item {
-      a, img {
-        height: auto;
-        -o-object-fit: scale-down;
-        object-fit: scale-down;
-      }
-    }
-  }
-}

less/inc/posts-and-pages.less

@@ -117,6 +117,7 @@ p.wp-caption-text {
   line-height: 1.5;
   display: block;
   text-align: left;
+  box-sizing: border-box;
 }
 .half,
 .full,