ACF + Gutenberg + Bootstrap5

A Project Originally Developed for Reveel Group Inc

In this example the company wanted to give their editors and easy to use block to input and update their “Features” pages. So I combined the power of Advanced Custom Fields into Gutenberg as a block giving the client the tool they needed.

Bootstrap 5 layered on

On the front end I layered on the CSS using the Bootstrap5 framework. The mobile first approach was also a requirement from the client and BS5 provides all tools we needed.

Benefits of Integrating ACF with Gutenberg and Bootstrap 5

ACF is very flexible

There’s a huge variety of field types that can be utilized. And the PRO version gives you even more powerful field types including repeaters. This list uses a repeater with two simple text input areas.

Gutenberg

The Gutenberg editor is the most advanced block editing tool ever created by WordPress. It’s light and fast and comes loaded with many different block types. All the latest and greatest plugins implement Gutenberg Blocks.

Bootstrap 5

Bootstrap5 was combined with the Underscores them and named Understrap. It’s the starter them this site is built on and the source for the CSS framework.

Putting it together

Developing a Gutenberg blocks this way gives endless flexibility by utilizing ACF fully customizable input form. The Bootstrap CSS layered on makes for a light and clean UI.

How it Works

The programming process to set this up isn’t too difficult:

  • Register the render callback function as a GB block
  • Create an ACF form and assign the form to the GB callback function
  • Build a render template to output the data on the front end

  • Register the block

    Register a new GB block with acf_register_block

  • ACF Form

    By creating an acf-json folder in the theme base directly ACF will output a custom json file that can be used to transfer the form from one enviromnent to another.

  • Data Input

    Input information in the ACF form in the back end. Blocks can be used on any page.

  • Output

    Each block type has a custom template. In the template $blocks = get_field('blocks'); gets us access to the data. Using Bootstrap allows for us to keep the html streamlined.

    • Underscores + Bootstrap5 = Understrap

    Reveel Website

    Why Choose ACF + Gutenberg + BS5?

    There are many ways at the end of the day to create and modify blocks in WordPress. We felt in scoping the project integrating ACF with the Gutenberg blocks was the best path forward for their editorial team.