Skip to content
This repository was archived by the owner on Feb 27, 2024. It is now read-only.

Commit c19f32d

Browse files
dcooneydcooney
committed
Adding Gallery block
1 parent 49447f7 commit c19f32d

File tree

7 files changed

+203
-34
lines changed

7 files changed

+203
-34
lines changed

‎components/atoms/Image/Image.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Link from 'next/link'
22
import PropTypes from 'prop-types'
33
import React from 'react'
4-
import RichText from '../RichText'
4+
import RichText from '@/components/atoms/RichText'
55
import styles from './Image.module.css'
66
import cn from 'classnames'
77

@@ -53,7 +53,11 @@ export default function Image({
5353
</a>
5454
</Link>
5555
) : (
56-
<img src={url} alt={alt} className={cn(className, `image-${id}`)} />
56+
<img
57+
src={url}
58+
alt={alt}
59+
className={cn(className, id && `image-${id}`)}
60+
/>
5761
)}
5862
{!!caption && (
5963
<div className={styles.caption}>

‎components/blocks/BlockImageGallery/BlockImageGallery.js

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import ImageGallery from '@/components/molecules/ImageGallery'
12
import PropTypes from 'prop-types'
23

34
/**
@@ -6,42 +7,45 @@ import PropTypes from 'prop-types'
67
* The core Image Gallery block from Gutenberg.
78
*
89
* @author WebDevStudios
9-
* @param {object} props The component attributes as props.
10+
* @param {string} anchor The anchor/id of the block.
11+
* @param {string} caption The image caption.
12+
* @param {string} className The image class.
13+
* @param {number} columns The amount of columns.
14+
* @param {Array} images The array of images.
15+
* @return {Element} The ImageGallery component.
1016
*/
11-
export default function BlockImageGallery({props}) {
12-
const {
13-
className,
14-
id,
15-
data: {images_per_page, images}
16-
} = props
17-
17+
export default function BlockImageGallery({
18+
anchor,
19+
caption,
20+
columns,
21+
className,
22+
images
23+
}) {
1824
return (
19-
<section
20-
id={id ? id : null}
21-
data-block="ImageGallery"
25+
<ImageGallery
26+
anchor={anchor}
27+
caption={caption}
28+
columns={columns}
2229
className={className}
23-
>
24-
<pre>
25-
{JSON.stringify(
26-
{
27-
className,
28-
id,
29-
data: {images_per_page, images}
30-
},
31-
null,
32-
2
33-
)}
34-
</pre>
35-
</section>
30+
images={images}
31+
/>
3632
)
3733
}
3834

3935
BlockImageGallery.propTypes = {
40-
props: PropTypes.object.isRequired,
41-
id: PropTypes.string,
36+
anchor: PropTypes.string,
37+
caption: PropTypes.string,
38+
columns: PropTypes.number,
4239
className: PropTypes.string,
43-
data: PropTypes.shape({
44-
images_per_page: PropTypes.number,
45-
images: PropTypes.array
46-
})
40+
sizeSlug: PropTypes.string,
41+
images: PropTypes.arrayOf(
42+
PropTypes.shape({
43+
alt: PropTypes.string,
44+
caption: PropTypes.string,
45+
fullUrl: PropTypes.string,
46+
id: PropTypes.string,
47+
link: PropTypes.string,
48+
url: PropTypes.string
49+
})
50+
)
4751
}

‎components/molecules/ImageGallery/ImageGallery.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import Image from '@/components/atoms/Image'
2+
import RichText from '@/components/atoms/RichText'
3+
import cn from 'classnames'
4+
import PropTypes from 'prop-types'
5+
import React from 'react'
6+
import styles from './ImageGallery.module.css'
7+
8+
/**
9+
* Render the ImageGallery component.
10+
*
11+
* @author WebDevStudios
12+
* @param {string} anchor The anchor/id of the block.
13+
* @param {string} caption The image caption.
14+
* @param {string} className The image class.
15+
* @param {number} columns The amount of columns.
16+
* @param {Array} images The array of images.
17+
* @return {Element} The ImageGallery component.
18+
*/
19+
export default function ImageGallery({
20+
anchor,
21+
caption,
22+
columns,
23+
className,
24+
images
25+
}) {
26+
return (
27+
<>
28+
{!!images?.length && (
29+
<div id={anchor || null} className={cn(styles.gallery, className)}>
30+
<div className={cn(styles.wrap, styles[`columns-${columns}`])}>
31+
{images.map((image, index) => {
32+
return (
33+
<Image
34+
key={index}
35+
url={image.url}
36+
alt={image.alt}
37+
id={image.id}
38+
/>
39+
)
40+
})}
41+
</div>
42+
{!!caption && (
43+
<div className={styles.caption}>
44+
<RichText tag="span">{caption}</RichText>
45+
</div>
46+
)}
47+
</div>
48+
)}
49+
</>
50+
)
51+
}
52+
53+
ImageGallery.propTypes = {
54+
anchor: PropTypes.string,
55+
caption: PropTypes.string,
56+
columns: PropTypes.number,
57+
className: PropTypes.string,
58+
images: PropTypes.arrayOf(
59+
PropTypes.shape({
60+
alt: PropTypes.string,
61+
caption: PropTypes.string,
62+
fullUrl: PropTypes.string,
63+
id: PropTypes.string,
64+
link: PropTypes.string,
65+
url: PropTypes.string
66+
})
67+
)
68+
}
69+
70+
ImageGallery.defaultProps = {
71+
columns: 3
72+
}

‎components/molecules/ImageGallery/ImageGallery.module.css

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.gallery {
2+
@apply mb-20;
3+
4+
& .wrap {
5+
@apply grid grid-cols-4 gap-12;
6+
7+
&.columns-1 {
8+
@apply grid-cols-1;
9+
}
10+
11+
&.columns-2 {
12+
@apply grid-cols-2;
13+
}
14+
15+
&.columns-3 {
16+
@apply grid-cols-4;
17+
}
18+
19+
&.columns-4 {
20+
@apply grid-cols-4;
21+
}
22+
23+
&.columns-5 {
24+
@apply grid-cols-5;
25+
}
26+
27+
&.columns-6 {
28+
@apply grid-cols-6;
29+
}
30+
}
31+
32+
& .caption {
33+
@apply text-center font-secondary text-xs pt-12;
34+
}
35+
}

‎components/molecules/ImageGallery/ImageGallery.stories.mdx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
2+
3+
import Image from '.'
4+
5+
<Meta title="Components/Atoms/Image" component={Image} />
6+
7+
# Image
8+
9+
Use this component to display a image.
10+
11+
<Canvas>
12+
<Story name="Component">
13+
<Image
14+
url="https://images.unsplash.com/photo-1611149469739-cf4647d61f07?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
15+
alt="Image alt text"
16+
caption="This is the image caption"
17+
/>
18+
</Story>
19+
</Canvas>
20+
21+
## Image + Link
22+
23+
Add a link to the image using the `href` prop.
24+
25+
<Canvas>
26+
<Story name="Image + Link">
27+
<Image
28+
url="https://images.unsplash.com/photo-1611149469739-cf4647d61f07?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
29+
alt="Image alt text"
30+
caption="This is the image caption"
31+
href="https://google.com"
32+
/>
33+
</Story>
34+
</Canvas>
35+
36+
## Controls
37+
38+
Play around with `<Image />` props in the [Canvas tab of the Controls story](?path=/story/components-atoms-image--controls).
39+
40+
export const Template = (args) => <Image {...args} />
41+
42+
<Canvas>
43+
<Story
44+
name="Controls"
45+
args={{
46+
url:
47+
'https://images.unsplash.com/photo-1611149469739-cf4647d61f07?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
48+
caption: 'Jeffery Smith, 28'
49+
}}
50+
>
51+
{Template.bind({})}
52+
</Story>
53+
</Canvas>

‎components/molecules/ImageGallery/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {default} from './ImageGallery'

‎functions/displayBlock.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ export default function displayBlock(block, index) {
2828
return <Blocks.BlockHeadings {...attributes} key={index} />
2929
case 'core/image':
3030
return <Blocks.BlockImage {...attributes} key={index} />
31-
// case 'core/image-gallery':
32-
// return <Blocks.BlockImageGallery {...attributes} key={index} />
31+
case 'core/gallery':
32+
return <Blocks.BlockImageGallery {...attributes} key={index} />
3333
case 'core/table':
3434
return <Blocks.BlockTable {...attributes} key={index} />
3535
case 'core/list':

0 commit comments

Comments
 (0)