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

Re-render delays in Safari in nested InnerBlocks #30249

Closed
tlovett1 opened this issue Mar 25, 2021 · 4 comments · Fixed by #30995
Closed

Re-render delays in Safari in nested InnerBlocks #30249

tlovett1 opened this issue Mar 25, 2021 · 4 comments · Fixed by #30995
Labels
Browser Issues Issues or PRs that are related to browser specific problems [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P

Comments

@tlovett1
Copy link

Description

I've encountered an issue in Safari when nested InnerBlocks are used. When an inner block is selecting the currently selected block in the editor, it should re-render whenever a new block is selected. In Safari, there is a "lag" such that there is sometimes a second or two delay until one of the inner blocks receives the updated props and is forced to re-render. There is no lag in Chrome.

Hopefully this report makes sense. Please let me know if more info is needed.

Step-by-step reproduction instructions

I've created a proof of concept block to reproduce the problem:

Code: https://gist.github.com/tlovett1/7a6ffcf994f85d41821e9469c35fdea4

Screenshots or screen recording (optional)

Video showing the problem: https://user-images.githubusercontent.com/1844351/112491396-a6330f00-8d56-11eb-9cd5-517de03c71aa.mov

WordPress information

  • WordPress version: 5.7
  • Gutenberg version: 10.2.1
  • Are all plugins except Gutenberg deactivated? Yes
  • Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

  • Operating system: macOS 10.15.7
@talldan
Copy link
Contributor

talldan commented Mar 26, 2021

@tlovett1 I have a feeling this may be a similar problem to #30274

If you move the allowedBlocks and template props to file level constants, does that improve things? (The diff in the above PR is an example of what I mean)

There may also be a similar issue with renderAppender. At the moment doesn't work so well when a function is passed, as React treats that as a new component on every render. (#29925).

I see you need to pass a clientId though, which might be difficult if you're just passing a component to the prop.

@tlovett1
Copy link
Author

tlovett1 commented Mar 26, 2021

I removed the custom renderAppender and moved template and allowedBlocks to file level constants. Problem still occurs.

@skorasaurus skorasaurus added Browser Issues Issues or PRs that are related to browser specific problems [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P labels Mar 26, 2021
@Mamaduka
Copy link
Member

I was able to reproduce the issue in Chrome by adding more blocks to the template.

It's more consistent in Safari, especially when using "Spotlight mode." In Chrome, delay happens once out of every 5 or 10 selections.

@Mamaduka
Copy link
Member

Mamaduka commented Apr 21, 2021

The issue should be fixed by #30995. I'm no longer able to reproduce the issue when testing with the PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Browser Issues Issues or PRs that are related to browser specific problems [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants