What are Wordpress Block Patterns and Top 6 Libraries

Boost your website speed & performance.

*No spams

Wordpress block patterns offer a fast and straightforward way to build websites elegantly.

With full website editing leaving beta in WordPress 6.2, building with blocks will become popular, and more developers will adapt to this new option to build, which keeps the website way faster than website builders but has the same easy user experience.

Block patterns can be reusable blocks(synced patterns), which help keep content in sync throughout the site, or pre-built blocks(patterns) which help apply the same layout in various regions

Large websites are now using blocks. In Wp Rocket’s case, they went from Classic Editor to Blocks. However many websites are going from website builders to blocks or block themes.

Many consider it the future of WordPress website development, with new and exciting block themes coming up. Look at the top list of Wordpress block pattern libraries with paid and free options.

What are Wordpress patterns

This term has been officialized recently. It now refers to patterns and synced patterns, replacing reusable blocks.

Patterns can either be created(registered) by the theme(defined in code) or created by the user(stored in the database).

Synced patterns are patterns that sync across your website. A good example of a synced pattern use is a call-to-action block inserted at the end of the page. You want that section to remain the same for the entire site, therefore a synced pattern.

Patterns(referring to non-synced) and full-page patterns are simply sections. They save time when building as you just copy and paste them.

A good analogy for patterns is:

  • Sections Templates = Patterns. Can either be synced-pattern on patterns(non-synced).
  • Page layouts = Full-page patterns
  • Website templates = Full-page patterns Kits
Wordpress Pattern navigation – Source

If you don’t have a block theme installed, you can manage synced patterns with the following code(paste in functions.php), by creating a shortcut in the wp-admin:

/**
 * Reusable Blocks accessible in backend
 * @link https://www.billerickson.net/reusable-blocks-accessible-in-wordpress-admin-area
 *
 */
function be_reusable_blocks_admin_menu() {
    add_menu_page( 'Synced Patterns', 'Synced Patterns', 'edit_posts', 'edit.php?post_type=wp_block', '', 'dashicons-editor-table', 22 );
}
add_action( 'admin_menu', 'be_reusable_blocks_admin_menu' );

Another workaround for managing or building patterns is using the Pattern Manager plugin. It’s indicated for developers, but you can create patterns that will be saved in the PHP code of your theme.

Building with patterns

One thing to note is that block themes or FSE themes, are relatively new, while block plugins are already popular. You don’t need a block plugin to build a block theme, but many themes’ full-page patterns require you to install their proprietary block plugin to make all features work.

It’s up to you to choose to use only a block theme or build using a block theme plus a block plugin.

Every block theme listed on the WP repository uses core blocks.

Best Block Themes pattern libraries

Block themes don’t require installing a block plugin to use its patterns, as it leverages the block editor(Gutenberg) entirely for the blocks.

The difference between block theme patterns from block plugin patterns is that you’re not dependent on a block plugin to make sure a pattern works, as block themes leverage the Gutenberg editor for their layout.

Yith Wonder

The Yith Wonder theme offers many patterns to enhance your Woocommerce website. It also offers full-page patterns(website/template layouts).

Ollie

The Ollie theme is a block theme that offers +50 patterns. To view its pattern list, you must install the theme, add a block, browse all, and explore all patterns.

Spectra One

The Spectra One theme is the creators of the popular Astra theme first block theme. It’s free and comes with a handful of patterns and full-page patterns. Other features are:

  • Sidebar support
  • Header options; Sticky, Transparent, or both
  • 9 Global Styles; 9 different beautifully crafted color palettes

Frost

Created by WP Engine, Frost is a Full Site Editing theme that offers numerous patterns to build your block-based website. The patterns included are:

Spectra

Spectra is a block plugin from the creators of the Astra theme. It offers a variety of paid and free full-page patterns – also known as website/layout templates – for Woocommerce and many other industries:

Spectra Pro

The Spectra Pro block plugins offer enhancements, such as:

  • Dynamic Content; ACF, PODS, and Meta Box
  • Loop Builder; displays posts and pages based on custom parameters
  • Popup Builder and Modals
  • Animations, Image Gallery, Instagram Block
  • Slider Pro
  • User Registration and User Login form customization

Kadence Blocks

Kadence Blocks is a free plugin to build websites with blocks, extending Gutenberg’s capabilities. Together with the Kadence theme it offers a wide range library of free and paid full-page patterns(started templates).

You should buy the Essential plan to get Kadence Blocks Pro + Starter templates. Kadence Blocks main Features:

  • Row Layout: rows with nested blocks either in columns or as a container.
  • Image Gallery
  • Form
  • Advanced Text: sizes and attributes for desktop, tablet, and mobile.
  • Buttons, tabs, and accordions.
  • Lottie animations.
  • Free design library.

Kadence Blocks Pro

Pro version offers:

  • Animate on Scroll.
  • Custom Icons and Fonts: Upload your own custom icon, fonts, or an entire set.
  • Design Library: Various designs to kickstart your projects.

Check all blocks here. Kadence Blocks Pro offers unlimited sites at $69/year.

Generateblocks

Generateblocks is a Wordpress block editor with 4 features. These 4 blocks (container, grid block, headline block, button) are meant to build your Wordpress site flexibly without having a single block for each thing, according to GenerateBlocks.

Each block has full customization on the free plan, including:

  • Typography; Pick from Google or Local fonts with full customization.
  • Spacing, Colors(including Gradients).
  • Background and Background Images.
  • and SVG(can use on buttons). 

Generateblocks Pro

The Pro plugin has far more customization settings and an option of over 150 templates to speed up your building process. The additional customizations are:

  • Global Styles; create global styles across the website and use them everywhere.
  • CSS effects such as opacity & blend, box-shadow, text-shadow, filters, etc.
  • Background images and gradients to Container blocks.
  • Built your SVG library.
  • Copy-paste styles: copy a style from a block and apply it to another.

GenerateBlocks offers a Pro plugin with over 200 pattern templates to speed up your building process. GenerateBlocks Pro starts at $39/year.

Aino & Aino Blocks

Aino is a new full-site editing theme. It offers numerous patterns for a quick design start in combination with the Aino Blocks plugin.

Gutenberg Libraries

Wpalpha offers one of the best full-page pattern and pattern libraries of Wordpress.

GutenbergHub offers a free Gutenberg pattern library on their website, you can even share previews of full-page patterns you built. There’s also the official Wordpress pattern repository.

Both allow to copy and paste the patterns from there, without having to install a plugin, like others.

guest

0 Comments
Inline Feedbacks
View all comments