Como criar padrões de blocos sem saber como programar uma única linha de código • Ajuda do WordPress

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br

Como criar padrões de blocos sem saber como programar uma única linha de código • Ajuda do WordPress 2

O editor de blocos do WordPress, conhecido internamente como Gutenberg, tem o potencial de ser uma ferramenta tremendamente poderosa para criar sites a partir do zero.

Cada nova atualização do editor aproxima você do edição completa do site.

Imagine poder reorganizar seu cabeçalho, adicionar uma barra lateral ou combinar diferentes layouts no rodapé sem precisar confiar no seu tema para fornecer várias opções.

Mas você já sabia disso, certo? Foi sobre isso que eu falei.

Padrões de bloco

Parte dessa nova visão do WordPress inclui padrões de bloco, que são combinações de blocos que você pode criar e compartilhar para ajudar outras pessoas a projetar seus sites.

As possibilidades são tremendas, e já existem plugins que fornecem esses recursos. Prepare-se, pois em breve você o terá em seu WordPress.

Na verdade, você vai ficar farto, em breve não haverá tema sem padrões de blocos.

E é realmente fácil com a introdução da API de padrões de blocos crie esses pré-designs que outras pessoas possam usar para criar seus sites.

Você só precisa de algumas coisas deste código:

As propriedades mínimas para registrar um padrão são estas duas:

  1. título (obrigatório): um título legível para o empregador.
  2. conteúdo (obrigatório): HTML do conteúdo do padrão.

E o melhor de tudo é que você pode criar padrões sem conhecer uma única linha de código, no editor do WordPress.

No momento, você precisa ter o plug-in Gutenberg ativo, porque os padrões ainda não foram incorporados ao kernel do WordPress, mas se você tiver um site de teste, basta instalá-lo e você pode começar a criar e usar padrões de bloco agora.

Uma vez instalado e ativo, você verá que há uma nova guia no insersor de bloco, chamada padrões.

Como criar padrões de blocos sem saber como programar uma única linha de código • Ajuda do WordPress 3

E você verá alguns exemplos.

Mas garoto, isso é o que já existe, Você se atreve a fazer um padrão de bloco? Você verá como é fácil.

Criando um padrão de bloco do zero

É muito simples. Para começar, abra o editor de blocos e adicione alguns blocos ao seu gosto.

Eu por exemplo, Eu escolhi criar um bloco com três colunas e eu fiz o seguinte …

  • Em cada coluna existem 3 blocos:
    • Cabeçalho: texto de amostra adicionado e alteração da cor de fundo do cabeçalho.
    • Parágrafo: texto de amostra adicionado e maiúscula na primeira letra.
    • Imagem: alinhado ao centro e estilo circular escolhido, para que o usuário possa colocar sua imagem favorita.
  • O bloco de colunas que coloquei em largura ampla, para enredar.

E é isso, isso é bom para mim. São todas as configurações padrão do editor do WordPress.

Se parece com isso:

Como criar padrões de blocos sem saber como programar uma única linha de código • Ajuda do WordPress 5

O próximo passo é mudar para o editor de código, fácil, como você vê na captura de tela a seguir:

Como criar padrões de blocos sem saber como programar uma única linha de código • Ajuda do WordPress 7

Agora você só precisa copiar o código

Como criar padrões de blocos sem saber como programar uma única linha de código • Ajuda do WordPress 9

E “escape” com uma ferramenta como OnlineStringTools ou seu editor de código favorito.

Como criar padrões de blocos sem saber como programar uma única linha de código • Ajuda do WordPress 11

O que a ferramenta faz – uma obrigação para os padrões de bloco funcionarem – é adicionar barras a uma sequência de códigos para escapar de caracteres especiais, como barras invertidas, guias, novas linhas, aspas simples e aspas duplas.

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br

O próximo é copie o código já escapado e cole-o à sua função para gravar padrões de blocos.

Eu fiz assim:

E está quase lá, agora só há converte o padrão em uma função que adiciona o padrão ao editor ou mesmo a um plugin.

Este seria todo o código completo para convertê-lo em um plugin:

Agora só haveria comprima e instale-o como qualquer outro plugin.

Como criar padrões de blocos sem saber como programar uma única linha de código • Ajuda do WordPress 13

Da próxima vez que você quiser insira um padrão de bloco estará disponível.

Como criar padrões de blocos sem saber como programar uma única linha de código • Ajuda do WordPress 15

E qualquer usuário que tenha o plug-in instalado poderá usar o padrão, tudo bonito ele.

Como criar padrões de blocos sem saber como programar uma única linha de código • Ajuda do WordPress 17

Você se atreve a criar seu primeiro padrão de bloco?

A lista de requisitos é ridícula:

  1. Um site de teste do WordPress com o plug-in Gutenberg instalado e ativo.
  2. O código para registrar padrões (você o possui acima)
  3. Crie seu próprio padrão e copie o código HTML
  4. “Escapar” do HTML
  5. Crie uma função para poder começar a usar o padrão.

E vimos todas as etapas detalhadas neste guia, então …

Sua vez!

Se quiser, você pode baixar o plug-in que criei com o padrão de teste neste link, caso esteja curioso.

Ou, se preferir, você também tem o código neste Git.

Como você pode ver, é realmente muito fácil criar e registrar padrões de bloco, a partir daí as possibilidades são infinitas, e garanto que você começará a ver muitos padrões de blocos rapidamente.

VALORIZE E COMPARTILHE ESTE ARTIGO PARA MELHORAR A QUALIDADE DO BLOG …

(5 votos, média: 5)
Gostou deste artigo? Você não sabe o que está perdendo no Youtube!


cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br
Leia Também  O que você precisa saber sobre alternativas de cartão de crédito