Como criar um bloco Gutenberg

Blog fellyph cintra - apresentação do novo editor de blocos do WordPress 1

Continuando a série sobre blocos Gutenberg nesse post vamos criar o nosso primeiro bloco Gutenberg, para esse exercício vamos nos basear no repositório oficial do WordPress, lá vamos encontrar uma série de exemplos de como trabalhar com blocos Gutenberg.

No desenvolvimento de blocos temos a possibilidade de criar blocos com EcmaScript 5 e ESNext. Neste tutorial abordaremos os exemplos com ES5.

O que são blocos Gutenberg?

Os blocos Gutenberg são os blocos do editor usados para criar layouts de conteúdo no novo editor de blocos do WordPress. Introduzido no WordPress 5.0, o editor Gutenberg é um editor totalmente baseado numa estrutura de componentes(blocos). Hoje os blocos Gutenberg podem ser utilizados em qualquer parte do site com a edição completa de site.

Criando um bloco gutenberg?

Vamos partir do princípio mais básico, exibir um bloco estático HTML. Essa função pode ser útil caso desejamos criar um bloco de assinatura ou contato, por exemplo. Nos posts seguintes vamos incrementando essa solução.

Para esse bloco temos dois conceitos importantes, o primeiro ele será adicionado como um plugin é uma técnica recomendada pela documentação, o segundo ponto toda o conteúdo HTML será definido por uma JavaScript. Então com essas premissas vamos ter dois arquivos base no nosso exemplo, o PHP(index.php) que irá inicializar o nosso plugin e o Script(primeiro-bloco.js) responsável pelo conteúdo.

index.php

No index.php vamos gerenciar os passos necessários do nosso plugin que irá criar o nosso bloco Gutenberg, nele temos uma atenção especial para duas funções register_block_type e wp_register_script

Register_block_type será responsável por registrar o nosso dentro do WordPress como parâmetro ele espera, quais serão os scripts e estilos necessários para executar esse bloco, tanto em editor como para o usuário final no front-end da nossa aplicação.

Wp_register_script será responsável por a tarefa de carregar o script do nosso bloco para o WordPress, assim o WordPress sabe a hora exata de carregar o script e qual serão suas dependências de script dentro da aplicação. Para ficar mais claro vamos ao nosso exemplo:

<?php /** * Plugin Name: Gutenberg tutorial * Plugin URI: https://github.com/fellyph/Gutenberg-tutorials * Description: Este tutorial ensina como criar um bloco Gutenberg https://blog.fellyph.com.br/wordpress-2/criando-seu-proprio-bloco-gutenberg/. * Version: 1.0 * Author: fellyph */ defined( 'ABSPATH' ) || exit; /** * 1 - Criando nosso primeiro bloco * 1.1 - precisamos registrar nosso script para ser adicionado na função register_block * 1.2 - registramos nosso block type passando nosso script */ function meu_primeiro_bloco_gutenberg () { if ( ! function_exists( 'register_block_type' ) ) { // Checamos se temos suporte a função register_block_type antes de tudo. return; } wp_register_script( 'tutorial-gutenberg-01', plugins_url( 'primeiro-bloco.js', __FILE__ ), array( 'wp-blocks', 'wp-element' ), filemtime( plugin_dir_path( __FILE__ ) . 'primeiro-bloco.js' ) ); register_block_type( 'fellyph/tutorial-01', array( 'editor_script' => 'tutorial-gutenberg-01', ) ); } add_action( 'init', 'meu_primeiro_bloco_gutenberg' );
Code language: HTML, XML (xml)

Notem quando registramos o nosso script tem duas dependências wp-blocks e wp-element são requisitos mínimos para trabalhar com blocos, para entender mais sobre essas duas dependências:

  • wp-blocks inclui registro de categorias de blocos e mecânica como os itens são armazenados formulários e funções relacionadas para cada evento específico quando o bloco é salvo ou exibido no nosso front-end
  • wp-element inclui uma camada de abstração para os blocos Gutenberg, traz a renderização desses elementos do nosso back-end para o nosso front-end.

JavaScript do nosso bloco

/** * 1 - primeiro bloco Gutenberg com ES5 */ ( function( blocks, element ) { var el = element.createElement; // criando estilo para nosso editor var blockStyle = { backgroundColor: 'green', color: 'white', padding: '2em', border: '3px solid black' }; //criando estilo para nosso front-end var blockStyleFront = { backgroundColor: 'blue', color: 'white', padding: '2em', border: '3px solid black' }; blocks.registerBlockType( 'fellyph/tutorial-01', { title: 'Primeiro bloco Gutenberg', icon: 'universal-access-alt', category: 'layout', edit: function() { return el( 'p', { style: blockStyle }, 'Este conteúdo será exibido no editor.' ); }, save: function() { return el( 'p', { style: blockStyleFront }, 'Este conteúdo será exibido para o usuário final.' ); }, } ); }( window.wp.blocks, window.wp.element ) );
Code language: JavaScript (javascript)

Lendo o nosso código fica evidente a importância das nossas dependências vamos agora passar por alguns pontos-chave. O código JavaScript temos o uso de IIFE para garantir que iremos rodar o nosso script quando tivemos acesso aos scripts carregados pelo WordPress que estarão disponíveis globalmente por window.wp.blocks e window.wp.element

Dentro da nossa função armazenamos a função createElement responsável por criar o nosso markup numa variável “el” e na sequência criamos dois objetos responsáveis pelo estilo do nosso bloco blockStyle e blockStyleFront.

Com a inicialização das nossas variáveis vamos agora utilizar o wp-blocks, será carregado como blocks dentro do nosso script, assim, chamamos a função blocks.registerBlockType responsável por criar o nosso bloco nela passamos o id do nosso bloco ele precisa ser único para evitar conflitos dentro da nossa aplicação:

  • título(title)
  • ícone(icon)
  • categoria(category)
  • função que será chamada no editor(edit)
  • função que será salva no front-end da nossa aplicação(save).

Ativando o nosso primeiro bloco Gutenberg

Com o nosso plugin/bloco Gutenberg pronto, chegou a hora de ativá-lo, primeiramente devemos armazenar dois arquivos numa pasta para efetuar a instalação como plugin.

Adicionamos a pasta do nosso plugin em wp-content / plugins

No meu caso criei a pasta gutenberg-tutoriais, mas pode ser qualquer nome para essa pasta. Após a adição da pasta na minha aplicação WordPress, precisamos instalar o nosso plugin.

Tela de administração de plugins do WordPress

Se tudo ocorrer bem, visualizaremos o nosso plugin no nosso dashboard. Agora ativaremos e testar o nosso plugin.

Como será exibido o nosso bloco

Nosso bloco ativado irá aparecer na categoria layout como definimos no nosso script e podemos ver as outras configurações como o título “primeiro bloco gutenberg”.

Quando adicionamos o bloco ele irá aparecer da seguinte forma:

Nosso bloco Gutenberg em nosso editor.

Salvando o nosso bloco o resultado será o seguinte:

Bloco gutenberg sendo exibido no front-end de nossa aplicação

Notem que as cores dos nossos blocos mudam de uma para outros isso foi adicionado de forma proposital. Podemos adicionar markups e estilos diferentes para o bloco que será exibido no editor e no front-end da nossa aplicação.

Fechamos por aqui o nosso primeiro post, vamos evoluindo os nossos exercícios a partir desse ponto. Confira aqui a parte 2 desse tutorial e para acompanhar os exercícios só seguir o repositório no github: https://github.com/fellyph/Gutenberg-tutorials

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.