Media & Text block: Fix nested Media & Text block media position issue with increased CSS specificity

[amitraj2203]

What?

Fix: #62047

Why?

When we add a Media & Text block and set the media position to the right with the toolbar setting, and then insert a second Media & Text block in the block's content area: Then the media position option in the second Media & Text block does not work.

How?

Adds > to relevant CSS selectors.

Testing Instructions

1. Insert a Media & Text block.
2. Set the media position option in the block toolbar to the right.
3. Insert a second Media & Text block inside the first, and try to set its media position.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: amitraj2203 <amitraj2203@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[amitraj2203]

The same issue is also happening with the block's vertical alignment: if I change the outer block's vertical alignment to bottom then the inner block's vertical alignment doesn't work. So I have added the> selector to its respective class.

[t-hamano]

Thanks for the PR!

This PR works as expected, but we might also want to fix the issue where the layout affects nested blocks when "Stack on mobile" is enabled.

Just make the following changes:

diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
index d5da67b5e4..8a880fbab4 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;

[amitraj2203]

Thanks for reviewing the PR. I apologize for missing this 😅
I have updated the code to address this issue now.

[t-hamano]

LGTM!

Before

After

[ellatrix]

Should this be backported for WP 6.6? If so, please add the Backport to WP Beta/RC label. Thanks!

[t-hamano]

This issue isn't new to WP6.6, but I think it's a great fix, so let's backport it to WP6.6.

[ellatrix]

This was cherry-picked to the wp/6.6 branch.