WordPress

Seventeen years ago, WordPress started as a system for managing blogs. Since then, it has become the world's most popular content management system with a 37% market share.

After a humble beginning in 2003, WordPress has taken the Internet by storm, covering a wide range of use cases from e-Learning, e-Commerce, Ads Manager, Membership and Communities, Hotel Booking, Real Estate and much more.

WordPress domain is not just about blogging. Many sites rely on WooCommerce, a WordPress e-commerce plugin, for their online business. 30% of the world's top e-commerce sites use WooCommerce.

Creating Content in WordPress

However, the explosive growth of WordPress usage advanced much faster than the interface WordPress offered to create content in an easy and intuitive way.

This gap was filled for a long time by various plugins like Visual Composer or Elementor, which allow the user to create content in a more user-friendly way by offering a series of pre-built components and an interface close to WYSIWYG (you see what you get as a result).

Gutenberg

Johannes Gutenberg was the creator of the printing press, and his surname was taken as the codename for the development of the WordPress 5.0 "block editor".

Gutenberg was officially launched in 2018, with some initial backlash from the community, but over time they have improved the development and it has become the de facto standard for content creation in WordPress.

For Users

Blocks allow users to create content as if they were Lego pieces. There are blocks for almost any type of content. The predefined blocks in WordPress allow you to create texts, images, lists, headers, text quotes, links to social networks and many more.

In addition, there are hundreds of plugins with virtually any type of content: forms, buttons, headers with professional designs, stock quotes and a long etcetera.

Creating content with the block editor is an intuitive and easy-to-use experience that allows content creators to view their pages almost exactly as the end user will see them.

For Developers

If the huge amount of plugins available on the market is not enough for content creators, it is always possible for a developer with a minimum of Javascript and HTML experience to create any kind of blocks.

The steps to create the block are as follows:

Install WordPress

cd /var/www/html/wordpress/
wget -no-check-certificate http://wordpress.org/latest.tar.gz
tar -xzvf latest.tar.gz
rm latest.tar.gz
mv wordpress/* .
rm -rf wordpress/

Create a database in MySQL and follow the instructions at

localhost/wordpress

Create a plugin

cd /var/www/html/wordpress/wp-content/plugins
mkdir my-first-block
cd my-first-block
vim my-first-block.php
Copy and paste in the file my-first-block.php the content of:
- https://raw.githubusercontent.com/WordPress/gutenberg-examples/c091ad9551bbba7d2e64063007e7e313cd3995bc/01-basic/index.php
vim block.js
Copy and paste into the block.js file the contents of:
- https://raw.githubusercontent.com/WordPress/gutenberg-examples/c091ad9551bbba7d2e64063007e7e313cd3995bc/01-basic/block.js

Activate the Plugin in wp-admin

Login to the WordPress admin and activate the plugin
http://localhost/wordpress/wp-admin
Go to plugins
Click on "Activate" in the plugin: "Gutenberg Examples Basic".

At this point you should have your first Gutenberg block which has two views, one in the frontend and one in the backend editor, it should look like this:

Backend Editor

Front end view

When saving the page and going to the page view, the frontend version of our component will appear:

Next steps

With this simple example we have created a static block with the minimum possible amount of PHP code and the block itself is created with ESNext, there is also in the WordPress repository a similar version with ES5.

The code shown above is all the PHP code you will ever need to simply to:

Define the block plugin
Load block assets

After that all the logic of the component is developed in JS.

You may wonder why we should have an editor view and a frontend view. The reason is because the editor allows us to request data from the user while the frontend view is to render the component as the end user will see it.

For more details on how to build editable blocks, customize styles and variants between ESNext and ES5 we recommend visiting the official WordPress tutorial:

https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/writing-your-first-block-type/#registering-the-block

And check the repository:

https://github.com/WordPress/gutenberg-examples

Happy coding!

Content Creation with Gutenberg