CoBlocks Adds Row and Columns Page Building Blocks for Gutenberg

CoBlocks, one of the earliest block collections for Gutenberg, has added new page building blocks and tools in the latest 1.6 release. ThemeBeans founder Rich Tabor and plugin developer Jeffrey Carandang partnered together on this iteration of CoBlocks to bring users new Row and Columns blocks and a Typography Control Panel.

The Row and Column blocks are resizable and can be dragged to new positions.

After selecting the Row block, users can choose the number of columns and then a layout for the row.

These row layouts can also be adjusted from inside the row toolbar or inspector sidebar panel, which includes responsive media query controls.

The Row and Column blocks also come with fine-grained controls for adjusting background and text color, width, margin, and padding.

Version 1.6 also includes a new Typography Control Panel with support for Google fonts. Users can customize the fonts with built-in controls for line-height, letter-spacing, font-weight, and text-transform properties. It also supports customizing fonts for the core heading, paragraph, and button blocks.

The video below shows a quick demo of column layouts and nested row blocks in action, as well as a few other blocks in the collection. Tabor said the team has more blocks in development that are geared towards full page layout and design. They are also working on a more advanced Google Maps block, feature blocks, and image cards.

The Gutenberg team has been discussing a “section” block since February 2018, where columns blocks could be placed inside the more generic section container. It’s on the roadmap for Phase 2 but contributors are taking their time to carefully define how this block will work. In the meantime, plugin developers have created their own versions of sections.

CoBlocks is currently setting the bar for Gutenberg-powered layouts. When WordPress core gets deeper into site building, this plugin’s user-friendly approach to rows and columns should provide some inspiration for creating an intuitive page building experience.


23 responses to “CoBlocks Adds Row and Columns Page Building Blocks for Gutenberg”

  1. Resizable columns should have been in Gutenberg itself from the beginning. Now, we’ll have hundreds of different third-party resizable columns blocks incompatible between them.

      • Its pretty much inevitable, no matter how you look at it. Unless you do not utilize blocks outside of core WordPress. 🤷‍♂️

      • Although if you deactivate a block, the markup sticks around. Add in the relevant styles and it’s alright. You won’t be able to edit the block anymore (as Gutenberg will acknowledge that the block is missing) but it’ll display fine on the front end.

    • Agreed. What sort of compatibility issues would there be though. Blocks are mostly completely standalone. What conflicts/incompatibilities between blocks would you expect to arise? Curious!

      • I think they mean, if you dropped all your stuff into Column Plugin A, and wanted to switch, you might have to ‘rebuild’ it all by swapping everything into the new plugin’s column blocks, as well as adjusting the settings just the way you had them.

      • As you say, it’s inevitable to face plugin lock-in issues if you use third-party blocks. But, in the case of columns is specially significant because the core columns block is almost useless in its current state, so anyone is forced to use a third-party block for laying out different-width columns, an extremely common case.

    • Honestly. What the heck. You’d think it would go “Day 1…make blocks a possible thing. Day 30…make a text block……day 35…make a picture block….day 40…let them go in columns.

      No columns means no layout. Just maybe things aligned? Gutenberg the page…stacker?

      It’s one thing to be rushed to launch, another to have taken nearly its entire lifespan to have columns in beta, but now to do something as fundamental as layout a column, you have to go third-party? Free or not, that’s silly. I looked at two of the options and it looks like Cornerstone without the bloat, except that was two years ago or so and you saw what it would look like live instead of guessing.

      This feels like a parallel universe.

      • I feel ya Kyle. Although, if a theme is developed well (with Gutenberg styles and optimizations in place) you won’t have to guess on what the true render looks like. But on the other hand, it’d be pretty cool if Gutenberg did exist on the front-end. 🧐

  2. Thank you Rich!

    Gosh it’s free too.

    I think competition will be good for this space (ahem, block), and all boats will rise with the tide.

    I think widget-laden home pages are a thing of the past. Now with your block (and others) creating are own home page layouts will be a breeze and not lock us in to the theme designer’s widget layout.

    Most appreciative…

    • Cheers Marcus! I think so too. The competitive landscape will drive innovation for sure.

      Just wait till you see what else we’re working on! This is only the first big step in that direction. ☺️

  3. Working with columns in Gutenberg is frustrating (with both these plugins) compared to a builder like Elementor. Both these plugins are a step forward from the builtin columns, but needs more work.

    I hope that the Core team implement the column functionality of these plugins, but it needs to be more like what builders like Elementor has, where columns can be duplicated/deleted/styleCopyPaste, and it must also be easier to add blocks into the columns. Right now blocks can be created outside and then dragged into the column (using the drag handle on the left), but it would be so much better if the blocks could have been dragged from block select panel.

    And the new block navigation panel helps, but it would be so much better if it was for the whole page (all blocks), and visible all the time (like Elementor).

    As for what plugin is best?

    Coblocks is better at resizing the columns. That it’s possible to select the divider directly without having to select the row is a huge plus. And that width of the columns is not stepped is also better.

    KB has more options, just check the prebuilt library for what it can do (button at the bottom when adding a Row Layout block).

    • You mention it’s not possible to add blocks to columns. It actually is. You can use the block inserter (+), or even the “/” command, followed by the block you’d like to insert.

      What other options aside from background color/image, and padding and margin controls would you like in a row/column block? Genuinely curious!

      I’m open to any feedback you have; please reach out directly to me at hello(at)coblocks(dot)com. I’m all about continuous iteration based on real-world feedback. 👍

      • You mention it’s not possible to add blocks to columns.

        Did I? I pointed out that the drag and drop functionality is there, but far from optimal. Adding the first block to columns is straight forward, but it would be so much more useful to have a drag and drop functionality when adding more than one block to a column.

        What other options aside from background color/image, and padding and margin controls would you like in a row/column block? Genuinely curious!

        All the options available in KB Row Layout are useful, just check what is available there.

        I’m open to any feedback

        That is very good! One suggestion would be to create a template gallery like KB has, a showcase of what the plugin can do.

  4. Thanks Rich for this great tool.
    It will be very usefull to have a block with a very simple structure (no wrap inside, no padding….), juste a section tag. You can put many things in it, add a class and made you’re grid layout css as you want. What do you think?

    • No proble Grégorie! I honestly don’t know what value something like that would have. With CoBlocks 1.6, if you add a single column row, it’s essentially what you’re thinking of – but with background color/image support and responsive margin and padding controls.

      • Rich, that’s more for the Grid Layout CSS fans. Of course you can use the single column row but the DOM is already quite complicate like all others Page Builder. With Grid Layout, you do not need that. Only direct child.


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: