Como criar padrões de bloco do WordPress para acelerar a criação de sites

Padrões de bloco serão um grande negócio para todos os usuários do WordPress e, neste post, mostrarei exatamente como criar seus próprios padrões de bloco.

 add_action( 'init', function() { register_pattern( 'NAME', [ 'title' => __( 'TITLE' ), 'content' => 'PATTERN' ] ); } );

Dois dias atrás, publiquei um vídeo e apresentei esse conceito que está chegando ao WordPress chamado padrões de blog. É meio experimental agora, e é algo que estou muito animado com isso. E acho que se você pensar no potencial do que são padrões de bloco, poderá ver o potencial para ajudá-lo a entregar sites mais rapidamente se você tiver clientes, para capacitá-los a fazer mais com seus local na rede Internet.

Então eu vou te mostrar. Exatamente como criar um padrão de bloco neste vídeo. Agora vamos fazer algumas coisas que são um pouco do lado técnico, e eu sei que este é o canal do WordPress para não técnicos, então vou tentar simplificar ao máximo, mas você está vamos ver no final como é simples criar um desses padrões de bloco.

Então vamos em frente e dar uma olhada nisso. Então aqui está a página onde fala sobre o novo lançamento deste recurso em fazê-lo. Capaz de apenas as pessoas comuns para criar um padrão de bloco. Então, quando eu rolo para baixo, ele fornece o tipo de modelo para isso. Portanto, tudo o que está envolvido nisso é criar algo chamado função personalizada.

Mas não se preocupe, vou tornar isso super fácil para todos, mas é aqui que está esse pequeno trecho de código. Agora eu vou ter um link na descrição do vídeo abaixo. Ele vai levá-lo ao meu site. Você receberá instruções escritas sobre como fazer isso também. Este pequeno trecho de código que você pode copiar e colar em seu próprio site.

Ok, aqui está o que vamos precisar. Este é um novo recurso do Gutenberg e você precisará do plug-in do Gutenberg instalado e ativado, então você precisará de uma versão mínima de 7.8 e foi isso que saiu recentemente. Agora, o que vai acabar acontecendo é talvez em quatro a seis meses, talvez até o final do verão de 2020 isso seja incluído no WordPress por padrão, mas por enquanto, você precisará, se quiser experimentar isso , você precisará instalar o plugin Gutenberg.

A próxima coisa que você pode fazer, e isso é opcional, se você não sabe como adicionar uma função personalizada a um tema filho, e eu nem uso mais um tema filho, você pode querer usar este plugin gratuito, e este é um dos melhores plugins gratuitos. Que eu já encontrei, e é chamado de trechos de código. E isso nos permitirá adicionar essa função personalizada e uma maneira muito fácil de usar, fácil de gerenciar.

Ok? Então você vai precisar disso. E isso é opcional. Este é um plugin gratuito chamado blocos de cadência. E o que isso faz é adicionar muitas funcionalidades de construtor de páginas ao Gutenberg. É muito legal no que permite que você faça. Você pode arrastar e redimensionar colunas. Há muitos elementos nele que adicionam muito dessa funcionalidade do construtor de páginas, mas para o Gutenberg, e é um plug-in totalmente gratuito.

OK. Agora vamos pular para o meu site. Então aqui está um site. Já está tudo configurado. E se você não sabe como instalar um plugin, alguém ficou muito bravo comigo outro dia por não mostrar como instalar um plugin e um vídeo. Você vai em plugins, clica em adicionar novo, e aqui mesmo você faz uma busca pelo nome daquele plugin, e então clica.

Baixe, ou me desculpe, você clica em instalar agora e depois ativa. É um processo muito simples. Então eu vou clicar nos meus plugins instalados, e você pode ver que eu tenho o Gutenberg instalado e este foi um bloco de cadência opcional, e aqui estão os trechos de código. Então, vou ativar trechos de código e você pode ver que agora está ativado aqui.

Então vá em frente e clique em trechos de código e você verá alguns que vem com ele. E aqui está este interruptor e é alternado. Eles estão todos desativados e você realmente não precisa manter esses que vêm por padrão. Você pode simplesmente clicar aqui e você pode excluir todos eles, mas eu já fui em frente e adicionei um aqui chamado modelo de padrão de bloco.

Então o que você faria. É clicar em adicionar novo, e você pode nomear este modelo de padrão de bloco naquele pequeno trecho de código que eu mostrei para você que está bem aqui, mas vou lhe dar uma versão modificada disso no meu site. Você vai apenas copiar e colar isso aqui, e então você vai clicar em salvar alterações.

