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

Comments

  1. Lobsang says

    Hi Matt, I love your work on the block and ACF layout all of them. How do you control width using range field in the Back end? Thank you for sharing your amazing work. Happy New Year!

    • Matt Whiteley says

      Hey Lobsang,

      Any time I need an ACF field to output a styles I add it as a inline style in the PHP template file for the block so it doesn’t rely on the stylesheet, but he value in the custom field.

      I have a block directly theme and plugin where I store a lot of common blocks I build. Feel free to email me (matt@whiteleydesigns.com) with your GitHub username/email and I can share that with you.

      Cheers,

      Matt

      • Lobsang says

        Hi Matt,
        Thank you so much responding my comment. I would love to see your common blocks. I am a new to ACF block so it will be very helpful for me. I will email you shortly.

        Thank you!

        Lobsang

Leave a Reply

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