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.

Sign up for GitHub

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

Issue 2305 - add tab index to carousel thumbnails #2312

Merged
merged 7 commits into from
May 9, 2022
Merged

Issue 2305 - add tab index to carousel thumbnails #2312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8d3da2c
handle tab focus for carousel block thumbnails
snovosel Mar 8, 2022
95db67b
deprecate carousel block correctly
snovosel Mar 8, 2022
70005b8
undo prop order eslint changes
AnthonyLedesma Mar 23, 2022
26d54b6
handle deprecations of gallery carousel
snovosel-godaddy Apr 12, 2022
39e2ea4
add aria-label to gallery thumbnail
snovosel-godaddy May 9, 2022
89b3c2c
update gallery carousel snapshot
snovosel-godaddy May 9, 2022
f77cc91
resolve merge conflict
snovosel-godaddy May 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
181 changes: 181 additions & 0 deletions src/blocks/gallery-carousel/deprecated.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/* eslint-disable sort-keys */
/* eslint-disable react/jsx-sort-props */
/**
* External dependencies
*/
Expand Down Expand Up @@ -818,6 +820,185 @@ const deprecated =
);
},
},
{
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(
'coblocks-gallery-carousel-swiper-container',
'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 = ( 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',
{
[ `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 (
<div aria-label={ __( `Carousel Gallery`, 'coblocks' ) } >
<div className={ innerClasses }>
<div className={ swiperClasses } data-swiper={ JSON.stringify( swiperOptions ) } id={ uuid } style={ swiperStyles } >
<div className="swiper-wrapper">
{ images.map( ( image, index ) => {
return (
<div className="swiper-slide" key={ index }>
<div
className="coblocks-gallery--item"
role="button"
tabIndex={ index }
>
<figure className={ figureClasses }>
<img
alt={ image.alt }
className={ image.id ? `wp-image-${ image.id }` : null }
data-id={ image.id }
data-link={ image.link }
src={ image.url }
/>
</figure>
<RichText.Content className={ captionClasses } tagName="figcaption" value={ image.caption } />
</div>
</div>
);
} ) }
</div>
{ prevNextButtons && (
<>
<button className={ `nav-button__prev` } id={ `${ uuid }-prev` } >
<svg className="icon" style={ { transform: 'rotate(180deg)' } } />
</button>
<button className={ `nav-button__next` } id={ `${ uuid }-next` } >
<svg className="icon" />
</button>
</>
) }
</div>
{ thumbnails && (
<div className={ thumbnailContainerClasses }>
{ images.map( ( item, index ) => {
return (
<div className={ thumbnailClasses( index ) } key={ index } style={ { height: '80px', width: '100px' } } >
<img
alt={ item.alt }
data-id={ item.id }
data-link={ item.link }
src={ item.url }
style={ { height: '100%', width: '100%' } }
/>
</div>
);
} ) }
</div>
) }
</div>
</div>
);
},
},
];

export default deprecated;
4 changes: 2 additions & 2 deletions src/blocks/gallery-carousel/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,15 +171,15 @@ const save = ( props ) => {
<div className={ thumbnailContainerClasses }>
{ images.map( ( item, index ) => {
return (
<div className={ thumbnailClasses( index ) } key={ index } style={ { height: '80px', width: '100px' } } >
<button aria-label={ __( 'gallery thumbnail', 'coblocks' ) } className={ thumbnailClasses( index ) } key={ index } style={ { height: '80px', width: '100px' } } tabIndex="0" >
<img
alt={ item.alt }
data-id={ item.id }
data-link={ item.link }
src={ item.url }
style={ { height: '100%', width: '100%' } }
/>
</div>
</button>
);
} ) }
</div>
Expand Down
2 changes: 2 additions & 0 deletions src/blocks/gallery-carousel/styles/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,9 +111,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 {
Expand Down
2 changes: 1 addition & 1 deletion src/blocks/gallery-carousel/test/__snapshots__/save.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`] = `
"<!-- wp:coblocks/gallery-carousel {\\"thumbnails\\":true} -->
<div aria-label=\\"Carousel Gallery\\" class=\\"wp-block-coblocks-gallery-carousel\\"><div class=\\"coblocks-gallery-carousel-swiper-container is-cropped coblocks-gallery has-no-alignment has-caption-style-dark has-horizontal-gutter\\"><div class=\\"has-carousel has-carousel-lrg swiper-container \\" data-swiper=\\"{&quot;alignCells&quot;:false,&quot;autoPlay&quot;:false,&quot;autoPlaySpeed&quot;:3000,&quot;draggable&quot;:true,&quot;freeScroll&quot;:false,&quot;loop&quot;:false,&quot;navigation&quot;:true,&quot;pageDots&quot;:false,&quot;pauseHover&quot;:false,&quot;responsiveHeight&quot;:false,&quot;slidesPerView&quot;:2,&quot;thumbnails&quot;:true,&quot;uuid&quot;:&quot;12345&quot;}\\" id=\\"12345\\" style=\\"height:400px\\"><div class=\\"swiper-wrapper\\"><div class=\\"swiper-slide\\"><div class=\\"coblocks-gallery--item\\" role=\\"button\\" tabindex=\\"0\\"><figure class=\\"coblocks-gallery--figure has-margin-left-5 has-margin-left-mobile-5 has-margin-right-5 has-margin-right-mobile-5\\"><img class=\\"wp-image-1\\" data-id=\\"1\\" src=\\"https://wordpress.com/wp-content/uploads/1234/56/image-1.jpg\\"/></figure><figcaption class=\\"coblocks-gallery--caption coblocks-gallery--primary-caption\\"></figcaption></div></div><div class=\\"swiper-slide\\"><div class=\\"coblocks-gallery--item\\" role=\\"button\\" tabindex=\\"1\\"><figure class=\\"coblocks-gallery--figure has-margin-left-5 has-margin-left-mobile-5 has-margin-right-5 has-margin-right-mobile-5\\"><img class=\\"wp-image-2\\" data-id=\\"2\\" src=\\"https://wordpress.com/wp-content/uploads/1234/56/image-2.jpg\\"/></figure><figcaption class=\\"coblocks-gallery--caption coblocks-gallery--primary-caption\\"></figcaption></div></div></div><button class=\\"nav-button__prev\\" id=\\"12345-prev\\"><svg class=\\"icon\\" style=\\"transform:rotate(180deg)\\"></svg></button><button class=\\"nav-button__next\\" id=\\"12345-next\\"><svg class=\\"icon\\"></svg></button></div><div class=\\"wp-block-coblocks-gallery-carousel-thumbnail-pagination has-margin-top-5 has-margin-top-mobile-5\\"><div class=\\"wp-block-coblocks-gallery-carousel-thumbnail wp-block-coblocks-gallery-carousel-thumbnail-0 has-margin-left-5 has-margin-left-mobile-5 has-margin-right-5 has-margin-right-mobile-5\\" style=\\"height:80px;width:100px\\"><img data-id=\\"1\\" src=\\"https://wordpress.com/wp-content/uploads/1234/56/image-1.jpg\\" style=\\"height:100%;width:100%\\"/></div><div class=\\"wp-block-coblocks-gallery-carousel-thumbnail wp-block-coblocks-gallery-carousel-thumbnail-1 has-margin-left-5 has-margin-left-mobile-5 has-margin-right-5 has-margin-right-mobile-5\\" style=\\"height:80px;width:100px\\"><img data-id=\\"2\\" src=\\"https://wordpress.com/wp-content/uploads/1234/56/image-2.jpg\\" style=\\"height:100%;width:100%\\"/></div></div></div></div>
<div aria-label=\\"Carousel Gallery\\" class=\\"wp-block-coblocks-gallery-carousel\\"><div class=\\"coblocks-gallery-carousel-swiper-container is-cropped coblocks-gallery has-no-alignment has-caption-style-dark has-horizontal-gutter\\"><div class=\\"has-carousel has-carousel-lrg swiper-container \\" data-swiper=\\"{&quot;alignCells&quot;:false,&quot;autoPlay&quot;:false,&quot;autoPlaySpeed&quot;:3000,&quot;draggable&quot;:true,&quot;freeScroll&quot;:false,&quot;loop&quot;:false,&quot;navigation&quot;:true,&quot;pageDots&quot;:false,&quot;pauseHover&quot;:false,&quot;responsiveHeight&quot;:false,&quot;slidesPerView&quot;:2,&quot;thumbnails&quot;:true,&quot;uuid&quot;:&quot;12345&quot;}\\" id=\\"12345\\" style=\\"height:400px\\"><div class=\\"swiper-wrapper\\"><div class=\\"swiper-slide\\"><div class=\\"coblocks-gallery--item\\" role=\\"button\\" tabindex=\\"0\\"><figure class=\\"coblocks-gallery--figure has-margin-left-5 has-margin-left-mobile-5 has-margin-right-5 has-margin-right-mobile-5\\"><img class=\\"wp-image-1\\" data-id=\\"1\\" src=\\"https://wordpress.com/wp-content/uploads/1234/56/image-1.jpg\\"/></figure><figcaption class=\\"coblocks-gallery--caption coblocks-gallery--primary-caption\\"></figcaption></div></div><div class=\\"swiper-slide\\"><div class=\\"coblocks-gallery--item\\" role=\\"button\\" tabindex=\\"1\\"><figure class=\\"coblocks-gallery--figure has-margin-left-5 has-margin-left-mobile-5 has-margin-right-5 has-margin-right-mobile-5\\"><img class=\\"wp-image-2\\" data-id=\\"2\\" src=\\"https://wordpress.com/wp-content/uploads/1234/56/image-2.jpg\\"/></figure><figcaption class=\\"coblocks-gallery--caption coblocks-gallery--primary-caption\\"></figcaption></div></div></div><button class=\\"nav-button__prev\\" id=\\"12345-prev\\"><svg class=\\"icon\\" style=\\"transform:rotate(180deg)\\"></svg></button><button class=\\"nav-button__next\\" id=\\"12345-next\\"><svg class=\\"icon\\"></svg></button></div><div class=\\"wp-block-coblocks-gallery-carousel-thumbnail-pagination has-margin-top-5 has-margin-top-mobile-5\\"><button aria-label=\\"gallery thumbnail\\" class=\\"wp-block-coblocks-gallery-carousel-thumbnail wp-block-coblocks-gallery-carousel-thumbnail-0 has-margin-left-5 has-margin-left-mobile-5 has-margin-right-5 has-margin-right-mobile-5\\" style=\\"height:80px;width:100px\\" tabindex=\\"0\\"><img data-id=\\"1\\" src=\\"https://wordpress.com/wp-content/uploads/1234/56/image-1.jpg\\" style=\\"height:100%;width:100%\\"/></button><button aria-label=\\"gallery thumbnail\\" class=\\"wp-block-coblocks-gallery-carousel-thumbnail wp-block-coblocks-gallery-carousel-thumbnail-1 has-margin-left-5 has-margin-left-mobile-5 has-margin-right-5 has-margin-right-mobile-5\\" style=\\"height:80px;width:100px\\" tabindex=\\"0\\"><img data-id=\\"2\\" src=\\"https://wordpress.com/wp-content/uploads/1234/56/image-2.jpg\\" style=\\"height:100%;width:100%\\"/></button></div></div></div>
<!-- /wp:coblocks/gallery-carousel -->"
`;

Expand Down