By user9664977


2019-04-11 14:14:45 8 Comments

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?

2 comments

@majick 2019-04-12 06:43:28

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.)

@dboris 2019-04-12 08:13:05

This is actually a pretty good idea, haven't thought of that. :)

@dboris 2019-04-11 14:31:27

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.

Related Questions

Sponsored Content

1 Answered Questions

[SOLVED] Gutenberg moving core blocks between categories

  • 2018-12-07 10:28:05
  • SamXronn
  • 240 View
  • 3 Score
  • 1 Answer
  • Tags:   block-editor

1 Answered Questions

1 Answered Questions

WP 5 how to add_editor_style for both tinyMCE and Gutenberg

2 Answered Questions

[SOLVED] Enable Gutenberg on custom post type

0 Answered Questions

How to edit the html output of blocks that come included with Gutenberg?

  • 2019-02-14 15:02:04
  • Jonathan Ryan Patterson
  • 53 View
  • 0 Score
  • 0 Answer
  • Tags:   block-editor

1 Answered Questions

[SOLVED] Is it possible (and how to) query single Gutenberg blocks?

2 Answered Questions

[SOLVED] How to detect the usage of Gutenberg

  • 2018-11-30 10:01:01
  • KAGG Design
  • 2599 View
  • 8 Score
  • 2 Answer
  • Tags:   block-editor

0 Answered Questions

How to display full width block without toolbar?

  • 2018-12-10 17:23:04
  • Javier Villanueva
  • 232 View
  • 1 Score
  • 0 Answer
  • Tags:   editor block-editor

1 Answered Questions

WordPress Gutenberg, update post content programmatically

0 Answered Questions

How to Add a Container Class to Standard Gutenberg Blocks

  • 2018-11-12 19:31:35
  • user9664977
  • 177 View
  • 2 Score
  • 0 Answer
  • Tags:   block-editor

Sponsored Content