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

Try removing default align-items styles from flex layout #47099

Open
wants to merge 4 commits into
base: trunk
Choose a base branch
from

Conversation

tellthemachines
Copy link
Contributor

Why?

We're increasingly running into issues caused by the align-items property that gets added by default to flex layouts. In horizontal layouts, we're adding align-items: center and in vertical ones align-items: flex-start. For most blocks, it's not useful to set these properties to these particular values, and in some cases it's actively working against their layout potential.

I've only found one case where setting this value by default is needed: the Social Icons block in its vertical orientation, as described in #38069.

#46133 and #45117 describe layout scenarios that should be fairly straightforward to build and become difficult or impossible with the current align-items defaults.

How?

  • This PR tries removing align-items from the default flex layout.
  • Given the special case of Social Icons, it adds the property back in this block's styles.
  • It also removes a fallback style from the Gallery block which should no longer be needed.

It's still possible to manipulate the value to some extent in horizontal orientations (such as Row block) with the block alignment settings, and the justification controls for vertical orientations (such as Stack block).

Testing Instructions

  1. Add the following blocks to a page: Social Icons, Buttons, Gallery, Navigation, Row, Stack.
  2. Add some contents to each and check that they render as expected in the editor and the front end.
  3. Check that the layouts described in Flexbox and auto margins layout #46133 and Align footer to the bottom of the page when the page has no/little content #45117 are now possible to build with no custom CSS additions.

Testing Instructions for Keyboard

Screenshots or screencast

A Stack inside a Row should now by default take up the full height of the tallest block inside the Row:

Screenshot 2023-01-12 at 3 42 05 pm

@tellthemachines tellthemachines added [Type] Bug An existing feature does not function as intended [Feature] Layout Layout block support, its UI controls, and style output. labels Jan 12, 2023
@tellthemachines tellthemachines self-assigned this Jan 12, 2023
@github-actions
Copy link

github-actions bot commented Jan 12, 2023

Size Change: -44 B (0%)

Total Size: 1.37 MB

Filename Size Change
build/block-editor/index.min.js 201 kB -11 B (0%)
build/block-library/blocks/gallery/style-rtl.css 1.54 kB -13 B (-1%)
build/block-library/blocks/gallery/style.css 1.53 kB -14 B (-1%)
build/block-library/index.min.js 204 kB +2 B (0%)
build/block-library/style-rtl.css 12.8 kB -4 B (0%)
build/block-library/style.css 12.8 kB -4 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 483 B
build/block-directory/index.min.js 7.2 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 4.17 kB
build/block-editor/content.css 4.17 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-editor/style-rtl.css 15.1 kB
build/block-editor/style.css 15.1 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 138 B
build/block-library/blocks/audio/theme.css 138 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 91 B
build/block-library/blocks/avatar/style.css 91 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 587 B
build/block-library/blocks/button/editor.css 587 B
build/block-library/blocks/button/style-rtl.css 628 B
build/block-library/blocks/button/style.css 627 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 409 B
build/block-library/blocks/columns/style.css 409 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.6 kB
build/block-library/blocks/cover/style.css 1.59 kB
build/block-library/blocks/details-summary/editor-rtl.css 65 B
build/block-library/blocks/details-summary/editor.css 65 B
build/block-library/blocks/details-summary/style-rtl.css 61 B
build/block-library/blocks/details-summary/style.css 61 B
build/block-library/blocks/details/style-rtl.css 54 B
build/block-library/blocks/details/style.css 54 B
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 138 B
build/block-library/blocks/embed/theme.css 138 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 269 B
build/block-library/blocks/file/style.css 270 B
build/block-library/blocks/file/view.min.js 353 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 984 B
build/block-library/blocks/gallery/editor.css 988 B
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 340 B
build/block-library/blocks/html/editor.css 341 B
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/style-rtl.css 652 B
build/block-library/blocks/image/style.css 652 B
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 507 B
build/block-library/blocks/media-text/style.css 505 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 716 B
build/block-library/blocks/navigation-link/editor.css 715 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation/editor-rtl.css 2.13 kB
build/block-library/blocks/navigation/editor.css 2.14 kB
build/block-library/blocks/navigation/style-rtl.css 2.22 kB
build/block-library/blocks/navigation/style.css 2.21 kB
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB
build/block-library/blocks/navigation/view.min.js 447 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 401 B
build/block-library/blocks/page-list/editor.css 401 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 501 B
build/block-library/blocks/post-comments-form/style.css 501 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 322 B
build/block-library/blocks/post-featured-image/style.css 322 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 281 B
build/block-library/blocks/post-template/style.css 281 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 335 B
build/block-library/blocks/pullquote/style.css 335 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 450 B
build/block-library/blocks/query/editor.css 449 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 408 B
build/block-library/blocks/search/style.css 406 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 329 B
build/block-library/blocks/shortcode/editor.css 329 B
build/block-library/blocks/site-logo/editor-rtl.css 489 B
build/block-library/blocks/site-logo/editor.css 489 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 359 B
build/block-library/blocks/spacer/editor.css 359 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 651 B
build/block-library/blocks/table/style.css 650 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 403 B
build/block-library/blocks/template-part/editor.css 403 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 179 B
build/block-library/blocks/video/style.css 179 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.12 kB
build/block-library/common.css 1.12 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.6 kB
build/block-library/editor.css 11.6 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/theme-rtl.css 698 B
build/block-library/theme.css 703 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 51.1 kB
build/commands/index.min.js 14.8 kB
build/commands/style-rtl.css 789 B
build/commands/style.css 786 B
build/components/index.min.js 209 kB
build/components/style-rtl.css 11.7 kB
build/components/style.css 11.8 kB
build/compose/index.min.js 12.4 kB
build/core-data/index.min.js 16.3 kB
build/customize-widgets/index.min.js 12.2 kB
build/customize-widgets/style-rtl.css 1.41 kB
build/customize-widgets/style.css 1.41 kB
build/data-controls/index.min.js 718 B
build/data/index.min.js 8.68 kB
build/date/index.min.js 40.4 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.76 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 35.2 kB
build/edit-post/style-rtl.css 7.6 kB
build/edit-post/style.css 7.59 kB
build/edit-site/index.min.js 64.6 kB
build/edit-site/style-rtl.css 10.1 kB
build/edit-site/style.css 10.1 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.56 kB
build/edit-widgets/style.css 4.56 kB
build/editor/index.min.js 45.9 kB
build/editor/style-rtl.css 3.49 kB
build/editor/style.css 3.48 kB
build/element/index.min.js 4.95 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.26 kB
build/format-library/style-rtl.css 557 B
build/format-library/style.css 556 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.79 kB
build/keycodes/index.min.js 1.94 kB
build/list-reusable-blocks/index.min.js 2.14 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.99 kB
build/notices/index.min.js 977 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.35 kB
build/primitives/index.min.js 960 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 942 B
build/react-i18n/index.min.js 702 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.75 kB
build/reusable-blocks/index.min.js 2.26 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 11.1 kB
build/server-side-render/index.min.js 2.09 kB
build/shortcode/index.min.js 1.52 kB
build/style-engine/index.min.js 1.55 kB
build/token-list/index.min.js 650 B
build/url/index.min.js 3.74 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 1.09 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.3 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@andrewserong
Copy link
Contributor

