Launch your blog
How to create the complete design of a WordPress website with Gutenberg and in a single step
We realized that developing a efficient wordpress website basically consists of Two steps. In the first, an efficient initial website must be created, independent of the projectIn the second, we would customize it by creating the content and designing the front-end using a theme.
But the question we asked ourselves was, can all of this be done without being a web developer or knowing HTML, CSS, PHP, javascript, etc? (what we commonly refer to as no-code). We have come to the conclusion that, in most cases, it is currently possible with the new block editor and site editing (Full Site Editing), better known as Gutenberg.
Nowadays, developing and carrying out the complete design of a WordPress website is reduced to Learn Gutenberg.
The only 2 steps to develop an efficient WordPress website
In the Blogpocket method, also known as the Box Method 😉 , you only need two steps to create a WordPress website: create an efficient initial website, independent of the project, and “fill it” with design and content. Below are the starting points.
Access all the updated information (2024): Blogpocket Method (August 2024 version)
Home page
First we learned how to create a initial WordPress website project-independent efficient. This is as if you had an empty box ready to house any type of design and content (see image below). And we know how to do it with the Blogpocket method which is a set of solid tools and a consistent procedure with which we obtain a fast, mobile-optimized, secure, SEO-ready and GDPR-compliant website.

Design and content
Later, we learned that to customize the website (content and design), created in step 1, we only had to Using Gutenberg. We can use native blocks, collections of extra blocks and some tools like Gutenberg Hub and the plugin Reusable Blocks Extended; to design to our liking, not only the home but also, if we are in a Classic theme, any of the widget areas available in the theme. Probably at present, except for the header, we can design the site completely with Gutenberg (see image below). If we talk about block themes, So, the site editing function allows us to alter the entire theme to our liking.

A platform to put into practice the creation of an efficient WordPress website
At the beginning of 2020, we launched the platform Launch your blog with the idea of providing freelancers, entrepreneurs and bloggers with a pedagogical tool for the complete creation and design of a website WordPress with the Blogpocket method y Gutenberg. The main element was the theme Blogpocket Nineteen (in two versions, Genesis Framework and for all audiences); a fully functional template for you to develop and design your website from scratch and to your liking WordPress by yourself. We have now converted the Blogpocket Nineteen theme into an add-on for the Genesis Framework Sample theme.
What was Lanzatu.blog?
It was a pedagogical, but fully functional platform, based on the theme Blogpocket Nineteen, so that it could be tested Blogpocket method, including designing the website from scratch and by yourself.
Download the add-on of Blogpocket Nineteen and customize it to your liking with GutenbergRead the instructions and setup guide for more information on how to design a Gutenberg-only website.
Helpful Resources
What is Gutenberg? The Block Editor Gutenberg WordPress 5.0 (Nov 18) is released and introduces a new, more intuitive and simple way of creating content. The second phase of the project includes the site editing function, with which you can build the entire front-end of a website easily and without code.
Introduction to Block Collections and Other ToolsThis article introduces basic concepts of Gutenberg, such as block collections using 10 resources and tricks. It also links to one of the first articles that talk about the complete editing of the site using blocks, a novelty regarding the creation of themes. WordPress and that we will see at the end of 2020.
How to set up a StudioPress theme with Gutenberg blocks. RevolutionPro It is the first bet of StudioPress (Genesis Framework) to have a theme of WordPress fully compatible with GutenbergWith this article, you will learn the concept of designing the home with Gutenberg, initial and essential step to understand what it means to design a website only with Gutenberg.
You no longer have to be Antonio Cambronero to learn GutenbergThis article will outline the different pieces that currently allow us to customize content and the entire design of the site with Gutenberg. Two essential tools are the Reusable Blocks Extended plugin, with which we can bring reusable Gutenberg blocks to the different widget areas that the theme has prepared; and Gutenberg Hub, which makes it easier to design our website (without knowing HTML or CSS code and without needing to install any plugin) from a library of available templates.
What is the difference between WordPress website design in the pre-Gutenberg era and the post-Gutenberg era?

Basically, in the Pre-Gutenberg era, the design of the home page, for example, was subject to the widget areas prepared in the theme and the widgets available to drag to them. Let's say that it was forbidden to design the home page to our liking.
In the Post-Gutenberg era, however, we can design the homepage to our liking, because we have the mechanism to bring reusable blocks to certain widget areas (sidebar, footers, etc.) and, of course, use Gutenberg in the central content area itself. In fact, if the theme allows it, there is probably a widget area associated with the header.
All this, of course, if we limit ourselves to customizations at the user level. With code, anything can be done, before and now 😉