Gutenberg has changed the way how we used to use and design posts and pages on WordPress. It has introduced lots of amazing and useful features and designing a complete page in WordPress is easier than ever without the use of any third-party plugins like Elementor or Bever.
Even though Gutenberg is pretty powerful, but still, some fundamental parts are missing from Gutenberg like the ability to add custom margin and padding for our block or if we wanna add some scroll animation to our block also the ability to hide or show the blocks based on device type is missing. If you have used page builders like Elementor you know they have these features and they are very common and you have used them quite often.
In this article, we are going to learn how we can get add the margin, padding, hide block based on screen type, animation, and custom CSS for any Block in Gutenberg Block Editor and use it more easily and design things in whatever way we want.
We will share not just one but two ways of how you can get this functionality, first the easy way using a plugin and second not so easy way or you can say kinda hack to achieve similar functionality without using any plugins so let’s begin.
How to Add Advance Controls to Any Block Using Plugin?
For achieving these functionalities for our block we will be using the GhostKit plugin. This plugin has three hundred thousand plus active installation and whopping 4.9 stars out of 5-star ratings on WordPress plugins repo.
Install the Plugin
Installation of plugins is fairly simple just head over to Plugins>Add New from your WordPress dashboard and search for the “GhostKit” plugin, just click on install and then activate the plugin. If you are facing any issue in plugin installation you can follow this guide.
After installation of the plugin, no extra steps are needed now all of your blocks have the option to set margin, padding, animation, and custom CSS. Now let’s see how exactly we can access and use these new options.
One thing I want to clear no matter what block you’ll use you’ll get the same block controls for every block, you can access these advanced controls from the right sidebar. So just add any block and you in the editor and you can access these controls.
How to Add Custom Margin & Padding in a Block
First, let’s see the margin and padding option we get for our block, as you can see in the image above for our block we get an option to set margin and padding for each individual size for our block.
- Screen Size: A great thing about this plugin is you can set different margins and padding for different device sizes. You can choose your desired device type like PC, Laptop, Tablet, and smartphone to set specific margin and padding for them.
- Margin Box: In the margin box you can add a margin for every side of your block.
- Padding Box: Just like the margin box you can use this box to add the padding for your block.
- Important Checkbox: We can also use the check-box highlighted with number four to mark these changes important so if any block has some CSS that might conflict with this external margin and padding important will override that and we will be set for sure.
How to Hide or Show a Block, Based on Device
Now let’s see how we can hide any block on certain device types, this will be helpful if you want to hide certain sections of your page on mobile devices and show a different version of that section. With this plugin, you get an option to choose a display option for your block.
By default, it will set to inherit(value similar to parent) for all devices but you can choose to inherit, hide, or show the block in the given screen sizes:
- Desktops: Devices with screen width <=(greater than or equal to) 1200px,
- Laptops: Devices with screen width <= 992px,
- Tablets: Devices with screen width <= 768px,
- Smartphones: Devices with screen width <= 576px.
How to Add Scroll Animation in a Block
Now let’s see how we can add a scrolling animation to our block when we scroll the page. With this plugin, we get the scrolling animation option as shown in the image above. By default, the animation will be none and we can choose between two types of animation fade and Zoom. Both of these animations have some control options so let’s look at them as well.
Fade Animation
When we choose the Fade option as scroll animation we will get the following option as shown in the image below.
- Animation Entry Point: We can choose the animation entry point for our fade animation, by default it is set to center and we can choose between center, left, right, up, or down by clicking on the arrow.
- Duration: We can set the duration in milliseconds, how long we want our animation to animate in.
- Delay: We can also set the delay for animation starting time in milliseconds.
Zoom Animation
If you choose to have a zoom animation as scrolling animation for your block you’ll get the animation control options as shown in the image below.
- Animation Entry Point: Similar to fade animation you can also choose an entry point for your animation, you can choose between the center(default option), left, right, top, bottom.
- Scale: For the zoom animation you can choose how much you want to scale your block.
- Duration: To set the time, how long you want your animation to last.
- Delay: How much delay do you want before your animation starts appearing.
How to Add Custom CSS in Any Block
Adding a custom CSS to our block is also super easy, currently, Gutenberg only offers us to add names and classes for our block but with a plugin, we can directly add CSS from the block control sidebar very easily. As you can see in the image we can type whatever CSS you like. You can also click on “Open in Modal” to open a big dialog box to easily write your CSS in a bigger space.
How to Add Margin and Padding to a Block Without a Plugin
This method is a bit tricky and not very efficient and requires a bit more extra steps, you can say it’s not a method but a hack to achieve similar functionality. The idea is to use multiple blocks to get whatever margin we want between our blocks.
There’s a two-step process to achieve this functionality first to get the spacing on the top and bottom of a block simply use a spacer block at the top and bottom and adjust the size to get desired spacing.
However to add spacing to the left and right spacers don’t work instead you’ll need to use a columns block with three columns, then in the center column add the element you want and adjust the size of the other two columns based on your need.
And with that, you can set desired spacing on all four sides of any block. Yes we know it’s not a very efficient method but if you want to do this for just one or two blocks then this hack is better than installing a plugin. We do hope WordPress will add this feature in Gutenberg Block Editor till then you can use the methods we have shared.
How to Add Other Advance Controls Without Plugin
After learning the margin and the spacing method you are probably wondering what is the hack to do other advanced stuff with the block. Unfortunately, the answer is none, there is no easy way to achieve other block controls to the block unless you wanna write CSS in your Theme Editor.
Just to calm your curiosity technically you can add the classes and ids to your blocks when you add them in your post and then add CSS targeting those ids and classes in your theme editor but that is not very efficient, you need to add code in your theme files and if you don’t know how they work you can mess things up. Also seeing the changes will take a lot of time since you constantly need to switch tabs and check if the style you are adding does not conflict with the theme CSS.
One use case of this can be when you use a reusable block, you can add the custom CSS for that once, and then whenever you use it again it will work smoothly and can save your time.
Conclusion
Having some advanced controls for your block can really increase your overall design and usability of Block Editor and also make it feel closer to the site builder and capable of replacing the site builders completely. In this article, we have shared how you can achieve these advanced controls.
We have learned how we can use the GhostKit plugin to achieve these advanced controls also a kind of hack and a nonlogical way. And I believe you know when to use when.
If you are facing any issues while following this article or have any suggestions, questions or ideas do share them in the comments below we will respond to them as soon as possible.
