From d286a400d42a61689ef7db7a84c35c0bf23eb5a7 Mon Sep 17 00:00:00 2001 From: cpap Date: Mon, 22 Jun 2020 15:54:13 +0300 Subject: [PATCH 1/4] Slideshow: do not render markup when images === 0 --- extensions/blocks/slideshow/slideshow.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/extensions/blocks/slideshow/slideshow.js b/extensions/blocks/slideshow/slideshow.js index 600afe31db91e..c89ab846a0675 100644 --- a/extensions/blocks/slideshow/slideshow.js +++ b/extensions/blocks/slideshow/slideshow.js @@ -116,6 +116,12 @@ class Slideshow extends Component { render() { const { autoplay, className, delay, effect, images } = this.props; + + // If user has not selected any images, don't print any markup. + if ( ! images.length ) { + return null; + } + // Note: React omits the data attribute if the value is null, but NOT if it is false. // This is the reason for the unusual logic related to autoplay below. /* eslint-disable jsx-a11y/anchor-is-valid */ From ea402c89dd6f04d6797c4c80c20264be151f8080 Mon Sep 17 00:00:00 2001 From: cpap Date: Mon, 22 Jun 2020 16:21:41 +0300 Subject: [PATCH 2/4] Slideshow: do not render markup when images === 0 in AMP mode --- extensions/blocks/slideshow/slideshow.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php index 078eb0fcce61a..cf860b3c3ee01 100644 --- a/extensions/blocks/slideshow/slideshow.php +++ b/extensions/blocks/slideshow/slideshow.php @@ -64,7 +64,7 @@ function render_amp( $attr ) { ); $classes = Jetpack_Gutenberg::block_classes( FEATURE_NAME, $attr, $extras ); - return sprintf( + return empty( $ids ) ? null : sprintf( '
%3$s%4$s%5$s
', esc_attr( $classes ), absint( $wp_block_jetpack_slideshow_id ), From 71beadf86b00e82358511c9bcee603a108f85c1a Mon Sep 17 00:00:00 2001 From: cpap Date: Wed, 24 Jun 2020 10:53:47 +0300 Subject: [PATCH 3/4] Slideshow: return early when images === 0 --- extensions/blocks/slideshow/slideshow.js | 6 +++--- extensions/blocks/slideshow/slideshow.php | 8 ++++++-- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/extensions/blocks/slideshow/slideshow.js b/extensions/blocks/slideshow/slideshow.js index c89ab846a0675..7527ef0eb5126 100644 --- a/extensions/blocks/slideshow/slideshow.js +++ b/extensions/blocks/slideshow/slideshow.js @@ -115,13 +115,13 @@ class Slideshow extends Component { }; render() { - const { autoplay, className, delay, effect, images } = this.props; - // If user has not selected any images, don't print any markup. - if ( ! images.length ) { + if ( ! this.props?.images?.length ) { return null; } + const { autoplay, className, delay, effect, images } = this.props; + // Note: React omits the data attribute if the value is null, but NOT if it is false. // This is the reason for the unusual logic related to autoplay below. /* eslint-disable jsx-a11y/anchor-is-valid */ diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php index cf860b3c3ee01..595ee7c74a86b 100644 --- a/extensions/blocks/slideshow/slideshow.php +++ b/extensions/blocks/slideshow/slideshow.php @@ -52,10 +52,14 @@ function load_assets( $attr, $content ) { * @return string */ function render_amp( $attr ) { + if ( empty( $attr['ids'] ) ) { + return ''; + } + static $wp_block_jetpack_slideshow_id = 0; $wp_block_jetpack_slideshow_id++; - $ids = empty( $attr['ids'] ) ? array() : $attr['ids']; + $ids = $attr['ids']; $autoplay = empty( $attr['autoplay'] ) ? false : true; $extras = array( 'wp-amp-block', @@ -64,7 +68,7 @@ function render_amp( $attr ) { ); $classes = Jetpack_Gutenberg::block_classes( FEATURE_NAME, $attr, $extras ); - return empty( $ids ) ? null : sprintf( + return sprintf( '
%3$s%4$s%5$s
', esc_attr( $classes ), absint( $wp_block_jetpack_slideshow_id ), From aff2683a2b9ae938fa576dc1e18061451e60437d Mon Sep 17 00:00:00 2001 From: cpap Date: Wed, 24 Jun 2020 10:55:36 +0300 Subject: [PATCH 4/4] Slideshow: remove empty line --- extensions/blocks/slideshow/slideshow.js | 1 - 1 file changed, 1 deletion(-) diff --git a/extensions/blocks/slideshow/slideshow.js b/extensions/blocks/slideshow/slideshow.js index 7527ef0eb5126..11357d3eb94c2 100644 --- a/extensions/blocks/slideshow/slideshow.js +++ b/extensions/blocks/slideshow/slideshow.js @@ -121,7 +121,6 @@ class Slideshow extends Component { } const { autoplay, className, delay, effect, images } = this.props; - // Note: React omits the data attribute if the value is null, but NOT if it is false. // This is the reason for the unusual logic related to autoplay below. /* eslint-disable jsx-a11y/anchor-is-valid */