WordPress

Hace diecisiete años, WordPress comenzó como un sistema para administrar blogs. Desde entonces, se ha convertido en el sistema de gestión de contenido más popular del mundo con una cuota de mercado del 37%.

Después de un humilde comienzo en 2003, WordPress se ha apoderado de Internet, cubriendo una amplia gama de casos de uso desde e-Learning, e-Commerce, Ads Manager, Membresía y comunidades, reservas de hotel, bienes raíces y mucho más.

El dominio de WordPress no se trata solo de blogs. Muchos sitios confían en WooCommerce, un plugin de comercio electrónico de WordPress, para su negocio en línea. 30% de los principales sitios de comercio electrónico del mundo utilizan WooCommerce.

Creando Contenido en WordPress

Sin embargo el crecimiento explosivo del uso de WordPress avanzó mucho más rápido que la interfaz que WordPress ofrecía para crear contenido de manera fácil e intuitiva.

Este vacío fue llenado por mucho tiempo por diversos plugins como Visual Composer o Elementor, que le permiten al usuario crear contenido de una manera más amigable ofreciendo una serie de componentes prefabricados y una interfaz cercana al WYSIWYG (ves lo que obtienes como resultado).

Gutenberg

Johannes Gutenberg fue el creador de la imprenta, y su apellido fue tomado como nombre clave del desarrollo del “editor de bloques” de WordPress 5.0. 

Gutenberg fue lanzado oficialmente en 2018, con cierto rechazo inicial por parte de la comunidad, pero con el tiempo han mejorado el desarrollo y se ha convertido en el standard de facto para la creación de contenido en WordPress.

Para Usuarios

Los bloques permiten a los usuarios crear contenido como si se tratara de piezas de Lego. Existen bloques para casi cualquier tipo de contenido. Los bloques predefinidos en WordPress permiten crear textos, imágenes, listas, encabezados, citas de texto, links a redes sociales y muchos más.

Además, existen cientos de plugins con virtualmente cualquier tipo de contenido: Formularios, botones, encabezados con diseños profesionales, cotizaciones de bolsa y un largo etcétera.

Creacion de Contenido con Gutenberg
Blocks everywhere

Crear contenidos con el editor de bloques es una experiencia intuitiva y fácil de usar que le permite a los creadores de contenidos ver sus páginas de manera casi exacta a como la verá el usuario final.

Creación de Contenido con Gutenberg
El Editor de Bloques

Para Desarrolladores

Si la enorme cantidad de plugins disponibles en el mercado no es suficiente para los creadores de contenido, siempre es posible para un desarrollador con un mínimo de experiencia en Javascript y HTML crear cualquier tipo de bloques.

Los pasos para crear el bloque son:

Instalar 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/

Crear una base de datos en MySQL y seguir las instrucciones en 

  • localhost/wordpress

Crear un plugin

Activar el Plugin en el wp-admin

  • Ingresar al admin de WordPress y activar el plugin
  • http://localhost/wordpress/wp-admin
  • Ir a plugins
  • Hacer clic en “Activate” en el plugin: “Gutenberg Examples Basic”
Creación de Contenido con Gutenberg
Activar el plugin creado

En este punto ya debes tener tu primer bloque de Gutenberg el cual tiene dos vistas, una en el frontend y otra en el backend editor, debe lucir así:

Backend Editor

Creación de Contenido con Gutenberg
Ingresamos al editor de Gutenberg en el wp-admin
Creación de Contenido con Gutenberg
Insertamos un bloque y seleccionamos “Example Basic”
Backend Editor
En ese momento aparecerá la vista del editor de nuestro bloque

Front end view

Al guardar la página e ir a la vista de la misma, aparecerá la versión de frontend de nuestro componente:

Vista de frontend del bloque
Vista de frontend del bloque

Proximos pasos

Con este sencillo ejemplo hemos creado un bloque estático con la mínima cantidad posible de código PHP y el bloque en sí se crea con ESNext, también existe en el repositorio de WordPress una versión similar con ES5.

El código mostrado arriba es todo el código PHP que vas a necesitar simplemente para:

  • Definir el plugin del bloque
  • Cargar los assets del bloque

Luego de esto toda la lógica del componente se desarrolla en JS.

Quizás te preguntes por qué debemos tener una vista del editor y una vista de frontend. La razón es porque el editor nos permite solicitarle datos al usuario mientras que la vista frontal es para renderizar el componente tal como lo verá el usuario final.

 

Para conocer más detalles de cómo construir bloques editables, personalizar los estilos y variantes entre ESNext y ES5 recomendamos visitar el tutorial oficial de WordPress:

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

 

Y revisar el repositorio:

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

 

Happy coding!

Team Member

Lisandro

Senior Software Engineer

July 12, 2021