Add specific CSS to deal with cover, column and group blocks

WordPress · May 17, 2022 · 6bdf2fa · 6bdf2fa
1 parent 663cbd3
commit 6bdf2fa
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -284,7 +284,6 @@ protected static function additional_root_selector_rules( $selector, $theme_json
 				{ padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
 
 				$block_rules .= '.wp-site-blocks .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); width: unset; }';
-				$block_rules .= '.alignfull .alignfull { margin-right: 0; margin-left: 0; }';
 
 				// Alignfull blocks in the block editor that are direct children of post content should also get negative margins.
 				if ( is_callable( 'get_current_screen' ) && get_current_screen()->is_block_editor() ) {
@@ -293,7 +292,6 @@ protected static function additional_root_selector_rules( $selector, $theme_json
 					{ padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
 
 					$block_rules .= '.is-root-container .wp-block.alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); max-width: unset; width: unset; }';
-					$block_rules .= '.wp-block.alignfull .wp-block.alignfull { margin-right: 0; margin-left: 0; }';
 				}
 			}
 

diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
@@ -79,6 +79,10 @@
 	padding: $block-bg-padding--v $block-bg-padding--h;
 }
 
+.wp-block-columns.alignfull.has-background {
+	padding-right: var(--wp--style--root--padding-right);
+	padding-left: var(--wp--style--root--padding-left);
+}
 
 .wp-block-column {
 	flex-grow: 1;

diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
@@ -12,6 +12,13 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 
+	&.alignfull {
+		margin-right: var(--wp--style--root--padding-right, 1em);
+		margin-left: var(--wp--style--root--padding-left, 1em);
+		padding-right: var(--wp--style--root--padding-right, 1em);
+		padding-left: var(--wp--style--root--padding-left, 1em);
+	}
+
 	&.has-parallax {
 		background-attachment: fixed;
 

diff --git a/packages/block-library/src/group/theme.scss b/packages/block-library/src/group/theme.scss
@@ -3,3 +3,10 @@
 	// Matches paragraph block padding.
 	padding: $block-bg-padding--v $block-bg-padding--h;
 }
+
+.wp-block-group.alignfull {
+	margin-right: var(--wp--style--root--padding-right);
+	margin-left: var(--wp--style--root--padding-left);
+	padding-right: var(--wp--style--root--padding-right);
+	padding-left: var(--wp--style--root--padding-left);
+}