The Image Block
In this post, we’re only going to cover the basics of adding and image and resizing it. You can use the block editor to do much more sophisticated things with images. If you want to learn about them, go HERE
To add an image, click on the the Inserter ⊕. Alternatively, you can type
/image in a new block and press enter.
Adding an Image
The media options panel will load with three options, 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.
Once the image is added to the editor, you can resize and align the images to better fit the surrounding content.
In order to resize an image, click on the image to reveal the draggable resize handles (these are the two circles you see on the right and at the bottom of the image below). Then, click on the resize handles and drag the image to the size you want.
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.
You can move an image up or down you post by using the Moving Handles shown below.
The up and down arrow icons can be used to move a block up and down in your document.
If you wish to align an image within a paragraph you will first need to insert the image just above the target paragraph block.
From there, click on the image and select left or right alignment, this will merge the image into the paragraph block.