Directory

Image Block and Featured Image Block have editor and front end differences. · Issue #54004 · WordPress/gutenberg · GitHub
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

Image Block and Featured Image Block have editor and front end differences. #54004

Open
shimotmk opened this issue Aug 29, 2023 · 0 comments
Open

Image Block and Featured Image Block have editor and front end differences. #54004

shimotmk opened this issue Aug 29, 2023 · 0 comments
Labels
[Block] Columns Affects the Columns Block [Block] Image Affects the Image Block [Type] Bug An existing feature does not function as intended

Comments

@shimotmk
Copy link
Contributor

Description

Image Block and Featured Image Block have editor and front end differences.

Step-by-step reproduction 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.

Screenshots, screen recording, code snippet

Featured-Image.mp4

Environment info

WordPress Version 6.3
Gutenberg Version 16.5.0

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes
@jordesign jordesign added [Type] Bug An existing feature does not function as intended [Block] Image Affects the Image Block [Block] Columns Affects the Columns Block labels Aug 29, 2023
@shimotmk shimotmk mentioned this issue Aug 29, 2023
Open
shimotmk added a commit to shimotmk/gutenberg that referenced this issue Jan 11, 2024
@shimotmk
fix WordPress#54004
b846112
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Block] Columns Affects the Columns Block [Block] Image Affects the Image Block [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jordesign @shimotmk