From 81d35dce19a372886c088801ac683a9c6037bae2 Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Thu, 5 May 2022 20:41:12 -0500
Subject: [PATCH 1/4] Add gutenberg-warning custom element

---
 .../src/components/warning/index.js           | 173 +++++++++++++-----
 1 file changed, 132 insertions(+), 41 deletions(-)

diff --git a/packages/block-editor/src/components/warning/index.js b/packages/block-editor/src/components/warning/index.js
index 84c17726a518f6..7beca993015683 100644
--- a/packages/block-editor/src/components/warning/index.js
+++ b/packages/block-editor/src/components/warning/index.js
@@ -11,54 +11,145 @@ import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { moreHorizontal } from '@wordpress/icons';
 
+export class GutenbergWarningInner extends window.HTMLElement {}
+
+export class GutenbergWarning extends window.HTMLElement {
+	connectedCallback() {
+		const shadowRoot = this.attachShadow( { mode: 'closed' } );
+		shadowRoot.innerHTML = `
+      <style> 
+
+			:host { 
+        display: contents 
+      }
+
+			gutenberg-warning-inner {
+				display: contents;
+			}
+
+			.block-editor-warning {
+				align-items: center;
+				display: flex;
+				flex-wrap: wrap;
+				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+				padding: 1em;
+				border: 1px solid #1e1e1e;
+				border-radius: 2px;
+				background-color: #fff;
+			}
+
+			.block-editor-warning .block-editor-warning__message {
+				line-height: 1.4;
+				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+				font-size: 13px;
+				color: #1e1e1e;
+				margin: 0;
+			}
+			.block-editor-warning p.block-editor-warning__message.block-editor-warning__message {
+				min-height: auto;
+			}
+			.block-editor-warning .block-editor-warning__contents {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				flex-wrap: wrap;
+				align-items: baseline;
+				width: 100%;
+			}
+			.block-editor-warning .block-editor-warning__actions {
+				display: flex;
+				margin-top: 1em;
+			}
+			.block-editor-warning .block-editor-warning__action {
+				margin: 0 8px 0 0;
+			}
+
+			.block-editor-warning__secondary {
+				margin: auto 0 auto 8px;
+			}
+
+			.components-popover.block-editor-warning__dropdown {
+				z-index: 99998;
+			}
+      </style> 
+      `;
+		this.style = 'all: initial;';
+
+		const inner = this.querySelector( 'gutenberg-warning-inner' );
+		const innerClone = inner.cloneNode( true );
+		shadowRoot.appendChild( innerClone );
+	}
+}
+
+window.customElements.define( 'gutenberg-warning', GutenbergWarning );
+window.customElements.define(
+	'gutenberg-warning-inner',
+	GutenbergWarningInner
+);
+
 function Warning( { className, actions, children, secondaryActions } ) {
 	return (
-		<div className={ classnames( className, 'block-editor-warning' ) }>
-			<div className="block-editor-warning__contents">
-				<p className="block-editor-warning__message">{ children }</p>
+		<gutenberg-warning>
+			<gutenberg-warning-inner>
+				<div
+					className={ classnames(
+						className,
+						'block-editor-warning'
+					) }
+				>
+					<div className="block-editor-warning__contents">
+						<p className="block-editor-warning__message">
+							{ children }
+						</p>
 
-				{ ( Children.count( actions ) > 0 || secondaryActions ) && (
-					<div className="block-editor-warning__actions">
-						{ Children.count( actions ) > 0 &&
-							Children.map( actions, ( action, i ) => (
-								<span
-									key={ i }
-									className="block-editor-warning__action"
-								>
-									{ action }
-								</span>
-							) ) }
-						{ secondaryActions && (
-							<DropdownMenu
-								className="block-editor-warning__secondary"
-								icon={ moreHorizontal }
-								label={ __( 'More options' ) }
-								popoverProps={ {
-									position: 'bottom left',
-									className: 'block-editor-warning__dropdown',
-								} }
-								noIcons
-							>
-								{ () => (
-									<MenuGroup>
-										{ secondaryActions.map(
-											( item, pos ) => (
-												<MenuItem
-													onClick={ item.onClick }
-													key={ pos }
-												>
-													{ item.title }
-												</MenuItem>
-											)
+						{ ( Children.count( actions ) > 0 ||
+							secondaryActions ) && (
+							<div className="block-editor-warning__actions">
+								{ Children.count( actions ) > 0 &&
+									Children.map( actions, ( action, i ) => (
+										<span
+											key={ i }
+											className="block-editor-warning__action"
+										>
+											{ action }
+										</span>
+									) ) }
+								{ secondaryActions && (
+									<DropdownMenu
+										className="block-editor-warning__secondary"
+										icon={ moreHorizontal }
+										label={ __( 'More options' ) }
+										popoverProps={ {
+											position: 'bottom left',
+											className:
+												'block-editor-warning__dropdown',
+										} }
+										noIcons
+									>
+										{ () => (
+											<MenuGroup>
+												{ secondaryActions.map(
+													( item, pos ) => (
+														<MenuItem
+															onClick={
+																item.onClick
+															}
+															key={ pos }
+														>
+															{ item.title }
+														</MenuItem>
+													)
+												) }
+											</MenuGroup>
 										) }
-									</MenuGroup>
+									</DropdownMenu>
 								) }
-							</DropdownMenu>
+							</div>
 						) }
 					</div>
-				) }
-			</div>
-		</div>
+				</div>
+			</gutenberg-warning-inner>
+		</gutenberg-warning>
 	);
 }
 

From d28704b7a6db9260033ca14f9c045c6f9a540cf5 Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Mon, 9 May 2022 17:48:48 -0500
Subject: [PATCH 2/4] Add only a wrapping div with all: initial

---
 .../src/components/warning/index.js           | 182 +++++-------------
 1 file changed, 48 insertions(+), 134 deletions(-)

diff --git a/packages/block-editor/src/components/warning/index.js b/packages/block-editor/src/components/warning/index.js
index 7beca993015683..4891c0a90df98f 100644
--- a/packages/block-editor/src/components/warning/index.js
+++ b/packages/block-editor/src/components/warning/index.js
@@ -11,145 +11,59 @@ import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { moreHorizontal } from '@wordpress/icons';
 
-export class GutenbergWarningInner extends window.HTMLElement {}
-
-export class GutenbergWarning extends window.HTMLElement {
-	connectedCallback() {
-		const shadowRoot = this.attachShadow( { mode: 'closed' } );
-		shadowRoot.innerHTML = `
-      <style> 
-
-			:host { 
-        display: contents 
-      }
-
-			gutenberg-warning-inner {
-				display: contents;
-			}
-
-			.block-editor-warning {
-				align-items: center;
-				display: flex;
-				flex-wrap: wrap;
-				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-				padding: 1em;
-				border: 1px solid #1e1e1e;
-				border-radius: 2px;
-				background-color: #fff;
-			}
-
-			.block-editor-warning .block-editor-warning__message {
-				line-height: 1.4;
-				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-				font-size: 13px;
-				color: #1e1e1e;
-				margin: 0;
-			}
-			.block-editor-warning p.block-editor-warning__message.block-editor-warning__message {
-				min-height: auto;
-			}
-			.block-editor-warning .block-editor-warning__contents {
-				display: flex;
-				flex-direction: row;
-				justify-content: space-between;
-				flex-wrap: wrap;
-				align-items: baseline;
-				width: 100%;
-			}
-			.block-editor-warning .block-editor-warning__actions {
-				display: flex;
-				margin-top: 1em;
-			}
-			.block-editor-warning .block-editor-warning__action {
-				margin: 0 8px 0 0;
-			}
-
-			.block-editor-warning__secondary {
-				margin: auto 0 auto 8px;
-			}
-
-			.components-popover.block-editor-warning__dropdown {
-				z-index: 99998;
-			}
-      </style> 
-      `;
-		this.style = 'all: initial;';
-
-		const inner = this.querySelector( 'gutenberg-warning-inner' );
-		const innerClone = inner.cloneNode( true );
-		shadowRoot.appendChild( innerClone );
-	}
-}
-
-window.customElements.define( 'gutenberg-warning', GutenbergWarning );
-window.customElements.define(
-	'gutenberg-warning-inner',
-	GutenbergWarningInner
-);
-
 function Warning( { className, actions, children, secondaryActions } ) {
 	return (
-		<gutenberg-warning>
-			<gutenberg-warning-inner>
-				<div
-					className={ classnames(
-						className,
-						'block-editor-warning'
-					) }
-				>
-					<div className="block-editor-warning__contents">
-						<p className="block-editor-warning__message">
-							{ children }
-						</p>
+		<div style={ { display: 'contents', all: 'initial' } }>
+			<div className={ classnames( className, 'block-editor-warning' ) }>
+				<div className="block-editor-warning__contents">
+					<p className="block-editor-warning__message">
+						{ children }
+					</p>
 
-						{ ( Children.count( actions ) > 0 ||
-							secondaryActions ) && (
-							<div className="block-editor-warning__actions">
-								{ Children.count( actions ) > 0 &&
-									Children.map( actions, ( action, i ) => (
-										<span
-											key={ i }
-											className="block-editor-warning__action"
-										>
-											{ action }
-										</span>
-									) ) }
-								{ secondaryActions && (
-									<DropdownMenu
-										className="block-editor-warning__secondary"
-										icon={ moreHorizontal }
-										label={ __( 'More options' ) }
-										popoverProps={ {
-											position: 'bottom left',
-											className:
-												'block-editor-warning__dropdown',
-										} }
-										noIcons
+					{ ( Children.count( actions ) > 0 || secondaryActions ) && (
+						<div className="block-editor-warning__actions">
+							{ Children.count( actions ) > 0 &&
+								Children.map( actions, ( action, i ) => (
+									<span
+										key={ i }
+										className="block-editor-warning__action"
 									>
-										{ () => (
-											<MenuGroup>
-												{ secondaryActions.map(
-													( item, pos ) => (
-														<MenuItem
-															onClick={
-																item.onClick
-															}
-															key={ pos }
-														>
-															{ item.title }
-														</MenuItem>
-													)
-												) }
-											</MenuGroup>
-										) }
-									</DropdownMenu>
-								) }
-							</div>
-						) }
-					</div>
+										{ action }
+									</span>
+								) ) }
+							{ secondaryActions && (
+								<DropdownMenu
+									className="block-editor-warning__secondary"
+									icon={ moreHorizontal }
+									label={ __( 'More options' ) }
+									popoverProps={ {
+										position: 'bottom left',
+										className:
+											'block-editor-warning__dropdown',
+									} }
+									noIcons
+								>
+									{ () => (
+										<MenuGroup>
+											{ secondaryActions.map(
+												( item, pos ) => (
+													<MenuItem
+														onClick={ item.onClick }
+														key={ pos }
+													>
+														{ item.title }
+													</MenuItem>
+												)
+											) }
+										</MenuGroup>
+									) }
+								</DropdownMenu>
+							) }
+						</div>
+					) }
 				</div>
-			</gutenberg-warning-inner>
-		</gutenberg-warning>
+			</div>
+		</div>
 	);
 }
 

From 2c7a4847ae457f2e37a3beb6a042c5047d41f95b Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Mon, 9 May 2022 19:55:32 -0500
Subject: [PATCH 3/4] Update jest snapshot

---
 .../warning/test/__snapshots__/index.js.snap  | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap
index 8025afed4c550e..dae4cd686b3c64 100644
--- a/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap
@@ -2,16 +2,25 @@
 
 exports[`Warning should match snapshot 1`] = `
 <div
-  className="block-editor-warning"
+  style={
+    Object {
+      "all": "initial",
+      "display": "contents",
+    }
+  }
 >
   <div
-    className="block-editor-warning__contents"
+    className="block-editor-warning"
   >
-    <p
-      className="block-editor-warning__message"
+    <div
+      className="block-editor-warning__contents"
     >
-      error
-    </p>
+      <p
+        className="block-editor-warning__message"
+      >
+        error
+      </p>
+    </div>
   </div>
 </div>
 `;

From 4a959f37ac50ddf1fc6fb150d68d2d2b2faafb2d Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Mon, 9 May 2022 19:59:12 -0500
Subject: [PATCH 4/4] Update the test case

---
 packages/block-editor/src/components/warning/test/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/warning/test/index.js b/packages/block-editor/src/components/warning/test/index.js
index b8fcdbee4e4900..d829a5b931fad1 100644
--- a/packages/block-editor/src/components/warning/test/index.js
+++ b/packages/block-editor/src/components/warning/test/index.js
@@ -18,7 +18,7 @@ describe( 'Warning', () => {
 	it( 'should have valid class', () => {
 		const wrapper = shallow( <Warning /> );
 
-		expect( wrapper.hasClass( 'block-editor-warning' ) ).toBe( true );
+		expect( wrapper.find( '.block-editor-warning' ) ).toHaveLength( 1 );
 		expect( wrapper.find( '.block-editor-warning__actions' ) ).toHaveLength(
 			0
 		);