-
Notifications
You must be signed in to change notification settings - Fork 2k
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
Tiled gallery: Fix infinite loop left/right block align #29017
Conversation
Fixes and infinite loop with the resize observer
@@ -4,5 +4,5 @@ $tiled-gallery-add-item-border-color: #555d66; // Gutenberg $dark-gray-500 | |||
$tiled-gallery-add-item-border-width: 1px; // Gutenberg $border-width | |||
$tiled-gallery-caption-background-color: #000; | |||
$tiled-gallery-content-width: 610px; // Gutenberg $content-width | |||
$tiled-gallery-margin: 2px; // Fixed in JS, see `LayoutStyles` from `edit.jsx` | |||
$tiled-gallery-gutter: 4px; // Fixed in JS, see `LayoutStyles` from `edit.jsx` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's loop back later to rename margin to gutter also elsewhere to keep things consistent:
export const TILE_MARGIN = 2; |
Core Gallery spacing was improved in WordPress/gutenberg#10027 (and WordPress/gutenberg#10221, also maybe https://github.com/WordPress/gutenberg/commits/master/packages/block-library/src/gallery/style.scss#diff-cf158936847e50c10bf9797499a7247dR127) — should we follow the suit while at it? Bringing those changes over might fix the issue as well. |
This does fix the bug 💪
Yup, these seem to need some work indeed. For the record: This PR changes slightly how "Full width" behaves on TwentyNineteen theme: Probably hard to see from screenshots but in In core-gallery borders stay hidden on both sides: On full width, this PR also pushes the content just a little bit under the menu, as demonstrated by this insert shadow in The same seems to happen in core-gallery block: Tested by applying |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This fixes the bug indeed; seems like we should re-visit margins regardless though.
All these styles do need to be revisited 👍 A note, the bug occurred because the observer callback set the block width, which changed the block size, which called the observer and set a different width. This appeared to manifest because the width reported to the observer did not match the width that was set on the component. This was due to the way the negative margins impacted the content rects. I'm not sure why this only manifested on the left/right alignments 🤷♂️ Nothing in this PR actually prevents this bug from reappearing under the right conditions, we might also look at that in a follow up. |
Fixes and infinite loop with the resize observer that causes the block to shrink indefinitely when left or right aligned.
Note: Some alignments do not appear to be implemented correctly. This PR does slightly change the alignment, in particular for the "full" alignment. It's unclear to me what the appropriate styling is for center, full and wide alignments, but these should be revisited in a follow-up.
Changes proposed in this Pull Request
Testing instructions
Screens
Before (from #29016 - what a fast, smooth infinite loop 😍 )
After