GalleryControl

Usage

import { GalleryControl } = gumponents.components;

...

attributes: {
	gallery: {
		type: 'array',
		default: [],
	},
},

...

<GalleryControl
	size="medium"
	onSelect={ ( gallery, media ) => {
		setAttributes( { gallery: [] } ); // The block editor doesn't update arrays correctly? 🤷‍♂️
		setAttributes( { gallery } );
	} }
	value={ attributes.gallery }
/>

Props

label

The label for the control.

• Type: String
• Required: No

help

The help text for the control.

• Type: String
• Required: No

selectLabel

The label for the select button.

• Type: String
• Required: No

removeLabel

The label for the remove button.

• Type: String
• Required: No

updateLabel

The label for the select button when images are already selected.

• Type: String
• Required: No

size

The thumbnail size name of the image.

• Type: String
• Required: No

value

The value can be either an array of attachment IDs or the original array returned as a value by this control.

• Type: Array
• Required: Yes

onSelect

A function that receives the values of the control. This function has two parameters:

1. An array of image objects which can be saved as is in the attribute, and can be used in conjunction with the <Img /> component to build an img tag.
2. An array of entire media objects, which can be used for other miscellaneous reasons.

• Type: Function
• Required: Yes