Gutenberg Block Editor: When to Use Editor Versus CSS Styles

Introduction

I checked Google Search Console and it looks like my article comparing the Gutenberg Block Editor versus both Divi and Elementor is one of the most popular. I have stated on this website that you need to balance what you want to write with what your audience wants. The best part about tracking your traffic is that you get to see what your users want from you. So all that you have to do is just deliver more of what they want. This is why your audience is so crucial in getting over writer’s block. So it looks like I am taking my own advice and writing my first article here that is inspired from my most popular post. This is another Gutenberg Block Editor article and this time I will delve a little deeper when it comes to styling your blocks. There are basically two ways to go about this. You can either just rely on the page editor and style your blocks with the options that the editor provides. This is great sometimes but after you use the page editor, you want something a little more powerful. We all love power right? That is where CSS comes in. With CSS, you have greater control over the styles of not just your blocks but the entire page itself, including navigational elements like the header, menus and the footer. When should we use one or the other? That is the topic of this article as I discuss when to use editor styles and when to use CSS.

Editor: Single Unique Instances that Will Only Be Used Once

The editor is great because it is really to do some basic styling just from the options that it provides. You can do things like spacing, font sizes, font color, background color and other basic styles. This is sufficient for a blog where you just want your text and colors to look nice enough so that people can read your article. Every website is different and even ones that are purely informational need something a little special every now and then to look nice. Generally, if you are wanting to style a one-off element that will not be used more than one, then you should use editor styles. Even if you know advanced CSS, if it is something small then you do not really need to go through the trouble of using CSS to style it. An example would be a heading line that needs to look different because of some effect that you are trying to do or a point that you are trying to make. If this is unique to just this one header then just use editor styles. Think inline CSS styles that will not be shared with any other HTML element. This is a case where I would just use the editor styles.

Editor: Already Takes Into Account Responsive Design

Since the Block Editor is a core part of WordPress and not a plugin that you have to install like Divi or Elementor, it for sure is already responsive. So this means that you do not have to deal with CSS media queries if you are styling only from the editor. Although, just to be sure, I would always check your block designs in Chrome because you never know what it looks like on mobile until you check for sure. Chrome DevTools is both a time save and life saver. I cannot believe how much time I spend in it. You just right click and “Inspect Element”. Then you have access to so many tools to make your web design and development life so much easier. For checking mobile designs, I like to go to the top and change the device to phone and just check mobile styles from there. Again, using your browser from a device that is not a phone is just a simulation. You should also check your mobile website on an actual phone just to be sure once development has completed. Still though, I would have to say that the mobile simulator in Chrome is pretty accurate and only in the rarest cases did the mobile simulator look drastically different that on an actual phone. Sometimes though, you need to use CSS media queries for mobile styles, which I will discuss later.

CSS: Multiple Similar Elements That Will Share Styles

When you want to change the font size for multiple headers at once without going through them one by one, then you use CSS. This is better because if you need to change the font size again, then you can just change it in one spot instead of going through everything again. You never know how large your website will be someday. You start out thinking that you just have a small little fun project that you think will stay small like that. Once you get into it, your website gets larger and larger. Then you have tons of pages with a lot of headers. If you ever want to style the headers, you can just use CSS. We have big dreams in our lives. So assume that your small website will be big someday and prepare to use CSS to update similar headings that will share styles. Obviously, we want a consistent uniform look on our pages and if we try to update headings one by one, we might miss one here or there. If you have tons, you will miss a lot of them. Plus, it takes too much time to go one by one updating styles for each header and we do not have time for that. As I have stated, we really need to get our content out there as quickly as possible. Our voice, our knowledge is the heart of our website, not some styles. So learn CSS and do it the right way, the clean, manageable way for the long-term.

CSS: Overriding Global Block Editor Styles

CSS is preferred when you want to override the default styles with the block editor. These kinds of styles include global ones that cannot be accessed through the block editor. The main reason why is because Gutenberg wants to protect you from changing styles that might affect the layout and responsive design.The include navigational elements like the header, menus, footer, global elements. These are elements that you can create with blocks but you can only adjust styles in relation to the blocks that you create. If you want to do something like modify margin or padding between blocks or between global elements you need to use CSS. I found using CSS to be easier than trying to figure out if it is possible to use the editor styles. This is why you need to know how to use both so that you can use one of the other depending on your situation. 

Reduce Extra Margin/Padding: Users Do Not Like Excess Scrolling

 I did notice that the block editor by default likes to put extra margins between rows of blocks. A little too much in my opinion. Even something like 40 pixels of margin on the top and bottom of rows makes pages on mobile vertical scroll too much. When you have a lot of content to show, the last thing that you should do is make your pages so long that it takes forever to scroll to reach the bottom. As you probably already know since it is human nature, no one will keep scrolling on their phone unless they are really engaged in your content and want to see more. This just means that you really do have to create compelling, interesting and engaging content to keep your users scrolling through your page. This is why writing is not just about sharing your knowledge with someone. Writing is also about showing your personality and finding ways to make even the most technical subjects interesting to anyone. I know that this is not easy but we are not robots after all.

