{"id":233769,"date":"2023-02-21T13:46:00","date_gmt":"2023-02-21T10:46:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233769"},"modified":"2022-11-11T12:17:48","modified_gmt":"2022-11-11T09:17:48","slug":"como-adicionar-estilos-de-bloco-personalizados-aos-blocos-do-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/como-adicionar-estilos-de-bloco-personalizados-aos-blocos-do-wordpress-gutenberg\/","title":{"rendered":"Como adicionar estilos de bloco personalizados aos blocos do WordPress Gutenberg"},"content":{"rendered":"\n

Um recurso um pouco menos conhecido no Gutenberg \u00e9 a op\u00e7\u00e3o de configurar estilos diferentes para blocos. Voc\u00ea pode registrar tantos estilos diferentes em qualquer tipo de bloco para dar ao mesmo bloco designs diferentes. Estilos poss\u00edveis para blocos s\u00e3o exibidos como uma se\u00e7\u00e3o no lado direito do editor. Cada estilo recebe sua pr\u00f3pria visualiza\u00e7\u00e3o. Se voc\u00ea estiver manipulando estilos corretamente, alternar entre estilos deve atualizar imediatamente o design dentro do editor, bem como no frontend.<\/p>\n

A documenta\u00e7\u00e3o do WordPress para esse recurso<\/a> n\u00e3o \u00e9 t\u00e3o completa e informativa quanto poderia ser. Ent\u00e3o, neste post, vamos dar uma olhada detalhada em como voc\u00ea pode adicionar seus estilos de bloco personalizados e como voc\u00ea deve lidar com o estilo deles.<\/p>\n

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

A forma como este recurso funciona \u00e9 que sempre que o Gutenberg detecta que um tipo de bloco registrou no m\u00ednimo um estilo, a caixa "Estilos" aparecer\u00e1 automaticamente no lado direito do editor. Dentro dela o editor pode escolher entre o estilo padr\u00e3o ou qualquer estilo de bloco que foi adicionado.<\/p>\n

Em vers\u00f5es anteriores (pelo menos antes do WordPress 5.3), registrar um estilo personalizado exigia que voc\u00ea tamb\u00e9m registrasse o estilo padr\u00e3o (“sem estilo"). Felizmente, isso foi corrigido nas vers\u00f5es mais recentes do WordPress, ent\u00e3o agora voc\u00ea s\u00f3 precisa registrar seus estilos personalizados e o WordPress adicionar\u00e1 o estilo padr\u00e3o automaticamente.<\/p>\n

Voc\u00ea pode registrar estilos de bloco personalizados de duas maneiras; com PHP ou com Javascript. Vamos dar uma olhada em ambos. Mas primeiro alguns a-ha’s sobre como lidar com seus estilos.<\/p>\n

Uma nota sobre estilos de enfileiramento para Gutenberg<\/h2>\n

Pode haver alguma confus\u00e3o sobre como e onde adicionar seus estilos (arquivos CSS); apenas para o editor, para o frontend ou uma folha de estilo para ambos. Um dos principais objetivos do editor Gutenberg \u00e9 garantir que voc\u00ea possa visualizar corretamente a apar\u00eancia do conte\u00fado do seu post, dentro do editor. Portanto, \u00e9 recomend\u00e1vel que voc\u00ea certifique-se de que seus estilos personalizados sejam aplicados no editor e tamb\u00e9m no frontend.<\/p>\n

Como voc\u00ea lida com isso realmente depende do seu projeto e da configura\u00e7\u00e3o da folha de estilo existente. Se voc\u00ea estiver desenvolvendo um tema completo, provavelmente j\u00e1 incluiu estilo de bloco dentro de sua folha de estilo frontend. Voc\u00ea pode considerar adicionar uma folha de estilo separada que enfileirar\u00e1 apenas para o editor. Mas isso pode ser dif\u00edcil de manter se voc\u00ea adicionar muitos estilos diferentes. Voc\u00ea teria que atualizar seus estilos em dois lugares e garantir que seus resultados sejam os mesmos. A solu\u00e7\u00e3o para isso seria manter uma folha de estilo que voc\u00ea enfileira para o editor e o frontend. Mas ent\u00e3o seu frontend precisaria carregar pelo menos duas folhas de estilo separadas e isso pode n\u00e3o ser o ideal.<\/p>\n

Outra solu\u00e7\u00e3o \u00e9 usar, por exemplo, SCSS ou LESS e configurar de @imports<\/code>tal forma que voc\u00ea s\u00f3 precise escrever seus estilos de bloco uma vez, e \u00e9 aplicado tanto ao editor quanto ao frontend. Como voc\u00ea ver\u00e1 abaixo ao usar o PHP para registrar estilos de blocos personalizados, voc\u00ea ainda tem outra op\u00e7\u00e3o; para adicionar estilos embutidos. Esses estilos ser\u00e3o aplicados no editor e no frontend. No frontend, eles ser\u00e3o adicionados pelo WordPress como uma linha personalizada <style type=\"text\/css\">...<\/style><\/code>dentro do cabe\u00e7alho.<\/p>\n

Seja como for que voc\u00ea decida resolv\u00ea-lo, saiba que existem alguns novos ganchos para estilos de registro (e scripts) para o Gutenberg. Se voc\u00ea deseja enfileirar uma folha de estilo para frontend e editor, use o gancho enqueue_block_assets<\/code>. Se voc\u00ea quiser adicionar uma folha de estilo apenas para o editor, coloque-a na fila dentro do gancho enqueue_block_editor_assets<\/code>.<\/p>\n

Como aplicar estilo aos estilos de bloco personalizados<\/h2>\n

Estilos de bloco personalizados ser\u00e3o adicionados como uma classe de um determinado padr\u00e3o na tag HTML mais externa do bloco.<\/p>\n

A classe CSS para estilos de bloco \u00e9 adicionada na forma de ” is-style-<stylename><\/code>“. Se voc\u00ea, por exemplo, nomear seu estilo ” outline<\/code>“, o bloco receber\u00e1 a classe ” is-style-outline<\/code>“.<\/p>\n

No entanto, voc\u00ea pode perceber que o editor Gutenberg, em alguns casos, substituir\u00e1 seu estilo. Eu recomendo prefixar o estilo do seu editor com o seletor editor-styles-wrapper<\/code>para garantir que seus estilos “ven\u00e7am”. Lembre-se de que essa classe n\u00e3o existe no frontend, portanto, para estar seguro, talvez seja necess\u00e1rio adicionar dois seletores, assim (se voc\u00ea estiver usando a mesma folha de estilo para o editor e o frontend):<\/p>\n

.is-style-colored-bottom-border, \n.editor-styles-wrapper .is-style-colored-bottom-border { \n    border-bottom: 2px solid purple;\n}<\/code><\/pre>\n
Adicionando estilos de bloco personalizados com PHP<\/h2>\n
Para adicionar um tipo de bloco personalizado usando PHP, usamos a fun\u00e7\u00e3o [register_block_style](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_style\/)()<\/code>. A documenta\u00e7\u00e3o infelizmente est\u00e1 sem informa\u00e7\u00f5es em qual hook devemos usar, mas tive sorte com o hook init<\/code>.<\/p>\n
Voc\u00ea precisa saber o nome do namespace Gutenberg do seu tipo de bloco para adicionar um estilo personalizado a ele. Todos os blocos padr\u00e3o do WordPress t\u00eam o namespace ” core<\/code>” seguido por um \/<\/code>e uma vers\u00e3o slug de seu nome. Por exemplo, o nome de Gutenberg para o bloco de par\u00e1grafo padr\u00e3o \u00e9 core\/paragraph<\/code>.<\/p>\n
O registro de um estilo de bloco personalizado \u00e9 feito em sua forma mais simples, assim:<\/p>\n
add_action('init', function() {\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n    ]);\n});<\/code><\/pre>\n
O c\u00f3digo acima adiciona um estilo de bloco personalizado ao tipo de bloco Heading, o que resultaria na classe is-style-colored-bottom-border<\/code>em qualquer Heading que tenha escolhido esse estilo.<\/p>\n
Esta fun\u00e7\u00e3o fornece dois m\u00e9todos para adicionar seu CSS (se voc\u00ea n\u00e3o o adicionou de outra forma); fornecendo CSS inline como uma string ou fornecendo um identificador de folha de estilo registrado que o WordPress enfileirar\u00e1 para voc\u00ea, se necess\u00e1rio.<\/p>\n
Se voc\u00ea deseja adicionar estilo inline (lembre-se, isso afetar\u00e1 o editor e o frontend), adicione o elemento ‘ inline_style<\/code>‘ \u00e0 chamada da fun\u00e7\u00e3o e escreva o CSS completo como uma string como seu valor:<\/p>\n
add_action('init', function() {\n    $inline_css = '.is-style-colored-bottom-border, .editor-styles-wrapper .is-style-colored-bottom-border { border-bottom: 2px solid purple; }';\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n        'inline_style' => $inline_css\n    ]);\n});<\/code><\/pre>\n
Se voc\u00ea preferir fazer a fun\u00e7\u00e3o enfileirar uma folha de estilo, forne\u00e7a seu identificador para o elemento ‘ style_handle<\/code>‘.<\/p>\n
add_action('init', function() {\n    wp_register_style('awp-block-styles', get_template_directory_uri(). '\/assets\/css\/custom-block-style.css', false);\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n        'style_handle' => 'awp-block-styles'\n    ]);\n});<\/code><\/pre>\n
Ajuste a localiza\u00e7\u00e3o da sua folha de estilo para se adequar ao seu projeto. A folha de estilo ser\u00e1 aplicada ao editor e ao frontend, mas desta vez o frontend far\u00e1 uma solicita\u00e7\u00e3o separada para incluir esta folha de estilo. Este m\u00e9todo n\u00e3o \u00e9 recomendado se voc\u00ea estiver adicionando v\u00e1rios estilos de bloco. O frontend ficar\u00e1 significativamente mais lento ao solicitar um monte de folhas de estilo separadas.<\/p>\n
Adicionando estilos de bloco personalizados com Javascript<\/h2>\n
Se voc\u00ea preferir adicionar seus estilos de bloco usando Javascript, isso \u00e9 t\u00e3o f\u00e1cil quanto com PHP.<\/p>\n
Voc\u00ea precisar\u00e1 enfileirar um arquivo Javascript no gancho apenas do editor: enqueue_block_editor_assets<\/code>. Seu script provavelmente n\u00e3o precisar\u00e1 de nenhuma depend\u00eancia, mas eu prefiro adicionar pelo menos ‘ wp-blocks<\/code>‘ como depend\u00eancia.<\/p>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script(\n        'myguten-script', \n        get_template_directory_uri(). '\/assets\/js\/myguten.js', \n        ['wp-blocks']\n    );\n});<\/code><\/pre>\n
Ajuste o nome do arquivo e o local para se adequar ao seu projeto.<\/p>\n
Em seu arquivo Javascript, voc\u00ea usa a fun\u00e7\u00e3o registerBlockStyle()<\/code>dentro do wp.blocks<\/code>objeto para registrar estilos de bloco personalizados. Adicionar o mesmo estilo de bloco que fizemos no PHP acima ficaria assim:<\/p>\n
wp.blocks.registerBlockStyle('core\/heading', {\n    name: 'colored-bottom-border',\n    label: 'Colored bottom border'\n});<\/code><\/pre>\n
E \u00e9 isso! Mole-mole.<\/p>\n
Cancelando o registro de estilos de bloco<\/h2>\n
Assim como voc\u00ea pode registrar um estilo de bloco, um estilo de bloco tamb\u00e9m pode ser desregistrado. Talvez voc\u00ea queira remover alguns dos estilos de bloco padr\u00e3o do WordPress? Assim como no registro de estilos de bloco, voc\u00ea tamb\u00e9m pode cancelar o registro de estilos de bloco com PHP ou Javascript. Mas a escolha entre esses dois m\u00e9todos n\u00e3o \u00e9 mais uma escolha de prefer\u00eancia.<\/p>\n
Voc\u00ea n\u00e3o pode cancelar o registro de um bloco com PHP se ele foi registrado com Javascript e vice-versa. Portanto, voc\u00ea precisa descobrir como o estilo que deseja remover foi registrado e combin\u00e1-lo com PHP ou Javascript. Eu acredito que todos os estilos de bloco do WordPress s\u00e3o adicionados com Javascript (n\u00e3o me cite sobre isso!). Portanto, se voc\u00ea quiser remover alguns deles, precisar\u00e1 seguir a rota do Javascript.<\/p>\n
Cancelar o registro de um estilo de bloco com PHP \u00e9 feito chamando a fun\u00e7\u00e3o unregister_block_style()<\/code>, fornecendo o tipo de bloco e o nome do estilo que voc\u00ea deseja remover. Por exemplo, cancelar o registro do estilo adicionado acima neste post (assumindo que foi registrado com PHP) ficaria assim:<\/p>\n
add_action('init', function() {\n    unregister_block_style('core\/heading', 'colored-bottom-border');\n});<\/code><\/pre>\n
Cancelar o registro de um estilo de bloco com Javascript \u00e9 feito de forma semelhante com a fun\u00e7\u00e3o unregisterBlockStyle()<\/code>dentro do wp.blocks<\/code>objeto. No entanto, com o Javascript, h\u00e1 uma quest\u00e3o de qual script deve ser executado primeiro, e voc\u00ea pode encontrar problemas quando seu script \u00e9 executado antes do registro. Para resolver isso, usamos o equivalente do Gutenberg ao “document ready” do jQuery (jQuery(document).ready(function() { ... });<\/code>), e tamb\u00e9m adicionamos outra depend\u00eancia ao seu script.<\/p>\n
Vamos come\u00e7ar adicionando uma nova depend\u00eancia de script em seu arquivo Javascript enfileirado para ‘ wp-edit-post<\/code>‘:<\/p>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script(\n        'myguten-script', \n        get_template_directory_uri(). '\/assets\/js\/myguten.js', \n        ['wp-blocks', 'wp-edit-post']\n    );\n});<\/code><\/pre>\n
E dentro do seu arquivo Javascript, coloque sua chamada de fun\u00e7\u00e3o unregister dentro wp.domReady(function() { ... })<\/code>de, assim:<\/p>\n
wp.domReady(function() {\n    wp.blocks.unregisterBlockStyle('core\/quote', 'large');\n});<\/code><\/pre>\n
Como o c\u00f3digo acima mostra, com Javascript agora podemos remover o estilo “Large” do WordPress no bloco Quote. Se voc\u00ea tentasse fazer o mesmo com PHP, n\u00e3o funcionaria.<\/p>\n
Uma nota lateral sobre como cancelar o registro de estilos de bloco<\/h3>\n
Voc\u00ea pode notar que, embora tenha removido com sucesso qualquer estilo de bloco personalizado em um bloco, a caixa "Estilos" no editor n\u00e3o desaparecer\u00e1. Ele permanece apenas com a op\u00e7\u00e3o “Default” dentro dele. Se voc\u00ea deseja remover completamente a caixa “Estilos” para n\u00e3o confundir os editores, voc\u00ea pode simplesmente cancelar o registro do estilo padr\u00e3o tamb\u00e9m (por exemplo, wp.blocks.unregisterBlockStyle('core\/quote', 'large')<\/code>). Isso remover\u00e1 totalmente a caixa "Estilos" do editor Gutenberg.<\/p>\n
Fonte de grava\u00e7\u00e3o:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Este post explica como configurar estilos de bloco para blocos em Gutenberg, com PHP ou Javascript – e aborda ideias para resolver folhas de estilo.<\/p>\n","protected":false},"author":1,"featured_media":220825,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,898,722,722,837,941,941,1110,806,806,816,816,837,846,846,867,867],"tags":[1170],"class_list":["post-233769","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-guia-para-iniciantes","category-gutenberg-8","category-n-a","category-php-8","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\/233769","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=233769"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233769\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/220825"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=233769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=233769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=233769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}