How to Center Align Embedded GIFs in WordPress Gutenberg Block Editor?
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.
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.
Similarly, you can select the right alignment option and the GIF moves to the right side of the page with text on the left.
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.
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.
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
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.
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.
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.
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.
This site uses Akismet to reduce spam. Learn how your comment data is processed.
About the Author
An Electronics & Communication Engineer by education and a Blogger by passion, Pooja is the owner of and blog consultant at 'The Blogipedia'. She is a spiritual soul, travel enthusiast and a health fanatic who shares her journey through another blog she owns 'From Size Zero to Wise Hero'. A certified Digital Marketing student who has learnt the complexity of blogging from scratch and intends to share the same with you.Learn more