Crea tu primer complemento de bloque

Crea tu primer complemento de bloque

Tutorial de Gutenberg para principiantes

Si planea desarrollar algo para WordPress en 2021, ignorar a Gutenberg simplemente no es una opción. Los complementos y temas deben cooperar con Gutenberg y proporcionar una experiencia de usuario consistente en todo lo que un usuario puede ver en el panel de WordPress. Y especialmente desde que Gutenberg ahora es una parte integral de WordPress, simplemente llamado editor de bloques.

Dicho esto, comenzar con Gutenberg no es tan fácil. Si bien hace unos años podía escribir un excelente complemento de WordPress usando nada más que el Bloc de notas, el proceso se ha vuelto mucho más difícil ahora.

Gutenberg utiliza tecnologías como la API REST de WordPress, JavaScript y React. Por lo tanto, se necesitaban nuevos requisitos para complementos y temas para trabajar con Gutenberg.

¡La buena noticia es que hoy hablaremos de todo esto! Este artículo sirve como un tutorial de Gutenberg para principiantes que buscan crear un complemento para Gutenberg por primera vez.

Nos centramos principalmente en los diferentes aspectos de la creación de un complemento para Gutenberg: configurar el entorno de desarrollo, crear un complemento básico y algunos matices del trabajo con bloques.

1. Configure su entorno de desarrollo de Gutenberg

Para comenzar a desarrollar Gutenberg, necesita algunos conocimientos básicos de JavaScript y React. Aquí hay un tutorial sobre JavaScript para un desarrollador de WordPress. Además, los paquetes adicionales en Gutenberg pueden requerir el uso de un administrador de paquetes NodeJS, npm.

Puede instalar la última versión estable de NodeJS en Windows o MacOS usando los instaladores en el sitio web oficial. Si tiene un servidor Linux, puede compilar el código fuente o usar el administrador de paquetes correspondiente (como apt y yum). Por ejemplo, si está utilizando Ubuntu, ejecute los siguientes comandos en la terminal.

sudo apt update
sudo apt install nodejs npm

Una vez que la instalación sea exitosa, puede ejecutar el siguiente comando para verificar la versión de NodeJS.

nodejs – version

Después de marcar estas casillas, es una buena idea configurar su sitio web de prueba de WordPress con una instancia del complemento Gutenberg actual (el complemento independiente) o incluso la versión de desarrollo del mismo; puede obtenerlo. de GitHub.

⚠️ Nota; Si bien Gutenberg ahora está integrado con WordPress, esta versión no es la última. El desarrollo en Gutenberg siempre ocurre por separado, y todo lo nuevo se incluye primero en el complemento independiente de Gutenberg. La versión actual de Gutenberg en el kernel aún no ha recibido una actualización importante desde su inclusión en WordPress 5.0. Siempre desea trabajar en la última versión de Gutenberg, porque le brinda una mejor oportunidad de mantener su trabajo y garantizar que su creación esté sincronizada con lo que llegue al núcleo de WordPress más adelante.

En otra nota, si tiene la intención de contribuir al complemento principal de Gutenberg, el repositorio tiene pautas contributivas sobre cómo configurar su configuración regional y configurar los cambios para su revisión.

👉 Finalmente, si está buscando adaptar sus complementos existentes a Gutenberg, aquí hay un tutorial detallado sobre cómo lograrlo:
parte 1: Cómo adaptar su complemento para Gutenberg (Block API) y
parte 2: Cómo hacer que su complemento sea compatible con Gutenberg (API de barra lateral).

Para comenzar con un directorio de complementos de plantilla que ya está listo para cooperar con Gutenberg, puede considerar usar Complemento para ir a cualquier parte de Gutenberg. Esta solución le ayuda con la estructura básica de archivos para que pueda concentrarse en el contenido del complemento. Para usar la clave maestra, descargue e instale el complemento desde aquí (zip). La instalación y activación del complemento estándar activa los bloques de ejemplo, que exploraremos en este tutorial. Puede encontrar el código para cada bloque en su directorio respectivo en la ubicación del complemento de clave maestra.

2. Configuración inicial

Solo para recordarle, Gutenberg presenta el concepto de bloques, que reemplazan el lienzo del editor TinyMCE estándar. En algunos casos, los bloques también pueden reemplazar los códigos cortos y otras piezas de contenido adicionales que los complementos solían agregar al contenido de WordPress de diferentes maneras.

Si desea construir para Gutenberg, el enfoque más común es crear un complemento que cree nuevos bloques y los ponga a disposición del usuario. Esto es exactamente lo que vamos a hacer en este tutorial de Gutenberg.

Las siguientes secciones describen el proceso de principio a fin.

El complemento específico que vamos a crear imprime un mensaje con un fondo personalizable. Solo una compilación de ejemplo, pero puede tomar los principios presentados aquí y aplicarlos a su propio complemento más complejo.

Los conceptos básicos para crear un complemento de este tipo deberían resultarle familiares. Empiece por crear un nuevo directorio en el plugins Directorio de WordPress. En este, vamos a colocar cuatro archivos:

  • index.php – Este archivo contiene metadatos sobre el nuevo bloque de Gutenberg.
  • block.js – Este archivo JavaScript guarda el bloque Gutenberg personalizado.
  • editor.css – Este archivo contiene estilos para el editor.
  • style.css – Este archivo contiene los estilos de la parte frontal del bloque.

Los dos primeros archivos de la lista se encargan de guardar el bloque y los dos archivos siguientes definen los estilos visuales de los elementos del bloque.

3. Bloquear la grabación

En este paso de la grabación de un bloque para Gutenberg, cubriremos dos cosas a grandes rasgos:

  • registro de metadatos de complementos con el motor PHP de WordPress,
  • guardar el bloque con el marco de React en el que se ejecuta Gutenberg.

los index.php El archivo contiene los activos de cola de bloque y editor.

  • Empiece por registrar funciones personalizadas a través de add_action.
  • A continuación, defina las funciones que enumeran la ruta de los archivos JavaScript y CSS para el bloque y el editor utilizando el wp_enqueue_style y wp_enqueue_script las funciones.

Resumamos esto a través del código PHP a continuación:

add_action( 'enqueue_block_editor_assets', 'gb_block_01_basic_editor_assets' );

function gb_block_01_basic_editor_assets() {
	// Scripts.
	wp_enqueue_script(
		'gb-block-01-basic',
		plugins_url( 'block.js', __FILE__ ),
		array( 'wp-blocks', 'wp-i18n', 'wp-element' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
	);

	// Styles.
	wp_enqueue_style(
		'gb-block-01-basic-editor',
		plugins_url( 'editor.css', __FILE__ ),
		array( 'wp-edit-blocks' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' )
	);
}

Esto define los recursos del editor base. Para el bloque, solo se necesita el archivo CSS, que se define mediante el wp_enqueue_style función.

los block.js El archivo describe las propiedades del bloque en el editor de Gutenberg. Definimos los siguientes atributos y propiedades:

  • title – El título del bloque
  • icon – Un icono para mostrar para el bloque; puede seleccionar cualquier icono en esta colección de dashicons
  • category – El grupo al que pertenecerá el bloque. Ejemplos de grupos de bloques son “común”, “formateo”, “incrustado”.
  • edit – Una función de JavaScript que devuelve un elemento DOM. Usamos el wp.element.createElement función para crear un elemento DOM de párrafo personalizado, p, con texto personalizado escrito en él. Gutenberg llama a esta propiedad cuando un usuario hace clic en el bloque del editor.
( function() {
		var registerBlockType = wp.blocks.registerBlockType;

	registerBlockType( 'gb/basic-01', {
		title: __( 'GB Basic', 'GB' ),
		icon: 'shield-alt',
		category: 'common',
		
		edit: function( props ) {
						return wp.element.createElement(
				'p',
				{ className: props.className },
				'Hello World! — from the editor (01 Basic Block).'
			);
		},

	} );
})();

Del mismo modo, puede crear un save propiedad que se llama cuando el bloque se selecciona desde el front-end.

En el código anterior, hemos definido el className de la p elemento con el props.className, que creará un nombre de clase que comience con wp-block, seguido del nombre del bloque. En la siguiente sección de este tutorial de Gutenberg, definimos los estilos para esta clase.

4. Personalización del bloque

Como se mencionó en la sección anterior, el siguiente paso de este tutorial es establecer las propiedades de los elementos del bloque. Definamos un color de fondo, un color de texto y un borde.

.wp-block-gb-basic-01 {
	color: #000;
	background: mistyrose;
	border: 0.2rem solid red;
}

En lugar de archivos CSS, también puede agregar archivos SCSS y compilarlos con Node. Además, aquí está un tutorial sobre cómo diseñar elementos de Gutenberg de CSS Tricks.

Resultados de su primer tutorial de Gutenberg

Finalmente estamos listos para probar el bloque que hemos creado. Si el complemento de Gutenberg está activado, vaya a la + y compruebe si el nuevo bloque aparece allí.

nuevo bloque de Gutenberg

Luego, si hace clic en el bloque, notará que se ve el mensaje de arriba, con un color de fondo y un borde del archivo CSS:

bloque en acción

Conclusión

Llegamos al final de su primer tutorial de Gutenberg. Espero que esto haya sido de ayuda. Por supuesto, lo que hemos construido aquí no es muy complejo, pero debería darle una idea de las estructuras básicas al trabajar con Gutenberg y cómo planificar su próximo complemento.

Primero, discutimos los pasos para configurar el entorno de desarrollo de Gutenberg. Luego, presentamos un complemento estándar para ayudar con un mayor desarrollo. Luego, la discusión se centró en varias etapas de grabación y estilo de un nuevo bloque.

¡Espero que este tutorial de Gutenberg te haya ayudado a crear tu primer complemento de Gutenberg!

Si tiene alguna pregunta, comience en los comentarios a continuación.

No olvide unirse a nuestro curso intensivo sobre cómo acelerar su sitio de WordPress. Con algunas correcciones simples, puede reducir su tiempo de carga en un 50-80%:

O inicie la conversación en nuestro Grupo de Facebook para profesionales de WordPress. Encuentre respuestas, comparta consejos y obtenga ayuda de otros expertos en WordPress. ¡Únete a él ahora es gratis!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba