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

added width style for align center issue in image block #39376

Closed
wants to merge 2 commits into from
Closed

added width style for align center issue in image block #39376

wants to merge 2 commits into from

Conversation

Smit2808
Copy link
Contributor

What?

I have added the width:100% in .wp-block-image.aligncenter class hierarchy. So by doing this now image is align in center by older CSS text-align:center;

Why?

So the problem was when we add image in the group block then we are not able to align the image in the center. So the issue was mentioned in this ticket(link: #39291) and I solved this issue by this width css.

How?

The implementation details are very simple just open the file style.scss(path: packages/block-library/src/image/style.scss) and add the width 100% in .wp-block-image.aligncenter class hierarchy.

Testing Instructions

  1. Open a Post or Page in theme Twenty Twenty-Two.
  2. Add a group block, set some background color
  3. Add an image block into the group block
  4. Resize the image so it's smaller than the group block width
  5. Change image alignment to center
  6. Notice that now the image is centered in front and editor side both.

Screenshots or screencast

Image of editor side link: https://prnt.sc/vD8DpJWDgZNy
Image of front side link: https://prnt.sc/LZhJoIWS3m1S

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Mar 11, 2022
@github-actions
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Smit2808! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@skorasaurus skorasaurus added [Block] Image Affects the Image Block CSS Styling Related to editor and front end styles, CSS-specific issues. labels Mar 11, 2022
@ocean90
Copy link
Member

ocean90 commented Mar 15, 2022

Thank you for your first contribution to Gutenberg! I'm going to close this PR as it was superseded by #39422.

@ocean90 ocean90 closed this Mar 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Image Affects the Image Block CSS Styling Related to editor and front end styles, CSS-specific issues. First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants