From dc0dae8ad32a7ec6071eece8456ec4754ba8dbdf Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 26 May 2021 14:47:19 +0100 Subject: [PATCH] Blockbase: Fix alignment styles --- blockbase/assets/ponyfill.css | 7 ++++++- blockbase/sass/base/_alignment.scss | 15 ++++++++++----- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/blockbase/assets/ponyfill.css b/blockbase/assets/ponyfill.css index ca792edf72..8ee7e93095 100644 --- a/blockbase/assets/ponyfill.css +++ b/blockbase/assets/ponyfill.css @@ -57,7 +57,12 @@ img { .wp-block-post-content > .alignfull { margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)); margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)); - width: unset; + width: calc( 100% + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right)); +} + +.alignfull p { + padding-left: var(--wp--custom--post-content--padding--left); + padding-right: var(--wp--custom--post-content--padding--right); } @media (min-width: 480px) { diff --git a/blockbase/sass/base/_alignment.scss b/blockbase/sass/base/_alignment.scss index c415a78699..153c1c8141 100644 --- a/blockbase/sass/base/_alignment.scss +++ b/blockbase/sass/base/_alignment.scss @@ -1,11 +1,16 @@ .wp-block-post-content > .alignfull { margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)); margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)); - width: unset; + width: calc( 100% + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right) ) +} + +.alignfull p { + padding-left: var(--wp--custom--post-content--padding--left); + padding-right: var(--wp--custom--post-content--padding--right); } @include break-mobile { - // limit size of any element that is aligned left/right + // limit size of any element that is aligned left/right .wp-block[data-align="left"], // This is for the editor .wp-block[data-align="right"], // This is for the editor .wp-site-blocks .alignleft, @@ -15,9 +20,9 @@ } // When content is aligned left/right (particularly inside of a container) it is floated left/right -// and needs something to ensure that the content follows the block rather than nestling up beside the floated element. +// and needs something to ensure that the content follows the block rather than nestling up beside the floated element. // The issue should be resolved upstream: https://github.com/WordPress/gutenberg/issues/10299 -.wp-block-group:not(.site-header) { +.wp-block-group:not(.site-header) { overflow: auto; } @@ -26,4 +31,4 @@ // class which would do this for us. I'm not sure why but this centers things appropriately. .aligncenter { text-align: center; -} \ No newline at end of file +}