I struggle to think back now to the time before I felt comfortable with blocks, and the kinds of challenges I was having — but I know there were quite a few.
I started and stopped using blocks a good 4 or 5 times before I actually pushed through and found success.
A big part of that is just getting your feet under you and finding a workflow where you feel comfortable.
In this article I'm going to share 5 simple “hacks” for improving your experience with the block editor and Generate Blocks!
1. Quickly Add New Blocks (Default Block Editor)
If you're like me, your fingers tend to stay right on top of the keyboard, only moving over to the mouse when absolutely necessary.
This means keyboard shortcuts are paramount! Especially when you're busy typing and creating content.
Well, say goodbye to clicking the pesky “plus” button to add a new block…
When you're on a new line of text (which in the block editor defaults to a “paragraph” block), you can type a forward slash then automatically start searching for the name of the block you're looking for?
Once you've narrowed down the list to the block you're after, simply hit enter and your block will be place right where you were typing.
It seems like a simple one, but I almost never click the plus button to add a block anymore — the search function becomes intuitive!
2. Turn off Unnecessary Blocks (Default Block Editor)
This tip comes in especially handy if you're using the keyboard search function for blocks from tip #1… Did you know you can turn off blocks that you're not using?
By default, Gutenberg has quite a few blocks, and if you ask me, quite a few I don't think I'll ever use.
This is compounded quickly when you start adding block packages like Generate Blocks, Kadence or Stackable.
To help you find what you need quicker, you can narrow down the list of available blocks by turning off blocks you don't need — here's how:
- Open up a page or post in the block editor.
- Click the vertical 3-dot menu (options menu) at the top right corner.
- Click the last menu item, “Preferences”.
- Choose the “Blocks” tab
- Under “Visible blocks”, simply uncheck the blocks you don't want to show up on your available blocks list.
Now all those unnecessary blocks won't get in your way!
3. Icon Block (Generate Blocks)
Generate Blocks purposefully comes with the least number of blocks possible. While you might think that's a disadvantage when comparing it to the plentiful packages from Kadence or Stackable — after a short time with Generate Blocks you come to find that it's actually much better that way.
Quite a few of the blocks serve a dual purpose for you, and one great example of that is using the “Headline” block as an “Icon” block.
Drop in a Headline block from Generate Blocks and you'll have the option of adding an icon to your heading. This, of course, works great for things like an icon box where you need a heading next to (or below) and icon.
But you can just as easily use this for an icon-only setup.
When you add a Headline block, open up the Icon settings and add an icon (you can choose from their built-in library, or copy/paste your own SVG code). Once you add the icon, you'll get a toggle labeled “Remove Text”.
Swipe that toggle right, and you have yourself a shiny new “Icon block” — with all the styling capabilities (like spacing, colors, and effects (if you're using Generate Blocks Pro) you would with a Headline.
To avoid any strange HTML structure, it's probably best to change the headline tag from H2 (the default) to a “div” since an icon-only probably shouldn't be wrapped in a heading tag.
Knowing that you can achieve the same thing as an “Icon Block” by simply using the Headline block, do you really still think it's necessary to have a dedicated block just for icons? I think not!
4. Inline Block (Generate Blocks)
If you're trying to achieve a layout where you have several bits of text all in one line, you might be tempted to drop in a Grid block and configure a set number of columns — but that might not be necessary!
The Headline block from Generate Blocks allows you to change the display from block to inline with a simple toggle, allowing you to stick headlines or paragraphs next to each other horizontally without the use of columns.
To do this, add a Headline block, and under the spacing tab, you'll see a toggle for “Inline Width”. Switch that on, and your headline (no matter if it's set to an H tag, P tag or Div tag) will swap from display block to display inline allowing you to stick them side-by-side.
You'll likely need to add a little bit of margin-right on each item, so they don't squish together, but that's easy to do with the spacing options just below the Inline Width toggle.
5. Adding Custom Icons (Generate Blocks)
It's nice that Generate Blocks comes with a few icons built in — and for simple things, they just might do the trick.
But chances are, you're going to need your own icons in there too.
Instead of adding an entire icon library (which you may only be using a fraction of), you can quickly add icons from vector graphics programs like Illustrator, XD, or Figma — and it's as simple as copy and paste.
In Adobe Illustrator or XD: open or create your icon (it needs to be a vector). Simply select your icon and press “control + c” to copy it (command + c if you're fancy) to copy your SVG, and head back into the block editor.
In Figma: the process is similar, but instead of simply copying your icon, you need to right-click and under the “copy/paste as” menu, click “copy as SVG”
Using the Generate Blocks headline block (which I've already shared in tip #3 works wonderfully as an “icon block”), open up the icon tab, and place your curor in the “Icon SVG HTML” text area.
Now comes the magic — hit “control + v” (“command + v” for all the ballers), and voilà — your icon is added right in magically!
Once you have your icon in place, you can use the controls in Generate Blocks to change the icon's size or colors easily using the built-in controls.
Bonus Tip 1: Some online icon libraries (like Boostrap Icons) give you the HTML code needed for their icons so you don't have to even bother opening them up in a graphics program to copy the markup.
Bonus Tip 2: The code that you copy out of these graphics programs often has a bit of bloat in it, if you want to slim your file down, try SVGOMG, which will minimize your SVG code.
There you have it — 5 quick tips that are sure to make your block building experience more enjoyable!
If you'd like to see more done with the block editor (and Generate Blocks), check out my “Build it with Blocks” video where I built out an entire home page (well, most of it anyway) using the block editor live while holding a Q&A (multitasking!).
And if you're serious about blocks, I would highly encourage you to pick up a copy of Generate Blocks Pro, which is worth every penny and then some, and Mike Oliver's Blocks Course which will teach you everything you need to know to start building websites using the block editor confidently.