Image Block

The image block can be added to a page by clicking on the Add Block button.

Alternatively, you can type /image and press enter.

Add images with a hotkey command.
Add images with a slash command.

Detailed instructions on adding blocks can be found here.

Block Toolbar Block Toolbar

Each block has its own block-specific controls that allow you to manipulate the block right in the editor. 

Wide and Full Width icons.
Wide and Full Width icons, specific to image blocks (not available in all themes).
  • Change block type
  • Left Align
  • Center
  • Right Align
  • Wide (when supported by theme)
  • Full width (when supported by theme)
  • Edit
  • More Options

Adding an Image Adding an Image

The media options panel will load with three options, Upload, Media Library, and Insert from URL.

There are three ways to add images - Upload, Media Library, and Insert from URL.
There are three ways to add images – Upload, Media Library, and Insert from URL.

Upload and Media Library will let you add or choose media from your library and embed it in your page.

Simply add the image from the Upload Files tab, then select it in the Media Library tab. Customizing the image attachment details, such as the Title, Caption, Alt Text, and Description, in the Media Library window can also be helpful for SEO and future navigation of your media library.

Upload or select an image from your Media Library, add image information, then press Select.
Upload or select an image from your Media Library, add image information, then press Select.

Top ↑

Edit Image Edit Image

Pencil icon to edit image block

This option, represented by the pencil icon, will allow you to select a new image file for your block. Use this if you need to replace the image file in your image block, or change the Title or Alt Text.

Top ↑

Resizing Images Resizing Images

Once the image is added to the editor, you can resize and align the images to better fit the surrounding content.

Resize an image by dragging its handles.
Resize an image by dragging its handles.

In order to resize an image, click on the image to reveal the draggable resize handles. Then, click on the resize handles and drag the image to your desired size.

Alternatively, on the right hand side in the block settings, the image size can be fine tuned by adjusting width and height dimensions. There are also some convenient options in the block settings for setting the image to 100, 75, 50, and 25% of its original size.

Top ↑

Aligning Images Aligning Images

Align an image within a paragraph block.
Align an image within a paragraph block.

If you wish to align an image within a paragraph you will first need to insert the image just above the target paragraph block.

Alignment buttons with Align Left highlighted

From there, click on the image and select left or right alignment, this will merge the image into the paragraph block.

Finally, resize the image to your desired width and height.

Top ↑

Wide and Full Width Images Wide and Full Width Images

As support for the new editor is added to our themes, you will begin seeing icons for Wide and Full Width images. These two image sizes will allow you to expand the image beyond the theme’s usual content width.

A 'Wide' image in the editor.
A ‘Wide’ image in the editor.

Top ↑

Captions Captions

Captions can be added to images in two ways. If you wish to add a caption to a singular instance of an image, simply type it in the caption space below the image in the editor.

If you would like for the same caption to be present across all instances of an image, you will need to add the caption to the image from the media library by clicking the edit button on the image block.

Top ↑

Block Settings Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, click the ‘cog’ icon next to the Publish button.

The block settings can be found in the sidebar.
The block settings can be found in the sidebar.

Top ↑

Image Settings Image Settings

The image settings offer a text field to add an Alternative Text description, which is important for accessibility and SEO.

Images can be changed by percentages or pixel dimensions.
Images can be changed by percentages or pixel dimensions.

You can also change the width and height dimensions of an image in 25% increments, or with exact pixel dimensions.

There are many ways to change an image size from the WordPress editor.
There are many ways to change an image size from the WordPress editor.

Top ↑

The link settings allow you to hyperlink your images. You may choose for clicking on the image to open your an attachment page, the original media file, or a custom URL of your choice.

Your image can link to an Attachment Page, Media File, or Custom URL.
Your image can link to an Attachment Page, Media File, or Custom URL.

Top ↑

Advanced Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.

The advanced section lets you add a CSS class to your block.
The advanced section lets you add a CSS class to your block.