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

Archeo: fix image block widths #5634

Merged
merged 9 commits into from
Mar 9, 2022
Merged

Archeo: fix image block widths #5634

merged 9 commits into from
Mar 9, 2022

Conversation

mikachan
Copy link
Member

@mikachan mikachan commented Mar 8, 2022

Changes proposed in this Pull Request:

This adds the wp-image- class and ID attribute to any image blocks in Archeo's patterns.

Since WordPress/gutenberg#39045 was merged, only images that have the wp-image- class are targeted with the responsive styles. Without this class, the images are not resized to 100%:

Without class With class
image image

It looks like images in cover blocks and media + text blocks are not affected.

Do we need to run through all block themes and add these classes?

@mikachan mikachan added the [Theme] Archeo Automatically generated label for Archeo. label Mar 8, 2022
@mikachan mikachan added this to the Archeo milestone Mar 8, 2022
@mikachan mikachan requested a review from a team March 8, 2022 11:48
@mikachan mikachan self-assigned this Mar 8, 2022
@MaggieCabrera
Copy link
Contributor

those IDs won't work on all sites if they already have images installed with that ID. Joen said that he was going to make a PR to fix the issue, I think we can patch with CSS instead of changing the markup while the fix makes it to GB

@mikachan
Copy link
Member Author

mikachan commented Mar 8, 2022

Ah OK, I was wondering about the IDs. Thanks! I'll change this PR to a patch then.

@mikachan
Copy link
Member Author

mikachan commented Mar 8, 2022

I've added a CSS patch for all Image Block images, using this selector: .wp-block-image img

Copy link
Contributor

@MaggieCabrera MaggieCabrera left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@mikachan mikachan merged commit d401a92 into trunk Mar 9, 2022
@mikachan mikachan deleted the archeo/fix-img-widths branch March 9, 2022 13:58
@MaggieCabrera
Copy link
Contributor

WordPress/gutenberg#39340 will fix the image issue and when that makes it to dotcom we can remove the CSS

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Theme] Archeo Automatically generated label for Archeo.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants