30% off all official TAB products with the coupon code: TAB-WITH-BLOCKS

5 Tips to Improve Your Block Building Experience

5 ways to improve your experience using Generate Blocks and the default block editor.

Kyle Van Deusen

Published:

Filed Under:

Tools

5 gutenberg tips
This content contains affiliate links. View our affiliate disclaimer.

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.

Gif demonstration of using the forward slash to look for a block
Using the forward slash to quickly search for a block

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:

A GIF demonstrating how to turn off the blocks you don't need.
Turn off the visibility of unneeded blocks
  1. Open up a page or post in the block editor.
  2. Click the vertical 3-dot menu (options menu) at the top right corner.
  3. Click the last menu item, “Preferences”.
  4. Choose the “Blocks” tab
  5. 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.

A GIF demonstrating changing a headline block to an icon-only
Changing a headline block to an icon-only

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!

3 inline pieces of text on a page
3 inline pieces of text

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.

A GIF demonstrating how to change the display from block to inline with Generate Blocks.
Change display from block to inline with Generate Blocks

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!

A GIF demonstration of copy and pasting a SVG icon into Generate Blocks
Copy and pasting an SVG icon into Generate Blocks

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.

Wrapping Up

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.

Kyle Van Deusen

The Admin Bar

Born in California and raised in Texas, Kyle is a husband and proud father of three. After spending 15 years as a graphic designer and earning a business degree, he launched OGAL Web Design in 2017, The Admin Bar community with Matt Sebert in 2018, and Docket WP with Andre Gagnon in 2020.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

The Friday Chaser

Wash down the week with the best of The Admin Bar! News, tips, and the best conversations delivered straight to your inbox every Friday!

Latest Events

July 8th, 2022

New TAB Site Teardown

How any why I rebuilt The Admin Bar website with GenerateBlocks (Featuring Dave Foy)

May 27th, 2022

Hiring Your First VA

When You Should, and What You Should Know

May 16th, 2022

The GenerateWay

A live interview with Tom Usborne

More Articles

best lesser known plugins

Best WordPress Plugins You’ve Never Heard Of

The best lesser-known plugins from the WordPress repo

A closeup of a computer keyboard with a blue handicap button.

How To Write Accessible Website Copy

One of the most overlooked aspects of accessibility is website copy. It’s not just the design, layout, & features of your website, the copy has to be accessible too.

black and yellow tool box.

The Best Free Tools & Resources for Agencies

A crowdsourced database of the best free online tools, utilities, & resources for website designers and developers.