Multiple content areas per page

Question

I’m having a complex content issue. Each page can have multiple sections (unknown number), each section can have multiple containers, each container can have multiple content blocks (either 1, 2 or 3).

I’ve currently got a theoretical solution with shortcodes, but I would like to solve this with the UI if possible by providing wysiwyg editors for each content block.

Sections: There can be any number of sections (a realistic/acceptable maximum would be 10). Containers: A section can contain any number of rows (a realistic/acceptable maximum would be 5). Containers: A row must know how many columns it needs to contain. Content blocks: A row can contain 1, 2 or 3 columns.

The shortcode solution looks something like this:

[section id="summary"] //id is required but can be anything (no spaces)
   [container blocks="1"] //row can have 1, 2 or 3 columns
      [block]
      .content-block
      [/block]
   [/container]
[/section]
[section id="find us"] //id is required but can be anything (no spaces)
   [container blocks="3"] //row can have 1, 2 or 3 columns
      [block]
      .content-block
      [/block]
      [block]
      .content-block
      [/block]
      [block]
      .content-block
      [/block]
   [/container]
[/section]
[section id="team"] //id is required but can be anything (no spaces)
   [container blocks="2"] //row can have 1, 2 or 3 columns
      [block]
      .content-block
      [/block]
      [block]
      .content-block
      [/block]
   [/container]
[/section]

Does anyone have any suggestions on how I can go about this?

Thanks, Josh

Answer 1

This sounds to me like a perfect use of Advanced Custom Fields "flexible content" feature to me. Flexible content fields allow you to define multiple layouts, and then add them to a page or post one by one, in any order or combination you need. Each layout can be a combination of text fields, images, wysiwyg editors, and other field types.

It's a brilliant UI on the client side, and easy to build a custom front-end in your template once you get the hang of it.

It's a premium plugin, but I've been building these kinds of interfaces for many years and it works really well. I haven't found anything else quite like it.

Answer 2

It's easier to code the Visual Editor so your content editors can highlight parts of the post content, rather than trying to add a large number of extra content blocks to the edit screen.

Here's what I use, the basics of which I think I got from the Codex originally, a long time ago.

// Callback function to insert 'styleselect' into the $buttons array
function wpse241267_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

add_filter('mce_buttons_2', 'wpse241267_mce_buttons_2');

This just enables the Style dropdown menu at the left hand end of the second row of Visual Editor buttons.

Now for the meat:

function wpse241267_mce_insert_formats( $init_array ) {  

    $style_formats = array(  
        // Each array child is a format with its own settings

        array(  
            'title' => 'Find Us Block',  
            'block' => 'div',  
            'classes' => 'find-us',
            'wrapper' => true,
            'exact' => true,

        ),
    );  

    // Insert the array, JSON ENCODED, into 'style_formats'

    $init_array['style_formats'] = json_encode( $style_formats );  

    return $init_array;  

} 

add_filter( 'tiny_mce_before_init', 'wpse241267_mce_insert_formats' );

You can use IDs instead of classes if you want, but I don't think there's anything to prevent a user adding more than one into a page.

Then in the Visual Editor you can highlight some content, apply this style from the dropdown and the highlighted content will be surrounded by a div with the class find-us.

The exact argument prevents the editor merging multiple adjacent blocks. Depending on your case you may wish to remove this.