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.

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

TT1 Blocks: Media and Text Block is stretched at the frontend #259

Closed
evakaneva opened this issue May 10, 2021 · 5 comments
Closed

TT1 Blocks: Media and Text Block is stretched at the frontend #259

evakaneva opened this issue May 10, 2021 · 5 comments

Comments

@evakaneva
Copy link

evakaneva commented May 10, 2021

I originally reported this in Gutenberg, but I noticed it doesn't happen with other themes. So it is a TT1 blocks specific issue.

Description

Images from the media and text block show as expected in the preview but are stretched on the frontend.

Step-by-step reproduction instructions

  1. Create a media and text block
  2. Add image and text
  3. Save/publish
  4. Open post on the frontend
  5. Observe it is stretched

Expected behaviour

I would expect that the frontend looks exactly like the preview.

Actual behaviour

At the frontend, images from the media and text block are stretched.

Screenshots or screen recording (optional)

stretchbugmediatextblock

Code snippet (optional)

WordPress information

  • WordPress version: 5.7.1
  • Gutenberg version: Version 10.4.1
  • Are all plugins except Gutenberg deactivated? Yes
  • Are you using a default theme (e.g. Twenty Twenty-One)? Yes, TT1 Blocks

Device information

  • Device: Desktop
  • Operating system: Big Sur 11.1
  • Browser: Chrome Version 90.0.4430.72
@carolinan
Copy link
Collaborator

carolinan commented May 10, 2021

I can also reproduce this when using emptytheme so I am not sure if this is a theme or Gutenberg issue 🤔

The block editor uses this CSS, but Gutenberg does not included it on the front:

.block-editor__container img {
    max-width: 100%;
    height: auto;
}

In Armando, I have set

img {
	max-width: 100%;
	height: auto;
}

And this seems to fix it.

@MaggieCabrera
Copy link
Collaborator

There's a PR on GB for this, but it didn't seem to have much traction: WordPress/gutenberg#30092

@carolinan
Copy link
Collaborator

I see discussions but no decision. Do we fix it in the theme meanwhile?

@MaggieCabrera
Copy link
Collaborator

I see discussions but no decision. Do we fix it in the theme meanwhile?

it's hard to say. I'm really against having to add those lines to every single theme to avoid the bug, but it doesn't look like that's going to make it to the editor any time soon. If we decide to add it, I'd add a comment linking the issue or the PR and go back and delete the line if the PR is ever merged.

@MaggieCabrera
Copy link
Collaborator

The GB PR was merged so I'm closing this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants