The Image block allows you to quickly add an image.
Here’s what it looks like when it’s added to the Block Editor.
To add an image block to a page you click on the + icon at the left of any empty block or at the top left of the editor then search for an image, or locate it in the Common Blocks section, and click on the image icon.
More detailed instructions for adding blocks can be found here.
Once you have added the image block, you click on Upload or Media Library to add your image.
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).
You can resize the image using the resize handles. Click on the resize handle and drag the image to your desired size.
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.
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.
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.
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 file block. Choosing Center will return the block to its default, taking up the full width of the post or page.
- Align left: used to align image block left.
- Align Center: used to center align image block
- Align Right: used to align right image block.
The edit image option allows you to select a new image for your block and it can also be used to change the image title or Alt Text of your current image.
The Insert link allows you to hyperlink your image. By default, the image is linked to None (makes your image unclickable).
- 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 to the 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.
Additional options for the file 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.
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.