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

Add load listener to live preview component #38925

Conversation

KevinBatdorf
Copy link
Contributor

Description

This PR attempts to solve height issues that appear within live preview pattern components. It adds an event listener to the nested iFrame that will listen for load events that bubble up, and fire a resize event to trigger a re-render (if the height/width have changed). There is also a 100ms debounce wrapper.

I couldn't find a comprehensive list of what fires the load event, but images are probably the main concern here. I know stylesheets (link tags) and other items also fire the event.

Testing Instructions

I'm not confident in how to reproduce this as it seems to only happen to me on occasion. It happens enough though that I do have screenshots and video of it though. It's also happening to others on our team as well, so I suspect its common.

(maybe others can chime in if they've experienced this as well)

Screenshots

Example of it being cut off:

screen_shot_2022-02-16_at_6 49 19_pm

Component renders that occur before this PR + load events logged (onLoad={console.log}):

load events firing after render

This PR, showing the additional render after incoming load events

Screen Shot 2022-02-18 at 9 55 14 PM

Types of changes

Enhancement

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.

Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

Choose a reason for hiding this comment

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

cc: @youknowriad that I think was looking into improving the pattern previews.

@KevinBatdorf KevinBatdorf deleted the enhancement/add-load-listener-to-live-preview-component branch April 7, 2022 00:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants