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.
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.
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 a new GB block with
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.
Input information in the ACF form in the back end. Blocks can be used on any page.
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.
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.