I arrived in Switzerland eighteen years ago to begin my career as a CMS developer. My boss at the time hammered the importance of reusability in our work whilst we developed the editorial system for the local newspapers, instilling the need to approach each feature as reusable as possible.
I learned through this experience how to be a more efficient development and how to make a complex, difficult module cost-effective. Many years later, technology like Vue, React, Bootstrap, Object Oriented CSS and Every Layout are par for the course – all of which are based on the same principles. You build individual components and use them over and over again.
WordPress 5.0 was launched at the end of 2018 with its new Block Editor – Codename Gutenberg. Developers were to move away from inflexible page layouts and plan the content elements as “Blocks” (or reusable components). At our agency Say Hello, we’ve been developing for the Gutenberg Editor for around ten months and the new techniques have been a central part of all our projects since spring.
In the simplest cases, the editor creates page content and articles using the blocks which WordPress Core delivers. We take the next step and add custom blocks to our projects, which are developed specifically for the project and which are, themselves, formed of reusable React components. This means that our clients have many more opportunities to work in a flexible way, without needing to come back to us for minor amendments like changing the order of the blocks.
As soon as we had the basics under control, we began with more advanced techniques. Specific Blocks are able to receive nested Inner Blocks, which allow us and our clients to build page layouts using a combination of both regular Blocks and combined groups of nested Blocks. You can see an example in the following screenshot from our latest project.
Each article of a certain type in this project has a three-column layout, which is placed automatically after the leading image in the article. Instead of requiring the client to create this manually, we’ve provided a custom block with three inner blocks: a list of the tags for the current article, a large and small text content, and an image. This combination is automatically placed after the lead image and filled with dummy content, which the client can then overwrite as required. Doing so directly in a live-preview mode, and not in a separate content field.
We keep a close eye on the future development of Gutenberg and feed back out experience into the project. We often exchange technical information in the community and thanks to this exchange, we were able to implement a brand new feature in our most recent project: Block Areas. This allows our client to edit areas of the site outside of the main content area using Gutenberg Blocks. This makes the development of the site much easier and provides the client with a lot of flexibility, through a WYSIWYG editing experience.
Next on my list of things to do is a technique in the early stages of WordPress implementation, which will allow us to provide a client with a suitable project the opportunity to select from a pre-defined list of content layouts. By choosing the required option which is suitable to the project, the new article or page will be created and pre-filled with dummy content, which the client can then edit freely. This technology is already in use at the multi-million-site platform WordPress.com and thanks to the open source investment which the provider offers, users and maintainers of independent client sites will soon be able to profit from the same level of simplified content creation.
Leave a Reply