Fixed Media & Text Block - Image not rendered properly on frontend when inside stack #68610
Conversation
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
ead112f to
abf61a9
Compare
|
@t-hamano Can you add a review whenever possible? Thanks |
There was a problem hiding this comment.
I tested with the row, stack, and without a group. I changed various settings like focal points, widths, featured image etc.
The image and the block is the expected width both in the editor and front.
The responsive behaviour seems correct to me too.
I tested in Chrome on MacOs.
There was a problem hiding this comment.
Thanks for the PR!
I'm not sure forcing a 100% width is an ideal approach.
Because the width of the blocks inside the Stack block is determined by the content. It's up to the Stack block to align that content and whether it stretches or not. width:100% disables that functionality:
293de0c9e7cbd412745d6d8aa365d80f.mp4
My guess is that the root cause is that the image is absolutely positioned. I tried making the following changes:
diff
diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
index 727380a375..5b73b5ba3c 100644
--- a/packages/block-library/src/media-text/style.scss
+++ b/packages/block-library/src/media-text/style.scss
@@ -106,7 +106,6 @@
- position: relative;
height: 100%;
min-height: 250px;
}
@@ -117,7 +116,6 @@
}
.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
- position: absolute;
width: 100%;
height: 100%;
object-fit: cover;I may be missing something, but it works as far as I've tested:
c5afd8e93d6fc6f0d7726e3832506354.mp4
The styles I removed were added by #64981.
If this is the best approach, can we test removing these styles to see if that has any effect?
Sure, I will try push this approach and see if anything is failing |
|
@t-hamano Hey, I applied the diff, but there is still an issue of image not being visible on frontend. Screen.Recording.2025-02-25.at.7.21.16.PM.mov |
It seems like the diff I provided doesn't match the actual code. Could you check again? |
@t-hamano Apologies, it's working correctly now ✅ |
|
@Mayank-Tripathi32 Sorry for the late reply. This PR looks good to me, but can you rebase this PR to test again? |
2621a03 to
20a2f20
Compare
|
@t-hamano Hey, I rebased it and tested. Works perfectly. |
…en inside stack (WordPress#68610) * feat: fixed width issue in frontend while inside stack * Revert "feat: fixed width issue in frontend while inside stack" This reverts commit abf61a9. * revert to absolute positioning * chore: apply diff Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>
fixes #68609
What?
Fix image width issue for Media & Text block when used with image fill inside flex containers (Stack/Row).
Why?
When a Media & Text block with
is-image-fill-elementis placed inside a flex container (.is-layout-flex), the image width becomes zero on render despite working correctly in the editor. This causes the image to disappear on the frontend while remaining visible in the editor.How?
Added an explicit width declaration for Media & Text blocks when they appear inside flex containers. The minimal CSS fix ensures the block takes full width of its container:
Testing Instructions
Screenshot