Transforming a Classic WordPress Theme to a Block Theme with AI

The shift from classic WordPress themes to block themes is a necessary evolution in modern WordPress development. While Advanced Custom Fields (ACF) flexible content remains an incredibly useful tool, WordPress’s Full Site Editing (FSE) and block patterns now offer a more native, scalable alternative. In this project, I’m migrating a classic theme that relies on ACF flexible content into a fully-fledged block theme, ensuring long-term maintainability, performance, and compatibility with WordPress core.

Using AI to Map ACF Metadata to Block Patterns

One of the key challenges in transforming a classic WordPress theme to a block theme with AI was dynamically mapping ACF metadata into block patterns. Instead of manually handling string replacements within a parsed block structure, I used Cursor AI to streamline the process.

If you haven’t explored Cursor AI yet, check out my post on 5 Essential Cursor AI Features for WordPress Developers in 2025 to see why it’s becoming a game-changer for WordPress development.

1. The ACF Metadata (Legacy Data Structure)

This metadata set came from an ACF flexible content block, representing key content fields:

$acf_metadata = array(
  'title' => 'The dream Cotswolds location',
  'subtitle' => 'Dive into luxury in the heated outdoor pool...',
  'body' => '',
  'color_scheme' => 'color7',
  'widget_type' => 'standard-widget'
);

2. The Parsed Block from the Selected Pattern

This block structure was extracted from a pre-built pattern in my theme:

$block_pattern = array(
  'blockName' => 'core/group',
  'attrs' => array(
    'backgroundColor' => 'primary',
  ),
  'innerBlocks' => array(
    array(
      'blockName' => 'core/heading',
      'innerHTML' => '<h2>TitleTitleTitle</h2>'
    ),
    array(
      'blockName' => 'core/paragraph',
      'innerHTML' => '<p>subtitlesubtitlesubtitle</p>'
    )
  )
);

3. How Cursor AI Transformed This Automatically

Instead of manually replacing placeholders, I prompted Cursor AI:

“Write a function that takes an ACF metadata array and replaces the background color, ‘TitleTitleTitle’, ‘subtitlesubtitlesubtitle’, and ‘bodybodybody’ in the parsed block structure with corresponding metadata values.”

Cursor AI generated a function that:

Mapped the color_scheme to the block’s backgroundColor attribute
Replaced placeholders like ‘TitleTitleTitle’ with $acf_metadata['title']
Inserted subtitle and body content dynamically

Here’s a simplified version of the AI-generated function:

function map_metadata_to_block($metadata, $block) {
    $block['attrs']['backgroundColor'] = $metadata['color_scheme'];

    foreach ($block['innerBlocks'] as &$innerBlock) {
        if (strpos($innerBlock['innerHTML'], 'TitleTitleTitle') !== false) {
            $innerBlock['innerHTML'] = str_replace('TitleTitleTitle', $metadata['title'], $innerBlock['innerHTML']);
        }
        if (strpos($innerBlock['innerHTML'], 'subtitlesubtitlesubtitle') !== false) {
            $innerBlock['innerHTML'] = str_replace('subtitlesubtitlesubtitle', $metadata['subtitle'], $innerBlock['innerHTML']);
        }
        if (strpos($innerBlock['innerHTML'], 'bodybodybody') !== false) {
            $innerBlock['innerHTML'] = str_replace('bodybodybody', $metadata['body'], $innerBlock['innerHTML']);
        }
    }

    return $block;
}

$updated_block = map_metadata_to_block($acf_metadata, $block_pattern);

The Power of AI in Theme Development

This automated mapping allowed me to seamlessly integrate ACF-stored data into dynamically selected block patterns, without manually handling every transformation. Cursor AI significantly reduced development time, making the transition from ACF flexible content to WordPress-native block patterns more efficient.

While ACF remains a powerful and practical tool, future-proofing development means embracing WordPress core-first solutions where possible. By leveraging AI, I was able to automate the complex, repetitive parts of this process, ensuring a cleaner, more maintainable codebase.

If you’re wondering whether AI is truly the future of WordPress development, you might find my Can Cursor AI Transform WordPress Development? A Practical Test interesting. I put Cursor AI through its paces to see if it’s really a tool that developers can trust.

Watch my kate & tom’s full development walkthrough on YouTube

elliott richmond