Make WordPress Core

Opened 5 weeks ago

Last modified 2 weeks ago

#61433 new defect (bug)

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

Reported by: viralsampat's profile viralsampat Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.5.4
Component: Bundled Theme Keywords: dev-feedback needs-testing
Focuses: css Cc:

Description

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,

Attachments (5)

61433.patch (695 bytes) - added by viralsampat 5 weeks ago.
I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.
before-change-media-and-text-block-back-end.png (766.2 KB) - added by viralsampat 5 weeks ago.
Back-end
before-change-media-and-text-front-end.png (975.8 KB) - added by viralsampat 5 weeks ago.
Front-end
after-change-media-and-text-block-back-end.png (765.8 KB) - added by viralsampat 5 weeks ago.
After resolved issue Back-end:
after-change-media-and-text-front-end.png (1022.0 KB) - added by viralsampat 5 weeks ago.
After resolved issue front-end:

Change History (8)

#1 @karmatosed
5 weeks ago

  • Keywords needs-testing added

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.

#2 @viralsampat
5 weeks ago

Hello @karmatosed

Thank you so much for the update.

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

Thanks,

@viralsampat
5 weeks ago

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

@viralsampat
5 weeks ago

After resolved issue Back-end:

@viralsampat
5 weeks ago

After resolved issue front-end:

#3 @poena
2 weeks ago

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%;
Note: See TracTickets for help on using tickets.