From bbf8ffd5cc638807c3b07bba1c382cdc6e807e35 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 11 Apr 2024 13:51:47 +1000
Subject: [PATCH] Slightest specificity bump to flex and grid margin overrides.

---
 lib/block-supports/layout.php                    | 4 ++--
 lib/class-wp-theme-json-gutenberg.php            | 2 +-
 packages/block-editor/src/layouts/definitions.js | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index b25ddb7e684009..e85ea930125868 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -146,7 +146,7 @@ function gutenberg_get_layout_definitions() {
 					),
 				),
 				array(
-					'selector' => ' > *',
+					'selector' => ' > :is(*, div)', // :is(*, div) instead of just * increases the specificity by 001.
 					'rules'    => array(
 						'margin' => '0',
 					),
@@ -168,7 +168,7 @@ function gutenberg_get_layout_definitions() {
 			'displayMode'   => 'grid',
 			'baseStyles'    => array(
 				array(
-					'selector' => ' > *',
+					'selector' => ' > :is(*, div)',  // :is(*, div) instead of just * increases the specificity by 001.
 					'rules'    => array(
 						'margin' => '0',
 					),
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 826beac5a663ee..cc82eee0050a1e 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -1479,7 +1479,7 @@ protected function get_layout_styles( $block_metadata ) {
 		$has_fallback_gap_support = ! $has_block_gap_support; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback gap styles support.
 		$node                     = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
 		$layout_definitions       = gutenberg_get_layout_definitions();
-		$layout_selector_pattern  = '/^[a-zA-Z0-9\-\.\ *+>:\(\)]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, child combinator and pseudo class selectors.
+		$layout_selector_pattern  = '/^[a-zA-Z0-9\-\.\,\ *+>:\(\)]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, child combinator and pseudo class selectors.
 
 		// Gap styles will only be output if the theme has block gap support, or supports a fallback gap.
 		// Default layout gap styles will be skipped for themes that do not explicitly opt-in to blockGap with a `true` or `false` value.
diff --git a/packages/block-editor/src/layouts/definitions.js b/packages/block-editor/src/layouts/definitions.js
index e7b86fb1e80d12..a5c6d431c50f20 100644
--- a/packages/block-editor/src/layouts/definitions.js
+++ b/packages/block-editor/src/layouts/definitions.js
@@ -134,7 +134,7 @@ export const LAYOUT_DEFINITIONS = {
 				},
 			},
 			{
-				selector: ' > *',
+				selector: ' > :is(*, div)', // :is(*, div) instead of just * increases the specificity by 001.
 				rules: {
 					margin: '0',
 				},
@@ -156,7 +156,7 @@ export const LAYOUT_DEFINITIONS = {
 		displayMode: 'grid',
 		baseStyles: [
 			{
-				selector: ' > *',
+				selector: ' > :is(*, div)', // :is(*, div) instead of just * increases the specificity by 001.
 				rules: {
 					margin: '0',
 				},