Home Forums Gutenberg How to implement 2-column layout?


How to implement 2-column layout?

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


    <div class="container" style="display: flex">
    	<div style="width: 20%;">
    		  // Here side menu, only allow one block: 'core/my-side-menu'
    	<div style="width: 80%;">
    		  // Allow all blocks here except 'core/my-side-menu'
  • 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
           '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')) ?>

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.