CSS: Styling Custom HTML Blocks

When you create custom HTML blocks in the Gutenberg block editor, you are creating all of the HTML by hand on your own. This means that you are creating custom CSS classes that you can reference with your own CSS to style your own custom HTML blocks. In these cases you will have to use CSS by default because there is no easy way to style your custom HTML block using editor styles. The block editor has no way of knowing what kind of HTML you are going to use so it has no way to style your custom HTML blocks. The good news is that most likely if you know HTML, then you should also know CSS. So you should have no problem using CSS when it comes to styling your custom HTML blocks. This is just another reason why I like the block editor so much. You can create your own custom blocks if the default list does not have exactly what you are looking for. The keyword here being exactly. This is why it is so important to learn some skills outside using an editor. Once the editor has exhausted its options, you are left with having to create something yourself. You can try to find plugins that have a block that you need but that can take a long time and it still might not be exactly what you are looking for. Often you have to settle for whatever the plugin gives you because you cannot create a custom HTML block on your own. Motivate yourself to learn HTML and CSS and create some custom blocks.

CSS: Mobile Styles With CSS Media Queries

If you do decide to use CSS to style your blocks, then you might need to style your blocks for both desktop and mobile. This for sure means that you will need to use CSS because of CSS media queries. From what I can tell, there is no specific spot in the editor for mobile only styles. There might be a plugin but I know CSS so I will not rely on another plugin if I can help it. By default, when the block editor renders your design in mobile, it takes your blocks and stacks them on top of each other. For example, if your desktop design has three blocks side-by-side in a row, then they will be on top of each other in mobile. Responsive design dictates that if you have a multi-column layout on a larger device, which is typically desktop/laptop, then it becomes stacked in mobile. So a three-column desktop layout will become a one-column layout on mobile. By mobile, we usually mean phones but tablets can support two-column layouts because they are generally larger in size than phones are. There simply is not enough space on a phone to fit more than one column without squishing the content and making it hard to read. So this is why we need to use CSS media queries to style blocks differently in mobile. The breakpoints that I like to use are up to 768 pixels for mobile and between 768 pixels and 1024 pixels for tablets. Anything above 1024 pixels I consider to be a desktop/laptop.

Bonus Tip: Set CSS Classes To Your Block Elements to Use JS/jQuery

Before I summarize this article, I wanted to bring up how to use CSS classes in the block editor to use JS. In the block editor, you can assign CSS classes to your blocks. Then you can use JS/jQuery to reference this CSS class. This is good if you created a custom HTML block with buttons and you need the buttons to link to another page. You would simply assign a CSS class to your buttons and then use JS to do something like a window.location to send users to another page on a button click. If you are looking for a WordPress plugin to add CSS and JS to your pages try this one called Simple Custom CSS and JS. I recommended this plugin in my article where I recommend some plugins to start your blog. I know that you need to learn everything one thing at a time. So learn HTML, then CSS, then JS. Once you have these down, you will have a decent grasp of the front-end. Then you will learn the true power of the block editor. You will know when to use the block editor and leverage its pre-built blocks to make page design easier. You will also know when it is time to use CSS to modify styles that are outside the block editor’s capabilities.

Summary

I hope that this article has helped you understand a bit more about what the block editor can do in terms of styling. Use the block editor for styling when you create a one-off or really specialized block that will only be used in that spot. The reason why is because having to apply the same styles to another similar block is best suited for CSS. You should also consider using reusable blocks if you need these specialized blocks to appear on more than one page. The good part about sticking with editor styles is that the block editor is already set up for responsive design. If you use CSS to change something like font size, then you might need to resize it again on mobile. Larger fonts look good on a desktop because you have more space. On mobile, your space is limited so you might need to consider CSS media queries to set a smaller font size. If you need to modify global styles that lie outside the editor’s possibilities, then CSS is the only way for you to change it. This is good for some of the default margin and padding that the block editor uses. Some might think that it is too much and reducing it will save the amount of vertical scrolling. Reducing vertical scrolling is especially good for mobile designs because single-column designs means that everything is stacked on top of each other and scrolls down. Creating custom HTML blocks in the block editor all but guarantees that you need to use CSS. So learn HTML and CSS and you will be able to make your custom HTML blocks look good. Finally, assigning CSS classes to your blocks makes them accessible if you need JS/jQuery. Once you get HTML and CSS down, then you move on to JS/jQuery.