Gutenberg Blocks: 11 Easy Tips For Using Blocks | Supercharge The Design of Your Website

Gutenberg Blocks: 11 Easy Tips For Using Blocks | Supercharge The Design of Your Website

Have you been trying to figure out how to use Gutenberg Blocks? What about how to choose blocks that get your designs noticed?

If the answer to either question is yes, then these 11 tips are going to help you. Imagine spending less time worrying about how to use blocks, and more time actually using them! Does that sound like a good start to your day? Furthermore, being able to craft better designs that you’re proud of?

I hope so. These 11 helpful tips are about the WordPress Gutenberg editor – and the blocks they provide out of the box. We’ll also explain how to use them which can help you move into more complex block usage.

Imagine them as block training wheels. Spending time with them is essential. This article helps you build a core foundation and understanding of all the blocks. This leads us into our first tip:

Tip #1 – Start From Scratch

illustration of babies crawling, walking then running

When I started using WordPress it was very intimidating. In the beginning, I did not have any major computer skills. General web surfing and email usage — that was it.

I remember using the Gutenberg for the first time, there was some confusion. The idea of blocks was foreign to me. I knew about CSS and the box model, so I thought about the design of a Gutenberg page like that. Which eases us into the first point:

  • Associate Gutenberg blocks with something you can relate it too. This can help you feel more comfortable using blocks and makes the topic easier to wrap your head around.

  • Remember learning something new is exciting. When was the last time you learned something brand new? In an article written by sciencenewsforstudents.org – after you learn something new, your brain is never the same again. It gets rewired forming new connections and neurons. Learning new things becomes the instigator for a sharper mind.

Tip #2 – Own The UI

  • When you know everything about something it breeds confidence and guarantees creativity. Think of a time when you hopped out of bed and did three different things at the same time without even noticing? Yeah, that’s because you have been doing it for a long time and you’re on autopilot.

  • Nick Vujicic says practice makes perfect. Do the same thing with the Gutenberg editor. Play with it, find out where everything is. You have to own it!!

Tip #3 – Read up on each Block

  • When you want to be good or even great at something you ‘have’ to read. I will be the first to say how much I love YouTube and all the video content available. But…There is no substitute for reading an article or a book about what you want to learn. WordPress.org has helpful documentation on Gutenberg blocks and the WordPress Gutenberg editor.

Bonus Tip: At the same time you are reading about a block, practice using that block. This will reinforce what you read and anchor it to your long-term memory.

Tip #4 – Know What Blocks You Need

book with writing and drawings
  • Plan out your blocks – what I mean is, know what blocks you will need before you begin your design for that page. Having a clear outline of the blocks you will be using on your website makes creating a layout easier.
  • Begin to see your design in blocks. This is more effective than sitting down and starting to design a page from scratch.

  • Try building the skill of developing a design in your mind. Envision how your page layout will work, and how your content will fit together. This can help you create the final layout much easier.

Tip #5 – Trends & Blocks

  • What is your inspiration? When you are thinking of your blog or your website – what excites you about the design? Adding your special twist on a website is important. So is knowing what trends are working best on websites for the year. Below are some resources that can help you get started.
  1. The 8 Biggest Website Trends 2020 – 99designs.com
    • This blog explains current trends and trends for next year.
  2. Web Design Trends 2020 – graphicmama.com
    • Great resource, offers high-tech trends and the up-close looks at trending sites breaking the mold.

These articles will give you some inspiration on what is trending in design. And guide you to finding the blocks you will need to create your new masterpiece. Being excited about your design is the lifeblood of any website builder.


Finding your inspiration is important. But, finding the blocks that can build your new site, is the essence of your design. It’s a rule for your guaranteed success- don’t forget tip #4.

Notable Mention

Web Design Trends 2019 – awwwards.com

Very good article with a large amount of block friendly designs

Tip #6 – Go Research Block Plugins

  • On WordPress.org you have access to over 55,000 plugins! Talk about a kid in a candy store. What I love about this plugins webpage is the ability to search for exactly what you want.

  • Once you visit this webpage, type blocks into the search bar then press enter. WordPress will give you all the block-specific plugins that offer designer blocks. Tadaaa! You can research the block plugins you can use to design your site.

  • The theme here is research. By making yourself aware of what is available to you, you begin to see value in using blocks. This can help you become a better designer and Gutenberg block user.

