Criando blocos personalizados do Gutenberg para WordPress

Criar blocos personalizados do Gutenberg para WordPress não precisa ser difícil. Na verdade, com um pouco de código, você pode criar seus próprios blocos personalizados sem precisar usar um plugin. Gutenberg é um novo editor para WordPress que permite criar blocos personalizados para o seu conteúdo. Os blocos são os blocos de construção do seu conteúdo no Gutenberg. Eles podem ser usados ​​para adicionar texto, imagens, vídeos e muito mais. Para criar um bloco personalizado , você precisará usar um editor de texto como o WordPress Code Editor ou um plugin como o Block Lab. Depois de ter um editor de texto, você pode criar um novo arquivo em seu tema ou diretório de plugins. A primeira coisa que você precisa fazer é criar um tipo de bloco. Um tipo de bloco é uma coleção de configurações que definem como seu bloco se comporta. Para fazer isso, você precisará usar a função register_block_type. Depois de ter um tipo de bloco, você pode registrá-lo no WordPress. Esta função terá dois argumentos: o nome do seu tipo de bloco e um objeto que contém as configurações do seu bloco. Depois de registrar seu tipo de bloco, você pode começar a adicionar campos a ele. Os campos são as configurações que controlam a aparência e o comportamento do seu bloco. Para adicionar um campo ao seu tipo de bloco, você precisará usar a função add_field. Depois de adicionar todos os campos desejados ao seu tipo de bloco, você pode registrá-lo no WordPress. E é isso! Agora você criou um bloco Gutenberg personalizado para WordPress.

O editor de blocos Gutenberg foi um dos aprimoramentos do WordPress 5.0. O editor Gutenberg divide o conteúdo em blocos, que são seções facilmente reorganizadas. A maioria dos desenvolvedores seria incapaz de criar blocos projetados nativamente porque não possuem habilidades de React. A comunidade de desenvolvedores do WordPress respondeu desenvolvendo ferramentas que podem atender aos requisitos do React/JavaScript. Os blocos no Block Lab são criados em três etapas: adicioná-los no admin, copiá-los e colá-los e exportá-los. Uma API também pode ser usada para criar controles personalizados para seu bloco. Isso pode não ser muito para se olhar, mas lhe dará uma ideia do que você pode fazer com um bloco Gutenberg personalizado.

Para fazer um bloco, precisaremos criar um novo arquivo chamado block-notification-bar.php, que contém um título (Barra de Notificação) e três campos. Em resposta a este arquivo, uma mensagem de notificação aparecerá instruindo-nos a colocar nosso modelo de bloco personalizado em nosso tema. Antes de fazer o upload do arquivo, certifique-se de que ele foi salvo e enviado para o seu servidor web. Um bloco personalizado foi criado para nós. Tudo o que importa é que você atinja esse objetivo. Temos muitas opções se quisermos expandir o que já criamos. Ícones, botões e a capacidade de vincular a outra postagem ou página são apenas alguns dos recursos que podem ser adicionados. Todas essas habilidades podem ser alcançadas através do Block Lab, bem como de outros plugins mencionados acima.

Plugin de blocos personalizados do WordPress

Existem muitos plugins de blocos personalizados excelentes disponíveis para WordPress. Cada plugin oferece um conjunto diferente de recursos e opções. Alguns plugins de blocos personalizados permitem que você crie blocos personalizados para suas postagens e páginas, enquanto outros fornecem um conjunto de blocos pré-projetados que você pode usar.

Você pode criar facilmente postagens e páginas com o WordPress adicionando elementos de conteúdo e layout como blocos. O WordPress oferece uma ampla variedade de blocos em sua configuração padrão. Você pode, no entanto, querer criar um bloco personalizado para realizar uma tarefa específica. Este tutorial irá orientá-lo nas etapas de criação de um bloco completamente exclusivo. O primeiro passo é inserir três campos no seu bloco de depoimentos. Clique no botão Adicionar campo para começar a preencher o primeiro campo. A segunda etapa é criar um modelo de bloco, que determinará exatamente como os dados serão exibidos.

A terceira etapa é estilizar a marcação de saída do bloco clicando na guia CSS. Ao carregar manualmente os modelos, você pode criar seu próprio bloco personalizado. Nesse caso, o PHP é a melhor maneira de interagir com seus campos de bloco personalizados. Basta fazer o upload do modelo do editor para o seu tema usando o método de upload. Para começar, visualize seu bloco personalizado. Antes de poder visualizar seu HTML/CSS, você deve fornecer alguns dados de teste. Crie um site WordPress personalizado com um bloco Gutenberg.

Para pesquisar um bloco, digite seu nome ou palavras-chave na caixa que aparece após clicar no botão adicionar novo bloco. Você pode visualizar o bloco salvando e editando sua postagem e página. Em nosso site de teste, você pode ver como fica o bloco de depoimentos.

Criar bloco Gutenberg React

Existem algumas maneiras de criar um bloco Gutenberg no React. A primeira maneira é usar a ferramenta CLI create-guten-block. Isso criará um novo bloco Gutenberg para você. Para usar esse método, você precisará ter o Node.js e o npm instalados em sua máquina. Depois de ter essas dependências instaladas, você pode criar um novo bloco Gutenberg executando o seguinte comando: create-guten-block my-block Isso criará um novo diretório chamado my-block com todos os arquivos necessários para um bloco Gutenberg. A segunda maneira de criar um bloco Gutenberg no React é usar o pacote @wordpress/block-editor. Este pacote inclui uma função auxiliar chamada createBlock que pode ser usada para criar blocos Gutenberg. Para usar este método, você precisará instalar o pacote @wordpress/block-editor em seu projeto. Depois de instalar o pacote, você pode criar um novo bloco Gutenberg executando o seguinte código: import { createBlock } from '@wordpress/block-editor'; createBlock( 'meu-bloco/meu-bloco', { title: 'Meu bloco', categoria: 'comum', } ); Isso criará um novo bloco chamado my-block na categoria comum. A terceira maneira de criar um bloco Gutenberg no React é usar a função wp.blocks.createBlock . Esta função faz parte da API JavaScript do WordPress e pode ser usada para criar blocos Gutenberg. Para usar esse método, você precisará incluir o pacote wp-api-request em seu projeto. Depois de instalar o pacote, você pode criar um novo bloco Gutenberg executando o seguinte código: import { wp } from 'wp'; wp.blocks.createBlock( 'meu-bloco/meu-bloco', { title: 'Meu bloco', categoria: 'comum', } ); Isso criará um novo bloco chamado my-block na categoria comum.

Aprenda a criar blocos personalizados neste tutorial para o editor Gutenberg. Você usará um plugin criado por você para concluir a tarefa. Embora um dos temas padrão esteja disponível para criar um bloco Gutenberg personalizado, devemos admitir que é possível. Neste tutorial, veremos como criar um novo bloco personalizado com o Gutenberg. Além disso, personalizaremos a aparência do frontend e do editor com base nas preferências de design que fornecemos. Se você não quiser gastar muito tempo criando blocos, basta adicionar um e personalizá-lo de acordo com suas necessidades.

React é fácil de usar em temas personalizados

React é uma excelente biblioteca para criar interfaces de usuário com JavaScript. O WordPress o tem usado para alimentar o novo editor Gutenberg , bem como a tela de administração do widget e atualizações recentes dos recursos de edição de conteúdo do site. Como o React já está embutido no WordPress, é simples de usar em temas personalizados.

Gutenberg Criar bloco de botão personalizado

Gutenberg create custom button block é uma ferramenta muito útil para criar botões personalizados para o seu site. Com esta ferramenta, você pode criar facilmente botões atraentes e funcionais. Esta é uma ótima maneira de adicionar um toque pessoal ao seu site e destacá-lo do resto.

Neste tutorial, você aprenderá como fazer seu primeiro bloco simples no aplicativo popular. Nosso aplicativo WordPress @create-block é uma ferramenta oficial que nos permite gerar rapidamente código Javascript/PHP/CSS. No modo interativo, você pode configurar seu bloco em uma série de etapas. Quando você está apenas aprendendo sobre Gutenberg, isso pode ser extremamente útil. Se você já montou o bloco, agora pode acessar o diretório recém-criado por meio de um editor de código. A estrutura do plug-in de bloco segue isso como está atualmente (no momento em que escrevo este tutorial). Veremos os detalhes de cada arquivo e seu uso neste módulo.

O sinalizador de linha de comando é um método comum de especificar opções para programas de linha de comando. Antes de usar os sinalizadores, substitua os valores no diretório de sinalizadores pelos que você deseja usar. Uma folha de estilo que será enfileirada ou aplicada no editor. Os detalhes básicos do plugin são discutidos em detalhes. O WordPress exibe as informações do plugin por padrão. Para informar ao Git quais arquivos devem ser ignorados ao criar um projeto com controle de versão, o arquivo Gitignore A. deve ser incluído. O repositório contém informações. O Config permite que os desenvolvedores mantenham um estilo de codificação consistente em vários projetos.

Desenvolvimento de plugins WordPress Gutenberg

O plugin WordPress Gutenberg é um projeto de código aberto desenvolvido por uma comunidade de voluntários. Qualquer pessoa pode contribuir para o projeto e ajudar a torná-lo melhor. O plugin está sendo constantemente atualizado e aprimorado. Se você é um desenvolvedor, pode ajudar a contribuir com o projeto desenvolvendo novos recursos ou corrigindo bugs.

