ACF Block Modules

New Plugin

Below are examples of new ACF Block Modules that are designed to structure content in specific ways.

Each module requires the presence of three components for it to display on the site:

  1. An ACF Field Group tied directly to the corresponding Block
  2. The Block itself, added to the content of any page
  3. Custom code in the new ACF Block Modules plugin that controls the display and style of content that exists in the Block.

#1 and #3 require little to no maintenance once they are present. At that point, #2 is ready to use (or not use) as you see fit. They are available in the block editor for posts and pages, and can be made available (or unavailable) for any post type.

Flexibility

In an effort to keep code DRY (don’t repeat yourself), I logically combined modules where I could. For example, a “Heading / Content (top & bottom)” module was requested, and so was a “Heading / Content (left & right)”. Instead of having two modules, I made one that handles Heading / Content top & bottom, left & right, and right & left. The module includes a setting that simply shifts the content around to the desired position.

This is powerful because, remember, these modules can be reused endlessly, even on a single page. So while one variation of the module is at the beginning of the page, another may be at the end, configured differently. This applies to every one of the modules where variation makes sense! Furthermore, they all support certain block level settings found in WordPress, like block alignment, and text alignment within a block.

Design

All the styles you see are, for the most part, inherited from the theme and include very little design flair. This is done so that you can integrate these modules into your content without the module design standing out more than it should

Also note that every module displayed below was configured intentionally. That means your desired configuration for each use case may be different. I did not display an example of the Featured Contend Module with the brand color (orange) background. However, you can do that easily if you choose to do so.

Most modules support all four background color options (brand, accent, dark, and light), or no background at all. They’re also fully responsive.

Add/Edit Modules

Feel free to edit any module below! They are here for demonstration purposes. Play with the modules/settings all you’d like.

You can add new modules by adding a new block and typing “module” in the search. Up to 6 available modules will appear. Type a more specific name of the module if you don’t see it. The names are listed above each example.

NOTES:

  • All images you see, including icons, are placeholder images and not created to be part of the actual design. They are for demonstration purposes only and can be swapped out with other images.
  • You can delete this page if you no longer need examples.
  • If you are EDITING this page and it appears that one of the modules won’t load, that is WordPress’ block editor struggling to load a lot of content. It’s not broken. To fix the module that is attempting (but failing) to load, click it and adjust one of the settings associated with the module, like the little computer icon with an eye in it (that’s the Preview button). Click it, the icon will turn into a pencil (that’s the Edit button) and it’ll give you an unstyled version of the module. Click the pencil button once again to go back to Preview mode, and the module magically loads just fine. This is an issue with WordPress, not the module itself.

1. Accordion List

A list of headings that each display their associated content when clicked. Great for Frequently Asked Questions display.

Check out this optional heading. It’s great!

Check out this optional description because it’s even better. Well, it’s not better, per se, but it it serves its purpose better than the heading serves its. I feel like that should be the correct way to end that last sentence.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing.

Check out this optional heading. It’s great!

Check out this optional description because it’s even better. Well, it’s not better, per se, but it it serves its purpose better than the heading serves its. I feel like that should be the correct way to end that last sentence.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing.

2. Featured Content

An element designed to highlight one particular piece of content with a title, description, image, and more.

3. Call-to-action

A simple element consisting of a large title and a button.

4. Heading / Content

Display a heading and corresponding content using various layouts.

This is an award-winning, attention-grabbing heading. It really is pretty long for a heading.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing.

Id diam vel quam elementum pulvinar etiam. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Felis eget nunc lobortis mattis aliquam. Vitae elementum curabitur vitae nunc.

This is an award-winning, attention-grabbing heading. It really is pretty long for a heading.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing.

Id diam vel quam elementum pulvinar etiam. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Felis eget nunc lobortis mattis aliquam. Vitae elementum curabitur vitae nunc.

Headings are cool

Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing. Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing.

This is an award-winning, attention-grabbing heading. It really is pretty long for a heading.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing.

Id diam vel quam elementum pulvinar etiam. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Felis eget nunc lobortis mattis aliquam. Vitae elementum curabitur vitae nunc.

5. Image / Content

Display an image and corresponding content using various layouts.

Image left / Content right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing.

Smaller headings are even cooler

Id diam vel quam elementum pulvinar etiam. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Felis eget nunc lobortis mattis aliquam. Vitae elementum curabitur vitae nunc.

Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing.

Image right / Content left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing.

Smaller headings are even cooler

Id diam vel quam elementum pulvinar etiam. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Felis eget nunc lobortis mattis aliquam. Vitae elementum curabitur vitae nunc.

Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing.

Image top / Content bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra convallis posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet. Nisi quis eleifend quam adipiscing.

6. List Enhanced

