WP Business Ep. 05: Custom Blocks for Gutenberg

In this series I give insights into my WordPress theme business and report on ideas, plans, challenges and activities of the last quarter. In episode 05 for July to September 2018 I tell a little about the development of custom blocks for the new Gutenberg editor and show the first demos of my custom blocks suite.

You can find all episodes of the series in the My WordPress Business category .

Custom Blocks Suite for Gutenberg

My last WP Business Report was a little longer ago. I have found that a monthly rhythm is too much for me and that too little happens in 4 weeks to write about. That's why the reports are now available every quarter instead of every month.

In the last few weeks and months I have dealt very intensively with the new Gutenberg editor. For my planned second theme shop, I'm working on a suite of custom blocks that will make it easier to create business websites with WordPress.

Meanwhile about 60% of the plugin are finished and I can present a few first insights. After weeks of work in a quiet little room, one is happy to finally be able to show something, even if there is still a long way to go before the launch of my new shop. There are nine blocks so far, but there will be a few more I think.

For those in a hurry : The blocks can be tried out live in this block demo .

Layout blocks

Two years ago, typical functions of a business theme such as hero banners, portfolio, features, testimonials and call-to-actions buttons would have been implemented with options in the customizer, widgets, custom post types or support of a page builder plugin.

With the upcoming Gutenberg editor, however, I made the decision relatively quickly to go straight to the new blocks. This makes the themes lighter and mainly takes care of the styling and the basic layout for header, navigation and footer. The content area, on the other hand, is largely designed with blocks.

The core of the plugin is therefore a few blocks for creating more complex layouts:

Hero Image Block

A block for adding a prominent header area with a large heading and a call-to-action button. Ideal as an eye-catcher and intro on a landing page or the start page.

Portfolio / Features / Team Members

Projects, services, product features or team members - frequently occurring content on a business website can be displayed with just a few clicks in a grid layout and with a variable number of columns using these blocks.

Container block

This block can be used to create multiple sections on the website with different background images and colors. The container block serves as a wrapper for these areas and allows any content blocks as content.

Implementation with nested blocks

At the beginning I implemented the layout blocks as completely independent blocks. However, it turned out that the options for complex blocks quickly get out of hand and the sidebar becomes cluttered if various elements of a block are to be configured with them.

After Gutenberg introduced the Nested Block API for nested blocks and the associated column block, I gradually switched to this concept. The layout blocks are now consistently implemented as nested blocks, manage with a few layout options and only provide a template for the child blocks as a parent.

Version 4.1 of Gutenberg brings with it the block navigation as a new feature, with which nested blocks can be selected and configured even more easily. The structure of complex blocks can now also be seen much better.

With Nested Blocks, everything is very modular and can be implemented with little code, which means that the scope of the entire plug-in is still manageable despite the many blocks.

Blocks for basic elements

Originally not planned, but the nesting made it necessary to have a few blocks for basic elements, including:

• Icon
• Heading
• Button

Blocks for headings and buttons are included in the core, but have relatively few settings. Unfortunately, expanding existing blocks is currently more difficult than simply creating new blocks. Currently my blocks for headings and buttons are almost too extensive and will probably be simplified and purified a little before the release.

Own components

In React and in Gutenberg, each element is its own component, which is encapsulated in one another in order to ultimately create the complete user interface of the editor. In addition to blocks, theme and plugin developers can of course also create custom components to make code more modular and reusable.

For example, these components exist in my plugin:

• Grid container
  The blocks for features and portfolio use the same component for the grid layout in the background and simply provide a different template for child blocks.
• Background Section
  The Container and Hero Image Block use the Background Section Component to provide options for background image and color for the block.
• Icon picker
  The icon placeholder and popup for selecting an icon is implemented as a separate component and can be used anywhere, including in the icon block.

Manipulate the data store

Gutenberg uses Redux as store and state management for React. All blocks and their attributes are mapped as an object tree and can be read and manipulated with the appropriate selector and dispatcher functions provided by Gutenberg.

What sounds terribly complicated to non-developers, allows the implementation of some useful features that can be directly interacted with blocks and their attributes.

Column controls

The layout blocks with grid layout display an additional bar for quickly duplicating and deleting column blocks, as well as a large button for adding new blocks.

Synchronize styling attributes

One problem with nested blocks is that each child block has to be configured and designed individually. With a little code, however, the styling can be copied by synchronizing the corresponding attributes of sibling blocks after a button click.

Demo and download

I created a small demo with Frontenberg in which you can try out the blocks yourself. Don't worry, you can't break anything.

Demo: preview.themezee.com/blocks/

The plugin is currently incomplete in many respects and therefore not yet available for download. I am also still undecided whether I will only sell it through my new theme shop or for free through WordPress.org, the business model is not yet in place. I will probably make the code publicly available on Github soon.

Closing words

I hope you enjoyed the little insight into the current status of my custom blocks and you have developed a little more anticipation for Gutenberg and WordPress 5.0.

The launch of my second theme shop is planned for spring 2019. In addition to the blocks, such a theme shop somehow also needs themes and the shop website itself isn't created in a day - in short, there is a lot of work waiting for me. I'm also planning a new theme for OneTheme, updates for Gutenberg and a number of magazine blocks.

As a result of all of this, I don't get to blogging a little and currently can't quite manage my weekly rhythm for new posts. I was also asked for tutorials on Gutenberg - these are on my to-do list and will come at some point, I promise.

So, that was my current WordPress Business Report. Thank you for reading 🙂