Directory

Image Block: Width is different between editor and front when put inside row block · Issue #53932 · 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: Width is different between editor and front when put inside row block #53932

Open
shimotmk opened this issue Aug 25, 2023 · 1 comment
Open

Image Block: Width is different between editor and front when put inside row block #53932

shimotmk opened this issue Aug 25, 2023 · 1 comment
Labels
[Block] Image Affects the Image Block [Type] Bug An existing feature does not function as intended

Comments

@shimotmk
Copy link
Contributor

shimotmk commented Aug 25, 2023 •
edited

Description

Image Block: Width is different between editor and front when put inside row block

Step-by-step reproduction instructions

  1. Put an image block and a paragraph block in the row block. Or paste the HTML below into the block editor
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:image {"id":3013,"width":"431px","sizeSlug":"large","linkDestination":"media","style":{"layout":{"selfStretch":"fixed","flexSize":"42px"}}} -->
<figure class="wp-block-image size-large is-resized"><a href="https://s.w.org/images/core/5.3/MtBlanc1.jpg"><img src="https://s.w.org/images/core/5.3/MtBlanc1.jpg" alt="" class="wp-image-3013" style="width:431px"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"style":{"layout":{"selfStretch":"fixed","flexSize":"125px"}},"backgroundColor":"vivid-green-cyan"} -->
<p class="has-vivid-green-cyan-background-color has-background">test</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

  1. Changing the width of the image block does not change the width in the editor

  2. Looking at the front, you can see that the width has changed

Screenshots, screen recording, code snippet

image-width.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 labels Aug 28, 2023
@jordesign
Copy link
Contributor

I was able to recreate this in testing... What I found was that if a specific width was set in the Image Block settings - the 'Fixed' width in the Image Block styles tab did not work.

But if the Height/Width for the image were set to 'Auto' in the block settings - then setting a fixed width in the Block's style settings did work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[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