SelectImage

This component is used to select an image within the editor. It provides an easy to use interface to select and remove an image.

Usage

import { SelectImage } = gumponents.components;

...

attributes: {
	image: {
		type: 'object',
		default: null,
	},
},

...

<SelectImage
	image={ image }
	placeholder="Choose an image"
	size="full"
	onChange={ ( image, media ) => {
		setAttributes( { image: null } ); // The block editor doesn't update objects correctly? 🤷‍♂️
		setAttributes( { image } );
	} }
	showCaption={ true }
/>

Props

image

The original saved image object attribute.

• Type: Object
• Required: Yes

size

The thumbnail size name of the image.

• Type: String
• Required: No

placeholder

Placeholder text value.

• Type: String
• Required: No

showCaption

Show or hide a caption input below the image.

• Type: Boolean
• Required: No

onChange

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

1. An image object 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. The entire media object, which can be used for other miscellaneous reasons.

• Type: Function
• Required: Yes