Você não vai clicar em salvar e ativar, você vai clicar em para salvar as alterações, e eu vou te mostrar o porquê em apenas um momento. OK. Então agora o que você vai querer fazer é criar este padrão de bloco. E um padrão de bloco é simplesmente uma seção salva. Então, se você usa um construtor de páginas, agora sabe que pode salvar seções e algumas delas vêm com seções pré-desenhadas, mas a experiência do usuário, acho que é muito melhor em Gutenberg.

Então o que você vai querer fazer é ir para as páginas. E clique em adicionar novo, e você vai querer nomear isso. Hum, na verdade, deixe-me me livrar dessa turnê. Você vai querer nomear esse padrão de bloco, e é exatamente aqui que vamos criar esse padrão de bloco. Agora, não vou criar um padrão de bloco agora.

Vou mostrar o que eu já criei, e é . Bem aqui. Então aqui está um padrão de bloco que eu criei. Você pode ver que é esta seção. Tem este fundo colorido. Eu tenho um título, alguns subtítulos e alguns botões aqui, e coloco um vídeo nele. Então, vou fazer deste meu padrão de bloco para que eu possa com apenas dois cliques do mouse, adicionar isso a qualquer lugar do meu site.

Então o que vou fazer é clicar no canto superior direito, há esses três pontos. Eles são meio difíceis de ver, e quando você clica nele, há essa opção aqui que diz editor de código. Então você vai querer clicar no editor de código e, em seguida, ele mostra todo o código que está envolvido em tornar esse blog um padrão de blog de padrão de bloco.

Ok? Então você vai clicar aqui e então você vai clicar em control a ou command a no seu computador para destacar tudo. E eles são ano novo. Coloque-o na sua área de transferência. Então eu vou fazer isso controlando C. então agora está na minha área de transferência. Então agora o que eu vou fazer é sair daqui. Na verdade, se você quiser sair dessa visão, há um pequeno X bem aqui que diz editor de código de saída, e agora ele vai me mostrar do jeito que normalmente está aqui.

OK. Portanto, você pode salvar isso como um rascunho, se quiser, mas não precisará disso. Isso é apenas para você criar esse padrão de bloco, e você pode criar um padrão de bloco que seja qualquer coisa, e não precisa ser um bloco de coisas. Pode ser um modelo inteiro para uma postagem de blog, por exemplo. Ok, agora vou clicar onde está o w que me tira do editor de blocos.

Agora vou voltar aos trechos de código. Então, aqui é onde eu criei esse modelo de padrão de bloco. Vou clicar em clone, e agora é criado um clone dele, e vou clicar no título para começar a editá-lo. Então, para o título, vou mudar isso para um título que faça sentido para gerenciá-lo.

Então, para mim, eu vou apenas nomeá-lo. Um herói com vídeo. Então agora eu sei o que é isso quando estou olhando para a lista no futuro. Ok, então há algumas coisas aqui que você precisará editar. Três coisas. É super simples. O primeiro é o nome. Portanto, pode ser qualquer nome, precisa ser todo em letras minúsculas, sem espaços ou caracteres estranhos.

Então eu vou em frente e coloco um nome agora. Você pode ver que eu o chamei de herói com vídeo. Em seguida, aqui você precisa colocar um título. Então, estamos substituindo esta palavra título, e é isso que vai aparecer. Você está olhando para uma lista de padrões de blog, bloco, não padrões de bloco de blog. E se você notar, você pode, este é o nome amigável, então pode ter espaços.

Uh, eu não colocaria nenhum personagem funky lá apenas. Espaços é bom. Então é isso que vai mostrar nesta lista a e logo aqui onde diz o padrão a. Você vai apenas colar o que acabou de copiar na sua área de transferência. Agora eu quero que você tome nota de uma coisa. Para cada um destes. Deixei o pequeno apóstrofo na frente e no verso.

Você vê que há o apóstrofo que deve estar lá. Se você acidentalmente removê-lo, coloque-o de volta. OK. Estamos apenas mudando. Estamos apenas substituindo o espaço reservado para texto. Então, por aqui, eu não quero substituir tudo. Eu só quero substituir o padrão de palavras, então vou destacá-lo e depois vou colar no que copiei.

E aí está. Então agora vou rolar para baixo e desta vez vou clicar em salvar alterações e ativar. E agora deve dizer snippet atualizado e ativado. E quando eu clico em todos os trechos, você pode ver agora que este herói com vídeo está ativado. Portanto, no futuro, para padrões de bloco adicionais, quero ir para onde diz modelo de padrão de bloco e clicar em clonar e criar esse modelo de padrão de bloco dessa maneira.

