Block preview: fix resize listener #38516
Merged
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
|
Size Change: +10 B (0%) Total Size: 1.14 MB
ℹ️ View Unchanged
|
|
Great catch. Thank you, @ellatrix. Do you think we should revert the previous hack that partially resolved the issue? Especially this part with overflow. Cc @jasmussen, @ndiego, @ixkaito |
|
Oh I wasn't aware of that. If it doesn't cause any regressions, sure we can remove it. Would be good to check if this fix is good first though for the current issues. |
|
Thank you for looking at this! I'm happy with whichever fix makes the pattern preview work the best. It might be worth testing with Regarding the overflow rules, I don't have a strong opinion, but I'd like to think we should keep it even if we disable it for testing. Pattern previews, IMO, should be inert. Since it's actual rendered markup, I could easily see some block combinations causing scrollbars intentionally, and I still think those should be disabled in the preview if we can. Not a strong opinion. |
|
I will test this today and report my findings. However, #38501 indicates this issue is in 5.9, not Gutenberg. It seems many of these pattern preview issues are isolated in 5.9, but do not appear in Gutenberg (ignoring the |
|
I'm thinking of using forbidden art and directly applying this fix to the core. Can anyone recommend a theme that uses |
|
I believe Blockbase bundles some patterns that are 100vh tall. |
|
This is the pattern content that I have been testing with. Just two columns, one with a Cover block with |
|
I did some initial testing and can confirm that PR fixes #38501. I can confirm that we cannot remove overflow or scrollbars are back. How tests fix without GutenbergFirst make sure the plugin isn't active, lost a few minutes because of this 😅 Inside local tests sites root directory:
After you're done with testing, restore backup Screenshots
|
|
Thanks for the core testing instructions @Mamaduka. I just tested and can confirm this fix works. 🙌 I am still seeing a lot of extra space being generated on specific patterns. This happened before this fix, so a separate issue. 5.9 without Gutenberg 5.9 with Gutenberg |
|
@ndiego, let's move that into a separate issue. |
|
The PR looks good to me. I could confirm that it fixes #38501, but it doesn't seem to fix the overflow issue. Additionally, this patch seems to prevent the first case (100vh blocks with vertical margin) of the vertical expanding issue on Chrome, but on Firefox it doesn't work.
However, it doesn't fix the second case (blocks with a height over 100vh) for either browsers. My conclusion is that we still have to leave the overflow and max height hacks after merging this PR. |
Mamaduka
approved these changes
Feb 9, 2022
Mamaduka
added
the
Backport to WP Minor Release
Mamaduka
removed
the
Backport to WP Minor Release
Mamaduka
pushed a commit
that referenced
this pull request
Feb 16, 2022
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.
Description
Fixes #38501.
We're not using
useResizeObservercorrectly. The parent element needs a position. See https://github.com/FezVrasta/react-resize-aware#usage.This needs to be tested will with different block and patters to make sure the position doesn't mess up the content.
Testing Instructions
Screenshots
Types of changes
Checklist:
*.native.jsfiles for terms that need renaming or removal).