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

fix(wp-5.8): do not initialize swiper instances if component is hidden #804

Merged
merged 1 commit into from
Jul 16, 2021

Conversation

dkoo
Copy link
Contributor

@dkoo dkoo commented Jul 15, 2021

All Submissions:

Changes proposed in this Pull Request:

On the WP 5.8 Widgets page, widget areas after the first one are collapsed on initial page load, meaning the blocks within them are hidden. This causes issues with initializing SwiperJS instances inside Post Carousel blocks if those blocks are hidden when the component is first mounted.

This PR updates the editor component for the Post Carousel and waits until the component is visible before initializing its Swiper instance.

How to test the changes in this Pull Request:

  1. On master, go to Appearance > Widgets. In a widget area whose panel is collapsed on page load, add a Post Carousel block and save.
  2. Refresh the page. Observe that the widget area panel is collapsed on page load. Expand it and observe that the Post Carousel block renders with an inert carousel; if you try to interact with it, you should see a JS console error like this:
Uncaught TypeError: currentSlide is undefined
    slideChange webpack:///./src/blocks/carousel/create-swiper.js?:144
    [...]
editor.js:144:30
  1. Check out this branch, rebuild assets, refresh the page. Confirm that after expanding the widget area panel, the Post Carousel block renders a functioning carousel.
  2. Confirm that the carousel renders as expected on the front-end, and that the block still works as expected when placed in a regular post or page or in a widget area in the Widgets section of the Customizer.

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you successfully ran tests with your changes locally?

@dkoo dkoo added the bug Something isn't working label Jul 15, 2021
@dkoo dkoo requested a review from a team July 15, 2021 21:17
@dkoo dkoo self-assigned this Jul 15, 2021
@dkoo dkoo merged commit fe599e1 into master Jul 16, 2021
@dkoo dkoo deleted the fix/swipers-in-widgets-page branch July 16, 2021 15:25
matticbot pushed a commit that referenced this pull request Jul 19, 2021
# [1.30.0-alpha.1](v1.29.2...v1.30.0-alpha.1) (2021-07-19)

### Bug Fixes

* **class-newspack-blocks.php:** fixes assets meta file path for scripts ([#780](#780)) ([a37ff23](a37ff23)), closes [#779](#779)
* allow swiper to reinitialize carousel on attribute changes ([#807](#807)) ([cc9fa30](cc9fa30))
* do not initialize swiper instances if component is hidden ([#804](#804)) ([fe599e1](fe599e1))
* **carousel:** preview performance ([#803](#803)) ([e5fc989](e5fc989))

### Features

* **donate:** streamlined block option w/ Stripe ([#784](#784)) ([10bfb0b](10bfb0b))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 1.30.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

matticbot pushed a commit that referenced this pull request Jul 19, 2021
# [1.30.0](v1.29.2...v1.30.0) (2021-07-19)

### Bug Fixes

* remove autoload dependency from donation class ([#811](#811)) ([c37c885](c37c885))
* **class-newspack-blocks.php:** fixes assets meta file path for scripts ([#780](#780)) ([a37ff23](a37ff23)), closes [#779](#779)
* allow swiper to reinitialize carousel on attribute changes ([#807](#807)) ([cc9fa30](cc9fa30))
* do not initialize swiper instances if component is hidden ([#804](#804)) ([fe599e1](fe599e1))
* **carousel:** preview performance ([#803](#803)) ([e5fc989](e5fc989))

### Features

* **donate:** streamlined block option w/ Stripe ([#784](#784)) ([10bfb0b](10bfb0b))
* **nrh:** donations handling ([#805](#805)) ([821f6db](821f6db))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 1.30.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants