• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

Using The New WordPress Pattern Directory

Bhagwad Park

Published on: August 18, 2021

Categories: WordPress 0

In July 2021, WordPress 5.8 was released with a powerful new feature – the block pattern directory. It’s an addition to WordPress’s existing library of themes and plugins and is sure to be a huge asset for web developers. I must admit, I didn’t see the potential for block patterns until I took a look at the directory and tried it out for myself. But between this and reusable blocks, block patterns can replace a plugin or two on your site!

Here’s why it’s so useful.

Replacing the Button Designer Plugin

A while back, I’d written a post on using a certain plugin for button designs. I wanted to create a nice CTA button for something and didn’t find a good way to do it without a plugin. Even with the Gutenberg editor giving me the tools to style my stuff, I’m not a web designer. I need a bit of guidance – or better yet, a template. Something that I can copy/paste, and then customize for my users.

Now with the WordPress pattern directory, I can delete the plugin and just use that instead.

What is the WordPress Pattern Directory?

The idea is simplicity itself. People can create their arrangements and styles of blocks, to form a “pattern”. They share this pattern on the WordPress pattern directory, and others can simply copy those patterns to their own sites. Whether it’s a particularly well-styled table, or a complex layout of columns, background pictures, CTAs, and more, all you have to do is copy-paste.

For example, I had started off this article talking about the need for a good Call to Action (CTA). Luckily, even though the WordPress pattern directory is in its formative period, it comes with a set of pre-built patterns by the WordPress team to get us started. Under the “Buttons” section, we have a wide variety of patterns to choose from.

I just choose the most basic one, because I can easily customize it later:

Find the Pattern you Want to Copy in the WordPress Directory
Find the Pattern you Want to Copy in the WordPress Directory

I just click “Copy” and the blocks go into my clipboard. You need to paste them into WordPress Gutenberg. If you haven’t switched over to Gutenberg, I suggest you do so now. I hated it when I first started using it, but it’s gotten much better, the bugs have been ironed out, and it’s now a definite improvement over the older clunky editor.

So once you’ve opened up your post in the Gutenberg editor, simply paste whatever you copied from the WordPress pattern directory like this:

Paste the Block Pattern into WordPress Gutenberg Text Editor
Paste the Block Pattern into WordPress Gutenberg Text Editor

Everything is transferred automatically. The formatting, the text, the placement – exactly as you saw it in the preview. And now you can go into each item in the block and start customizing it to fit your purposes. In the above example, you can change the text, the font, the button text, background color, the button style – whatever you want. In short, just because you copy a pattern, doesn’t mean you’re stuck with it. You keep what you like, and simply discard the rest.

Save your changes, and you can preview the post as shown here:

Final View of the Block Pattern
Final View of the Block Pattern

The best part of using patterns like this is that they don’t increase your site load. No need to add plugins, and nothing to update. You can use dozens of patterns, or none – your site speed will not be impacted. It’s a perfect solution for something looking for inspiration on a particular element on their site but doesn’t’ want to come up with it from scratch. If you’re looking for ideas, the new place to look will be the WordPress pattern directory.

I’m sure you’re already thinking of ways you can integrate some of these patterns into your site. I know I am. Happy designing!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Development
  • Website Security
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA