{"id":233491,"date":"2023-02-14T12:22:00","date_gmt":"2023-02-14T09:22:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233491"},"modified":"2022-11-10T23:58:34","modified_gmt":"2022-11-10T20:58:34","slug":"como-fazer-blocos-personalizados-do-gutenberg-com-o-advanced-custom-fields-pro","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/como-fazer-blocos-personalizados-do-gutenberg-com-o-advanced-custom-fields-pro\/","title":{"rendered":"Como fazer blocos personalizados do Gutenberg com o Advanced Custom Fields Pro"},"content":{"rendered":"\n

Desde a vers\u00e3o 5.8<\/a> do Advanced Custom Fields (ACF) Pro, voc\u00ea pode usar o ACF para criar blocos personalizados do Gutenberg. Tudo que voc\u00ea precisa lidar s\u00e3o os modelos PHP. Isso torna muito f\u00e1cil para desenvolvedores que ainda n\u00e3o t\u00eam experi\u00eancia no Javascript moderno necess\u00e1rio para criar blocos personalizados para Gutenberg com qualquer um dos tipos de campo que o ACF tem a oferecer. Lembre-se de que essa funcionalidade est\u00e1 dispon\u00edvel apenas na vers\u00e3o paga (Pro<\/a>) dos Campos personalizados avan\u00e7ados. N\u00e3o est\u00e1 dispon\u00edvel na vers\u00e3o gratuita, ent\u00e3o voc\u00ea precisar\u00e1 comprar uma licen\u00e7a.<\/p>\n

Se voc\u00ea \u00e9 um editor do WordPress ou um webmaster que n\u00e3o quer se aprofundar na codifica\u00e7\u00e3o, este post \u00e9 definitivamente para voc\u00ea. No entanto, se voc\u00ea deseja ser um desenvolvedor de temas ou plugins do WordPress, recomendo dar o passo para aprender a criar seus pr\u00f3prios blocos personalizados. No entanto, usar Campos Personalizados Avan\u00e7ados para criar blocos pode fornecer uma boa introdu\u00e7\u00e3o ao manuseio de blocos personalizados no Gutenberg.<\/p>\n

Criar um bloco Gutenberg com ACF<\/h2>\n

Existem basicamente tr\u00eas etapas simples na cria\u00e7\u00e3o de um bloco Gutenberg personalizado com campos personalizados avan\u00e7ados. A primeira \u00e9 f\u00e1cil e provavelmente familiar; configurando os campos (configura\u00e7\u00f5es) que voc\u00ea deseja ter em seu bloco. O segundo passo \u00e9 usar a fun\u00e7\u00e3o do ACF para registrar um bloco Gutenberg. E o terceiro passo \u00e9 escrever o template PHP para o bloco. Voc\u00ea simplesmente escreve o HTML e lida com as configura\u00e7\u00f5es da mesma forma que faria com os campos ACF de outra forma. E \u00e9 isso! (Ok, talvez haja um quarto passo; estilizar seu bloco. Mas n\u00e3o vou entrar nisso neste post).<\/p>\n

Crie suas configura\u00e7\u00f5es\/campos<\/h3>\n

Se voc\u00ea j\u00e1 usou Campos Personalizados Avan\u00e7ados, provavelmente sabe como configurar campos. Voc\u00ea pode usar a interface do usu\u00e1rio de administra\u00e7\u00e3o do Advanced Custom Field para fazer isso. Ou se voc\u00ea quiser que as configura\u00e7\u00f5es do bloco sejam incorporadas ao seu plugin ou tema, escreva as configura\u00e7\u00f5es com PHP. Eu tenho um post de refer\u00eancia completo sobre como adicionar configura\u00e7\u00f5es de ACF com PHP<\/a>.<\/p>\n

\"Como<\/a><\/p>\n

A coisa cr\u00edtica que voc\u00ea precisa fazer com o seu grupo \u00e9 definir o local como "Bloquear". Mas como ainda n\u00e3o registramos nosso bloco, ele ser\u00e1 padronizado como "Todos". Deixe assim, salve seus campos e vamos prosseguir para registrando nosso bloco.<\/p>\n

Registrar um bloco Gutenberg<\/h3>\n

No c\u00f3digo do seu tema functions.php<\/code>ou plugin voc\u00ea precisa escrever uma fun\u00e7\u00e3o ligada a acf\/init<\/code>, e chamar [acf_register_block](https:\/\/www.advancedcustomfields.com\/resources\/acf_register_block_type\/)()<\/code>para registrar um bloco. Como essa fun\u00e7\u00e3o \u00e9 bem nova no ACF e depende de um plugin para ser ativado, recomendo que voc\u00ea envolva seu c\u00f3digo dentro de um if-check para garantir que seu tema ou plugin n\u00e3o travar\u00e1 seu WordPress.<\/p>\n

add_action('acf\/init', function() {\n    if (function_exists('acf_register_block')) {\n        acf_register_block([\n            'name' => 'yourblock',\n            'title' => __('Name of your block', 'txtdomain'),\n            'description' => __('Optional description', 'txtdomain'),\n            'category' => 'formatting',\n            'icon' => 'admin-comments',\n            'render_callback' => 'my_acf_block_render_callback',\n        ]);\n    }\n});<\/code><\/pre>\n
Registrar um bloco com o ACF \u00e9, na verdade, semelhante a como registrar\u00edamos manualmente um bloco personalizado do Gutenberg. Com o ACF, voc\u00ea precisa fornecer um nome slugified exclusivo para seu bloco no name<\/code>. Eu recomendo usar um nome autoexplicativo, por exemplo, cta<\/code>para um bloco de Call to action, ou author-card<\/code>para um bloco mostrando autores ou similares. Se voc\u00ea estiver um pouco familiarizado com o Gutenberg, voc\u00ea deve estar ciente de que todos os blocos devem ser registrados com um namespace, a \/<\/code>e, em seguida, seu nome de slug. Por exemplo, o namespace do WordPress \u00e9 core<\/code>, ent\u00e3o, por exemplo, o bloco de par\u00e1grafo no WordPress \u00e9 chamado core\/paragraph<\/code>. Com o ACF o namespace ser\u00e1 acf, ent\u00e3o, por exemplo, o bloco acima ser\u00e1 registrado no Gutenberg como acf\/yourblock<\/code>. Se voc\u00ea estiver registrando seus campos com PHP, como ver\u00e1 mais adiante, precisamos nos lembrar disso.<\/p>\n
Em category<\/code>voc\u00ea define em qual categoria do Gutenberg voc\u00ea quer que seu bloco apare\u00e7a. No momento, os valores poss\u00edveis s\u00e3o common<\/code>, formatting<\/code>, layout<\/code>, widgets<\/code>ou embed<\/code>. Se voc\u00ea criar categorias personalizadas do Gutenberg, poder\u00e1 adicion\u00e1-las a elas, se desejar. Quanto a icon<\/code>fornecer qualquer nome de \u00edcone do WordPress Dashicons<\/a> (menos o “dashicons-“).<\/p>\n
Para informar ao ACF como renderizar este bloco, voc\u00ea tem duas op\u00e7\u00f5es: fornecer um nome de fun\u00e7\u00e3o para a chave render_callback<\/code>(como acima) ou fornecer um nome de modelo em seu tema para a chave render_template<\/code>. Ent\u00e3o, se voc\u00ea preferir se referir diretamente a um modelo, por exemplo, template-parts\/block-yourblock.php<\/code>em seu tema, simplesmente fa\u00e7a assim e remova o render_callback<\/code>:<\/p>\n
'render_template' => 'template-parts\/block-yourblock.php',<\/code><\/pre>\n
Conecte seu grupo de campo ao seu bloco registrado<\/h2>\n
Quando estiver satisfeito com o c\u00f3digo de registro do bloco, \u00e9 hora de conectar o bloco \u00e0s configura\u00e7\u00f5es feitas anteriormente. Se voc\u00ea criou os campos em admin, basta voltar e escolher seu bloco em Location. E se voc\u00ea adicionou o grupo de campos com PHP, no local forne\u00e7a o valor ‘ acf\/yourblock<\/code>‘ onde yourblock<\/code>est\u00e1 o que voc\u00ea forneceu como name<\/code>acima.<\/p>\n
Escreva o modelo<\/h2>\n
O passo final, e o mais divertido, \u00e9 escrever o template para a sa\u00edda do bloco!<\/p>\n
A localiza\u00e7\u00e3o da sa\u00edda de renderiza\u00e7\u00e3o do bloco depende do que voc\u00ea decidiu usar no registro do bloco, render_callback<\/code>ou render_template<\/code>.<\/p>\n
Se voc\u00ea forneceu um nome de fun\u00e7\u00e3o, render_callback<\/code>voc\u00ea precisa definir esta fun\u00e7\u00e3o no functions.php<\/code>c\u00f3digo do seu tema ou plugin. Voc\u00ea obt\u00e9m quatro par\u00e2metros para sua fun\u00e7\u00e3o, como ver\u00e1 abaixo:<\/p>\n
function my_acf_block_render_callback($block, $content = '', $is_preview = false, $post_id = 0) {\n    $className = 'your_block';\n    if (!empty($block['className'])) {\n        $className .= ' '. $block['className'];\n    }\n\u00a0\n    \/\/ Example of fetching a field value:\n    $my_text = get_field('my_textfield');\n\u00a0\n    ?><div class=\"<?php echo $className; ?>\">\n        <?php \/\/ echo your output here ?>       \n    <\/div><?php\n}<\/code><\/pre>\n
O primeiro par\u00e2metro, $block<\/code>, cont\u00e9m certas informa\u00e7\u00f5es de Gutenberg. Por exemplo, cada bloco do Gutenberg quase sempre ter\u00e1 className<\/code>, que voc\u00ea deve definir como class em seu wrapper mais externo. $block['align']<\/code>para alinhamento tamb\u00e9m pode ser definido e algo que voc\u00ea deseja adicionar tamb\u00e9m. O segundo par\u00e2metro, $content<\/code>, sempre estar\u00e1 vazio com ACF (isso seria preenchido se voc\u00ea adicionasse blocos aninhados, mas isso n\u00e3o \u00e9 poss\u00edvel com ACF). O booleano $is_preview<\/code>ser\u00e1 verdadeiro se estivermos olhando para a renderiza\u00e7\u00e3o do bloco no modo de visualiza\u00e7\u00e3o no editor Gutenberg. E finalmente $post_id<\/code>\u00e9 o post em que este bloco \u00e9 adicionado.<\/p>\n
Quanto aos campos, voc\u00ea busca campos como faria normalmente, com get_field()<\/code>. A sa\u00edda HTML depende completamente de voc\u00ea e de como deseja gerar seus campos.<\/p>\n
Se voc\u00ea forneceu um arquivo de modelo render_template<\/code>, basta criar o arquivo no local especificado em seu tema. Dentro dele, voc\u00ea tem acesso \u00e0s mesmas vari\u00e1veis \u200b\u200bglobais exatas da fun\u00e7\u00e3o acima (por exemplo $block<\/code>). Por exemplo:<\/p>\n
$className = 'your_block';\nif (!empty($block['className'])) {\n    $className .= ' '. $block['className'];\n}\n\u00a0\n\/\/ Example of fetching a field value:\n$my_text = get_field('my_textfield');\n\u00a0\n?><div class=\"<?php echo $className; ?>\">\n    <?php \/\/ echo your output here ?>       \n<\/div><?php<\/code><\/pre>\n
E isso \u00e9 tudo. \u00c9 assim que \u00e9 simples criar seus blocos personalizados do Gutenberg com o ACF.<\/p>\n
Conclus\u00e3o<\/h2>\n
Por mais f\u00e1cil que tenha sido, contar com um plugin \u2013 principalmente um pago \u2013 n\u00e3o \u00e9 uma boa solu\u00e7\u00e3o final se voc\u00ea deseja desenvolver temas ou plugins. Lembre-se de que seus blocos deixar\u00e3o de funcionar se voc\u00ea mover o c\u00f3digo do seu tema para outro WordPress sem o ACF Pro. Ou onde suas configura\u00e7\u00f5es de campo n\u00e3o foram configuradas (a menos que voc\u00ea as tenha incorporado em seu c\u00f3digo com PHP ou certifique-se de export\u00e1-las e import\u00e1-las). Como um desenvolvedor de tema (ou plugin) que distribui c\u00f3digo, voc\u00ea n\u00e3o pode esperar que cada usu\u00e1rio compre sua pr\u00f3pria licen\u00e7a do ACF Pro para fazer seu tema funcionar! Mas esta \u00e9 uma boa solu\u00e7\u00e3o tempor\u00e1ria para quem n\u00e3o pode ou n\u00e3o precisa codificar.<\/p>\n
Se voc\u00ea est\u00e1 convencido de que precisa dar o passo e aprender Javascript e Gutenberg, confira minha introdu\u00e7\u00e3o ao post de Gutenberg<\/a> ou a categoria Gutenberg<\/a> neste site para saber mais.<\/p>\n
Fonte de grava\u00e7\u00e3o:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Esta postagem explica como voc\u00ea pode usar o ACF para criar blocos personalizados do Gutenberg, onde tudo o que voc\u00ea precisa para lidar s\u00e3o os modelos PHP. N\u00e3o \u00e9 necess\u00e1rio Javascript!<\/p>\n","protected":false},"author":1,"featured_media":224889,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,898,722,722,837,920,1110,920,816,816,837,846,846,867,867],"tags":[1170],"class_list":["post-233491","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-guia-para-iniciantes","category-outro","category-n-a","category-plug-ins","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=233491"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233491\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=233491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=233491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=233491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}