Image

Use the Image component to allow people to insert an image from the WordPress media library into your block. When no image is selected, a button will be displayed prompting the user to select an image. After an image is selected, the image will be displayed. The image can be changed or removed by hovering over the image.

Note: the Image component requires a number-type attribute. The ID of the selected image is stored in the attribute.

Note: when the Image component is displayed on the front-end, an HTML <img> tag is generated. The tag contains an HTML attribute named data-image-id containing the ID of the image.

Field Mappings

Use Field Mappings to capture additional data from the selected image (such as the image’s alt text, URL, etc.) into your block’s attributes. Click Add Mapping, select a field from the image that you want to store in an attribute and select an attribute. Now, when an image is selected, the attribute will be populated with the value from the selected image field.

Note: fields are only mapped to attributes when the image is first selected. If the attribute you’re storing the mapped value in uses a source other than block meta, it’s up to you to initialize the attribute’s value when the block is loaded.