From 8f017b3ff0a202da557e67165974dc6ad6cdcfe8 Mon Sep 17 00:00:00 2001 From: Amit Raj Date: Fri, 31 May 2024 18:18:13 +0530 Subject: [PATCH 1/3] Refactor media-text layout styles --- packages/block-library/src/media-text/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss index e43961ac89097..08f500ee3fee0 100644 --- a/packages/block-library/src/media-text/style.scss +++ b/packages/block-library/src/media-text/style.scss @@ -53,14 +53,14 @@ word-break: break-word; } -.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { +.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media { /*!rtl:begin:ignore*/ grid-column: 2; grid-row: 1; /*!rtl:end:ignore*/ } -.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { +.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content { /*!rtl:begin:ignore*/ grid-column: 1; grid-row: 1; From b258f0b66e3c209acc6108eebc881009de0c303f Mon Sep 17 00:00:00 2001 From: Amit Raj Date: Fri, 31 May 2024 21:37:17 +0530 Subject: [PATCH 2/3] Update media-text alignment styles to support nested media-text blocks --- .../block-library/src/media-text/style.scss | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss index 08f500ee3fee0..d5da67b5e439c 100644 --- a/packages/block-library/src/media-text/style.scss +++ b/packages/block-library/src/media-text/style.scss @@ -15,27 +15,28 @@ } .wp-block-media-text.is-vertically-aligned-top { - .wp-block-media-text__content, - .wp-block-media-text__media { + > .wp-block-media-text__content, + > .wp-block-media-text__media { align-self: start; } } + .wp-block-media-text, .wp-block-media-text.is-vertically-aligned-center { - .wp-block-media-text__content, - .wp-block-media-text__media { + > .wp-block-media-text__content, + > .wp-block-media-text__media { align-self: center; } } .wp-block-media-text.is-vertically-aligned-bottom { - .wp-block-media-text__content, - .wp-block-media-text__media { + > .wp-block-media-text__content, + > .wp-block-media-text__media { align-self: end; } } -.wp-block-media-text .wp-block-media-text__media { +.wp-block-media-text > .wp-block-media-text__media { /*!rtl:begin:ignore*/ grid-column: 1; grid-row: 1; @@ -43,7 +44,7 @@ margin: 0; } -.wp-block-media-text .wp-block-media-text__content { +.wp-block-media-text > .wp-block-media-text__content { direction: ltr; /*!rtl:begin:ignore*/ grid-column: 2; From fcdf3e8d1251102e7ce6c7e27fabc4b6ed3bd29c Mon Sep 17 00:00:00 2001 From: Amit Raj Date: Sat, 1 Jun 2024 11:44:22 +0530 Subject: [PATCH 3/3] Update media-text layout for mobile view --- packages/block-library/src/media-text/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss index d5da67b5e439c..8a880fbab4a01 100644 --- a/packages/block-library/src/media-text/style.scss +++ b/packages/block-library/src/media-text/style.scss @@ -108,11 +108,11 @@ @media (max-width: #{ ($break-small) }) { .wp-block-media-text.is-stacked-on-mobile { grid-template-columns: 100% !important; - .wp-block-media-text__media { + > .wp-block-media-text__media { grid-column: 1; grid-row: 1; } - .wp-block-media-text__content { + > .wp-block-media-text__content { grid-column: 1; grid-row: 2; }