A Few Examples of Custom Gutenberg Blocks Built with Advanced Custom Fields

With the addition of the Gutenberg Block Editor my development workflow has vastly changed over the past year. Integrating a variety of custom blocks using Advanced Custom Fields has become a vital part of each website I build. In this post I’ll highlight a few different blocks that I have created showing their flexibility and some great use-cases.

Hero Blocks

A staple on most websites is some variation of a hero block. Whether this is a large image with text on it, a background video with a text overlay, or some sort of simple slideshow, most sites these days have some sort of “hero block”. Here are a few different ACF hero blocks I’ve built.

Waterloo Greenway

Evexia Wealth

Indeed Stories

Last Week in AWS

Split Image Blocks

Here are a few examples of what I call “Split Image Blocks” where there is an images on one side and content on the other. The content and image both align vertically centered using flexbox.

Whiteley Designs Home Page

Crane Specialists

Knickerbocker Naples

Testimonial Blocks

Testimonials are an important, and common aspect of many sites. Here are a few examples of custom testimonials blocks created with ACF.

Real Estate on Purpose

Last Week in AWS

Advanced Blocks

Each site has it’s own nuances. Below are a few advanced blocks that show some more versatility that ACF custom blocks offer.

Waterloo Greenway Memberships linked to EDD Products

Go Round Rock

Waterloo Greenway Rentals Block

Wrapping Thing Up

As you can see, the possibilities of creating blocks with Advanced Custom Fields are endless. The integration that they have created has become a vital part of my workflow and has bridged the gap between the Gutenberg Block Editor and the PHP-based development I am familiar with.

Make sure to check out my other ACF Block Related posts like syncing your ACF color picker with your Gutenberg colors and setting your defaults ACF editor styles.

About Matt Whiteley

Matt has been building bespoke WordPress websites for over 10 years specializing in the Genesis Framework. He integrates Advanced Custom Fields heavily in all builds, especially with the new Gutenberg Block Editor, allowing clients to easily modify all aspects of the their website with ease.

He works with a wide variety of small businesses and agencies across the country providing development services as well as hosting and maintenance. When he isn't coding he enjoys spending time with his wife and two children, golfing and playing poker.

Reader Interactions

Leave a Reply

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