Você provavelmente já ouviu falar do Gutenberg (o editor de blocos do WordPress), mas como você começa a criar seu próprio plugin? Os blocos são criados com um script simples do WordPress. O tipo de plugin WordPress criado aqui é tipicamente um bloco, mas fornece um bom ponto de partida para outros no processo. O Create Block Script pode ser usado como modelo para criar seu próprio plugin. Você pode ver facilmente o bloco no front-end do WordPress, mas ele tem uma aparência diferente para ajudá-lo a se acostumar com ele no back-end. Este arquivo deve ser gerado no modo de desenvolvimento somente após a compilação dos ativos. /node_modules – Esta é a pasta da qual todos os parâmetros dependentes de JavaScript do seu plugin são armazenados.

Arquivos predefinidos contendo ambientes úteis do Visual Studio Code (VDC) podem ser encontrados neste arquivo. Você deve garantir que está na pasta de plugins do WordPress se quiser criar um plugin. Como resultado, você poderá visualizar os estágios de desenvolvimento e produção do plugin. Abra /src/save.js em seu editor para substituir a função save pelo seguinte: BlockText pode ser gerado como uma string dessa maneira. O código a seguir deve ser adicionado à raiz do plug-in para exibir seus blocos em uma categoria de bloco personalizada. A função registerBlockType.js retorna uma lista de suas categorias de bloco, que podem ser recompiladas usando a função registerBlockType.js do plugin.

A edição de conteúdo do Gutenberg

Os usuários do WordPress podem criar, editar e excluir conteúdo por meio do Single Page Application (SPA) que é construído no React. Em contraste com o editor de conteúdo tradicional, este oferece uma interface mais fluida e amigável. Se você deseja um editor de conteúdo mais poderoso, o aplicativo Gutenberg não é para você. Se você prefere um visual mais descontraído, pode confiar no Gutenberg.

Editor de blocos personalizados do WordPress

Você pode usar este bloco em qualquer postagem ou página que desejar. Na tela Adicionar novo bloco, use a caixa de pesquisa para procurar seu bloco digitando seu nome ou palavras-chave. Depois de inserir o bloco na área de conteúdo, você verá os campos de bloco que criou para este bloco personalizado.

Este tutorial o guiará pelo processo de criação de uma instância de editor de blocos personalizada e totalmente funcional no WordPress. Este editor será construído inteiramente dentro de uma página personalizada do WP Admin chamada Block Editor (da maneira mais criativa). Em nosso WordPress Plug-A-Thon, criaremos um editor. Agora devemos gerar algum HTML em nossa página personalizada usando o componente React do editor de blocos. Como terceiro argumento, usamos a linha de dependências de script ($script_asset['dependencies']). Isso garantirá que os scripts relacionados ao WordPress não sejam incluídos no pacote criado. Também devemos registrar nossos estilos CSS personalizados e a biblioteca de formatação padrão do WordPress para usá-los.

Isso nos permite usar JavaScript para gerar um Editor de Blocos no HTML da página. A mágica acontece quando o componente para isso é chamado BlockEditor. É possível renderizar o editor do PHP sem criar um JS global. O layout do editor é construído em scaffolding, como você pode ver aqui, além de alguns provedores de contexto especializados. Block EditorProvider é o componente mais importante do pacote do editor de blocos do WordPress. Como explicamos anteriormente, isso fornece um novo contexto para um editor de blocos totalmente novo no contexto da edição de blocos. Ele faz isso assinando o registro fornecido (por meio do withRegistry Provider HOC), ouvindo eventos de alteração de bloco, determinando se a alteração de bloco permaneceu persistente e chamando o manipulador de entrada onChange quando necessário.

O componente mais intrigante é o componente BlockList, que adiciona uma lista de blocos ao editor. Vale a pena estudar esses componentes em detalhes porque eles são alguns dos mais complexos e complexos. Para saber mais sobre nosso componente EditorBlock personalizado, consulte o artigo a seguir. Slot/fill é implementado utilizando nosso componente Blockeditor (veja acima) para expor um Fill (Sidebar. InspectorFill) dentro dele, que importamos e renderizamos na implementação posteriormente. Como resultado, o React nos permite manter um componente de inspeção em seu DOM enquanto o renderiza na marcação em um local separado (por exemplo, na Barra Lateral). Os blocos também podem ser encontrados em LocalStorage sob a chave getdavesbeBlocks.

Esses dados são serializados no formato Block Grammar, o que significa que podem ser armazenados em uma string. O GitHub compilou todo o código para o editor de blocos de funcionamento personalizado. O programa pode ser baixado e testado gratuitamente.