Eighteen years ago, I came to Switzerland and started my career as a CMS developer. During the development work for a newspaper editorial system, my boss at the time liked to preach about the advantages of reusability. He insisted that we should implement as many of our developments as possible as reusable modules.
This taught me how to develop more efficiently and make the complex modules of a website profitable through reusability. Many years later, techniques such as Vue.js, React, Bootstrap, Object Oriented CSS and Every Layout et. Al., which are all built on the same principles. The big picture is broken down into smaller components and these are then used more and more.
The classic “page builder”
Since 2004, WordPress has offered the option of adding your own customisations to the CMS using plugins. If a required function is missing, you can either install it from the plugin repository or develop it yourself. As WordPress developed more and more from a blogging system into a fully-fledged CMS, various “page builder” plugins also came onto the market. These are intended to offer users the option of creating pages and posts in page builder mode. Some of these plugins are still popular today. However, they bring two major problems with them. The website operators and development teams are dependent on the third-party manufacturers and, depending on the plugin, content is saved in formats that can no longer be edited without a suitable plugin.
Code name Gutenberg
With Gutenberg, the WordPress community has therefore been working on its own solution that enables a modern workflow without having to forego a standardised structure. Various developments from the past paved the way for this, such as the REST API, which we have been using in various contexts since 2016. The editor uses this API for its own functions.
WordPress 5.0 with its new block editor was released at the end of 2018. Instead of seeing the site as a static template and inflexible layouts, developers now plan the individual content elements as blocks (or reusable components). At Say Hello, we have been developing for Gutenberg for about ten months now and the new approach for WordPress has been incorporated into all projects since this spring.
In the simplest case, you build page content and posts using blocks that WordPress provides. We also design and develop our own custom blocks for our projects. This gives users a great deal of freedom when creating content and they don’t have to come to us every time they want to make a minor change.
As soon as we had the basics under control, we started with advanced procedures. For example, blocks can have sub-elements – so-called nested blocks – which make it possible to build page layouts with blocks grouped in advance. You can see an example of this in the following screenshot from our latest project.
In a post on this particular website, there is always a three-column overview block after a full-surface image. Instead of asking the user to manually compose the block, we provide a custom block (“outer block”) with three inner blocks: a list of keywords, content consisting of large and small text, and an image. Each with dummy content for overwriting.
The editors can edit the content directly in the block: not in a separate input field. Splitting the contained blocks gives us the option of using parts such as the image block in various other “outer blocks”.
We always scrutinise new ideas and concepts in Gutenberg development and incorporate these experiences directly into our projects. In addition, we often exchange ideas in the community about new technologies or best practices, which enabled us to use one of the very latest developments in the last project: Block Areas. These allow the user to control not only the content of a post, but also the surrounding areas – footer, side column or navigation – with their own blocks.
This makes the entire website editable with Gutenberg, which simplifies development and offers the customer greater flexibility using WYSIWYG content management.
A look into the future
What’s next? We are currently gaining experience with a new technology called Full Site Editing. This will enable us to offer the user a selection of ready-made page templates for the project. There are already projects that are being strongly promoted by WordPress.com, for example. As the company behind WordPress.com is also heavily involved in the open source sector, the wider WordPress community and not least our customers will soon benefit from this.
