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 websites, which keeps the website way faster than website builders but have the user experience to let regular users build their entire website using blocks.
You can build using reusable blocks or pre-built blocks to be later customized(block patterns).
Reusable Blocks helps you keep content in sync throughout your site. Block Patterns help you apply the same layout in various regions. Source:wp.org
Large websites are now using blocks, including Gutenberg. In Wp Rocket’s case, they went from Classic Editor to blocks. But many websites are going from website builders to blocks and full website editing(FSE themes), as blocks may offer the same flexibility and easiness to use as website builders.
Many consider it the future of WordPress website development, with new and exciting themes born full-website-editing(FSE themes) ready.
Take a look at the top list of WordPress block pattern libraries with paid and free options.
Please note, the images on the block patterns are hosted on 3r-party domains, make sure to load them on your host by pressing the “Upload external image” button.
WordPress.org Patterns
Official WordPress pattern repository. It allows you to copy and paste the patterns from there, without having to install a plugin, like others.
Kadence Blocks
Kadence Blocks is a free plugin to build websites with blocks, extending Gutenberg’s capabilities. It currently has the following 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 is currently offered at $69/year for unlimited sites.
Generateblocks
Generateblocks is a WordPress block editor with 4 features on it. These 4 blocks (container, grid block, headline block, button) are meant to build your WordPress site with flexibility without the need to have 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 that has over 200 pattern templates to speed up your building process. GenerateBlocks Pro starts at $39/year.
Aino
Aino is a new full-site editing theme. It offers numerous patterns for a quick start of design.
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:
- Call-to-Action
- Featured Boxes
- Footer
- Header
- Hero Section
- Homepage: import a full page layout.
- Link Page
- Podcast Episode
- Portfolio
- Pricing Table
- Team Members
- Testimonials
Gutenberg
WordPress’s next-gen block editor is meant to make building using blocks easier and more convenient.
Gutenberg lets you edit individual content blocks on posts or pages. Add and adjust widgets. Design your site header and footer and re-use blocks. Test the Gutenberg pattern library here.
Gutenberg is used in the Wp Media plugin Wp Rocket website which recently switched from WordPress Block Editor.
Get your Core Web Vitals optimized. Send a request