![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151572-61e4cc6b47b23.png\")
<\/a><\/p>\nAgora est\u00e1 atualizando com sucesso nossos atributos ao escolher as cores. Voc\u00ea pode ver que ele lembra sua escolha de cor ao salvar a postagem.<\/p>\n
No entanto, nada acontece visualmente quando voc\u00ea altera as cores. A escolha da cor \u00e9 armazenada nos atributos, mas nenhuma mudan\u00e7a de cor acontece no editor, nem na visualiza\u00e7\u00e3o do post. Isso ocorre porque precisamos adicionar c\u00f3digo para as classes e estilos do bloco. Precisamos fazer isso tanto para a edit<\/code>fun\u00e7\u00e3o (que \u00e9 para o editor) quanto para a save<\/code>fun\u00e7\u00e3o (frontend). Esse \u00e9 o pr\u00f3ximo passo.<\/p>\nManipulando classes e estilos embutidos emedit<\/code><\/h3>\nPrecisamos construir a classe de n\u00f3 do bloco e os atributos de estilo de acordo com a configura\u00e7\u00e3o de cor escolhida. Felizmente withColors<\/code>, temos alguma automa\u00e7\u00e3o nisso. Lembre-se que props.textColor<\/code>\u00e9 um objeto que cont\u00e9m todas as informa\u00e7\u00f5es que precisamos, incluindo o nome da classe.<\/p>\nPoder\u00edamos fazer algo assim:<\/p>\n
...\nconst BlockWithColorSettings = (props) => {\n const { textColor, setTextColor } = props; \/\/ Props received from withColors\n let divClass;\n let divStyles = {};\n if (textColor != undefined) {\n if (textColor.class != undefined) {\n divClass = textColor.class;\n } else {\n divStyles.color = textColor.color;\n }\n }\n return(\n <Fragment>\n <InspectorControls>\n ...\n <\/InspectorControls>\n <div className={divClass} style={divStyles}>\n PanelColorSettings Demo\n <\/div>\n ...<\/code><\/pre>\nNa linha #20<\/code>, aplicamos a classe cr\u00edtica e o estilo inline ao n\u00f3 raiz do nosso bloco. Antes disso, constru\u00edmos a classe e o atributo de estilo inline verificando o props.textColor<\/code>objeto.<\/p>\nAp\u00f3s essa altera\u00e7\u00e3o, seu bloco personalizado agora deve estar totalmente funcional no editor. Sempre que voc\u00ea mudar de cor, o bloco mudar\u00e1 a cor do texto. Incr\u00edvel! A etapa final \u00e9 fazer isso save<\/code>tamb\u00e9m para a fun\u00e7\u00e3o, para que possamos obter essas classes e estilos no frontend tamb\u00e9m.<\/p>\nManipulando classes e estilos embutidos emsave<\/code><\/h3>\nO conceito de construir a classe e os estilos embutidos e aplic\u00e1-los ao n\u00f3 raiz \u00e9 o mesmo save<\/code>no edit<\/code>. Mas h\u00e1 uma diferen\u00e7a crucial. Em save<\/code>n\u00e3o temos os adere\u00e7os fornecidos pelo withColors<\/code>. E n\u00e3o podemos adicionar componentes de ordem superior \u00e0 save<\/code>fun\u00e7\u00e3o. Ent\u00e3o na save<\/code>fun\u00e7\u00e3o todas as informa\u00e7\u00f5es que temos s\u00e3o os atributos.<\/p>\n\u00c9 uma boa regra geral evitar codificar nomes de classe “tem-“. E se o WordPress decidir mudar essa regra no futuro? Felizmente, temos uma fun\u00e7\u00e3o que pode nos ajudar a gerar os nomes de classe apropriados para n\u00f3s: getColorClassName()<\/code>.<\/p>\nAntes que esque\u00e7amos, vamos desestruturar. Tamb\u00e9m est\u00e1 no wp.blockEditor<\/code>pacote.<\/p>\nconst { InspectorControls, PanelColorSettings, withColors, getColorClassName } = wp.blockEditor;<\/code><\/pre>\nUsar a getColorClassName()<\/code>fun\u00e7\u00e3o requer dois par\u00e2metros. Primeiro uma string para a regra CSS. Como nossa configura\u00e7\u00e3o de cor \u00e9 para a cor do texto, fornecemos ‘ color<\/code>‘. Isso diz \u00e0 fun\u00e7\u00e3o que ela deve retornar um nome de classe de “tem-algo-cor” e n\u00e3o “tem-algo-cor de fundo” por exemplo. Como segundo par\u00e2metro, precisamos fornecer o valor do atributo.<\/p>\nO atributo style \u00e9 constru\u00eddo simplesmente definindo “color” para o valor do atributo customTextColor<\/code>, se estiver definido.<\/p>\nsave: (props) => { \n const { textColor, customTextColor } = props.attributes;\n let divClass;\n let divStyles = {};\n if (textColor != undefined) {\n divClass = getColorClassName('color', textColor);\n }\n if (customTextColor != undefined) {\n divStyles.color = customTextColor;\n }\n return(\n <div className={divClass} style={divStyles}>\n PanelColorSettings Demo\n <\/div>\n );\n}<\/code><\/pre>\nE, claro, n\u00e3o se esque\u00e7a de aplicar a classe e o estilo no n\u00f3 raiz do seu bloco; como na linha #12<\/code>.<\/p>\nPS: Se voc\u00ea estiver testando seu bloco no editor enquanto escreve este c\u00f3digo, agora receber\u00e1 um erro de bloco. Isso acontece porque agora alteramos a sa\u00edda da save<\/code>fun\u00e7\u00e3o e tudo o que voc\u00ea salvou anteriormente est\u00e1 em conflito. Voc\u00ea ter\u00e1 que remover o bloco e adicion\u00e1-lo novamente.<\/p>\nAp\u00f3s essa altera\u00e7\u00e3o, seu bloco agora deve aplicar corretamente a cor de texto escolhida no frontend tamb\u00e9m.<\/p>\n
E \u00e9 isso! Voc\u00ea agora implementou com sucesso as configura\u00e7\u00f5es de cores para o seu bloco. Se voc\u00ea estiver interessado em adicionar v\u00e1rias configura\u00e7\u00f5es de cores (n\u00e3o apenas a cor do texto), continue lendo.<\/p>\n
Uma nota sobre v\u00e1rias configura\u00e7\u00f5es de cores<\/h2>\n
At\u00e9 agora voc\u00ea deve ser capaz de implementar v\u00e1rias configura\u00e7\u00f5es de cores. Voc\u00ea pode querer adicionar configura\u00e7\u00f5es para cor de fundo, cor do texto, cor da borda ou qualquer outra coisa para o seu bloco. Nesta se\u00e7\u00e3o, farei uma r\u00e1pida vis\u00e3o geral do que precisamos fazer para implementar v\u00e1rias configura\u00e7\u00f5es de cores.<\/p>\n
Vamos supor que eu queira adicionar cor de fundo ao meu bloco tamb\u00e9m.<\/p>\n
Primeiro eu preciso definir um novo atributo chamado backgroundColor<\/code>. Eu defino outro atributo customBackgroundColor<\/code>tamb\u00e9m.<\/p>\nNa edit<\/code>fun\u00e7\u00e3o eu mudo o objeto fornecido withColors<\/code>como tal:<\/p>\nwithColors({textColor: 'color', backgroundColor: 'background-color'})<\/code><\/pre>\nIsso informa withColors<\/code>que meu textColor<\/code>atributo \u00e9 para a regra CSS ” color<\/code>” (para cor do texto), e o atributo backgroundColor<\/code>\u00e9 para a regra CSS ” background-color<\/code>“. withColors<\/code>reconhecer\u00e1 e atualizar\u00e1 automaticamente os atributos customTextColor<\/code>e tamb\u00e9m.customBackgroundColor<\/code><\/p>\nNo PanelColorSettings<\/code>componente, forne\u00e7o outro objeto ao array para o prop colorSettings<\/code>. Igual a:<\/p>\n<PanelColorSettings \n title={__('Color settings')}\n colorSettings={[\n {\n value: textColor.color,\n onChange: setTextColor,\n label: __('Text color')\n },\n {\n value: backgroundColor.color,\n onChange: setBackgroundColor,\n label: __('Background color')\n },\n ]}\n\/><\/code><\/pre>\nCom isso, voc\u00ea deve obter duas configura\u00e7\u00f5es de cores separadas dentro da caixa Inspetor para configura\u00e7\u00f5es de cores.<\/p>\n
A \u00faltima etapa \u00e9 construir os nomes e estilos de classe apropriados em ambos edit<\/code>e save<\/code>. Este \u00e9 um passo bem simples, pois est\u00e1 apenas construindo uma string ou objeto de estilo corretamente. Lembre-se de que o nome da sua classe deve suportar v\u00e1rias classes de cores (por exemplo, se a cor do texto e a cor de fundo foram escolhidas). Basta adicionar um espa\u00e7o entre cada nome de classe.<\/p>\nPS: Se voc\u00ea precisar lidar com muitos nomes de classe para o seu bloco, poder\u00e1 se beneficiar da instala\u00e7\u00e3o do classnames<\/code>pacote. Praticamente todos os componentes do Gutenberg usam essa biblioteca para combinar nomes de classe mais facilmente.<\/p>\nConclus\u00e3o e c\u00f3digo completo<\/h2>\n
Agora voc\u00ea deve ter aprendido como implementar configura\u00e7\u00f5es de cores em seu bloco personalizado. Espero que isso tenha sido de alguma utilidade para voc\u00ea! Eu tive que adicionar esse recurso ao meu projeto e realmente n\u00e3o consegui encontrar nenhuma informa\u00e7\u00e3o ou boa documenta\u00e7\u00e3o. Ent\u00e3o esse \u00e9 o resultado de consolidar tudo o que aprendi sobre esse tema, depois de muita tentativa e erro.<\/p>\n
Aqui est\u00e1 o c\u00f3digo final, ao todo, para o exemplo de bloco personalizado com configura\u00e7\u00e3o de cor do texto:<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { InspectorControls, PanelColorSettings, withColors, getColorClassName } = wp.blockEditor;\n\u00a0\nconst BlockWithColorSettings = (props) => {\n const { textColor, setTextColor } = props; \/\/ Props received from withColors\n\u00a0\n let divClass;\n let divStyles = {};\n if (textColor != undefined) {\n if (textColor.class != undefined) {\n divClass = textColor.class;\n } else {\n divStyles.color = textColor.color;\n }\n }\n return(\n <Fragment>\n <InspectorControls>\n <PanelColorSettings \n title={__('Color settings')}\n colorSettings={[\n {\n value: textColor.color,\n onChange: setTextColor,\n label: __('Text color')\n },\n ]}\n \/>\n <\/InspectorControls>\n <div className={divClass} style={divStyles}>\n PanelColorSettings Demo\n <\/div>\n <\/Fragment>\n );\n}\n\u00a0\nregisterBlockType('awp\/colorsettings', {\n title: __('Color Settings Demo'),\n icon: 'carrot',\n category: 'common',\n attributes: {\n textColor: {\n type: 'string'\n },\n customTextColor: {\n type: 'string'\n },\n },\n edit: withColors({textColor: 'color'})(BlockWithColorSettings),\n save: (props) => { \n const { textColor, customTextColor } = props.attributes;\n let divClass;\n let divStyles = {};\n if (textColor != undefined) {\n divClass = getColorClassName('color', textColor);\n }\n if (customTextColor != undefined) {\n divStyles.color = customTextColor;\n }\n return(\n <div className={divClass} style={divStyles}>\n PanelColorSettings Demo\n <\/div>\n );\n }\n});<\/code><\/pre>\nFonte de grava\u00e7\u00e3o:
awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"Este post se aprofunda em como adicionar configura\u00e7\u00f5es de cores ao seu bloco WordPress Gutenberg personalizado, da maneira correta – assim como os blocos do WordPress fazem isso.<\/p>\n","protected":false},"author":1,"featured_media":151573,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[941,941,1110,806,806,816,816,846,846,867,867],"tags":[1170],"class_list":["post-233982","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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\/233982","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=233982"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233982\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/151573"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=233982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=233982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=233982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151572-61e4cc69ead10.png\")
<\/a><\/p>\n