The tip above helps build on the foundation you already have. And adds more advanced blocks to your qualifications. The Advanced Gutenberg Plugin comes from the WordPress repo. It helped me add more functionality to my posts and pages. I feel its a hidden gem, even though it’s not as popular as some other plugins that use Gutenberg blocks.

Below is a small list of popular blocks. This will get you started, but remember there are so many more block plugins for you to sample. Always search for and try new and available blocks.

Tip #7 – Fall in Love with Blocks 😍

  • The quicker this happens, the sooner your fear of using the new editor will go away. If you’re not a web developer you might not remember this. But, when CSS flexbox became available it took a while for it to be accepted. Now it’s used throughout almost every CSS library there is. There are zombie games that show you how to use it!
  • Change is hard and there are pains that come along with it, explained here by Brendon Burchard. Yet, when we do change and start using the new block editor it can improve our efficiency. And it can make you a sought after WordPress developer. You will have a reputation for understanding the Gutenberg editor on a more strategic level.

Tip #8 Use as many blocks as you can

Now that you have made it this far you should be proud. You have started from the bottom now your here (a cheesy pun I know).

  • Start using the blocks you have found, and I don’t mean just putting them together to make your site. I mean analyzing every single detail of the block. You want to add the block and attempt to use every option that block has. You want to know the capabilities of the block inside and out.
  • Can you use the block in a different way then it’s intended use? Can you leave things out to make it different? Are you able to add CSS to the block to make it even more customizable? These are the questions to ask, to become a premium visual Gutenberg block page designer. The age of the visual web developer is upon us, will you be ready?

via GIPHY

  • Try and do this for as many blocks as you can. If you are always looking for new blocks to use, and different ways to use them, your designs will be different. You will do things with the Gutenberg editor others didn’t know was possible.

Tip #9 – Use the Block Editor Every Day

I know we all get busy, that’s life. It’s up to us to carve out time for our priorities. Do you have difficulties managing your time? Or figuring out your priorities? Check out this easy ready on how to get your priorities straight. This article is a game-changer and walks you through how to figure it all out.

Back to tip # 9:

  • Do a little bit every day. A little goes a long way. Have you heard that before? Most of us don’t start something because we think about the big picture and get overwhelmed. Using blocks should not feel like that. When you follow the tips laid out in this guide, you’ll begin using blocks in your head. And you just might have part of your page laid out before you begin.

  • Sections are the key. Try with a section at a time. Do the work in your head or on paper. Visit a website or two for inspiration if you need to. Pick a section on that site and try to recreate it. That’s simple enough. Even if the blocks you use don’t work exactly how you wanted at first, you will be one step closer to figuring it out. Trust me this works.

Tip # 10 – Stay Consistent

You might be thinking Bro, you just said that in tip #9! It’s so nice I’ll say it twice. When it comes to learning how to use anything you must do it often, do it with intention and then do it all over again. In an article by Launch School (a school for software engineers) titled Consistency: The Key to Success, the author talks about why it’s necessary to remain consistent in learning anything. Many other world-class motivators and educators agree:

“It’s not what we do once in a while that shapes our lives. It’s what we do consistently.”

Anthony robbins
  • Live with intention. Include WordPress and the Gutenberg block editor in your daily routine. In order to craft anything, you can imagine with blocks. I mean, that’s if you want to become awesome at it!

Tip #11 – Share your knowledge

If you would have asked me 2 years ago, hey Rock, you think you’ll be sitting behind a computer offering up how-tos about using WordPress? I would have said “no way”! I am an introvert I don’t blog, I don’t make YouTube videos, I don’t interview others about their lives!

But then I decided I wanted to get good at those things. I found that the fastest way to convert what I learned to long term memory was to teach it!

  • We are all teachers. We all have taught someone something before and have the capacity to do it again. If the great minds of our past kept what they learned to themselves the world would not be what it is today!

