How to implement 2-column layout?

• pe-pe

• August 3, 2021 at 8:32 am

Hi,
how to implement a 2-column layout so that the user has a live preview in the Gutenberg editor? I tried to create a block with <InnerBlocks> but two <InnerBlocks> cannot be used.

Template:

<div class="container" style="display: flex">

	<div style="width: 20%;">
		<?php
		  // Here side menu, only allow one block: 'core/my-side-menu'
		?>
	</div>

	<div style="width: 80%;">
		<?php
		  // Allow all blocks here except 'core/my-side-menu'
		?>
	</div>

</div>

• VincentH

• August 9, 2021 at 9:47 am

I would suggest building your sidebar as widget. WP recently integrated Gutenberg into the widgets aswel.

To register a sidebar:

if (function_exists('register_sidebar'))
{
   // Define Sidebar Widget Area
   register_sidebar(array(
       'name' => __('Sidebar'),
       'description' => __('Sidebar voor de vervolgpagina\'s'),
       'id' => 'sidebar',
       'before_widget' => '<div id="%1$s" class="%2$s">',
       'after_widget' => '</div>',
       'before_title' => '<h3>',
       'after_title' => '</h3>'
   ));
}

Then implement this code in your sidebar area:
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar')) ?>