Ok, so I had to post this as I have been frantically searching for a way to center Center Align GIFs in WordPress Block Editor when I embed them using the embed block in the block editor.

After several hours of research, I could find a few different ways to Center Align Embedded GIFs in Gutenberg block editor as discussed below

1. Using EMBED Block:

To be honest, I have learned that the embed block offers three alignment options including left, right, and center as displayed below.

Left Alignment

Go Away Exit GIF by Kathryn Dean - Find & Share on GIPHY
Left Aligned Embed Block

So this is how the left alignment of the embedded block looks, and it is pretty easy to achieve.

As you can see when you align the embed block to the left, the text appears on the right-hand side. This effect is only visible on a wide-screen such as your laptop or desktop screens. It may look the same when you view it in landscape mode on your tablet, but you cannot achieve the same on a small narrow screen such as on smartphone screens or tablets if you view it in portrait mode.

An essential point to note is that when we talk about embedded blocks, it does not mean you need to add embedded code to it, in fact, the block demands you to paste the URL of the GIF source.

Right Alignment

Look Yes GIF - Find & Share on GIPHY
Right Aligned Embed Block

Similarly, you can select the right alignment option and the GIF moves to the right side of the page with text on the left.

ALSO READ
List of Best WordPress Plugins to add Tweetable Pull Quotes in your Blog

Remember, right and left alignment does not really matter if you are watching the page on your mobile screen. Due to the narrow screen size, every GIF will look center-aligned.

Center Alignment

If you are looking at this para in wide-screen, you will agree with me that left or right alignment is not such a great idea. It makes the division of sections quite tough. I would have liked this heading to appear below the right alignment image, but that is not the case. As the entire section looks badly aligned. Hence my favorite is to center align the GIF.

Channel 9 Point GIF by The Block - Find & Share on GIPHY
Center Aligned Embed Block

The one you see above is how the center alignment of the block looks. As you can see, the block seems to not be in the center. In reality, it is left-aligned; the only difference is that while in the left alignment, the paragraph can be added on the right, the same effect cannot be achieved here. The block looks fine, but the only issue is that you will be unable to achieve uniformity as you add other images centered on the page like the one we have added in the below section.

So basically we have failed to center align GIFs using the embed block in the WordPress Block Editor.

How to Align EMBED Block

Align Gifs in WordPress block editor

It is easy to align the block, you just have to click on the three horizontal lines you see on top of the block and you can select between the three alignment options.

ALSO READ
How to Center a TABLE in Wordpress?

2. Using Custom HTML Block

So, as I was not really able to center the GIF block successfully using the above method, the block which I am currently using the Custom HTML block on all my websites to embed GIFs.

This works just like how you added the code in the classic editor HTML tab. Remember, you have to find the embedded code of the GIF from the site to use this block.

via GIPHY

There is no alignment tab here on the block, but you can easily edit the HTML code by wrapping the embedded code within <center></center> to center the GIF. It is that simple.

Align Gifs in WordPress block editor

That is a wrap for now. If you are a newbie to block editor and have some queries, drop it in the comment box below and I will try to get back to you soon.

Also, for my pro readers, if you have an easier option to do this or you have figured how to center the embed block itself, please enlighten me as well as our readers.