How to Add and Align Images in WordPress Block Editor?

How to Add and Align Images in WordPress Block Editor?Images are life of your content that makes your WordPress pages and posts more engaging. However many candidates struggle with aligning images in the way they really like.

WordPress Gutenberg editor (block editor) solves this issue by make it easy to align and add images. Today in this post we’ll show you how you can align and add images easily to create engaging content layouts.

Image Alignment in WordPress Editor:-

WordPress make use of text area with some buttons as the default editor. One main issue in the old editor was image alignment. Even thought there were alignment options for left, right or center. They didn’t look good always. Sometime images didn’t align, or not in the exact size or just looks odd.

WordPress 5.0 launched with Gutenberg editor. It has fixed various issues with the old editor involving image alignment issues. Let’s have a look how we can add or align images to create stunning layouts.

Add and Align Images in WordPress:-

New WordPress Gutenberg comes with following blocks that you can make use to add images and set alignment to your WordPress pages and posts.

  • Images
  • Inline Image
  • Gallery
  • Media & Text
  • Cover

How to Add and Align Images in WordPress Block Editor?

Let’s begin with simple image block first.

Press on ‘Add New Block’ button or type /image in the post editor to insert an image block. You’ll see three button in blank image block. Now upload an image from your system. Select any previously uploaded image from media library or insert image with image url.

After successful uploading of image you will see a toolbar on top of your image and some image block setting in right side. To set alignment of your image you have to use toolbar that shows on top.

Image block gives you following alignment options in toolbar:

  • Align left
  • Align center
  • Align right
  • Wide width
  • Full width

If image is smaller in width then aligning it to left or right will bring up text next to image. Aligning center will display image on its own row with no text on either side.

Selecting wide width option will make image wider than text area, and full width option will push it to right & left edges of browser screen.

How to Perfectly Align an Image Next to Text:-

Many times you may need perfectly align image next to some text. WordPress block editor makes it easy by adding media & text block. This block usually adds a two column area. One for image and second for content.

Simply upload your image and then add the text you want to display with it. After adding image & text as you desire, you will see more options for the block. You can make the whole block wider or full width, you can also switch image and text slides.

Image’s alignment will auto adjust to the height of text in next column