3heads-gear3headschatchecklistglobehead-lockhead-plusimaclife-ringlogo-cornelllogo-melbournelogo-northhamptonlogo-portsmouthlogo-small logo-vancouverlogo-yokohamamail-line mail-wings pdf pie-chartplayplugprinter skype website
Print Friendly, PDF & Email

The Image block allows you to quickly add an image.

Here’s what it looks like when it’s added to the Block Editor.

Image block

To add an image block you click on the + icon at the right of any empty block or at the top left of the editor then search for image and click on the image block icon.

Add Image block

More detailed instructions for adding blocks can be found here.

Add Image

Once you have added the image block, you click on Upload or Media Library to add your image.

Image block

Upload lets you upload an image from your device while Media Library is used to select an image you’ve already uploaded to your site’s media library.

Once your image has uploaded you can add the caption (optional).

Add caption

You can resize the image using the resize handles.  Click on the resize handle and drag the image to your desired size.

Resize image

Block Toolbar

You reveal the block’s toolbar by selecting the block.  The image block toolbar has options to change block type, alignment, edit image and insert link.

Image block toolbar

The change block type or style icon is used to transform the block style from default to a circular mask or transform the block to a cover block, gallery block, file block, media & text block or a group block.

Transform image

To align an image within a paragraph you need to insert the image block just above the paragraph block then click on the image block and select left or right alignment.  This merges the image into the paragraph block and the text wraps around the image as you resize the image.

Add text next to image

The alignment of the image block is changed by clicking on the change alignment icon and selecting the preferred alignment.

Choosing right or left will allow you to place another block alongside the image block. Choosing center will return the block to its default, taking up the full width of the post or page.

Align image
  • Align left: used to align image block left.
  • Align Center: used to center align image block
  • Align Right: used to align right image block.

Insert link allows you to hyperlink your image.  By default, the image is linked to None (makes your image unclickable).

Insert link
  • Custom URL – used to link to a custom URL by entering the URL you want to image to link to in the text box.
  • Media file – when the visitor clicks on the image they are taken original media file.
  • Attachment page – when the visitor clicks on the image they are taken to the attachment page that includes the image, the caption, the image description and a comment field.

When you click on the Crop icon in the toolbar a selection of editing tools will appear.

Crop tools

From left to right these tools are:

  • Zoom: You can zoom in on your image up to 300% and click and drag to control which part of the image is zoomed in.
  • Aspect Ratio: Control the ratio of an image’s width to its height.
    • Original
    • Square
    • Landscape: 16:10, 16:9, 4:3, 3:2
    • Portrait: 10:16, 9:16, 3:4, 2:3
  • Rotate: Rotate your image by 90°, 180°, 270°, or 360°.
  • Apply: Commit your changes to the image.
  • Cancel: Exit the image editing tools, abandon changes.

Any edits made to the image creates a new copy of the image in your media library so it doesn’t affect the image if it is used in another location.

The Replace option allows you to select a new image for your block.

Replace image

The image block is changed to a Cover block when you click on Add text over the image.

Cover block

Block Settings

Additional options for the image block are located in the editor sidebar of the block editor.  Click on the Settings icon next to the Publish/Update button if you don’t see the editor sidebar.

Image block settings

Under Image settings you can add the Alt Text, change the image size and adjust the image dimension.

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