E para aqueles que preferem conte\u00fado em v\u00eddeo, tamb\u00e9m temos um curso em v\u00eddeo gratuito: Desenvolvimento de blocos personalizados do Gutenberg<\/a>.<\/p>\n E sim, voc\u00ea pode aumentar suas expectativas de carreira com as habilidades de desenvolvimento do Gutenberg, mas n\u00e3o precisa necessariamente ser um desenvolvedor para criar layouts avan\u00e7ados em seu site WordPress.<\/p>\n Os usu\u00e1rios do WordPress podem tirar proveito de recursos poderosos que lhes permitem criar facilmente layouts de blocos avan\u00e7ados sem complica\u00e7\u00f5es. Os usu\u00e1rios do WordPress podem aproveitar recursos poderosos para criar layouts sofisticados de maneira intuitiva. Neste artigo, vamos focar na cria\u00e7\u00e3o de Padr\u00f5es de Blocos<\/strong>.<\/p>\n Os padr\u00f5es de blocos<\/a> s\u00e3o grupos pr\u00e9-constru\u00eddos de blocos que voc\u00ea pode adicionar ao seu conte\u00fado e personalizar usando as mesmas ferramentas de design dispon\u00edveis para os blocos inclu\u00eddos.<\/p>\n Eles foram introduzidos pela primeira vez no WordPress 5.5<\/a> para permitir que os administradores de sites e criadores de conte\u00fado incluam estruturas complexas prontas para uso de blocos aninhados<\/strong> em seu conte\u00fado com apenas alguns cliques.<\/p>\n Os temas de blocos geralmente fornecem alguns padr\u00f5es de blocos que voc\u00ea pode adicionar ao seu conte\u00fado diretamente do inseridor de blocos. O novo tema padr\u00e3o inclu\u00eddo no WordPress 6.7<\/a>, Twenty Twenty-Five<\/a>, inclui mais de 70 padr\u00f5es de blocos.<\/p>\n E voc\u00ea n\u00e3o est\u00e1 limitado aos padr\u00f5es fornecidos pelo seu tema.<\/p>\n Primeiro, voc\u00ea encontrar\u00e1 v\u00e1rios padr\u00f5es de blocos prontos para uso na galeria oficial de padr\u00f5es do WordPress<\/a>.<\/p>\n Al\u00e9m disso, voc\u00ea pode criar um n\u00famero ilimitado de padr\u00f5es usando a API de Padr\u00f5es ou as ferramentas de edi\u00e7\u00e3o dispon\u00edveis no editor de blocos. Voc\u00ea pode usar padr\u00f5es personalizados internamente no seu site, export\u00e1-los para outros sites ou compartilh\u00e1-los publicamente na galeria de Padr\u00f5es. A principal diferen\u00e7a entre os dois tipos \u00e9 que todas as altera\u00e7\u00f5es feitas em um padr\u00e3o sincronizado s\u00e3o aplicadas a todas as inst\u00e2ncias desse padr\u00e3o em todo o site. Por outro lado, as altera\u00e7\u00f5es feitas em um padr\u00e3o de bloco padr\u00e3o afetam apenas uma inst\u00e2ncia espec\u00edfica do padr\u00e3o.<\/p>\n Mas os padr\u00f5es de blocos v\u00e3o muito al\u00e9m disso. Quer entender melhor como esse sistema funciona e como aproveitar os novos recursos de edi\u00e7\u00e3o das vers\u00f5es mais recentes do WordPress? Vamos explorar isso em detalhes.<\/p>\n Os padr\u00f5es pr\u00e9-constru\u00eddos s\u00e3o padr\u00f5es de bloco “n\u00e3o sincronizados”, o que significa que as altera\u00e7\u00f5es feitas em um padr\u00e3o de bloco afetar\u00e3o apenas a inst\u00e2ncia espec\u00edfica que voc\u00ea est\u00e1 editando e n\u00e3o ser\u00e3o aplicadas a nenhuma outra inst\u00e2ncia que voc\u00ea possa ter adicionado a outros artigos ou p\u00e1ginas do seu site.<\/strong><\/p>\n Voc\u00ea pode usar padr\u00f5es pr\u00e9-constru\u00eddos para incluir layouts de blocos que podem ser personalizados no local, alterando imagens, texto, estilos ou adicionando\/removendo elementos.<\/p>\n Depois de criar um padr\u00e3o de bloco personalizado, voc\u00ea pode adicion\u00e1-lo em qualquer lugar do seu site e personaliz\u00e1-lo com apenas alguns cliques usando os controles internos do editor.<\/p>\n Voc\u00ea pode procurar e inserir padr\u00f5es de blocos pr\u00e9-constru\u00eddos na aba Patterns<\/strong>\u00a0do Block Inserter<\/a> ou navegar at\u00e9 a se\u00e7\u00e3o de administra\u00e7\u00e3o de Padr\u00f5es<\/a> no Editor de Site. Voc\u00ea tamb\u00e9m pode descobrir novos padr\u00f5es em Patterns Gallery<\/a>.<\/p>\n Na galeria, voc\u00ea pode escolher um padr\u00e3o, clicar no bot\u00e3o Copy pattern<\/strong>\u00a0e col\u00e1-lo diretamente em seu conte\u00fado.<\/p>\n Voc\u00ea tem liberdade para personalizar o grupo de blocos inclu\u00eddos no padr\u00e3o sem afetar o padr\u00e3o registrado ou qualquer inst\u00e2ncia adicional em seu site.<\/p>\n\n Como mencionado anteriormente, o sistema de padr\u00f5es foi simplificado e tornou-se mais consistente no WordPress 6.3. Agora \u00e9 mais f\u00e1cil para o usu\u00e1rio criar padr\u00f5es personalizados diretamente no editor de blocos e gerenci\u00e1-los no painel do WordPress sem precisar lidar com c\u00f3digo. Agora voc\u00ea pode criar:<\/p>\n A diferen\u00e7a entre os dois tipos de padr\u00f5es \u00e9 que todas as altera\u00e7\u00f5es feitas em um padr\u00e3o sincronizado ser\u00e3o aplicadas a todas as ocorr\u00eancias desse bloco em todo o site.<\/strong><\/p>\n Por outro lado, as altera\u00e7\u00f5es feitas em um padr\u00e3o de bloco n\u00e3o sincronizado afetar\u00e3o somente aquela inst\u00e2ncia espec\u00edfica do padr\u00e3o e n\u00e3o ser\u00e3o aplicadas a nenhuma outra inst\u00e2ncia que voc\u00ea possa ter adicionado a outros artigos ou p\u00e1ginas do seu site.<\/strong><\/p>\n Do ponto de vista do desenvolvedor, os padr\u00f5es de blocos personalizados s\u00e3o registrados no banco de dados do WordPress como tipos de artigos personalizados Gra\u00e7as ao novo sistema de gerenciamento de padr\u00f5es, agora voc\u00ea pode criar padr\u00f5es de blocos sincronizados e n\u00e3o sincronizados diretamente no site ou no editor de artigos. Voc\u00ea s\u00f3 precisa criar seu layout de bloco, selecionar os blocos e clicar no \u00edcone de tr\u00eas pontos na barra de ferramentas de bloco. Em seguida, selecione Create pattern<\/strong> no menu suspenso.<\/p>\n No exemplo abaixo, estamos criando um padr\u00e3o sincronizado a partir de um bloco de grupo, um t\u00edtulo, um par\u00e1grafo e um bot\u00e3o.<\/p>\n Quando voc\u00ea clica em Create pattern<\/strong>, ser\u00e1 solicitado que voc\u00ea preencha o nome e as categorias do seu padr\u00e3o e escolha se ele ser\u00e1 sincronizado<\/strong> ou n\u00e3o sincronizado<\/strong>.<\/p>\n E pronto! Seu padr\u00e3o sincronizado agora ser\u00e1 listado na se\u00e7\u00e3o My Patterns<\/strong> dentro do Editor de Sites<\/strong>, na \u00e1rea de administra\u00e7\u00e3o de padr\u00f5es.<\/p>\n Aqui, voc\u00ea pode visualizar seus padr\u00f5es e verificar o status da sincroniza\u00e7\u00e3o de padr\u00f5es.<\/p>\n Ap\u00f3s isso, voc\u00ea pode abrir o Editor de Padr\u00f5es para personalizar o bloco conforme necess\u00e1rio.<\/p>\n Novamente, as altera\u00e7\u00f5es feitas em padr\u00f5es sincronizados afetam todas as inst\u00e2ncias desse padr\u00e3o em todo o site. J\u00e1 as altera\u00e7\u00f5es feitas em padr\u00f5es (n\u00e3o sincronizados) afetam apenas as futuras inst\u00e2ncias do padr\u00e3o.<\/p>\n Isso \u00e9 poss\u00edvel porque o WordPress lida com os dois tipos de padr\u00f5es de forma diferente. Para entender a diferen\u00e7a, crie uma c\u00f3pia n\u00e3o sincronizada do seu padr\u00e3o personalizado, crie um novo artigo ou p\u00e1gina e adicione os dois padr\u00f5es. Quando terminar, v\u00e1 para o editor de c\u00f3digo e verifique o c\u00f3digo.<\/p>\n O bloco sincronizado \u00e9 gerado pelo seguinte c\u00f3digo:<\/p>\n Isso significa que o WordPress buscar\u00e1 o artigo com o ID O segundo bloco, por outro lado, n\u00e3o est\u00e1 identificado com um ID. No editor de c\u00f3digo, ele cont\u00e9m toda a marca\u00e7\u00e3o que comp\u00f5e o padr\u00e3o.<\/p>\n Os padr\u00f5es sincronizados s\u00e3o particularmente \u00fateis para criar elementos que voc\u00ea pode querer incluir em v\u00e1rias p\u00e1ginas do seu site e\/ou em sites diferentes. Pense em CTAs (Call To Actions), banners promocionais, tabelas de pre\u00e7os e assim por diante.<\/p>\n Como mencionamos, o WordPress considera os padr\u00f5es de blocos personalizados como tipos de postagem Depois de criar seus padr\u00f5es, voc\u00ea poder\u00e1 gerenci\u00e1-los na tela de administra\u00e7\u00e3o Patterns<\/strong>. Voc\u00ea pode acessar essa p\u00e1gina de v\u00e1rias maneiras:<\/p>\n Na tela Patterns, voc\u00ea pode:<\/p>\n No Editor de Site, voc\u00ea tamb\u00e9m pode duplicar e renomear seus padr\u00f5es.<\/p>\n Introduzido no WordPress 6.6<\/a>, o Synced Pattern Overrides \u00e9 um terceiro tipo de padr\u00e3o que aproveita a API Block Bindings<\/a> para obter as funcionalidades de ambos os tipos de padr\u00f5es.<\/p>\n As substitui\u00e7\u00f5es de padr\u00e3o sincronizado permitem que voc\u00ea crie padr\u00f5es de bloco que mant\u00eam a mesma estrutura em todo o site e mudam em sincronia com as personaliza\u00e7\u00f5es feitas na estrutura e no estilo do padr\u00e3o no editor do site. Nesse aspecto, as substitui\u00e7\u00f5es de padr\u00e3o s\u00e3o semelhantes aos padr\u00f5es sincronizados.<\/p>\n Por\u00e9m, as substitui\u00e7\u00f5es de padr\u00f5es sincronizados tamb\u00e9m se assemelham aos padr\u00f5es n\u00e3o sincronizados, pois permitem alterar o conte\u00fado de blocos espec\u00edficos dentro do padr\u00e3o sem afetar outras inst\u00e2ncias do mesmo padr\u00e3o no site.<\/p>\n Assim, as substitui\u00e7\u00f5es de padr\u00f5es s\u00e3o padr\u00f5es sincronizados com elementos individuais n\u00e3o sincronizados.<\/p>\n Vamos descobrir como criar uma substitui\u00e7\u00e3o de padr\u00e3o.<\/p>\n Passo 1: <\/strong>Acesse Patterns<\/strong>\u00a0e duplique um dos padr\u00f5es existentes, como o padr\u00e3o Pre\u00e7os – 2 colunas<\/strong> do tema padr\u00e3o Twenty Twenty-Five. Adicione um nome e defina a c\u00f3pia como um Padr\u00e3o Sincronizado.<\/p>\n Passo 2:<\/strong> Abra My patterns<\/strong>\u00a0e encontre o novo padr\u00e3o sincronizado. Abra-o e selecione um dos blocos que voc\u00ea precisa substituir, como o bloco Heading.<\/p>\n V\u00e1 para a barra lateral de configura\u00e7\u00f5es do bloco e role para baixo at\u00e9 a se\u00e7\u00e3o Advanced<\/strong>. Aqui, voc\u00ea encontrar\u00e1 a op\u00e7\u00e3o Enable Overrides<\/strong>.<\/p>\n Ao clicar no bot\u00e3o, voc\u00ea ser\u00e1 solicitado a adicionar um nome para a substitui\u00e7\u00e3o.<\/p>\n Passo 3:<\/strong> Repita o mesmo processo para cada bloco que voc\u00ea deseja substituir. Quando terminar, crie um novo artigo ou p\u00e1gina e inclua seu padr\u00e3o personalizado.<\/p>\n Passo 4:<\/strong> No editor de artigos, altere o conte\u00fado dos blocos a serem substitu\u00eddos, salve o artigo e verifique o resultado no frontend.<\/p>\n Voc\u00ea pode ter notado que, ao editar uma inst\u00e2ncia de uma substitui\u00e7\u00e3o de padr\u00e3o no Editor de Artigos<\/strong>, a barra lateral de configura\u00e7\u00f5es do bloco exibe os campos que podem ser editados. No exemplo acima, tornamos o cabe\u00e7alho e alguns par\u00e1grafos substitu\u00edveis.<\/p>\n Voc\u00ea pode adicionar quantas substitui\u00e7\u00f5es de padr\u00f5es quiser em qualquer lugar do seu site. Cada inst\u00e2ncia manter\u00e1 a mesma estrutura original, mas estar\u00e1 pronta para personaliza\u00e7\u00e3o.<\/p>\n Agora, abra seu padr\u00e3o no Editor de Sites e alterne para o Editor de C\u00f3digo. O c\u00f3digo deve ser semelhante ao seguinte:<\/p>\n No delimitador de blocos, voc\u00ea notar\u00e1 a propriedade Agora, no Editor de Artigo, mude para o Editor de C\u00f3digo<\/strong>. O c\u00f3digo deve ser semelhante ao seguinte:<\/p>\n Aqui, voc\u00ea ver\u00e1 uma refer\u00eancia ao padr\u00e3o de bloco e um conjunto de propriedades para cada bloco definido como edit\u00e1vel.<\/p>\n Observe que, como as substitui\u00e7\u00f5es de padr\u00e3o s\u00e3o uma implementa\u00e7\u00e3o da API Block Bindings, voc\u00ea pode substituir apenas os blocos compat\u00edveis. No momento em que este texto foi escrito, as substitui\u00e7\u00f5es de padr\u00e3o eram compat\u00edveis com os blocos Heading<\/strong>, Paragraph<\/strong>, Image<\/strong> e Buttons<\/strong>.<\/p>\n Antes da era Gutenberg<\/a>, os temas e templates de WordPress<\/a> eram criados principalmente em PHP. O conhecimento s\u00f3lido de temas secund\u00e1rios<\/a>, hierarquia de templates<\/a> e as principais linguagens de desenvolvimento de frontend<\/a> eram requisitos b\u00e1sicos para criar ou personalizar templates. Mas as coisas mudaram com a introdu\u00e7\u00e3o dos temas de bloco<\/a>.<\/p>\n Nos temas de blocos e nos temas cl\u00e1ssicos que ativaram essa funcionalidade, voc\u00ea pode criar ou personalizar um template, ou uma parte de template diretamente na interface do Editor de Sites. N\u00e3o s\u00e3o necess\u00e1rias habilidades de desenvolvimento, a menos que voc\u00ea decida se tornar um desenvolvedor de temas.<\/p>\n Um template de bloco<\/a> \u00e9 uma lista de itens de bloco<\/strong>. Exemplos incluem t\u00edtulo do site, logo e menu de navega\u00e7\u00e3o.<\/p>\n As partes de template<\/strong> s\u00e3o se\u00e7\u00f5es espec\u00edficas de uma p\u00e1gina que podem ser reutilizadas em v\u00e1rios locais, como cabe\u00e7alhos e rodap\u00e9s, e podem ser exibidas em todas as p\u00e1ginas do seu site WordPress.<\/p>\n Voc\u00ea pode criar e editar partes de template por meio da interface do Editor de Sites, utilizando todas as ferramentas de edi\u00e7\u00e3o dispon\u00edveis para blocos.<\/p>\n No entanto, diferente dos padr\u00f5es de blocos, as partes de template s\u00e3o destinadas a \u00e1reas do site que n\u00e3o mudam frequentemente.<\/p>\n Para resumir, aqui est\u00e3o as principais diferen\u00e7as entre os tr\u00eas:<\/p>\n Como mencionamos anteriormente, o WordPress 6.3 introduziu um novo sistema de gerenciamento de padr\u00f5es de blocos. Agora \u00e9 mais f\u00e1cil criar padr\u00f5es de blocos sincronizados ou n\u00e3o sincronizados sem sair da interface do editor. E voc\u00ea tamb\u00e9m pode importar e exportar padr\u00f5es personalizados com apenas alguns cliques no painel do WordPress.<\/p>\n No entanto, o WordPress tamb\u00e9m oferece outras maneiras de criar padr\u00f5es de blocos para desenvolvedores de temas e plugins.<\/p>\n Juntamente com o recurso de padr\u00f5es de blocos, o WordPress 5.5<\/a> introduziu uma nova API para que os desenvolvedores “criem blocos de conte\u00fado pr\u00e9-projetados que podem ser facilmente inseridos em artigos, p\u00e1ginas, tipos de artigos personalizados e templates” A nova API fornece as fun\u00e7\u00f5es A partir do WordPress 6.0<\/a>, voc\u00ea tamb\u00e9m pode registrar padr\u00f5es de blocos com um arquivo PHP. Portanto, no momento em que este artigo foi escrito, voc\u00ea tem duas maneiras de criar um padr\u00e3o de bloco.<\/p>\n O primeiro m\u00e9todo \u00e9 voltado para desenvolvedores do WordPress, mas \u00e9 simples o suficiente para ser utilizado tamb\u00e9m por usu\u00e1rios com menos experi\u00eancia.<\/p>\n Se decidir usar o primeiro m\u00e9todo, voc\u00ea poder\u00e1 criar um padr\u00e3o de bloco usando as duas novas fun\u00e7\u00f5es Primeiro, escolha uma categoria para o seu padr\u00e3o. Com as vers\u00f5es mais recentes do WordPress, novas categorias de padr\u00e3o foram adicionadas e algumas categorias existentes foram modificadas.<\/p>\n Para obter a lista de todas as categorias registradas, abra o Editor de Artigos e cole o seguinte c\u00f3digo no console do navegador:<\/p>\n No WordPress 6.7 com o tema Twenty Twenty-Five ativo, voc\u00ea obter\u00e1 a seguinte lista de categorias de padr\u00e3o:<\/p>\n Se o seu padr\u00e3o de bloco n\u00e3o se enquadra em nenhuma das categorias padr\u00e3o, voc\u00ea tamb\u00e9m pode registrar uma nova categoria usando a fun\u00e7\u00e3o Um exemplo ajudar\u00e1 voc\u00ea a entender melhor como registrar uma nova categoria de padr\u00e3o:<\/p>\n Depois que a categoria do padr\u00e3o for registrada, o pr\u00f3ximo passo \u00e9 registrar o pr\u00f3prio padr\u00e3o de bloco. Isso \u00e9 feito usando a fun\u00e7\u00e3o auxiliar Essa fun\u00e7\u00e3o recebe dois argumentos:<\/p>\n Aqui est\u00e1 uma lista das propriedades de padr\u00e3o atualmente dispon\u00edveis:<\/p>\n Aqui est\u00e1 um exemplo do uso de Nesse c\u00f3digo, usamos a propriedade O que s\u00e3o padr\u00f5es de blocos?<\/h2>\n
![\"Padr\u00f5es](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-patterns-in-ttf.jpg\")
Desde o WordPress 6.3<\/a>, um novo sistema de padr\u00f5es torna o processo de cria\u00e7\u00e3o de padr\u00f5es mais flex\u00edvel e intuitivo. Agora, fica mais claro o tipo de layout que voc\u00ea est\u00e1 construindo e o impacto das suas personaliza\u00e7\u00f5es em todo o site.<\/p>\n\n
Padr\u00f5es de blocos pr\u00e9-constru\u00eddos<\/h3>\n
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-inserter-with-patterns.jpg\")
![\"Explorando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/pattern-directory.jpg\")
![\"Copiar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/copy-pattern.jpg\")
![\"Cole](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/paste-pattern.jpg\")
Padr\u00f5es de blocos sincronizados e n\u00e3o sincronizados<\/h3>\n
\n
wp_block<\/code> e um campo meta wp_pattern_sync_status<\/code> armazena o status de sincroniza\u00e7\u00e3o de um padr\u00e3o.<\/p>\n![\"wp-block-sync-status\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/wp-block-sync-status.png\")
wp_pattern_sync_status<\/code> \u00e9 usado para armazenar o status de sincroniza\u00e7\u00e3o de um padr\u00e3o de bloco.<\/figcaption><\/figure>\n![\"Criando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/create-pattern.png\")
![\"Criando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/add-new-pattern.png\")
![\"Padr\u00f5es](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/my-patterns.png\")
![\"Visualiza\u00e7\u00e3o](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/preview-my-pattern.png\")
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/my-pattern.png\")
![\"Dois](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/patterns-in-code-editor.png\")
<!-- wp:block {\"ref\":512} \/--><\/code><\/pre>\n512<\/code> para gerar o HTML a ser renderizado na tela.<\/p>\nwp_block<\/code> e os armazena na tabela wp_posts<\/code>.<\/p>\n\n
![\"Tela](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/patterns-admin-screen.png\")
\n
Substitui\u00e7\u00f5es de padr\u00f5es sincronizados<\/h3>\n
![\"Padr\u00e3o](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/duplicate-pattern.jpg\")
![\"Ativar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/enable-overrides.jpg\")
![\"Depois](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/disable-overrides-button.jpg\")
![\"Selecionar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/adding-pattern.jpg\")
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/edit-pattern-overrides.jpg\")
<!-- wp:heading \n{\n\t\"textAlign\":\"center\",\n\t\"metadata\":{\n\t\t\"name\":\"Heading\",\n\t\t\"bindings\":{\n\t\t\t\"__default\":{\n\t\t\t\t\"source\":\"core\/pattern-overrides\"\n\t\t\t}\n\t\t}\n\t},\n\t\"align\":\"wide\"\n} \n-->\n<h2 class=\"wp-block-heading alignwide has-text-align-center\">Pricing<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph \n{\n\t\"align\":\"center\",\n\t\"metadata\":{\n\t\t\"name\":\"Subtitle\",\n\t\t\"bindings\":{\n\t\t\t\"__default\":{\n\t\t\t\t\"source\":\"core\/pattern-overrides\"\n\t\t\t}\n\t\t}\n\t}\n} \n-->\n<p class=\"has-text-align-center\">Cancel or pause anytime.<\/p>\n<!-- \/wp:paragraph -->\n<\/code><\/pre>\nmetadata.bindings<\/code>. Isso torna os blocos de Heading<\/strong>\u00a0e Paragraph<\/strong>\u00a0edit\u00e1veis. A propriedade __default<\/code> instrui o WordPress a conectar todos os atributos suportados<\/a> a uma fonte espec\u00edfica, que \u00e9 \"core\/pattern-overrides\"<\/code>.<\/p>\n<!-- wp:block \n{\n\t\"ref\":518,\n\t\"content\":{\n\t\t\"Heading\":{\n\t\t\t\"content\":\"Choose your plan\"\n\t\t},\n\t\t\"Subtitle\":{\n\t\t\t\"content\":\"Try our services with no risk thanks to our 30-day guarantee\"\n\t\t},\n\t\t\"Plan 1 title\":{\n\t\t\t\"content\":\"Starter\"\n\t\t},\n\t\t\"Plan 2 title\":{\n\t\t\t\"content\":\"Business\"\n\t\t}\n\t}\n} \n\/-->
<\/code><\/pre>\nPartes de template<\/h3>\n
![\"Adicionar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/add-new-template-part.png\")
![\"Adicionar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/add-new-template-part-modal.png\")
![\"Editando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/edit-template-part.png\")
Diferen\u00e7as entre padr\u00f5es e partes de template<\/h3>\n
Padr\u00f5es de blocos pr\u00e9-constru\u00eddos<\/h4>\n
\n
Padr\u00f5es de blocos personalizados<\/h4>\n
\n
wp_posts<\/code> como tipo de artigo wp_block<\/code>.<\/li>\nPartes de\u00a0template<\/h4>\n
\n
Como criar padr\u00f5es de blocos para temas e plugins<\/h2>\n
register_block_pattern<\/code> e register_block_pattern_category<\/code> para registrar padr\u00f5es de blocos e categorias de padr\u00f5es.<\/p>\n\n
register_block_pattern<\/code>,<\/li>\nCriando um padr\u00e3o de bloco com um plugin<\/h3>\n
register_block_pattern<\/code> e register_block_pattern_category<\/code> no arquivo PHP de um plugin<\/a> ou no functions.php<\/a> do seu tema.<\/p>\nSelecione ou registre uma categoria de padr\u00e3o<\/h4>\n
wp.data.select('core').getBlockPatternCategories()<\/code><\/pre>\n![\"Categorias](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/pattern-categories-wp-67.jpg\")
register_block_pattern_category<\/code><\/a>. Essa fun\u00e7\u00e3o aceita dois argumentos:<\/p>\n\n
$category_name<\/code>: Nome da categoria do padr\u00e3o, incluindo o namespace.<\/li>\n$category_properties<\/code>: Um array de propriedades da categoria.<\/li>\n<\/ul>\nif ( function_exists( 'register_block_pattern_category' ) ) {\n\tfunction my_plugin_register_pattern_category() {\n\t\tregister_block_pattern_category( \n\t\t\t'my-pattern-category', \n\t\t\tarray(\n\t\t\t\t'label' => __( 'My Pattern Category', 'my-plugin-text-domain' ),\n\t\t\t\t'description' => __( 'Simple call to action with a header, an image, a paragraph, and a button.' ),\n\t\t\t)\n\t\t);\n\t}\n\tadd_action( 'init', 'my_plugin_register_pattern_category' );\n}<\/code><\/pre>\n\nRegistrar um padr\u00e3o de bloco<\/h4>\n
register_block_pattern<\/code><\/a>, como mostrado abaixo:<\/p>\nfunction my_plugin_register_block_pattern() {\n\tregister_block_pattern( 'prefix\/pattern-name', $props );\n}\nadd_action( 'init', 'my_plugin_register_block_pattern' );<\/code><\/pre>\n\n
$pattern_name<\/code>: Um nome leg\u00edvel por m\u00e1quina<\/strong> no formato namespace\/pattern-name<\/code>.<\/li>\n$pattern_properties<\/code>: Um array de propriedades para o padr\u00e3o.<\/li>\n<\/ul>\n\n
title<\/code> (obrigat\u00f3rio): Um t\u00edtulo leg\u00edvel para o padr\u00e3o.<\/li>\ncontent<\/code> (obrigat\u00f3rio): A marca\u00e7\u00e3o HTML para o padr\u00e3o.<\/li>\ndescription<\/code>: Texto descritivo exibido no inseridor de blocos. Embora opcional, \u00e9 recomendado para ajudar os usu\u00e1rios a encontrar o padr\u00e3o.<\/li>\ncategories<\/code>: Um array contendo uma ou mais categorias registradas para o padr\u00e3o. A categoria deve ser registrada antes de ser usada aqui (veja a se\u00e7\u00e3o anterior).<\/li>\nkeywords<\/code>: Um array de palavras-chave para ajudar os usu\u00e1rios a encontrar o padr\u00e3o.<\/li>\nviewportWidth<\/code>: Um n\u00famero inteiro que especifica a largura do padr\u00e3o na visualiza\u00e7\u00e3o.<\/li>\nblockTypes<\/code>: Um array opcional de tipos de blocos que ser\u00e3o usados com o padr\u00e3o.<\/li>\npostTypes<\/code>: Um array de tipos de artigos que podem usar o padr\u00e3o.<\/li>\ntemplateTypes<\/code>: Um array de tipos de template onde o padr\u00e3o faz sentido (dispon\u00edvel desde o WordPress 6.2<\/a>).<\/li>\ninserter<\/code>: Um booleano para determinar se o padr\u00e3o deve ser vis\u00edvel no inseridor de blocos. Defina o valor como false<\/code> para ocultar o padr\u00e3o. Por padr\u00e3o, todos os padr\u00f5es aparecer\u00e3o no inseridor de blocos.<\/li>\nsource<\/code> (opcional): Uma string que identifica a origem do padr\u00e3o. Use plugin<\/code> se estiver registrando o padr\u00e3o a partir de um plugin. Para um tema, use theme<\/code>.<\/li>\n<\/ul>\nregister_block_pattern<\/code>:<\/p>\nif ( function_exists( 'register_block_pattern' ) ) {\n\tfunction my_plugin_register_block_pattern() {\n\t\tregister_block_pattern( \n\t\t\t'my-plugin\/my-block-pattern', \n\t\t\tarray(\n\t\t\t\t'title'\t\t\t=> _x( 'My awesome pattern', 'Block pattern title', 'my-plugin-text-domain' ),\n\t\t\t\t'categories'\t=> array( 'my-pattern-category' ),\n\t\t\t\t'postTypes'\t\t=> array( 'post' ),\n\t\t\t\t'content'\t\t=> '<p>My awesome block pattern<\/p>'\n\t\t\t) \n\t\t);\n\t}\n\tadd_action( 'init', 'my_plugin_register_block_pattern' );\n}<\/code><\/pre>\n