I’m working on a WordPress site where I’m using Advanced Custom Fields (ACF) to create a complex layout for my posts. Specifically, I’m using the ACF Flexible Content field to structure my posts with various layouts, including headings. Here’s what I’ve done so far and where I’m running into difficulties:

What I’ve Done:

1. ACF Setup:

   • I’m using a Flexible Content field in ACF called “Contenu flexible” with the field name contenu_flexible_custom.
   • One of the layouts within this Flexible Content field is titre_h2, which contains the headings I want to include in the Table of Contents (TOC).

2. TOC Attempt:

   • I tried using the block_editor_settings_all filter to generate anchors for the headings automatically in the Gutenberg editor:

     add_filter(
         'block_editor_settings_all',
         static function( $settings ) {
             $settings['generateAnchors'] = true;
             return $settings;
         }
     );
     

   • However, this didn’t seem to work with my ACF Flexible Content setup, as the TOC wasn’t generated correctly.

3. Custom PHP Code:

   • I wrote a custom PHP function to loop through the ACF Flexible Content field and manually create a TOC:

     function generate_acf_flexible_toc() {
         $toc = '<div class="custom-toc"><h2>Table of Contents</h2><ul>';
         $content_found = false;
     
         // Check if the flexible content field has rows of data
         if( have_rows('contenu_flexible_custom') ) {
             // Loop through the rows of data
             while ( have_rows('contenu_flexible_custom') ) : the_row();
     
                 // Check for the 'titre_h2' layout which contains the headings
                 if( get_row_layout() == 'titre_h2' ) {
                     $heading = get_sub_field('titre_h2'); // Field containing the heading text
                     if ($heading) {
                         // Create a unique ID for each heading
                         $id = sanitize_title($heading);
                         $toc .= '<li><a href="#' . esc_attr($id) . '">' . esc_html($heading) . '</a></li>';
     
                         // Output the heading with an ID in the content
                         echo '<h2 id="' . esc_attr($id) . '">' . esc_html($heading) . '</h2>';
                         $content_found = true;
                     }
                 }
     
             endwhile;
         }
     
         $toc .= '</ul></div>';
     
         // Return the TOC only if content is found
         if ($content_found) {
             return $toc;
         }
         return '';
     }
     
     function add_acf_flexible_toc_to_content( $content ) {
         // Only prepend the TOC if it's a standard post
         if ( is_singular('post') ) { 
             return generate_acf_flexible_toc() . $content;
         }
         return $content;
     }
     
     add_filter( 'the_content', 'add_acf_flexible_toc_to_content' );
     

   • This function is meant to generate a TOC from the headings in the titre_h2 layout and prepend it to the post content.

The Issue:

• The TOC doesn’t seem to generate correctly using the native method or TOC plugins since the headings are part of the ACF Flexible Content and not in the standard post content.
• I need a solution to dynamically generate a TOC for posts using ACF Flexible Content fields, specifically targeting the titre_h2 layout.

What I’m Looking For:

• Is there a better way to generate a TOC dynamically for ACF Flexible Content fields?
• How can I ensure the TOC includes headings from specific layouts in my Flexible Content field?
• Any suggestions or best practices for integrating a TOC with ACF, especially when using custom layouts?

Thanks in advance for any help or guidance you can provide!