Browse Source

Blockbase: add padding for group blocks with a background (#5811)

* Add padding for group blocks with backgrounds
* Removed Blockbase's opinionated post-content>p padding
Co-authored-by: Jason Crist <jcrist@pbking.com>
Sarah Norris 3 years ago
parent
commit
d6d5cb6176

+ 5 - 7
blockbase/assets/ponyfill.css

@@ -117,6 +117,11 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
   width: inherit;
 }
 
+/* Spacing for group blocks with a background color. */
+.wp-block-group.has-background {
+  padding: var(--wp--custom--gap--vertical) var(--wp--custom--gap--horizontal);
+}
+
 .has-primary-background-color {
   background-color: var(--wp--custom--color--primary) !important;
 }
@@ -752,13 +757,6 @@ p.has-drop-cap:not(:focus)::first-letter {
   margin-bottom: var(--wp--custom--gap--baseline);
 }
 
-.wp-block-post-content p.wp-block.wp-block-paragraph,
-.wp-block-post-content *[class^=wp-container] > * + p,
-.wp-block-post-content *[class^=wp-container] > p + *,
-.wp-block-post-content p {
-  margin-top: 1em;
-}
-
 .wp-block-post-template {
   margin-top: 0;
   margin-bottom: 0;

+ 8 - 3
blockbase/sass/base/_alignment.scss

@@ -39,9 +39,9 @@ body > .is-root-container,
 .wp-block-group.has-background,
 .wp-block-columns.alignfull.has-background,
 .wp-block-cover.alignfull,
-.is-root-container .wp-block[data-align='full'] > .wp-block-group,
-.is-root-container .wp-block[data-align='full'] > .wp-block-columns.has-background,
-.is-root-container .wp-block[data-align='full'] > .wp-block-cover {
+.is-root-container .wp-block[data-align="full"] > .wp-block-group,
+.is-root-container .wp-block[data-align="full"] > .wp-block-columns.has-background,
+.is-root-container .wp-block[data-align="full"] > .wp-block-cover {
 	padding-left: var(--wp--custom--gap--horizontal);
 	padding-right: var(--wp--custom--gap--horizontal);
 }
@@ -70,3 +70,8 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 	margin-right: auto !important;
 	width: inherit;
 }
+
+/* Spacing for group blocks with a background color. */
+.wp-block-group.has-background {
+	padding: var(--wp--custom--gap--vertical) var(--wp--custom--gap--horizontal);
+}

+ 0 - 9
blockbase/sass/blocks/_post-content.scss

@@ -1,9 +0,0 @@
-// Needed until https://github.com/WordPress/gutenberg/issues/35267 is resolved.
-.wp-block-post-content { // Only apply these margins in the post content.
-	p.wp-block.wp-block-paragraph, // This selector has been made extra specific to override the block gap being set in the editor.
-	*[class^="wp-container"] > * + p,
-	*[class^="wp-container"] > p + *,
-	p {
-		margin-top: 1em;
-	}
-}

+ 0 - 1
blockbase/sass/ponyfill.scss

@@ -18,7 +18,6 @@
 @import "blocks/paragraph";
 @import "blocks/post-author";
 @import "blocks/post-comments";
-@import "blocks/post-content";
 @import "blocks/post-template";
 @import "blocks/pullquote";
 @import "blocks/query-pagination";