ImageControl

Usage

import { ImageControl } = gumponents.components;

...

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

...

<ImageControl
	label="Choose image"
	selectLabel="Choose image"
	removeLabel="Remove this image"
	size="thumbnail"
	value={ image }
	onChange={ ( image, media ) => setAttributes( { image } ) }
/>

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

size

The thumbnail size name of the image.

• Type: String
• Required: No

value

The value can be either the attachment ID or the original object returned as a value by this control. If only the attachment ID is passed, it performs an API call to get the image's details. If the whole object is passed, it saves the API call, making it more performant.

• Type: Int | Object
• Required: Yes

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