andrewserong commented Jan 13, 2023

Oh, what an interesting problem, thanks for diving in! At first glance, I'm not sure how feasible it'll be to remove some of the default values, because the Stack block launched with the idea that by default blocks have the width of their content (a bit like the social icons block). Here's what I noticed on an existing Stack block:

Trunk This PR
image

Now that the layout features have been out in the wild for a while, if we do remove things from the default values, I think we'll need to be quite careful to see what sorts of existing patterns might have been depending on these values 🤔

A Stack inside a Row should now by default take up the full height of the tallest block inside the Row:

Rather than changing the defaults, is there a way that we could add a control that would support stretching children to fill the container, and treat this an enhancement?

@andrewserong
Copy link
Contributor

andrewserong commented Feb 6, 2023

Now that #47134 has landed, shall we close out this one? Or do you think it's still worth pursuing changing the default options 🤔

@tellthemachines
Copy link
Contributor Author

I think it's still good to remove defaults that aren't useful, just need to work out if it won't break anything. Ideally those styles would never have been added in the first place 😅

@andrewserong
Copy link
Contributor

Okie-doke!

Ideally those styles would never have been added in the first place 😅

Ah, the perennial backwards compatibility challenge! 😄

@andrewserong
Copy link
Contributor

I was curious: TIL it turns out the align-items: center rule dates back to the initial PR that introduced flex (#33359) (just in case that helps with any archaeological digs into the layout support 🙂)

@mehne
Copy link

mehne commented Mar 31, 2023

I can second this.
I reported an in-depth description why this is problematic here too: #49502

@ramonjd
Copy link
Member

ramonjd commented Apr 21, 2023

I'm not terribly familiar with the context, but I've been testing this and can confirm that the default align-items CSS property is not present by default.

Inserting a group block (Stack) in trunk, I get:

Screenshot 2023-04-21 at 3 20 47 pm

In this PR I get:
Screenshot 2023-04-21 at 3 25 54 pm

Playing around with justification controls I see that align-items is correctly added.

The social links block has the following styles too:

.wp-block-social-links.is-vertical {
    align-items: flex-start;
}

All looks good on the frontend for me.

Are there some other patterns that need testing?

@mehne
Copy link

mehne commented Apr 21, 2023

I'm not terribly familiar with the context, but I've been testing this and can confirm that the default align-items CSS property is not present by default.

Inserting a group block (Stack) in trunk, I get:

Screenshot 2023-04-21 at 3 20 47 pm

In this PR I get: Screenshot 2023-04-21 at 3 25 54 pm

Playing around with justification controls I see that align-items is correctly added.

The social links block has the following styles too:

.wp-block-social-links.is-vertical {
    align-items: flex-start;
}

All looks good on the frontend for me.

Are there some other patterns that need testing?

Sorry, but "playing around with justification" is not whats the problem here. It is about the default value. And it is set, like the OP described and like I describeb in my linked issue.

Individual Styles from blocks like the social links block you described is not the problem too. Please read the initial post carefully. It is about the default css "align-items: center" that is added but should not!
Like here:
Screenshot 2023-04-21 081043

@ramonjd
Copy link
Member

ramonjd commented Apr 21, 2023

Please read the initial post carefully. It is about the default css "align-items: center" that is added but should not!

Would you be able to test this PR and offer your expertise? I think it'd help move this issue along if so, especially if there are things that I've missed after testing it for the first time.

Hence my question:

Are there some other patterns that need testing?

The PR description specifically mentions the following:

In horizontal layouts, we're adding align-items: center and in vertical ones align-items: flex-start. For most blocks, it's not useful to set these properties to these particular values, and in some cases it's actively working against their layout potential.

@tellthemachines
Copy link
Contributor Author

Are there some other patterns that need testing?

Thanks for taking a look! I've meaning to come back to this PR and do some more testing on it 😅
I think mainly it's a matter of checking that flex layout blocks with their default settings (i.e. no changes to alignment/justification) still display the same on trunk and in this branch, to make sure there are no visual regressions.

Might be worth taking a look at the WP Directory to see if there are third party blocks using this layout type (probably) and check those, but I'm more than happy to do that myself.

@mehne
Copy link

mehne commented Apr 21, 2023

The PR description specifically mentions the following:

In horizontal layouts, we're adding align-items: center and in vertical ones align-items: flex-start. For most blocks, it's not useful to set these properties to these particular values, and in some cases it's actively working against their layout potential.

With "we are adding" the PR means Wordpress (Gutenberg) is adding those on default. See the Screenshot in my last post and the linked issue. When you add a block and don't change anything to the alignment, you get those classes.

In my case in a custom block with "__experimental" activated.
More details to my special case in this issue: #49502

@ramonjd
Copy link
Member

ramonjd commented Apr 21, 2023

With "we are adding" the PR means Wordpress (Gutenberg) is adding those on default. See the Screenshot in my last post and the linked issue. When you add a block and don't change anything to the alignment, you get those classes.

That's what I understood too, and formed the basis of my quick test.

This PR is not marked as resolving your issue. If you think it should cover it, it might be more helpful to the PR author to test it and provide feedback as to where changes or improvements could be made.

@tellthemachines tellthemachines force-pushed the try/removing-flex-align-styles branch from 3824c35 to 6a91fe5 Compare April 24, 2023 01:27
@github-actions
Copy link

Flaky tests detected in ae30c09.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4782542866
📝 Reported issues:

@tellthemachines
Copy link
Contributor Author

I rebased and updated the default alignment control values to the new defaults. I've also added a default justifyContent value to Social Icons block, instead of the previous CSS override.

In testing the core blocks, there are a few discrepancies with trunk in specific cases, namely:

  • Buttons block where buttons have different heights
  • Row block where items have different heights
  • Stack block where items have background color or other visible indication of their width

Trunk:

Screenshot 2023-04-24 at 1 59 53 pm

Screenshot 2023-04-24 at 2 00 01 pm

Screenshot 2023-04-24 at 2 00 16 pm

This branch:

Screenshot 2023-04-24 at 2 00 37 pm

Screenshot 2023-04-24 at 2 00 47 pm

Screenshot 2023-04-24 at 2 00 55 pm

For Row and Stack blocks at least, I don't believe we should add a default alignment value such as I added to Social Icons, as that would mostly defeat the purpose of this PR. We want the default to change. However, this may bring about breaking changes to websites relying on the current defaults. We could conceivably work around this by adding a default alignment that matches the current one and then adding an override in the Row/Stack block variation settings to make all new Row and Stack blocks have the new default. It's a bit messy, and in that scenario I think that programatically added blocks will still get the legacy defaults unless explicitly specified, but I can't think of any way to write a deprecation for this as there are no changes to the actual blocks, so that may be our only alternative to breaking changes.

For Buttons, adding a default center alignment might work well.

Further feedback and ideas welcome!

@geriux geriux removed their request for review February 26, 2024 09:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Layout Layout block support, its UI controls, and style output. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants