WordPress e Gutenberg: Como criar o seu primeiro bloco (Parte 2)

Depois de falar sobre JavaScript e ECMAScript, Node.js, NVM e NPM, finalmente voltamos a mexer em código, atualizando o nosso arquivo javascript e fazendo a transpilação com o Babel.

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-es5.js', __FILE__ ),
		array( 'wp-blocks', 'wp-element', 'wp-editor' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'meu-primeiro-bloco-es5.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-esnext.js

const { createElement } = wp.element;
const { RichText } = wp.editor;
const { registerBlockType } = 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( props ) {
			const {
				className,
				setAttributes,
				attributes: {
					conteudo,
				}
			} = props;
 
			return (
				<RichText
					tagName="p"
					className={ className }
					onChange={ novoConteudo => setAttributes( { conteudo: novoConteudo } ) }
					value={ conteudo }
				/>
			);
		},
 
		save( props ) {
			return (
				<RichText.Content tagName="p" value={ props.attributes.conteudo } />
			);
		},
	}
);
console.log( 'teste' );
 

package.json

{
  "name": "meu-primeiro-bloco",
  "version": "1.0.0",
  "description": "",
  "main": "meu-primeiro-bloco.js",
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.0",
    "@babel/core": "^7.2.2",
    "@wordpress/babel-preset-default": "^3.0.1",
    "babel-preset-minify": "^0.5.0"
  },
  "scripts": {
    "dev": "babel meu-primeiro-bloco-esnext.js --out-file meu-primeiro-bloco-es5.js --presets @wordpress/default --watch --source-maps inline",
    "build": "babel meu-primeiro-bloco-esnext.js --out-file meu-primeiro-bloco-es5.js --presets @wordpress/default,minify"
  }
}
 

Vou deixar aqui um zip com tudo junto e atualizado também. Eu já pedi pra você deixar um like no vídeo e se inscrever no canal?