An element designed to display a list of content, horizontally or vertically, that includes an icon, title, and description for each item.

  • Nice Title

    At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Felis eget nunc lobortis mattis aliquam.

  • Another One

    At imperdiet dui amet a nulla facilisi morbi tempus. Felis nunc lobortis mattis aliquam. Felis eget nunc.

  • Sweet Title

    At imperdiet dui accumsan sit imperdiet amet nulla morbi tempus. Felis facilisi eget nunc lobortis mattis aliquam.

  • Cool Titles

    At dui accumsan sit imperdiet amet nulla facilisi morbi tempus. Felis eget sit nunc lobortis mattis aliquam.

This one has a nice title and description!

At imperdiet dui accumsan sit imperdiet amet nulla morbi tempus. Felis facilisi eget nunc lobortis mattis aliquam. Felis eget sit nunc lobortis mattis aliquam. Felis eget sit nunc lobortis.

  • Nice Title

    At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Felis eget nunc lobortis mattis aliquam.

  • Another One

    At imperdiet dui amet a nulla facilisi morbi tempus. Felis nunc lobortis mattis aliquam. Felis eget nunc.

  • Sweet Title

    At imperdiet dui accumsan sit imperdiet amet nulla morbi tempus. Felis facilisi eget nunc lobortis mattis aliquam.

  • Cool Titles

    At dui accumsan sit imperdiet amet nulla facilisi morbi tempus. Felis eget sit nunc lobortis mattis aliquam.

This one has icons in line with titles!

At imperdiet dui accumsan sit imperdiet amet nulla morbi tempus. Felis facilisi eget nunc lobortis mattis aliquam. Felis eget sit nunc lobortis mattis aliquam. Felis eget sit nunc lobortis.

  • Nice Title

    At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Felis eget nunc lobortis mattis aliquam.

  • Another One

    At imperdiet dui amet a nulla facilisi morbi tempus. Felis nunc lobortis mattis aliquam. Felis eget nunc.

  • Sweet Title

    At imperdiet dui accumsan sit imperdiet amet nulla morbi tempus. Felis facilisi eget nunc lobortis mattis aliquam.

  • Cool Titles

    At dui accumsan sit imperdiet amet nulla facilisi morbi tempus. Felis eget sit nunc lobortis mattis aliquam.

  • Nice Title

    At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Felis eget nunc lobortis mattis aliquam.

  • Another One

    At imperdiet dui amet a nulla facilisi morbi tempus. Felis nunc lobortis mattis aliquam. Felis eget nunc.

  • Sweet Title

    At imperdiet dui accumsan sit morbi tempus. Felis facilisi eget nunc lobortis mattis aliquam.

  • Cool Titles

    At dui accumsan sit imperdiet facilisi morbi tempus. Felis eget sit nunc lobortis mattis aliquam.

  • Nice Title

    At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Felis eget nunc lobortis mattis aliquam.

  • Sweet Title

    At imperdiet dui amet nulla morbi tempus. Felis facilisi eget nunc lobortis mattis aliquam.

Check out this awesome heading because it’s great!

At imperdiet dui accumsan sit imperdiet amet nulla morbi tempus. Felis facilisi eget nunc lobortis mattis aliquam. Felis eget sit nunc lobortis mattis aliquam. Felis eget sit nunc lobortis.

  • Nice Title

    At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Felis eget nunc lobortis mattis aliquam.

  • Another One

    At imperdiet dui amet a nulla facilisi morbi tempus. Felis nunc lobortis mattis aliquam. Felis eget nunc.

  • Sweet Title

    At imperdiet dui imperdiet amet nulla morbi tempus. Felis facilisi eget nunc lobortis mattis aliquam.

  • Cool Titles

    At dui accumsan sit imperdiet amet nulla facilisi morbi tempus. Felis eget sit nunc lobortis mattis aliquam.

7. Image Enhanced

Display a single image with design accents.

8. Testimonial / Quote

An element designed to display a testimonial or quote from a specific person.

Successful [people] are influenced by the desire for pleasing results. Failures are influenced by the desire for pleasing methods and are inclined to be satisfied with such results as can be obtained by doing things they like to do.

At imperdiet dui accumsan sit imperdiet amet nulla morbi tempus. Felis facilisi eget nunc lobortis mattis aliquam. Felis eget sit nunc lobortis mattis aliquam. Felis eget sit nunc lobortis.

Successful [people] are influenced by the desire for pleasing results. Failures are influenced by the desire for pleasing methods and are inclined to be satisfied with such results as can be obtained by doing things they like to do.

9. HubSpot Form

Display a HubSpot form with an optional heading and description.

Check out this awesome heading. It’s great!

At imperdiet dui accumsan sit imperdiet amet nulla morbi tempus. Felis facilisi eget nunc lobortis mattis aliquam. Felis eget sit nunc lobortis mattis aliquam. Felis eget sit nunc lobortis.