Home Forums Gutenberg Block with multiple columns and blocks inside


Block with multiple columns and blocks inside

  • I am creating a theme (for personal use) with custom blocks which I am building with ACF.

    I would like a block which you can select how many columns you want and then in each column you can add multiple blocks, this would be very similar to the default columns block.

    What is the best approach for this?

  • Any ideas how to achieve this?

    • NickDA

    • June 7, 2019 at 9:38 am

    Elliot is going to look into inner-blocks later on this year, my guess is Nov/Dec… In the meantime what I have done to create my own columns, have each column in Accordion fields, and for the content of the columns use the WYSIWYG editor. I can get away with it, becaus so far all of my 41 blocks, are conversions from my preexisting shortcodes. And because TinyMCE displays the button to generate the shortcodes, it works pretty well. Also because I’m using accordions, I’m actually building the columns vertically, which give me more room to edit things. The biggest drawback is that if I want to change the layout (ie: from 3 columns to 4 columnjs), I have to delete the 3 column block and start a new 4 column block…

  • That’s unfortunate inner-blocks isn’t supported yet. Like you, in the meantime I had to settle for using WYSIWYG editors inside of my columns.

    For my column layout, I went with a repeater and styled them to be horizontal. I widened the content area so there is more room to work inside each column, it works out pretty good. I also added a button group for different column layouts and then use JS to automatically resize the column widths based on the layout selected.

    Overall I guess I am happy with it.

    column layout

  • That’s unfortunate that inner blocks isn’t supported yet. Like you, I had to settle for WYSIWYG editors inside my columns.

    For my column layout I went with a repeater and styled it for a horizontal layout. I widened the content area so there is more room to work inside each column. I also added a button group for different column layouts. For example there are 4 layouts for 3 columns, 5 for a 4 column layout, etc. Then I used JS to resize the column widths based on which layout was selected.

    Overall it works nicely.

  • “because TinyMCE displays the button to generate the shortcodes” My editor doesn’t have this, how did you get that button?

    • NickDA

    • June 8, 2019 at 6:10 pm

    In my case, because I create my own themes, and in it I have created my own shortcodes, I had to create the editor’s toolbar buttons myself to generate the shortcodes. In many cases various themes will do the same as will some shortcode plugins. It is coded in JavaScript, and the best documentation how to do that is from the TinyMCE documentation pages I guess, or look at the code of a theme or plugin that generates the code for the shortcode buttons.

    Many of you however are jumping the gun… Gutenberg already has a columns block, and also a Group block, which basically can act as a container. Make sure you also activate the Gutenberg plugin in your site to get all the latest features. With the Gutenberg plugin activated, you can have variable width columns, and if your theme has “align” support you can make it act more like a section (full width and what not) more easily. Also, you can assign the vertical alignment of each column independently, something which I don’t think is possible even with WPBakery. Finally, by placing the columns block inside the Group block, you can easily add background color. By the time Elliot will add inner-blocks support, Gutenberg will probably have the option to also add background images and probably even background videos to the Group block. Gutenberg is getting better every week, unfortunately it should have been merged to the core at the end of this year, not last. I’m saying all this because if you don’t know what you are doing, and you need to learn and experiment, and by the time you are done, Gutenberg will probably have all the minimum features that any page builder needs to create layouts. If however, you are impatient like me, and have things in place, and thanks to ACF, building these things don’t take very long, go ahead and build your own containers and columns… pretty soon they will be alternative methods to the native Gutenberg blocks, at best.

    I threw a lot of things at you, let me know if you want to see a short video demo about everything I said, how to create columns and containers with ACF (with what ACF allows us to so so far), and all the Gutenberg options, including manually adding some background images for the Group or Columns blocks – using Microthemer in this case is a breeze !

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.