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

Fix missing default align-items when items are oriented vertically in flex layout #38069

Conversation

ndiego
Copy link
Member

@ndiego ndiego commented Jan 19, 2022

Description

This PR is an alternative approach to #37986, which actually fixes the root issue. Thanks @ntsekouras for spotting this!

For blocks that support the ability to orient items vertically, by default there is no justifyContent attribute applied. In the Editor, when there is no attribute we are applying align-items: flex-start as a default. On the frontend however, there is no default which leads to some rendering errors, particularly with the Social Icons block. This PR adds align-items: flex-start to the frontend when there is no justifyContent attribute and the block is meant to be oriented vertically.

How has this been tested?

  1. Use Twenty Twenty-Two with Gutenberg 12.4 RC1 and WordPress 5.9 RC3
  2. Add the Social Icons block with a couple Social Icons
  3. Orient the block vertically. See that it displays correctly in the Editor
  4. Switch to the Frontend and see that with this PR the icons display correctly as well, without this PR they render like the screenshots below

Screenshots

Without this PR
image

With this PR
image

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).
  • I've updated related schemas if appropriate.

@ndiego
Copy link
Member Author

ndiego commented Jan 19, 2022

@ntsekouras I created a separate PR for the correct fix you highlighted in #37986. This seems to work like a charm. Let me know what you think. If this is the correct course, I will close out the other PR in favor of this one.

Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

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

This looks good! Thanks @ndiego 💯

@ntsekouras ntsekouras added [Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended labels Jan 19, 2022
@ntsekouras ntsekouras changed the title Fix missing default when items are oriented vertically Fix missing default align-items when items are oriented vertically in flex layout Jan 19, 2022
@ntsekouras ntsekouras merged commit f3985db into WordPress:trunk Jan 19, 2022
@github-actions github-actions bot added this to the Gutenberg 12.5 milestone Jan 19, 2022
@ndiego
Copy link
Member Author

ndiego commented Jan 19, 2022

Awesome, thanks for the review! 🎉

@ndiego ndiego deleted the fix/missing-default-when-items-oriented-vertically branch January 19, 2022 15:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants