WordPress Theme and Plugin Shops are Pioneering the First Layout Blocks for Gutenberg

photo credit: Jeffrey Betts

Many WordPress theme shops started out with themes as their only products but over the years have moved into selling plugins that enhance their core products. This came about partially because theming standards evolved to encourage developers to put non-presentational functionality into plugins. For many, the revenue from plugins quickly eclipsed that of their theme products. In the past, theme shops have often partnered with page builder plugins to enhance their users’ capabilities in customizing the themes. This may soon change, as the advent of Gutenberg is bringing new product opportunities to theme and plugin shops shops.

The first iteration of the new editor focuses on blocks and the post editing experience. After Gutenberg is in core, the project will move on to the second phase – full site customization. This will venture into page builder type functionality. Matt Mullenweg predicts this phase will happen much faster than phase 1, since all of the infrastructure is already in place. The plugin already has a columns block in beta.

Gutenberg is scheduled to debut in WordPress 5.0 in November, but site customization functionality won’t arrive until 2019 at the earliest. In the meantime, plugin developers have been experimenting with various implementations of “section” and “container” blocks while the Gutenberg team explores a core container block for phase 2.

Marie Comet’s WP Container Block is a fork of the core columns block that offers columns structure, spacing, and backgrounds (with both image and color controls). Felix Arntz recently published a tutorial on how he built a reusable Gutenberg section block. Marc Lacroix created his own container block, out of necessity, with capabilities for spacing and background customization.

Section/container blocks are a precursor to using Gutenberg for building more complex layouts. Some of these explorations may inform the Gutenberg team’s implementation of a core container block in the future.

A few more full-featured layout blocks are starting to pop up on WordPress.org. Kadence Themes, a theme and plugin shop based in Missoula, Montana, released its Kadence Blocks – Gutenberg Page Builder Toolkit at the end of August. The plugin brings the editor closer to delivering the features users expect from popular page builders, such as better control of columns for different screen sizes and a row/layout block with controls for padding, backgrounds, alignment, and overlays with gradients.

A live “Frontenberg” style demo of Kadence Blocks is available where you can see the plugin’s options for manipulating page layout.

Pootlepress, a WordPress plugin and theme shop, has added a new Layouts block to its free Caxton plugin. The company is one of the earlier Gutenberg adopters in the WooCommerce space with its recent release of the Storefront Blocks plugin.

Caxton bills itself as a “page layout plugin” for Gutenberg. Its layout block allows users to select from a number of preset layouts and then add blocks within those layouts. It supports nesting rows and row backgrounds. A Frontenberg demo site gives users the chance to play around with the page builder functionality before installing the plugin.

Until Gutenberg adds core support for more layout capabilities, WordPress may see an influx of these layout blocks that introduce basic page builder functionality. Some of these plugins may need to be refactored once there is more direction for these features in core, but they offer a glimpse of what Gutenberg will bring to site customization. Combined with Gutenberg 3.9’s reusable, exportable templates for multiple blocks, page layouts will become more portable than ever. In 2019, we may see new sites popping up that enable users and developers to share the layout designs they have created.

10 Comments


  1. I find a bit puzzling that the columns block, a big selling point for Gutenberg, is still in beta at this stage and is so poor (no responsiveness? no ability to set different-width columns?) compared to the rest of blocks.

    Report

    Reply

    1. The Columns block was not initially intended for phase one. It ended up being created as a way to test and discover bugs with nesting blocks. So the reason it is so lacking in features is probably because it was created earlier than expected simply for the sake of testing new functionality, and the focus is not yet on layout-related functionality. That comes in phase two.

      Report

      Reply

      1. Seriously?! This is what the plan behind GB was? Not actually implement at least a working prototype but just tell some cool sounding idea? If all that you wrote is true then i rather doubt phase two will be less anticipated than the first phase. May i just question who is GB team developing GB for? For the community or just for themselves with great sounding but never tested ideas?
        Until now i just thought at least those who sit near the fire know exactly what they have under their sleeves and it is for sure worth all the struggle with phase 1… but after reading this i really can not imagine that would be the case. Sorry but this whole GB project is much ado for nothing really useful at the end. I think a ton of junk features and at the end gazillions of junk-styled websites will we get as a result.

        By the way how will responsive design work in practice with GB? Can someone please explain that? I mean if you can layout the content in 1 given resolution…then how will that look just right on all the possible displays? Either my imagination is limited or those design and PR gurus forgot about this problem until it was too late to confess.

        Report


      2. I’m not sure I understand your comment?

        In terms of responsive design, it really isn’t that hard to make that happen. It’s just CSS. The hard part is deciding what options should be there, how those options should work, and how much control is provided to the user in the core blocks. Should there be predetermined breakpoints? Should the breakpoints be provided by the theme? How many breakpoints should there be? Should CSS Flex or Grid be used? How do you organize the features? What do the controls look like? What is the proper way to implement varied-width columns and how do those affect responsiveness?

        If the devs tried to focus on that now, they would not be able to fix the more pressing issues of getting bugs fixed with the current features. I’ve already seen people complain about the devs focusing on stuff like fullscreen mode and spotlight mode instead of bug-fixing, which is funny since both of those features were introduced because of user feedback. As far as I can tell, the plan was always to have Gutenberg release in WordPress 5.0 with a focus on blog posts and a solid core that can be expanded to page building and soon entire website building in phase 2 and beyond.

        But instead of getting information second-hand from me, which may be misinterpreted or miscommunicated by either or both of us, perhaps you should go ask the devs yourself or check out the existing handbook and various other documents that have been released. I’m sure they can explain things far more easily and more accurately than I can.

        https://wordpress.org/gutenberg/handbook/
        https://wordpress.org/gutenberg/handbook/outreach/articles/
        https://wordpress.org/gutenberg/handbook/outreach/talks/
        https://make.wordpress.org/core/
        https://make.wordpress.org/chat/

        Report


  2. While not sold on Gutenberg I did try Caxton today and the layouts do a fairly good job within the limitations of Gutenberg. Kadence looks good as well so must give it a spin on my test install.

    I’ll stop now before I get too enthusiastic. 😮

    Report

    Reply

  3. Unbelievable. I have installed it and I am thrilled what is possible with it. I’m curious how other big PageBuilders will respond.

    Report

    Reply

  4. I just built Camer Pro, a theme for Blogging Theme Styles, which has full Gutenberg support. Although the default blocks are styled within the theme, the idea of plugins to enhance/add further blocks is probably something we will start to see theme and plugin shops develop as time moves on.

    As this article points out, already has started, and I know Array Themes with their Atomic Blocks was one of the first I seen come out.

    I think it’s only a matter of time as themes start to add Gutenberg support at least, but plugin options will grow into a new market.

    Report

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.