How To Have Two Gutenberg Editors On One Post?

Question

I am currently at a dilemma where I have a design where there is a sidebar to the left taking up 50% of the width of the screen(this sidebar area is pulling data automatically based on the post, so title, date, author, etc) and content to the right Taking up 50% of width of the screen.

In the right content section is where I have the_content(); This is grabbing all content and every block in the Gutenberg editor for this post.

The issue I am running into then is I want blocks that are added to the Gutenberg editor that are below the main content of the post (the heading and paragraph text) to extend full width instead of staying in the 50% width of the main content next to the sidebar.

Before Gutenberg I was able to accomplish this by having the_content(); (which was just a WYSIWYG editor) and I would then create flexible content blocks with ACF that I could select where I wanted them to reside based on where I put the code snippet for it in my theme. I am now building blocks using ACF blocks, which are Gutenberg-esque blocks built with ACF, that reside with everything else in the_content();. Doing it this way I don't have the option to set custom blocks somewhere else in my theme files.

So now I am trying to find a solution on how to make this work. One of the ideas is if there is a way to add a section Gutenberg editor to a post. So When a user would create a post it would give them two Gutenberg editors where each could have blocks added to them, but I would have control where each content area would live in my theme files (example I would have the default the_content(); snippet for the default Gutenberg block and something like the_content_two(); for a secondary Gutenberg editor.

Is this something that is possible to do? And if it is not possible to do is there an alternative approach I could take to fix my dilemma of having a half and half sidebar and content to having a full width block underneath that content?

Answer 1

You could add some kind of separator (a separator block?) in Gutenberg, then filter the_content() to check for the separator to display each half, by setting a switch on the first half and detecting it for the second:

add_filter('the_content', 'content_splitter');
function content_splitter($content) {
    $separator = "<!-- wp:core/separator";
    $pos = strpos($content, $separator);
    if ($pos !== false) {
        global $split_content;
        if (!isset($split_content) && $split_content) {
            $content = substr($content, 0, $pos);
            $split_content = true;
        } else {
            $part_b = substr($content, $pos, strlen($content));
            $pos = strpos($part_b, " -->") + 4;
            $content = substr($part_b, $pos, strlen($part_b));
        }
    }
    return $content;
}

So the first content position would display everything before the separator and then you could call the_content() again in the second (full width) position and it would display everything after the separator.

Obviously with this method you would need to ensure there is only one separator block in the content, and if you have separator blocks in other content it would cut off the second half, so you might need to add extra conditions to prevent that (detect post type or page?)

That said any other block type could be used for a similar purpose by changing the separator string in the code . (Note: I haven't tested this code or the particular separator string <!-- wp:core/separator, this is simply a code example.)

Answer 2

What you want is not possible - to have two main contents and two Gutenberg instances for one post.

But, since you already use ACF, why not add some flex content fields instead of the 'second Gutenberg'?

Edit:

Something else came to my mind. If you really want to use Gutenberg for the rest of the page as well, you could create a custom post type, and add ACF relationship field to the main post with a link to the second post. Then you could use the first the_content() from the main post, and the second the_content() from the referenced post of a custom post type. Let me know if I was not clear enough.

Answer 3

Here's a general approach you can try, but please note that it may require some technical knowledge and could be subject to compatibility issues with newer WordPress versions:Backup Your Website: Before making any changes, always back up your WordPress website. This ensures that you can revert to the previous state if something goes wrong.Create a Child Theme (Optional): If you're not already using a child theme, it's a good practice to create one. This helps preserve your customizations during WordPress updates.Install and Activate a Plugin: You might need to search for a WordPress plugin that enables multiple Gutenberg editors on one post or page. Look in the WordPress Plugin Repository or trusted sources for such a plugin.Configure the Plugin: After installing the plugin, follow its instructions to configure it. This may involve creating a custom block or template that allows you to add a second Gutenberg editor.Edit Your Post: Once the plugin is configured, go to the post where you want to have two Gutenberg editors. You should now have the option to add the second editor, either through a custom block or another method provided by the plugin.Use the Second Editor: You can now use the second Gutenberg editor to add content to your post.