From 316601e868afa109df7edda67217d0213d420c44 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 3 Nov 2020 12:33:54 +0800 Subject: [PATCH] Fix image block centering when resizing to a smaller size (#26376) * Fix image block centering when resizing to a smaller size * Revert previous 100% width fix * Remove display: table when image block is resized to avoid centering of block * Match frontend classes for alignment in editor --- packages/block-library/src/image/editor.scss | 13 +++++++++++++ packages/block-library/src/image/style.scss | 3 +-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index e07694c16d0a7..a8ead3186e057 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -52,6 +52,19 @@ figure.wp-block-image:not(.wp-block) { } } +.wp-block[data-align="left"], +.wp-block[data-align="center"], +.wp-block[data-align="right"] { + > .wp-block-image { + display: table; + + > figcaption { + display: table-caption; + caption-side: bottom; + } + } +} + .wp-block[data-align="left"] > .wp-block-image { margin-right: 1em; margin-left: 0; diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 26bc158c9224c..a20c12dc9046b 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -18,8 +18,7 @@ .alignleft, .alignright, - .aligncenter, - &.is-resized { + .aligncenter { display: table; > figcaption {