Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Block Library - Featured Image]: Don't exceed the width of the parent block just like the Image Block #54009

Closed
wants to merge 3 commits into from
Closed

[Block Library - Featured Image]: Don't exceed the width of the parent block just like the Image Block #54009

wants to merge 3 commits into from

Conversation

shimotmk
Copy link
Contributor

@shimotmk shimotmk commented Aug 29, 2023 •
edited
Loading

What?

Don't exceed the width of the parent block just like the Image Block

Why?

#54004
#52238

How?

Testing Instructions

  1. Place Image Block and Featured Image Block in the column block.
    Or paste the HTML below.
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"33.33%","backgroundColor":"light-green-cyan"} -->
<div class="wp-block-column has-light-green-cyan-background-color has-background" style="flex-basis:33.33%"><!-- wp:paragraph -->
<p>↓ This is Featured Image block.</p>
<!-- /wp:paragraph -->

<!-- wp:post-featured-image {"aspectRatio":"1","height":"400px","style":{"color":{}}} /-->

<!-- wp:paragraph -->
<p>↓ This is Image block.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":7335,"width":"undefinedpx","height":"400px","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://s.w.org/images/core/5.3/MtBlanc1.jpg" alt="" class="wp-image-7335" style="object-fit:cover;width:undefinedpx;height:400px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"66.66%","backgroundColor":"pale-pink"} -->
<div class="wp-block-column has-pale-pink-background-color has-background" style="flex-basis:66.66%"><!-- wp:paragraph -->
<p>right column text right column text right column text right column text right column text right column text</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
  1. Change the width height.
  2. The image jumps over the width of the column.
  3. Check the display on the front end
  4. Image Block width does not jump over column width, Featured Image Block jumps over column width.

this branch

featured-image.mp4

trunk branch

Featured-Image.mp4

Testing Instructions for Keyboard

Screenshots or screencast

@shimotmk shimotmk requested a review from ajitbohra as a code owner August 29, 2023 07:24
@skorasaurus skorasaurus added the [Block] Image Affects the Image Block label Aug 29, 2023
@shimotmk shimotmk closed this Jan 10, 2024
@shimotmk shimotmk deleted the fix/54004 branch January 10, 2024 08:49
@shimotmk shimotmk restored the fix/54004 branch January 11, 2024 03:32
@shimotmk shimotmk reopened this Jan 11, 2024
@Mamaduka Mamaduka requested a review from a team January 23, 2024 06:01
@Mamaduka Mamaduka added Needs Design Feedback Needs general design feedback. [Type] Bug An existing feature does not function as intended labels Jan 23, 2024
@jasmussen
Copy link
Contributor

When a featured image sits inside a container, group, column, anything, and its width is set to auto then it seems a bug when the featured image is wider than the container, absolutely.

However when a featured image (or image for that matter) has an explicit width set, that is wider than whatever container it is in, whether that should then be constrained to the container (i.e. max-width: 100%;) or not, that's a more tricky conversation. Where we land on that one, I'm not sure, but I will say it should behave the same for featured image as it does on the Image block. Arguably both of those should behave similar to Cover as well, so I'd tend to — very slightly — lean towards constraining.

@shimotmk shimotmk closed this Jan 17, 2025
@shimotmk shimotmk deleted the fix/54004 branch January 17, 2025 08:36
@shimotmk shimotmk restored the fix/54004 branch January 17, 2025 08:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

Assignees
No one assigned
Labels
[Block] Image Affects the Image Block Needs Design Feedback Needs general design feedback. [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@shimotmk @jasmussen @Mamaduka @skorasaurus