The Image field creates a text field expecting an image URL. You have three ways to add an image: 1) click the button to upload a file, 2) click the button to choose one from your WordPress Media Library, or 3) drag-and-drop an image file onto the block.


  • Help Text: Instructions to describe data needed in the field.

PHP API Controls

  • name
  • label
  • control
  • type
  • order
  • location
  • width
  • help

Template Usage

To display the Image field in your template, use the field name you provided.

<img src="<?php block_field( 'pets-photo' ); ?>" />

The API will return the Attachment Post ID of the chosen image as an integer, and echo the full-size URL of the chosen image a string.

$attachment_id = block_value( 'pets-photo' );
echo wp_get_attachment_image( $attachment_id, 'thumbnail' );

Example template file /blocks/block-block-lab-example.php

// Block Lab Example Image Field

<p>How can you say no to a face like this?</p>
<img src="<?php block_field( 'pets-photo' ); ?>" />

To use the block with the Image field on your site, locate it in the blocks menu.

Screenshot showing the Block Lab custom block in the menu

It will then display within your post/page.

And on the front-end of your site.