Every WordPress theme has fixed spacing between blocks, and the spacing between blocks for every theme may differ. For example, when we use GeneratePress as our WordPress theme, we have an issue: on the website appearance (front-end), the space after the YouTube block is very tight/narrow with the block after it. Indeed, it will reduce the comfort of users on consuming our content.
This article will show you how to add space after YouTube and any social media blocks that need to embed the URL (Twitter, Pinterest, Vimeo, etc.)
How to Add Space After the YouTube Block in Gutenberg
Alright, adding a space after the YouTube block or any block that needs to embed the URL is very easy. The only thing that you need to do is add the very simple CSS snippet to the Additional CSS block on Theme Customizer.
On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS.
Note: If you’re using a block theme, click here to learn how to enable a theme customizer on your WordPress.
Once you enter the Additional CSS block, please copy the simple CSS snippet below and paste it into the available field.
.wp-block-embed { margin-bottom: 25px; }
Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.
The Code Explanation:
The CSS we give you above selects .wp-block-embed
which .wp-block-embed
is a class selector of YouTube and every block that needs to embed URLs such as Twitter, Pinterest, Vimeo, etc.
We set 25px
of margin-bottom
for that class selector. You can replace”25px
“with your desired spacing value.
That’s it. To see how the CSS snippet you’ve added works, you can create new content or select the existing one (page/post) with YouTube or any block that needs to embed the URL on a new window.
The Bottom Line
Providing a positive user experience is critical to the success of any product or service you provide on your website. Concern about spacing is one way to achieve that goal. This article shows how easily you can add space after YouTube or any block that needs to embed the URL in the WordPress Gutenberg editor.
We hope this article is helpful, and if you have any questions or feedback, please don’t hesitate to contact us.