Web-stories-wp: Rebar plugin conflicts with Stories Embed Block

[ernee]

Bug Description

As reported in this issue, the Rebar- Reading Progress Bar plugin can prevent the Stories Embed Block from rendering properly (spinner continuously loading, story title visible).

Troubleshooting revealed blocking this file from the Rebar plugin allowed the embed to complete loading:

/wp-content/plugins/rebar/js/rebar.min.js?ver=2.0.2

(Contents here)

The user temporarily disabled the plugin as well and it allowed the embed to complete loading.

Expected Behaviour

The Stories embed should fully render and function without issue.

Steps to Reproduce

Screenshots

Additional Context

• Plugin Version: 1.0.0-beta.1

Rebar Plugin 2.0.2

---

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance Criteria

Implementation Brief

[swissspidy]

I think I know where the problem is.

Both this script and the amp-story-player script use window.onload to initialize their scripts.

That's not really a good practice because only 1 function can be added to window.onload, so the last one wins. In this case, the Rebar script was probably loaded after the player's script.

I will report this upstream.

[swissspidy]

Upstream issue: https://github.com/ampproject/amphtml/issues/29335

[swissspidy]

Since the upstream issue was fixed on Friday, it should get promoted to the Beta channel tomorrow, and then the Stable channel next Tuesday (as per the docs)

Temporarily switching to the Nightly channel at https://cdn.ampproject.org/experiments.html I was able to verify that the issue was indeed resolved.

[Dennis-95]

i'm not 100% sure if i did it corretly, but i switched on the nightly mode on my domain (claudia-makeup.com) in this way

then i cleared the cache with rebar plugin up but is seems that it's always stucked in infinite loading.
Can you confirm i did it correctly?

[swissspidy]

@Dennis-95 That looks correct, but it seems like WP Rocket is interfering, as the https://cdn.ampproject.org/amp-story-player-v0.js script is not loaded at all. If I visit https://claudia-makeup.com/idee-make-up/tendenze-estate-2020/?nocache to disable WP Rocket it works just fine. As previously mentioned at #3086, try disabling the _Combine JavaScript files_ option in WP Rocket.

[Dennis-95]

@Dennis-95 That looks correct, but it seems like WP Rocket is interfering, as the https://cdn.ampproject.org/amp-story-player-v0.js script is not loaded at all. If I visit https://claudia-makeup.com/idee-make-up/tendenze-estate-2020/?nocache to disable WP Rocket it works just fine. As previously mentioned at #3086, try disabling the _Combine JavaScript files_ option in WP Rocket.

I tried to exclude your url from wp rocket optimization and it seems working now, thanks!
Should i wait the next update to have this fix public right?

Thankd and best regards

PS: I'm working on a new post with some issues i faced in release today

[swissspidy]

Should i wait the next update to have this fix public right?

Yes. We're looking into how we can improve the compatibility with WP Rocket and other plugins so that you don't have to manually change the options to fix this.