From 37e6b130ff09d6d5cd72f32b2ce602d89d44946e Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 25 Oct 2018 16:03:39 +0200 Subject: [PATCH] Improve handling of centered 1-col galleries with small images (#11040) * Improve handling of centered 1-col galleries with small images If you insert a gallery that has a single column, and multiple smallish images, then center it, the images inside do not appear centered. This is technically correct, since the _gallery itself_ is centered, but because it's full width and because the images might vary in widths, this doesn't appear to make any difference to the content inside. So although "correct", it's not a good user experience. This PR simply centers the content also. * Remove editor specific alignments. --- packages/block-library/src/gallery/style.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index dc2b2213722b22..a43d08046bb5e4 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -133,8 +133,6 @@ } // Apply max-width to floated items that have no intrinsic width. - [data-align="left"] &, - [data-align="right"] &, &.alignleft, &.alignright { max-width: $content-width / 2; @@ -148,4 +146,11 @@ &.alignright { display: flex; } + + // If the gallery is centered, center the content inside as well. + &.aligncenter { + .blocks-gallery-item figure { + justify-content: center; + } + } }