From 8d3da2c06a0d0a866bb1c0ce919816869ec8658e Mon Sep 17 00:00:00 2001 From: snovosel Date: Tue, 8 Mar 2022 09:09:00 -0500 Subject: [PATCH 1/6] handle tab focus for carousel block thumbnails --- src/blocks/gallery-carousel/save.js | 4 ++-- src/blocks/gallery-carousel/styles/style.scss | 2 ++ .../gallery-carousel/test/__snapshots__/save.spec.js.snap | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/blocks/gallery-carousel/save.js b/src/blocks/gallery-carousel/save.js index de8a8838dc2..b061e02cde4 100644 --- a/src/blocks/gallery-carousel/save.js +++ b/src/blocks/gallery-carousel/save.js @@ -167,7 +167,7 @@ const save = ( props ) => {
{ images.map( ( item, index ) => { return ( -
+
+ ); } ) }
diff --git a/src/blocks/gallery-carousel/styles/style.scss b/src/blocks/gallery-carousel/styles/style.scss index d04ba5d76e2..100e8c4f88d 100644 --- a/src/blocks/gallery-carousel/styles/style.scss +++ b/src/blocks/gallery-carousel/styles/style.scss @@ -108,9 +108,11 @@ } .wp-block-coblocks-gallery-carousel-thumbnail { + border: none; cursor: pointer; min-width: 100px; opacity: 0.4; + padding: 0; } .wp-block-coblocks-gallery-carousel-thumbnail.is-active { diff --git a/src/blocks/gallery-carousel/test/__snapshots__/save.spec.js.snap b/src/blocks/gallery-carousel/test/__snapshots__/save.spec.js.snap index de06ebaefb6..b096f182093 100644 --- a/src/blocks/gallery-carousel/test/__snapshots__/save.spec.js.snap +++ b/src/blocks/gallery-carousel/test/__snapshots__/save.spec.js.snap @@ -92,7 +92,7 @@ exports[`coblocks/gallery-carousel should have navigation swiper setting of '.\$ exports[`coblocks/gallery-carousel should have thumbnails on swiper if thumbnails enabled 1`] = ` " -
+
" `; From 95db67b45e6c8ef9edd56c7e586b16c4a2d33c3a Mon Sep 17 00:00:00 2001 From: snovosel Date: Tue, 8 Mar 2022 09:21:23 -0500 Subject: [PATCH 2/6] deprecate carousel block correctly --- src/blocks/gallery-carousel/deprecated.js | 187 +++++++++++++++++++++- 1 file changed, 181 insertions(+), 6 deletions(-) diff --git a/src/blocks/gallery-carousel/deprecated.js b/src/blocks/gallery-carousel/deprecated.js index 08b87de9dc7..8984c5ed7ec 100644 --- a/src/blocks/gallery-carousel/deprecated.js +++ b/src/blocks/gallery-carousel/deprecated.js @@ -775,14 +775,14 @@ const deprecated =
{ images.map( ( image ) => { - const img = {; + const img = {; return ( -
+
{ img }
@@ -797,9 +797,9 @@ const deprecated = data-flickity={ JSON.stringify( navOptions ) } > { images.map( ( image ) => { - const img = {; + const img = {; return ( -
+
{ img }
@@ -809,7 +809,182 @@ const deprecated =
) : null }
- { ! RichText.isEmpty( primaryCaption ) && } + { ! RichText.isEmpty( primaryCaption ) && } +
+ ); + }, + }, + { + attributes: { + ...GalleryAttributes, + ...BackgroundAttributes, + ...metadata.attributes, + }, + save: ( { attributes } ) => { + const { + autoPlay, + autoPlaySpeed, + draggable, + gutter, + images, + pauseHover, + freeScroll, + prevNextButtons, + thumbnails, + responsiveHeight, + lightbox, + loop, + pageDots, + gutterMobile, + height, + alignCells, + gridSize, + navForClass, + } = attributes; + + if ( images.length <= 0 ) { + return null; + } + + const innerClasses = classnames( + 'is-cropped', + ...GalleryClasses( attributes ), + { + 'has-horizontal-gutter': gutter > 0, + 'has-lightbox': lightbox, + 'has-no-thumbnails': ! thumbnails, + } + ); + + const figureClasses = classnames( + 'coblocks-gallery--figure', { + [ `has-margin-left-${ gutter }` ]: gutter > 0, + [ `has-margin-left-mobile-${ gutterMobile }` ]: gutterMobile > 0, + [ `has-margin-right-${ gutter }` ]: gutter > 0, + [ `has-margin-right-mobile-${ gutterMobile }` ]: gutterMobile > 0, + } + ); + + const thumbnailClasses = classnames( + 'wp-block-coblocks-gallery-carousel-thumbnail', + { + [ `has-margin-left-${ gutter }` ]: gutter > 0, + [ `has-margin-left-mobile-${ gutterMobile }` ]: gutterMobile > 0, + [ `has-margin-right-${ gutter }` ]: gutter > 0, + [ `has-margin-right-mobile-${ gutterMobile }` ]: gutterMobile > 0, + } + ); + + const thumbnailContainerClasses = classnames( + 'wp-block-coblocks-gallery-carousel-thumbnail-pagination', + { + [ `has-margin-top-${ gutter }` ]: gutter > 0, + [ `has-margin-top-mobile-${ gutterMobile }` ]: gutterMobile > 0, + } + ); + + const captionClasses = classnames( + 'coblocks-gallery--caption', + 'coblocks-gallery--primary-caption', {} + ); + + const swiperClasses = classnames( + 'has-carousel', + `has-carousel-${ gridSize }`, + 'swiper-container', + { + 'has-aligned-cells': alignCells, + 'has-responsive-height': responsiveHeight, + [ navForClass ]: thumbnails, + } + ); + + const swiperStyles = { + height: height ? `${ height }px` : undefined, + }; + + const uuid = '12345'; + + const swiperSizing = { + lrg: 2, + med: 4, + sml: 5, + xlrg: 1, + }; + + const swiperOptions = { + alignCells, + autoPlay, + autoPlaySpeed, + draggable, + freeScroll, + loop, + navigation: prevNextButtons, + pageDots, + pauseHover, + responsiveHeight, + slidesPerView: swiperSizing[ gridSize ], + thumbnails, + uuid, + }; + + return ( +
+
+
+
+ { images.map( ( image, index ) => { + return ( +
+
+
+ { +
+ +
+
+ ); + } ) } +
+ { prevNextButtons && ( + <> + + + + ) } +
+ { thumbnails && ( +
+ { images.map( ( item, index ) => { + return ( +
+ { +
+ ); + } ) } +
+ ) } +
); }, From 70005b864c7dada3ff3409583aa09b10979d8a9d Mon Sep 17 00:00:00 2001 From: AnthonyLedesma Date: Wed, 23 Mar 2022 13:24:35 -0700 Subject: [PATCH 3/6] undo prop order eslint changes --- src/blocks/gallery-carousel/deprecated.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/blocks/gallery-carousel/deprecated.js b/src/blocks/gallery-carousel/deprecated.js index 8984c5ed7ec..eb3cd7afac1 100644 --- a/src/blocks/gallery-carousel/deprecated.js +++ b/src/blocks/gallery-carousel/deprecated.js @@ -1,3 +1,5 @@ +/* eslint-disable sort-keys */ +/* eslint-disable react/jsx-sort-props */ /** * External dependencies */ @@ -775,14 +777,14 @@ const deprecated =
{ images.map( ( image ) => { - const img = {; + const img = {; return ( -
+
{ img }
@@ -797,9 +799,9 @@ const deprecated = data-flickity={ JSON.stringify( navOptions ) } > { images.map( ( image ) => { - const img = {; + const img = {; return ( -
+
{ img }
@@ -809,7 +811,7 @@ const deprecated =
) : null }
- { ! RichText.isEmpty( primaryCaption ) && } + { ! RichText.isEmpty( primaryCaption ) && }
); }, From 26d54b6c7fb2a76aeba2edcd5d04dc5b8c390a58 Mon Sep 17 00:00:00 2001 From: snovosel Date: Tue, 12 Apr 2022 11:13:46 -0400 Subject: [PATCH 4/6] handle deprecations of gallery carousel --- src/blocks/gallery-carousel/deprecated.js | 28 ++++++++------- src/blocks/gallery-carousel/save.js | 24 +++++++------ .../test/__snapshots__/save.spec.js.snap | 34 +++++++++---------- 3 files changed, 47 insertions(+), 39 deletions(-) diff --git a/src/blocks/gallery-carousel/deprecated.js b/src/blocks/gallery-carousel/deprecated.js index eb3cd7afac1..50715667395 100644 --- a/src/blocks/gallery-carousel/deprecated.js +++ b/src/blocks/gallery-carousel/deprecated.js @@ -849,6 +849,7 @@ const deprecated = } const innerClasses = classnames( + 'coblocks-gallery-carousel-swiper-container', 'is-cropped', ...GalleryClasses( attributes ), { @@ -867,15 +868,18 @@ const deprecated = } ); - const thumbnailClasses = classnames( - 'wp-block-coblocks-gallery-carousel-thumbnail', - { - [ `has-margin-left-${ gutter }` ]: gutter > 0, - [ `has-margin-left-mobile-${ gutterMobile }` ]: gutterMobile > 0, - [ `has-margin-right-${ gutter }` ]: gutter > 0, - [ `has-margin-right-mobile-${ gutterMobile }` ]: gutterMobile > 0, - } - ); + const thumbnailClasses = ( index ) => { + return classnames( + 'wp-block-coblocks-gallery-carousel-thumbnail', + `wp-block-coblocks-gallery-carousel-thumbnail-${ index }`, + { + [ `has-margin-left-${ gutter }` ]: gutter > 0, + [ `has-margin-left-mobile-${ gutterMobile }` ]: gutterMobile > 0, + [ `has-margin-right-${ gutter }` ]: gutter > 0, + [ `has-margin-right-mobile-${ gutterMobile }` ]: gutterMobile > 0, + } + ); + }; const thumbnailContainerClasses = classnames( 'wp-block-coblocks-gallery-carousel-thumbnail-pagination', @@ -933,8 +937,8 @@ const deprecated = return (
-
-
+
+
{ images.map( ( image, index ) => { return (
@@ -973,7 +977,7 @@ const deprecated =
{ images.map( ( item, index ) => { return ( -
+
{ { } const innerClasses = classnames( + 'coblocks-gallery-carousel-swiper-container', 'is-cropped', ...GalleryClasses( attributes ), { @@ -61,14 +62,17 @@ const save = ( props ) => { } ); - const thumbnailClasses = classnames( - 'wp-block-coblocks-gallery-carousel-thumbnail', - { - [ `has-margin-left-${ gutter }` ]: gutter > 0, - [ `has-margin-left-mobile-${ gutterMobile }` ]: gutterMobile > 0, - [ `has-margin-right-${ gutter }` ]: gutter > 0, - [ `has-margin-right-mobile-${ gutterMobile }` ]: gutterMobile > 0, - } + const thumbnailClasses = ( index ) => ( + classnames( + 'wp-block-coblocks-gallery-carousel-thumbnail', + `wp-block-coblocks-gallery-carousel-thumbnail-${ index }`, + { + [ `has-margin-left-${ gutter }` ]: gutter > 0, + [ `has-margin-left-mobile-${ gutterMobile }` ]: gutterMobile > 0, + [ `has-margin-right-${ gutter }` ]: gutter > 0, + [ `has-margin-right-mobile-${ gutterMobile }` ]: gutterMobile > 0, + } + ) ); const thumbnailContainerClasses = classnames( @@ -128,7 +132,7 @@ const save = ( props ) => {
-
+
{ images.map( ( image, index ) => { return (
@@ -167,7 +171,7 @@ const save = ( props ) => {
{ images.map( ( item, index ) => { return ( -
+
" `; exports[`coblocks/gallery-carousel should have 'draggable' property set in the data-swiper attribute when draggable enabled. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have 'height' property within the 'style' attribute with the height attribute set. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have 'pageDots' property set in the data-flickity attribute when pageDots enabled. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-aligned-cells' with alignCells enabled. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-carousel-large' with gridSize set to 'large'. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-carousel-xlarge' with gridSize set to 'xlarge'. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-filter-dim' with filter set to 'dim'. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-filter-grayscale' with filter set to 'grayscale'. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-filter-saturation' with filter set to 'saturation'. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-filter-sepia' with filter set to 'sepia'. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-filter-vintage' with filter set to 'vintage'. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-lightbox' with lightbox enabled. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-responsive-height' with responsiveHeight enabled. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have navigation swiper setting of '.\${ attributes.navigation }' with arrow navigation buttons enabled 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have thumbnails on swiper if thumbnails enabled 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should render with images 1`] = ` " -
+
" `; From 39e2ea47247daa41e0e8b3cf3f0fc59cc5a93cae Mon Sep 17 00:00:00 2001 From: snovosel Date: Mon, 9 May 2022 10:39:31 -0400 Subject: [PATCH 5/6] add aria-label to gallery thumbnail --- src/blocks/gallery-carousel/save.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/blocks/gallery-carousel/save.js b/src/blocks/gallery-carousel/save.js index 48272f6e5d1..676564d5462 100644 --- a/src/blocks/gallery-carousel/save.js +++ b/src/blocks/gallery-carousel/save.js @@ -171,7 +171,7 @@ const save = ( props ) => {
{ images.map( ( item, index ) => { return ( -
+
" `;