From f7a4fea580c6637c0a41d8f7c51cac7f9dc9b7f7 Mon Sep 17 00:00:00 2001
From: im3dabasia <eshaan.dabasiya@rtcamp.com>
Date: Tue, 19 Nov 2024 10:43:36 +0530
Subject: [PATCH 1/6] Fix: Prevent Media & Text block from stacking in preview
 on larger devices

Ensured the Media & Text block displays components side by side in the preview, even on larger devices. The preview container was previously too small, causing the elements to stack. This change ensures the components remain properly aligned in the preview.
---
 packages/block-library/src/media-text/style.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
index 0f7a34f05548c..8786170edcd41 100644
--- a/packages/block-library/src/media-text/style.scss
+++ b/packages/block-library/src/media-text/style.scss
@@ -54,6 +54,11 @@
 	word-break: break-word;
 }
 
+.block-editor-block-preview__content-iframe .wp-block-media-text > .wp-block-media-text__content {
+	grid-column: 2 !important;
+	grid-row: 1 !important;
+}
+
 .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
 	/*!rtl:begin:ignore*/
 	grid-column: 2;
@@ -132,7 +137,7 @@
 */
 @media (max-width: #{ ($break-small) }) {
 	.wp-block-media-text.is-stacked-on-mobile {
-		grid-template-columns: 100% !important;
+		grid-template-columns: 100%;
 		> .wp-block-media-text__media {
 			grid-column: 1;
 			grid-row: 1;

From 01f5e158fb1a43240514a2467f5de9b21f36fc92 Mon Sep 17 00:00:00 2001
From: im3dabasia <eshaan.dabasiya@rtcamp.com>
Date: Tue, 19 Nov 2024 11:19:47 +0530
Subject: [PATCH 2/6] Fix: Ensure Media and Text block is consistent in non
 preview mode, and is adjacent in preview mode

---
 packages/block-library/src/media-text/style.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
index 8786170edcd41..87a0bfbb5af9f 100644
--- a/packages/block-library/src/media-text/style.scss
+++ b/packages/block-library/src/media-text/style.scss
@@ -137,7 +137,7 @@
 */
 @media (max-width: #{ ($break-small) }) {
 	.wp-block-media-text.is-stacked-on-mobile {
-		grid-template-columns: 100%;
+		grid-template-columns: 100% !important;
 		> .wp-block-media-text__media {
 			grid-column: 1;
 			grid-row: 1;
@@ -147,4 +147,8 @@
 			grid-row: 2;
 		}
 	}
+
+	.block-editor-block-preview__content-iframe .wp-block-media-text.is-stacked-on-mobile {
+		grid-template-columns: 50% !important;
+	}
 }

From 9b5a3453cce406bb99efd2ceed4b65bdf9157471 Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Thu, 2 Jan 2025 13:12:14 +0000
Subject: [PATCH 3/6] Refactor Media Text Styles: Remove unnecessary grid
 styles for block preview and mobile layout

---
 packages/block-library/src/media-text/style.scss | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
index 099c8f30ffbee..47397fcc6b45f 100644
--- a/packages/block-library/src/media-text/style.scss
+++ b/packages/block-library/src/media-text/style.scss
@@ -54,11 +54,6 @@
 	word-break: break-word;
 }
 
-.block-editor-block-preview__content-iframe .wp-block-media-text > .wp-block-media-text__content {
-	grid-column: 2 !important;
-	grid-row: 1 !important;
-}
-
 .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
 	/*!rtl:begin:ignore*/
 	grid-column: 2;
@@ -148,7 +143,4 @@
 		}
 	}
 
-	.block-editor-block-preview__content-iframe .wp-block-media-text.is-stacked-on-mobile {
-		grid-template-columns: 50% !important;
-	}
 }

From af0eadc7bbf3e9f325d6526a68d9d52dbc5745f8 Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Thu, 2 Jan 2025 13:12:22 +0000
Subject: [PATCH 4/6] Update viewport width in PreviewBlockPopover for better
 block preview alignment

---
 .../src/components/block-switcher/preview-block-popover.js    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-switcher/preview-block-popover.js b/packages/block-editor/src/components/block-switcher/preview-block-popover.js
index f978ed43af1da..089f4ef35b622 100644
--- a/packages/block-editor/src/components/block-switcher/preview-block-popover.js
+++ b/packages/block-editor/src/components/block-switcher/preview-block-popover.js
@@ -29,7 +29,9 @@ export default function PreviewBlockPopover( { blocks } ) {
 					<div className="block-editor-block-switcher__preview-title">
 						{ __( 'Preview' ) }
 					</div>
-					<BlockPreview viewportWidth={ 500 } blocks={ blocks } />
+					{ /* 600px is the value of $break-small in base-styles/_breakpoints.scss.
+						So we set the viewport somewhat arbitrarily to 610px to account for the padding of the block. */ }
+					<BlockPreview viewportWidth={ 610 } blocks={ blocks } />
 				</div>
 			</Popover>
 		</div>

From 4a1073e5400a4ed464327c80b378f9d6d7deb76c Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Thu, 2 Jan 2025 13:22:24 +0000
Subject: [PATCH 5/6] Update viewport width in PreviewBlockPopover to 601px for
 improved media-text block padding

---
 .../src/components/block-switcher/preview-block-popover.js   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-switcher/preview-block-popover.js b/packages/block-editor/src/components/block-switcher/preview-block-popover.js
index 089f4ef35b622..095e32d8317d5 100644
--- a/packages/block-editor/src/components/block-switcher/preview-block-popover.js
+++ b/packages/block-editor/src/components/block-switcher/preview-block-popover.js
@@ -30,8 +30,9 @@ export default function PreviewBlockPopover( { blocks } ) {
 						{ __( 'Preview' ) }
 					</div>
 					{ /* 600px is the value of $break-small in base-styles/_breakpoints.scss.
-						So we set the viewport somewhat arbitrarily to 610px to account for the padding of the block. */ }
-					<BlockPreview viewportWidth={ 610 } blocks={ blocks } />
+						We set the viewport width to 601px to make sure that the media-text 
+						block which uses this breakpoint has the correct padding. */ }
+					<BlockPreview viewportWidth={ 601 } blocks={ blocks } />
 				</div>
 			</Popover>
 		</div>

From a617257e8073a4dc4519043d9c3ad1b7daa0be5b Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Mon, 6 Jan 2025 19:25:37 +0000
Subject: [PATCH 6/6] Remove unnecessary whitespace in style.scss

---
 packages/block-library/src/media-text/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
index 47397fcc6b45f..727380a3759c6 100644
--- a/packages/block-library/src/media-text/style.scss
+++ b/packages/block-library/src/media-text/style.scss
@@ -142,5 +142,4 @@
 			grid-row: 2;
 		}
 	}
-
 }