Browse Source

Blockbase: Fix alignment styles

Ben Dwyer 4 years ago
parent
commit
dc0dae8ad3
2 changed files with 16 additions and 6 deletions
  1. 6 1
      blockbase/assets/ponyfill.css
  2. 10 5
      blockbase/sass/base/_alignment.scss

+ 6 - 1
blockbase/assets/ponyfill.css

@@ -57,7 +57,12 @@ img {
 .wp-block-post-content > .alignfull {
 .wp-block-post-content > .alignfull {
 	margin-left: calc(-1 * var(--wp--custom--post-content--padding--left));
 	margin-left: calc(-1 * var(--wp--custom--post-content--padding--left));
 	margin-right: calc(-1 * var(--wp--custom--post-content--padding--right));
 	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) {
 @media (min-width: 480px) {

+ 10 - 5
blockbase/sass/base/_alignment.scss

@@ -1,11 +1,16 @@
 .wp-block-post-content > .alignfull {
 .wp-block-post-content > .alignfull {
 	margin-left: calc(-1 * var(--wp--custom--post-content--padding--left));
 	margin-left: calc(-1 * var(--wp--custom--post-content--padding--left));
 	margin-right: calc(-1 * var(--wp--custom--post-content--padding--right));
 	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 {
 @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="left"], // This is for the editor
 	.wp-block[data-align="right"], // This is for the editor
 	.wp-block[data-align="right"], // This is for the editor
 	.wp-site-blocks .alignleft,
 	.wp-site-blocks .alignleft,
@@ -15,9 +20,9 @@
 }
 }
 
 
 // When content is aligned left/right (particularly inside of a container) it is floated left/right
 // 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
 // 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;
 	overflow: auto;
 }
 }
 
 
@@ -26,4 +31,4 @@
 // class which would do this for us.  I'm not sure why but this centers things appropriately.
 // class which would do this for us.  I'm not sure why but this centers things appropriately.
 .aligncenter {
 .aligncenter {
 	text-align: center;
 	text-align: center;
-}
+}