Twenty Twenty: The Media & Text block paragraph text not align properly when change media size.

[viralsampat]

Hello Team,

I have reviewed the "Media & Text" block and found that when we change media with from block setting "MEDIA WIDTH" to full width, The block paragraph text not align properly on front-end.

I have checked this scenario in other themes and its looks good on it.

So, I think that it should be same on both(Back-end & Front-end) sides.

Here, I have provided issue video: ​https://www.awesomescreenshot.com/video/28611147?key=3f7fc3967a017dcdd4ddddd5ddd8fc57

Environment info:

---

• WordPress version: WordPress 6.5.4 running,
• Themes:
  • Twenty Twenty: Version: 2.6
• Browser: Google Chrome, Version 126.0.6478.56 (Official Build) (arm64)
• Device: MacBook Air M1
• OS: macOS 14.5 (23F79)
• Gutenberg plugin: Version Version 18.5.0

Thanks,

[karmatosed]

I am going to note we need some testing for this. It would also be great to not just have video but have some screenshots to increase understanding. Thanks for reporting.

[viralsampat]

Hello @karmatosed

Thank you so much for the update.

Here, I have attached screenshot before/after change for reference.

Thanks,

[viralsampat]

I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.

[viralsampat]

Back-end

[viralsampat]

Front-end

[viralsampat]

After resolved issue Back-end:

[viralsampat]

After resolved issue front-end:

[poena]

On the front, the media & text block has different padding applied depending on the browser width

@media (min-width: 700px) {
    .wp-block-media-text .wp-block-media-text__content {
        padding: 4rem;
    }
}

.wp-block-media-text .wp-block-media-text__content {
    padding: 3rem 2rem;
}

While in the editor, only the block's default padding is applied:

    padding: 0 8%;

[sajib1223]

Patch Testing Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/61433/61433.patch

Environment

• WordPress: 7.0-alpha-61215-src
• PHP: 8.2.29
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.7 / Client: mysqlnd 8.2.29)
• Browser: Firefox 147.0
• OS: Windows 10/11
• Theme: Twenty Twenty 3.0
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

Steps take

1. Applied patch.
2. Created new post, Inserted "Media & Text" block, set media width to 85, added text to the paragraph inside the "Media & Text" block.
3. Checked frontend, the text have a 8% padding.
4. ✅ Issue partially resolved with patch.

Expected outcome

• 8% vertical padding on Desktop.
• Appropriate padding on mobile/tablet.
• Issue partially resolved with patch.

Screenshot/Screencast

Desktop view after patch:

[sajib1223]

The desktop view looks correct, mobile/tablet screen need changes.

Mobile view after patch:

Mobile view before patch: