From 7d56700338cd5cf02fb9a8e1b0ba1966c54f1171 Mon Sep 17 00:00:00 2001 From: "Soare Robert Daniel (Mac 2023)" Date: Mon, 21 Aug 2023 17:32:04 +0300 Subject: [PATCH 1/3] fix: slider error block creation --- src/blocks/blocks/slider/edit.js | 30 +++++++++++++++++++----------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/src/blocks/blocks/slider/edit.js b/src/blocks/blocks/slider/edit.js index 9fdcd9cd7..cbc6ff608 100644 --- a/src/blocks/blocks/slider/edit.js +++ b/src/blocks/blocks/slider/edit.js @@ -66,6 +66,7 @@ const Edit = ({ const initObserver = useRef( null ); const sliderRef = useRef( null ); + const containerRef = useRef( null ); useEffect( () => { try { @@ -89,27 +90,26 @@ const Edit = ({ useEffect( () => { - const container = document.querySelector( `#${ attributes.id }` ) ?? getEditorIframe()?.contentDocument?.querySelector( `#${ attributes.id }` ); - - if ( container ) { + if ( containerRef.current ) { initObserver.current = new IntersectionObserver( ( entries ) => { entries.forEach( entry => { if ( entry.isIntersecting && 0 <= entry.intersectionRect.height ) { if ( attributes.images.length ) { initSlider(); - initObserver.current?.unobserve( container ); + initObserver.current?.unobserve( containerRef.current ); } } }); }, options ); - initObserver.current?.observe( container ); + initObserver.current?.observe( containerRef.current ); } return () => { if ( attributes?.images?.length ) { sliderRef?.current?.destroy(); } + initObserver.current?.disconnect(); }; }, [ attributes.id ]); @@ -136,12 +136,12 @@ const Edit = ({ const initSlider = () => { // Clean up old references. - if ( null !== sliderRef.current ) { + if ( Boolean( sliderRef.current ) ) { sliderRef.current?.destroy?.(); + sliderRef.current = undefined; } const iframe = getEditorIframe(); - const container = document?.querySelector( `#${ attributes.id }` ) ?? iframe?.contentDocument?.querySelector( `#${ attributes.id }` ); const config = { type: 'carousel', @@ -167,7 +167,7 @@ const Edit = ({ if ( Boolean( iframe ) ) { const initFrame = () => { if ( iframe?.contentWindow?.Glide ) { - sliderRef.current = new iframe.contentWindow.Glide( container, config ).mount(); + sliderRef.current = new iframe.contentWindow.Glide( containerRef.current, config ).mount(); } }; @@ -179,7 +179,7 @@ const Edit = ({ initFrame(); } } else { - sliderRef.current = new window.Glide( container, config ).mount(); + sliderRef.current = new window.Glide( containerRef.current, config ).mount(); } }; @@ -192,8 +192,6 @@ const Edit = ({ caption: image.caption }) ) }); - - initSlider(); }; const changePerView = value => { @@ -204,6 +202,15 @@ const Edit = ({ }); }; + useEffect( () => { + + if ( ! attributes.images.length ) { + return; + } + + initSlider(); + }, [ attributes.images ]); + useEffect( () => { if ( Boolean( sliderRef?.current?.update ) ) { sliderRef.current.update({ @@ -257,6 +264,7 @@ const Edit = ({ id={ attributes.id } className="glide" style={ inlineStyles } + ref={ containerRef } >
Date: Tue, 22 Aug 2023 09:23:41 +0300 Subject: [PATCH 2/3] chore: error handling & clean-up --- src/blocks/blocks/slider/edit.js | 44 +++++++++++++++----------------- 1 file changed, 20 insertions(+), 24 deletions(-) diff --git a/src/blocks/blocks/slider/edit.js b/src/blocks/blocks/slider/edit.js index cbc6ff608..f6362604b 100644 --- a/src/blocks/blocks/slider/edit.js +++ b/src/blocks/blocks/slider/edit.js @@ -117,9 +117,7 @@ const Edit = ({ if ( attributes.images.length ) { setSelectedImage( null ); - if ( null !== sliderRef.current && attributes.id ) { - initSlider(); - } + initSlider(); } }, [ isSelected, attributes.id, sliderRef.current, attributes.images, attributes.width ]); @@ -164,22 +162,29 @@ const Edit = ({ /** * Init the Slider inside the iframe. */ - if ( Boolean( iframe ) ) { - const initFrame = () => { - if ( iframe?.contentWindow?.Glide ) { - sliderRef.current = new iframe.contentWindow.Glide( containerRef.current, config ).mount(); - } - }; + try { + if ( Boolean( iframe ) ) { + const initFrame = () => { + if ( iframe?.contentWindow?.Glide ) { + sliderRef.current = new iframe.contentWindow.Glide( containerRef.current, config ).mount(); + } + }; - if ( ! Boolean( iframe.contentDocument?.querySelector( '#glidejs-js' ) ) ) { + if ( ! Boolean( iframe.contentDocument?.querySelector( '#glidejs-js' ) ) ) { - // Load the JS file into the iframe. - copyScriptAssetToIframe( '#glidejs-js', initFrame ); + // Load the JS file into the iframe. + copyScriptAssetToIframe( '#glidejs-js', initFrame ); + } else { + initFrame(); + } } else { - initFrame(); + sliderRef.current = new window.Glide( containerRef.current, config ).mount(); } - } else { - sliderRef.current = new window.Glide( containerRef.current, config ).mount(); + } catch ( e ) { + + // We don't want to break the block if the slider fails to init. + // The main cause is when the block runs inside an iFrame and can not access the root node. + console.warn( e ); } }; @@ -202,15 +207,6 @@ const Edit = ({ }); }; - useEffect( () => { - - if ( ! attributes.images.length ) { - return; - } - - initSlider(); - }, [ attributes.images ]); - useEffect( () => { if ( Boolean( sliderRef?.current?.update ) ) { sliderRef.current.update({ From 2ff1ae6fbac663cc9d544504e36edcdbcf158b19 Mon Sep 17 00:00:00 2001 From: "Soare Robert Daniel (Mac 2023)" Date: Tue, 22 Aug 2023 09:59:22 +0300 Subject: [PATCH 3/3] chore: prevent errors in Inserter Block Preview --- src/blocks/blocks/slider/edit.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/blocks/blocks/slider/edit.js b/src/blocks/blocks/slider/edit.js index f6362604b..578f5e429 100644 --- a/src/blocks/blocks/slider/edit.js +++ b/src/blocks/blocks/slider/edit.js @@ -94,7 +94,7 @@ const Edit = ({ initObserver.current = new IntersectionObserver( ( entries ) => { entries.forEach( entry => { if ( entry.isIntersecting && 0 <= entry.intersectionRect.height ) { - if ( attributes.images.length ) { + if ( attributes.images && 0 < attributes.images.length ) { initSlider(); initObserver.current?.unobserve( containerRef.current ); } @@ -114,7 +114,7 @@ const Edit = ({ }, [ attributes.id ]); useEffect( () => { - if ( attributes.images.length ) { + if ( attributes.images && 0 < attributes.images.length && attributes.id ) { setSelectedImage( null ); initSlider(); @@ -159,6 +159,11 @@ const Edit = ({ } }; + // This will prevent the slider from initializing if the block is not in the DOM that it can reach (like Inserter block preview) + if ( ! Boolean( document.querySelector( `#${ attributes.id }` ) ?? iframe?.contentDocument?.querySelector( `#${ attributes.id }` ) ) ) { + return; + } + /** * Init the Slider inside the iframe. */