Here are some ideas to get you started:

  • Teach a friend: You can ask them to sit there while you tell them everything you learned. If they’re a good friend they will make fun of you! But, they’ll still listen.

  • Find a forum to answer questions in. You can even create a new group if you don’t see one and start adding value that way. Trust me someone will find it and appreciate you for it.

  • Write a blog: Yes there is a ridiculous number of blogs created every day. But remember what we discussed earlier about consistency? You have the discipline to stick with it. And you are doing this to learn and reciprocate your new knowledge, not necessarily to create the biggest blog on the topic. Although when you add value and help others, you could end up with the best blog out there. Don’t be surprised if that happens.

Bonus Tip: There are so many ways to improve learning. What I listed are just a couple of ways for this specific area of education. If you are interested in learning more here is a great article from verywellmind.com that shares more details and goes deeper into various learning strategies.

Wrapping up

This blog post is different, yes it is about using Gutenberg blocks. And helping you get more done with the editor. (If you follow these tips you will own the UI and master every block you touch).

But what makes this article different is ‘how’ you learn to use what you learn. You are actively learning by following these tips.

You are researching blocks and plugins, zestfully finding trends to inspire you. Making use of the childlike imagination stored inside you!

All to create layouts in your head (or somewhere else). And apply spaced repetition (learning over time). This improves your memory of what you can do with blocks. Using a tactical approach with them, which confidently increases your affinity for design.

I hope you understand how dynamic of a developer and Gutenberg rockstar you will be by staying consistent with this.

Incorporating these 11 tips puts a spotlight on your path to building amazing and dynamic pages and posts using Gutenberg blocks.

It is my sincere hope this is helpful in some way. Please leave a comment below and tell me how you will use Gutenberg. And visit our YouTube channel for simple beginner videos about the WordPress Gutenberg block editor.

Until next time,

WP {with} Me

Share me with friends

Rockey Simmons

Writing about software and technology is my passion. When I am not writing, I am building responsive webpages, learning about marketing, or reading about business. As a Saas and technology copywriter, my obsession is to continue learning my craft and offering unique and useful content to businesses, entrepreneurs, and WordPress beginners.

13 thoughts on “Gutenberg Blocks: 11 Easy Tips For Using Blocks | Supercharge The Design of Your Website

  1. Long time reader, first time commenter — so, thought I’d drop a comment..
    — and at the same time ask for a favor.

    Your wordpress site is very simplistic – hope you don’t mind
    me asking what theme you’re using? (and don’t mind if I
    steal it? :P)

    I just launched my small businesses site –also built in wordpress
    like yours– but the theme slows (!) the site down quite a
    bit.

    In case you have a minute, you can find it by searching for “royal cbd”
    on Google (would appreciate any feedback)

    Keep up the good work– and take care of yourself during
    the coronavirus scare!

    ~Justin

  2. Hi Willie, thanks for the kind words. I use the OceanWp theme, it has several features and allows you optimal customization options. Please use it, and if you have any questions during your journey on customizing it, don’t hesitate to ask. I am here to help.

    I checked out your site, I love the black and gold color scheme. It did not seem slow to me, but you can add website caching for your site so viewers will view saved pages instead of having to download pages every time they visit. Check out this article https://wpbuffs.com/website-caching/

    Good luck with your business. CBD is booming right now!!

  3. Useful info. Fortunate me I discovered your website by chance, and I am shocked why this coincidence didn’t happened in advance! I bookmarked it.|

  4. magnificent issues altogether, you just gained a emblem new reader. What could you recommend about your post that you simply made a few days ago? Any certain?|

  5. Nice post. I was checking continuously this blog and I am impressed! Very useful info particularly the last part 🙂 I care for such information a lot. I was seeking this certain information for a long time. Thank you and good luck.|

  6. I am grateful for your kind words, I just finished up a website, where I used the click to tweet block, from ultimate blocks. It’s a really great plugin. I will be doing a tutorial on it soon. So ultimate blocks is what I used a few days ago. Thanks for reading.

  7. Thank you so much, that is really great to hear. I appreciate your support and am so happy you found it useful. Have an excellent day!🙂

Comments are closed.

Back to top