Flexible Content Field in Advanced Custom Fields

[min]

Hello! I’m using Advanced Custom Fields with a Frontity Project and since it’s more component driven, I’m using the Flexible Content field to render some components so that users can re-arrange components as needed or have multiples of components. I did this in PHP with this loop:

<?php if (have_rows('content_blocks')) :
while (have_rows('content_blocks')) :
$row = the_row();
$layout = get_row_layout();
get_template_part('custom/components/' . $layout);
endwhile;
endif; ?>

I’m wondering what the best approach would be in React + Frontity?
Ideally I’d have a sort of component router that would take each layout within a Flexible Content block on a page, and then render that partial. I’m not super familiar with how to handle this within React! Any help would be appreciated!

[SantosGuillamot]

Hi @min

Not sure if I understood it correctly but I feel your approach seems pretty good. ACF is showing all the content for each post in the Rest API, under content_blocks field, which is an array of your different components with all their data. They seem to be ordered so I guess the best option would be to iterate through this array and show whatever you want.

[luisherranz]

Yes, I think getting the data from the post.acf field makes more sense than rendering it to HTML.

Then, you can iterate over the data like this:

const Page = ({ state }) => {
  const data = state.source.get(state.router.link);
  const post = state.source.page[data.id];
  // This is the array of Flexible Content blocks.
  const blocks = post.acf.content_blocks; 

  return (
    <>
       ...
       {blocks.map(block => {
         if (block.acf_fc_layout === "who_we_are")
           return <Who block={block} />;

         if (block.acf_fc_layout === "team_members")
           return <Team block={block} />;

         if (block.acf_fc_layout === "testimonial")
           return <Testimonial block={block} />;
       }))
       ...
    </>
  );
}

[kivabostrom]

Wow I wish I would have found this before I started writing… I did something similar here, but used a Map to stuff Props into a block, then dump the entire array into the render

[thedonquixotic]

just out of curiosity, why don’t you just create your own gutenberg components?

[min]

If you’re asking me, I dont use Gutenberg for most projects since it sometimes allows too much control for clients.

[kivabostrom]

just out of curiosity, why don’t you just create your own gutenberg components?

gutenberg is crap. ACF keeps the content folks on rails, and me from going crazy trying to figure out how they borked their pages again. Gutenberg is the biggest mistake WordPress has ever made, and I still am curious if it will lead to their demise. But don’t take my word alone: https://wordpress.org/support/plugin/gutenberg/reviews/

[thedonquixotic]

If you’re asking me, I dont use Gutenberg for most projects since it sometimes allows too much control for clients.

You can control what blocks they have access to etc using block templates you know?

What I find ACF to be most useful for is post metadata that shouldn’t necessarily be captured as part of the content. Both have their uses.

I also get how once you’re used to building a website a certain way it’s a huge investment to switch gears. Personally I think it’s worth it long term, espc since Gutenberg blocks are defined using React, similar to using frontity as a frontend so there’s lots of overlap between the two.

But it certainly is a lot of extra work at first for sure.

gutenberg is crap. ACF keeps the content folks on rails, and me from going crazy trying to figure out how they borked their pages again. Gutenberg is the biggest mistake WordPress has ever made, and I still am curious if it will lead to their demise. But don’t take my word alone: https://wordpress.org/support/plugin/gutenberg/reviews/

Respectfully disagree. It’s actually the only reason I’m still using WP. If I wanted a custom field only CMS I’d just use something like directus: https://directus.io/

I’ve never seen gutenberg bork up a theme. The problem is just if the theme doesn’t support the blocks properly. In many ways it’s much easier to maintain than the convoluted methods that have previously been used such as shortcodes etc.

[kivabostrom]

Respectfully disagree. It’s actually the only reason I’m still using WP. If I wanted a custom field only CMS I’d just use something like directus: https://directus.io/

Hey, more power to you. Whichever platform floats your boat! Some devs like ripping out all WYSIWYG editors out and forcing their clients to write their own html. I personally use ACF Flexible content grids because it really is the best use of the WP platform IMO. A well done grid, coupled with some basic training can take a lot of pain out of getting clients up to speed on editing their own content, which is why its so popular.

[min]

To add on to what KivaBostrom said, while you can cut out specific blocks, the styling within those blocks etc are difficult to communicate to a client. When they see WYSIWYG fields, they expect things to be arranged that way way too often, and ACF Flexible Content fields kind of eliminate those issues entirely.