Crafting Reusable Content Blocks: ACF Pro Flexible Content with Twig Components

It’s no secret that the web is getting heavier. Every day, another site launches powered by a bloated page builder, sacrificing performance and clean code for a quick drag-and-drop fix. Here on the blog, we’re all about reclaiming control, building performant WordPress sites that clients love and Lighthouse scores adore. That’s why I’ve become such a staunch advocate for FlyntWP. It’s not just a theme boilerplate; it’s a mindset shift, pushing us back to programmatic, component-based development that simply flies. Instead of a general advocacy piece this time, I want to dive into a specific, incredibly powerful pattern I use constantly: combining ACF Pro’s Flexible Content field with FlyntWP’s modular Twig components to create truly reusable, performant content blocks.

Imagine you need a flexible "Content Block with Image" – sometimes the image is on the left, sometimes on the right, sometimes there's a heading, sometimes not. A typical page builder might give you a heavy shortcode or a div soup. With FlyntWP, we build this component once, beautifully, and reuse it everywhere, maintaining perfect control over our markup and ensuring blazing fast Core Web Vitals.

First, let’s set up our ACF Pro fields. You’ll start with a Flexible Content field, maybe called `page_components`, attached to your page template. Within this flexible content field, we'll define a "Layout" named `Content Block with Image`. Inside this layout, we’ll add a Group field, also called `contentBlockWithImage`. This group will contain our actual component fields: * `image`: An Image field, returning an Image Array. * `heading`: A Text field. * `content`: A WYSIWYG Editor field. * `image_position`: A Select field with choices 'left' and 'right'.

This ACF setup gives our editors a clean, intuitive interface to build their content. They choose the "Content Block with Image" layout, fill in the details, and pick the image position. Simple.

Now for the magic on the front end. FlyntWP's component structure expects our `ContentBlockWithImage` component to live in `Components/ContentBlockWithImage/index.twig`. This is where we write the actual HTML and Twig logic to render our component based on the ACF data. No heavy abstractions, just direct, clean markup.

Here’s a simplified look at what `index.twig` might contain for this component:

<section class="block-content-with-image {{ fields.image_position == 'right' ? 'block-content-with-image--right' : 'block-content-with-image--left' }}"> <div class="container"> {% if fields.image %} <div class="image-wrapper"> <img src="{{ fields.image.url }}" alt="{{ fields.image.alt }}" loading="lazy" width="{{ fields.image.width }}" height="{{ fields.image.height }}"> </div> {% endif %} <div class="content-wrapper"> {% if fields.heading %} <h2>{{ fields.heading }}</h2> {% endif %} {% if fields.content %} {{ fields.content|raw }} {% endif %} </div> </div> </section>

Notice a few things here. We're accessing our ACF fields directly via `fields.image`, `fields.heading`, etc. The `fields.image_position` is used to conditionally apply a CSS class (`block-content-with-image--right` or `--left`), allowing us to easily control the layout with just a few lines of CSS (flexbox, probably!). We're also using `loading="lazy"` on the image and directly outputting `width` and `height` attributes, which are crucial for optimal Largest Contentful Paint scores and a great user experience. The `|raw` filter on `fields.content` is essential for outputting the HTML from the WYSIWYG editor correctly.

This approach gives us incredible power. The resulting DOM is exactly what we need, nothing more, nothing less. There are no extraneous divs, no inline styles from a page builder, no JavaScript bloat simply to render a content block. FlyntWP, backed by Vite, compiles these Twig templates and associated SCSS and JS files lightning-fast during development, and bundles them efficiently for production. This means you get a build process that feels instant and a deployed site that feels even faster.

By adopting this modular, programmatic approach, we’re not just building websites; we're crafting experiences optimized for speed, maintainability, and developer sanity. This specific pattern – ACF Flexible Content driving Twig components – is a foundational pillar of building fast, future-proof WordPress sites with FlyntWP. Give it a try on your next project; you’ll wonder how you ever worked without it.