Blocos Gutenberg para Desenvolvedores WordPress e React

Use seu conhecimento em ReactJS e Redux para criar blocos e plugins complexos do Gutenberg do zero

Recentemente, o WordPress decidiu substituir seu antigo editor WYSIWYG por um novo editor de blocos baseado em ReactJS chamado 'Gutenberg'. Gutenberg, também conhecido como editor de blocos, é construído com base no conceito de blocos. Cada postagem é composta por diferentes blocos, cada um servindo a um propósito específico. Esses blocos podem exibir botões, imagens, texto e muito mais.

Neste curso, você aprenderá tudo o que precisa saber para criar blocos personalizados para o editor de blocos do Gutenberg. Começaremos com blocos simples e gradualmente passaremos para blocos mais complexos. Conhecimento prévio em desenvolvimento de temas/plugins do WordPress é necessário para este curso. Você também deve ter um bom entendimento de JavaScript, especialmente das versões recentes do ES6+. Familiaridade com ReactJS também é necessária, incluindo conceitos como estado de componente, hooks e conceitos básicos do React. O conhecimento de conceitos avançados como componentes de ordem superior e Redux é ideal, embora os abordaremos brevemente no curso.

O conteúdo do curso está estruturado da seguinte forma:

Seção 1: Diretrizes de Design e Estrutura de Banco de Dados

Antes de mergulharmos na codificação, discutiremos as diretrizes de design que devem ser seguidas ao criar blocos. Também exploraremos como as postagens do Gutenberg são salvas no banco de dados e como a interface do usuário baseada em ReactJS é construída a partir do conteúdo salvo.

Seção 2: Criando um Plugin do WordPress e Registrando o Primeiro Bloco do Gutenberg

Nesta seção, criaremos um plugin do WordPress e registraremos nosso primeiro bloco do Gutenberg. Também utilizaremos a ferramenta wp-scripts fornecida pelo WordPress para processar arquivos JS e CSS no plugin. Além disso, integraremos ferramentas como ESLint, Prettier, Stylelint e Husky para aprimorar nosso fluxo de trabalho de desenvolvimento.

Seção 3: Modificando/Adicionando Recursos no Editor de Blocos por meio de Temas do WordPress

Aqui, exploraremos como modificar ou adicionar recursos no editor de blocos por meio de temas do WordPress.

Seção 4: Criando um Bloco Simples

Nesta seção, criaremos um bloco simples e aprenderemos sobre as várias possibilidades dentro de um bloco.

Seção 5: Criando um Bloco Complexo com Recursos Avançados

Usando nosso conhecimento das seções anteriores, criaremos um bloco mais complexo com recursos avançados. Esses recursos incluem adicionar blocos dentro de outros blocos e lidar com imagens.

Seção 6: Criando Blocos Dinâmicos

Os blocos podem ser estáticos ou dinâmicos. Nesta seção, aprenderemos como criar blocos dinâmicos que podem buscar dados do banco de dados.

Seção 7: Trabalhando com Armazenamentos de Dados semelhantes ao Redux

Exploraremos os armazenamentos de dados existentes no editor de blocos e aprenderemos como usá-los. Além disso, criaremos nosso próprio armazenamento de dados.

Seção 8: Gerenciando Metadados no Gutenberg

Nesta seção, discutiremos diferentes abordagens para gerenciar metadados no Gutenberg. Também aprenderemos como criar um plugin de barra lateral personalizado para gerenciar metadados.

Seção Final: Tópicos Adicionais

Na seção final, abordaremos diversos tópicos, como contexto, padrões, modelos, API de formatação, filtros e internacionalização.

O que você aprenderá

• Entender as diretrizes de design para o editor de blocos
• Aprender como o editor de blocos salva postagens no banco de dados e constrói a interface do editor
• Utilizar wp-scripts para transpilar ES6 e JSX, compilar SASS para CSS, agrupar e minificar arquivos JS e CSS, e muito mais
• Integrar ESLint, Prettier, Stylelint e Husky para melhorar seu fluxo de trabalho
• Criar blocos personalizados do Gutenberg do zero
• Personalizar recursos do editor de blocos em temas do WordPress
• Dominar a criação de blocos complexos do Gutenberg
• Criar blocos aninhados que aceitam outros blocos
• Utilizar bibliotecas de terceiros do React para adicionar recursos avançados
• Lidar com blocos obsoletos
• Transformar blocos personalizados em outros blocos
• Criar blocos dinâmicos que buscam dados do banco de dados
• Trabalhar com armazenamentos de dados existentes e criar o seu próprio para compartilhar dados entre blocos
• Gerenciar campos de metadados no editor de blocos
• Criar barras laterais personalizadas e gerenciar campos de metadados nelas
• Expandir a funcionalidade da barra lateral do editor de blocos
• Explorar recursos como padrões, contexto, API de formatação e modelos
• Modificar o comportamento de blocos existentes com filtros JavaScript e PHP
• Internacionalizar blocos gerando e carregando arquivos de tradução