Dessa forma, eu sempre tenho o modelo lá. Agora, se você já conhece e tem sua própria maneira de adicionar funções personalizadas, não precisa de trechos de código e, e todo esse tipo de coisa, pode colocá-lo onde quiser. Esta é apenas uma maneira muito mais fácil de gerenciá-lo, se você me perguntar. Ok, então agora eu vou para as páginas no meu clique em adicionar novo, e se você quiser ver o.

Padrões de bloco. Uh, aqui está o ícone para ele. E quando você passa o mouse sobre ele, ele diz padrões de bloco. E quando eu clico nele, você vê alguns dos padrões de blocos que estão sendo experimentados agora. Mas quando você rolar para baixo, verá aquele padrão de bloco que criei. E o que é realmente legal é que gera uma visualização em miniatura.

E faz isso dinamicamente. Você tem ferramentas de criação de páginas que nem fazem isso. Uh, e isso torna muito mais fácil gerenciar seus padrões de bloco. Então, e você pode ver aqui que diz herói com modelo. Agora, se eu quiser usar isso em qualquer lugar do meu site, é um clique do mouse. E aí está. E tudo que eu teria que fazer naquele momento para começar a mudar alguns textos, mudei os links para os botões.

Eu posso clicar aqui e posso mudar o vídeo. Então. É assim que você cria um padrão de bloco. Agora, isso é um grande negócio, acho que porque o que vai acontecer é um tema. Desenvolvedores e criadores de plugins, eles poderão criar esses padrões de blocos para você, então será muito mais rápido, rápido e fácil construir um site usando a ferramenta nativa de construção de blocos que o WordPress já inclui.

Não há nada para comprar, não há inchaço de código. Não há nenhuma dessas coisas, e. O que leva ainda mais longe. Você pode ver como é fácil para você criar seus próprios padrões de blocos, e é muito fácil vê-los em uma lista. Clique em um botão e ele é colocado lá. Então agora você pode pensar em como pode ser mais fácil construir um site quando você tem sua própria biblioteca de padrões de blocos.

Portanto, se você cria sites para clientes e não deseja usar um construtor de páginas. Você só quer usar o construtor de blocos embutido. Você pode criar sua própria biblioteca de padrões. Você viu como é fácil. Eu posso fazer isso. Você poderia fazê-lo. Uh, você pode criar sua própria biblioteca de padrões de bloco que você pode mover de site para site, e você pode mostrar ao seu cliente como eles podem construir isso.

Agora, isso não é apenas para páginas, isso é para postagens, e não se limita apenas a uma seção que você viu. Basicamente qualquer coisa que você possa criar em uma página. Você pode fazer um padrão de bloco. Portanto, se você estiver usando o construtor de blocos apenas para postagens de blog e houver certos elementos que deseja usar repetidamente em uma postagem de blog para aprimorar o layout das postagens de blog, bem, você pode criar um padrão de bloco para isto.

E é muito fácil. Um clique e você pode usá-lo. Na verdade, todos os modelos de postagem do blog. Portanto, se houver uma fórmula que você siga para as seções de uma postagem de blog, você poderá transformar essa postagem de blog inteira em um modelo de bloco. Esse clique é aplicado e tudo o que você precisa fazer é apontar, clicar e editar.

Então, a última coisa antes de encerrarmos aqui, este é um novo conceito e é algo para se pensar nos próximos meses. Experimente agora. Não é bem Yeti, Yeti. Não está pronto para o horário nobre porque se você notou, o único aspecto negativo que vi é quando você está olhando o blog. Veja lá vou eu de novo.

Se você estiver olhando para os padrões de bloco, é apenas uma lista de artigos mais alta onde você precisa rolar, então eles precisam melhorar o processo de categorização e organização. Talvez eles tenham algum tipo de interface para torná-lo mais visual e fácil de trabalhar. Se você vai ter 50 blocos diferentes.

Padrões. Então eles só precisam melhorar isso. E parte da sintaxe do código pode mudar um pouco. Quem sabe quando isso finalmente sair. Mas o objetivo deste vídeo é apenas mostrar o que será possível muito, muito em breve, para que você possa começar. Pensando em como isso pode se aplicar ao seu fluxo de trabalho e ao que você está fazendo como construtor de sites.

De qualquer forma, isso é tudo o que tenho para você neste post. Espero que você goste de olhares avançados para o futuro do WordPress como este, e se você gostou deste vídeo ou encontrou algum valor, considere dar um joinha e compartilhar este vídeo para que as pessoas possam ver o que está por vir.