Blog Post Block: Fix grid so items are aligned when an odd number of posts are inserted #1173
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…r of items are inserted
adekbadek
approved these changes
Jun 16, 2022
|
@wojtekn did you want to sign off here? |
|
@adekbadek I started testing this one but was stuck with newspack -> calypso flow. I don't want to block it, so if all is good for you, let's ship it. |
matticbot
pushed a commit
that referenced
this pull request
Jun 16, 2022
# [1.53.0-alpha.1](v1.52.0...v1.53.0-alpha.1) (2022-06-16) ### Bug Fixes * **donate:** amount formatting ([c766ce3](c766ce3)) * **homepage posts block:** align items when an odd number of items is inserted ([#1173](#1173)) ([7139567](7139567)) * **iframe-block:** handle errors from server-side fetch ([#1162](#1162)) ([8378b41](8378b41)) * make sure block exists before unregistering ([#1169](#1169)) ([6d3deed](6d3deed)) ### Features * unregister the Jetpack Donation block ([#1163](#1163)) ([6acbcac](6acbcac))
|
🎉 This PR is included in version 1.53.0-alpha.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
matticbot
pushed a commit
that referenced
this pull request
Jun 27, 2022
# [1.53.0](v1.52.0...v1.53.0) (2022-06-27) ### Bug Fixes * **donate:** amount formatting ([c766ce3](c766ce3)) * **homepage posts block:** align items when an odd number of items is inserted ([#1173](#1173)) ([7139567](7139567)) * **iframe-block:** handle errors from server-side fetch ([#1162](#1162)) ([8378b41](8378b41)) * make sure block exists before unregistering ([#1169](#1169)) ([6d3deed](6d3deed)) ### Features * unregister the Jetpack Donation block ([#1163](#1163)) ([6acbcac](6acbcac))
|
🎉 This PR is included in version 1.53.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
6 tasks
7 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
All Submissions:
Blog post block uses a flexbox to render items in a grid and use
justify-content: space betweento determine how the items are laid out. This however causes the flexbox to force empty space between some items when there is an odd number of items in the grid. This fix changes how items are laid out usingjustify-content: flex-startso items are properly aligned when rendered and instead of allowing flexbox to determine the space we specify agapbetween each item.Changes proposed in this Pull Request:
Closes #1171.
Original issue Automattic/wp-calypso#62318
How to test the changes in this Pull Request:
Before:
After:
Other information: