WordPress e Gutenberg: Como criar o seu primeiro bloco

Criei um canal no YouTube para compartilhar algumas coisas por vídeo e o primeiro deles é sobre como criar um bloco no Gutenberg, o novo editor do WordPress. Ele será o padrão a partir da versão 5.0, que será lançada em breve, então é bom ir se preparando.

Se você curte meus textos, assine o canal, assista ao vídeo e, se gostou, deixe um like lá e comenta sobre ele com seus amiguinhos 🙂

Códigos

Aqui estão os códigos dos arquivos que eu usei no vídeo.

meu-primeiro-bloco.php

<?php
/**
 * Plugin Name: Meu Primeiro Bloco
 */

defined( 'ABSPATH' ) || exit;

function init_meu_primeiro_bloco() {
	// JavaScript para o editor.
	wp_register_script(
		'meu-primeiro-bloco',
		plugins_url( 'meu-primeiro-bloco.js', __FILE__ ),
		array( 'wp-blocks', 'wp-element', 'wp-editor' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'meu-primeiro-bloco.js' )
	);

	// CSS para o frontend e editor.
	wp_register_style(
		'meu-primeiro-bloco',
		plugins_url( 'frontend.css', __FILE__ ),
		array(),
		filemtime( plugin_dir_path( __FILE__ ) . 'frontend.css' )
	);

	// CSS para o editor.
	wp_register_style(
		'meu-primeiro-bloco-editor',
		plugins_url( 'editor.css', __FILE__ ),
		array( 'wp-edit-blocks' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' )
	);

	// Registra o bloco.
	register_block_type(
		'blocos-de-exemplo/meu-primeiro-bloco',
		array(
			'style'         => 'meu-primeiro-bloco',
			'editor_style'  => 'meu-primeiro-bloco-editor',
			'editor_script' => 'meu-primeiro-bloco',
		)
	);
}
add_action( 'init', 'init_meu_primeiro_bloco' );

meu-primeiro-bloco.js

( function() {
	var el = wp.element.createElement,
		RichText = wp.editor.RichText;

	wp.blocks.registerBlockType(
		'blocos-de-exemplo/meu-primeiro-bloco',
		{
			title: 'Bloco de Exemplo',
			icon: 'heart',
			category: 'common',

			attributes: {
				conteudo: {
					type: 'string',
					source: 'html',
					selector: 'p',
				},
			},

			edit: function( props ) {
				var conteudo = props.attributes.conteudo;
				function onChangeConteudo( novoConteudo ) {
					props.setAttributes( { conteudo: novoConteudo } );
				}

				return el(
					RichText,
					{
						tagName: 'p',
						className: props.className,
						onChange: onChangeConteudo,
						value: conteudo,
					}
				);
			},

			save: function( props ) {
				return el(
					RichText.Content,
					{
						tagName: 'p',
						value: props.attributes.conteudo,
					}
				);
			},
		}
	);
}() );

frontend.css

.wp-block-blocos-de-exemplo-meu-primeiro-bloco {
	color: darkred;
	background: #fcc;
	border: 2px solid #c99;
	padding: 20px;
}

editor.css

.wp-block-blocos-de-exemplo-meu-primeiro-bloco {
	color: green;
	background: #cfc;
	border: 2px solid #9c9;
	padding: 20px;
}

Vou deixar aqui um zip com tudo junto também. Espero que ajude!