{"id":233477,"date":"2023-02-14T14:49:00","date_gmt":"2023-02-14T11:49:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233477"},"modified":"2022-11-10T23:53:50","modified_gmt":"2022-11-10T20:53:50","slug":"criar-bloco-personalizado-do-gutenberg-parte-6-barras-de-ferramentas","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/criar-bloco-personalizado-do-gutenberg-parte-6-barras-de-ferramentas\/","title":{"rendered":"Criar bloco personalizado do Gutenberg – Parte 6: barras de ferramentas"},"content":{"rendered":"\n

Neste post vamos aprender como adicionar as barras de ferramentas do WordPress ao nosso bloco, ou seja, para alinhamento e alinhamento de blocos. Tamb\u00e9m aprenderemos a adicionar nossas pr\u00f3prias barras de ferramentas com nossos pr\u00f3prios bot\u00f5es para fazer a\u00e7\u00f5es personalizadas.<\/p>\n

Adicionando barras de ferramentas<\/h2>\n

Para adicionar algo \u00e0 barra de ferramentas do nosso bloco, precisaremos envolver o que queremos dentro de um componente chamado BlockControls<\/code>(de wp.blockEditor<\/code>). Dentro deste componente, podemos adicionar um dos componentes do WordPress para as barras de ferramentas padr\u00e3o que conhecemos de outros blocos (por exemplo, alinhamento) ou podemos adicionar nossa pr\u00f3pria barra de ferramentas.<\/p>\n

Por padr\u00e3o, um bloco ter\u00e1 uma barra de ferramentas contendo apenas o \u00edcone do bloco (para a funcionalidade Transformar em) e o menu do bloco para, por exemplo, remover o bloco. N\u00e3o podemos remov\u00ea-los, mas podemos adicionar nossos pr\u00f3prios bot\u00f5es e barras de ferramentas entre eles.<\/p>\n

No entanto, alguns componentes do WordPress adicionar\u00e3o suas pr\u00f3prias barras de ferramentas. A partir de agora, nosso bloco mostra uma barra de ferramentas para formata\u00e7\u00e3o de texto que vem do RichText<\/code>componente que adicionamos.<\/p>\n

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

Adicionando uma barra de ferramentas de alinhamento de bloco<\/h2>\n

A barra de ferramentas de alinhamento de blocos existe em praticamente todos os tipos de blocos do WordPress, ent\u00e3o vamos adicion\u00e1-la ao nosso bloco tamb\u00e9m. Nos bastidores existe um componente BlockAlignmentToolbar<\/code>que poder\u00edamos adicionar, mas n\u00e3o recomendo. Us\u00e1-lo requer que voc\u00ea manipule manualmente as classes para alinhamento de blocos e certifique-se de que o bloco estenda sua largura no editor ao escolher “Wide Width" ou “Full Width”. Felizmente, o WordPress tornou muito f\u00e1cil implement\u00e1-lo, totalmente autom\u00e1tico.<\/p>\n

PS: O tema ativo deve ter adicionado suporte de tema ativamente para esses dois alinhamentos de blocos. Voc\u00ea pode adicionar suporte para isso usando add_theme_support('align-wide')<\/code>o after_setup_theme<\/code>hook.<\/p>\n

Podemos adicionar uma nova propriedade \u00e0 nossa configura\u00e7\u00e3o de objeto em registerBlockType()<\/code>, chamada supports<\/code>. Existem alguns outros recursos, mas o que nos interessa aqui \u00e9 align<\/code>. Podemos definir align<\/code>para true<\/code>adicionar todos os alinhamentos poss\u00edveis ou fornecer uma matriz de quais alinhamentos permitimos para nosso bloco.<\/p>\n

...\nregisterBlockType('awp\/firstblock', {\n    ...\n    supports: {\n        align: true\n    },\n    edit: (props) => {\n        ...\n});<\/code><\/pre>\n
O que nos d\u00e1 isso no editor:<\/p>\n
\"Criar<\/a><\/p>\n
Se voc\u00ea quiser, por exemplo, impedir que algu\u00e9m use Wide Width ou Full Width, voc\u00ea pode fornecer um array e excluir esses dois. Os nomes dos alinhamentos de blocos s\u00e3o os seguintes: left<\/code>, right<\/code>, center<\/code>, wide<\/code>e full<\/code>.<\/p>\n
supports: {\n    align: ['left', 'right', 'center']\n},<\/code><\/pre>\n
Precisa de alinhamento padr\u00e3o?<\/h3>\n
Por padr\u00e3o, o bloco n\u00e3o recebe alinhamento de bloco. Se voc\u00ea quiser, pode definir um padr\u00e3o criando um atributo com a chave align<\/code>, defina o tipo string<\/code>e defina o padr\u00e3o l\u00e1. O WordPress conectar\u00e1 automaticamente este atributo ao alinhamento do bloco.<\/p>\n
attributes: {\n    align: {\n        type: 'string',\n        default: 'center'\n    }\n},\nsupports: {\n    align: true\n},<\/code><\/pre>\n
Com isso sempre que um novo bloco do nosso tipo \u00e9 criado, o alinhamento do bloco padr\u00e3o \u00e9 centralizado.<\/p>\n
Bloquear bagun\u00e7a de estilo de alinhamento? N\u00e3o \u00e9 nossa culpa<\/h3>\n
Nota:<\/strong> O estilo de bloco padr\u00e3o do WordPress atrapalhar\u00e1 o fluxo do conte\u00fado do seu post ao usar o alinhamento de bloco esquerdo e direito. A mesma coisa acontece com outros tipos de blocos do WordPress e n\u00e3o \u00e9 um problema exclusivo do nosso bloco. Isso \u00e9 causado pela adi\u00e7\u00e3o de float ao elemento, que recolhe o elemento pai. Acredite, eu tentei construir o bloco para evitar esse problema. A \u00fanica coisa que descobri estar funcionando corretamente sem mexer com os outros alinhamentos de blocos \u00e9 adicionar estilo ao editor e ajustar o estilo flutuante.<\/p>\n
\"Criar<\/a><\/p>\n
Independentemente disso, o WordPress facilitou bastante a implementa\u00e7\u00e3o do alinhamento de blocos. Agora vamos ver outras barras de ferramentas que podemos usar.<\/p>\n
Adicionando uma barra de ferramentas de alinhamento de texto<\/h2>\n
Se voc\u00ea preferir a barra de ferramentas para alinhamento de texto, voc\u00ea pode fazer isso em vez de alinhamento de bloco – nesta barra de ferramentas temos apenas alinhamento \u00e0 esquerda, centralizado e \u00e0 direita. Na verdade, voc\u00ea pode usar alinhamento de texto e alinhamento de bloco juntos – eles funcionam separadamente. Para n\u00e3o confundir os usu\u00e1rios, voc\u00ea pode, por exemplo, apenas adicionar suporte para alinhamento de bloco de largura e largura total e usar a barra de ferramentas de alinhamento de texto para controlar o alinhamento \u00e0 esquerda, ao centro ou \u00e0 direita. Ao fazer isso, voc\u00ea evita o problema mencionado acima<\/strong> com o fluxo de blocos no editor. Cabe a voc\u00ea como voc\u00ea quer que seu bloco funcione.<\/p>\n
O WordPress tem um componente para gerar a barra de ferramentas de alinhamento de texto, mas n\u00e3o h\u00e1 manipula\u00e7\u00e3o autom\u00e1tica de adicionar as classes corretas para realmente alinhar o conte\u00fado – tanto dentro do editor quanto no frontend (at\u00e9 onde eu encontrei, pelo menos!). Precisamos adicionar e atualizar manualmente um atributo para o alinhamento do texto.<\/p>\n
Adicionando BlockControls<\/code>eAlignmentToolbar<\/code><\/h3>\n
Vamos finalmente adicionar BlockControls<\/code>\u00e0 nossa edit<\/code>fun\u00e7\u00e3o para nossa sa\u00edda na barra de ferramentas. O componente para alinhamento de texto \u00e9 AlignmentToolbar<\/code>de wp.blockEditor<\/code>package.<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { RichText, InspectorControls, BlockControls, AlignmentToolbar } = wp.blockEditor;\nconst { ToggleControl, PanelBody, PanelRow, CheckboxControl, SelectControl, ColorPicker } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    category: 'common',\n    icon: 'smiley',\n    description: 'Learning in progress',\n    keywords: ['example', 'test'],\n    attributes: {\n        myRichHeading: {\n            type: 'string',\n        },\n        myRichText: {\n            type: 'string',\n            source: 'html',\n            selector: 'p'\n        },\n        textAlignment: {\n            type: 'string',\n        }\n    },\n    supports: {\n        align: ['wide', 'full']\n    },\n    edit: (props) => {\n        const { attributes, setAttributes } = props;\n        const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n\u00a0\n        return (<div className={alignmentClass}>\n                <InspectorControls>\n                    ... \n                <\/InspectorControls>\n                <BlockControls>\n                    <AlignmentToolbar\n                        value={attributes.textAlignment}\n                        onChange={(newalign) => setAttributes({ textAlignment: newalign })}\n                    \/>\n                <\/BlockControls>\n                <RichText \n                    tagName=\"h2\"\n                    placeholder=\"Write your heading here\"\n                    value={attributes.myRichHeading}\n                    onChange={(newtext) => setAttributes({ myRichHeading: newtext })}\n                \/>\n                <RichText\n                    tagName=\"p\"\n                    placeholder=\"Write your paragraph here\"\n                    value={attributes.myRichText}\n                    onChange={(newtext) => setAttributes({ myRichText: newtext })}\n                \/>\n            <\/div>\n        );\n\u00a0\n    },\n    save: (props) => { \n        const { attributes } = props;\n\u00a0\n        const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n        return (<div className={alignmentClass}>\n                <RichText.Content \n                    tagName=\"h2\"\n                    value={attributes.myRichHeading}\n                \/>\n                <RichText.Content \n                    tagName=\"p\"\n                    value={attributes.myRichText}\n                \/>\n                {attributes.activateLasers && \n                    <div className=\"lasers\">Lasers activated<\/div>\n                }\n            <\/div>\n        );\n    }\n});<\/code><\/pre>\n
Observe que exclu\u00ed o conte\u00fado de tudo o que criamos na InspectorControls<\/code>etapa anterior para encurtar o c\u00f3digo.<\/p>\n
Na linha intermedi\u00e1ria #37<\/code>a #42<\/code>est\u00e1 todo o conte\u00fado da nossa barra de ferramentas (al\u00e9m do alinhamento do bloco adicionado automaticamente pela supports<\/code>propriedade e a formata\u00e7\u00e3o do texto adicionada pelos nossos RichText<\/code>componentes). Usamos BlockControls<\/code>para acessar a barra de ferramentas, e dentro adicionamos o AlignmentToolbar<\/code>componente.<\/p>\n
Como j\u00e1 fizemos v\u00e1rias vezes com entradas, fornecemos uma value<\/code>prop para mostrar o valor salvo e uma onChange<\/code>prop para atualizar nosso atributo para o AlignmentToolbar<\/code>componente. O atributo que usaremos para armazenar o alinhamento de texto escolhido \u00e9 definido como textAlignment<\/code>e deve ser type string<\/code>. Como de costume, voc\u00ea pode fornecer um default<\/code>para garantir que os blocos rec\u00e9m-criados obtenham um alinhamento padr\u00e3o.<\/p>\n
Para garantir que o bloco produza as informa\u00e7\u00f5es de alinhamento e tamb\u00e9m seja estilizado corretamente (para que realmente vejamos o alinhamento do texto mudar) tanto no editor quanto no frontend, precisamos configurar manualmente a classe correta no div de encapsulamento. Em ambos edit<\/code>e save<\/code>defino uma vari\u00e1vel que verifica se attributes.textAlignment<\/code>est\u00e1 definida. Se for, eu construo o nome da classe seguindo os padr\u00f5es do WordPress para alinhamentos de texto, que \u00e9 “has-text-align-(left|center|right)”. Com esta classe, o WordPress aplicar\u00e1 seu estilo em nosso bloco e garantir\u00e1 que nosso bloco seja alinhado visualmente corretamente, tanto no editor quanto no frontend.<\/p>\n
Adicionando barras de ferramentas personalizadas com nossos pr\u00f3prios bot\u00f5es<\/h3>\n
Voc\u00ea tamb\u00e9m pode adicionar seus pr\u00f3prios bot\u00f5es na barra de ferramentas para fazer o que quiser ao clicar neles. Para fazer isso voc\u00ea vai querer adicionar o componente Toolbar<\/code>e dentro deste elemento adicionar um IconButton<\/code>(ambos no wp.components<\/code>pacote). Tudo dentro BlockControls<\/code>, claro.<\/p>\n
Nota<\/strong>: De acordo com o changelog do WordPress Gutenberg IconButton<\/code>\u00e9 preterido em favor do uso de arquivos Button<\/code>. No entanto, n\u00e3o consigo fazer com que um \u00edcone apare\u00e7a usando o Button<\/code>componente, n\u00e3o importa o que eu fa\u00e7a, mesmo que ele deva suport\u00e1-lo. Ent\u00e3o a partir de agora eu vou usar IconButton<\/code>.<\/p>\n
Obviamente, voc\u00ea pode combinar v\u00e1rios componentes da barra de ferramentas dentro do BlockControls<\/code>. Com o c\u00f3digo abaixo, adicionamos a barra de ferramentas de alinhamento de texto e nossa barra de ferramentas personalizada com um bot\u00e3o depois.<\/p>\n
<BlockControls>\n    <AlignmentToolbar\n        value={attributes.textAlignment}\n        onChange={(newalign) => setAttributes({ textAlignment: newalign })}\n    \/>\n    <Toolbar>\n        <IconButton\n            label=\"My very own custom button\"\n            icon=\"edit\"\n            className=\"my-custom-button\"\n            onClick={() => console.log('pressed button')}\n        \/>\n    <\/Toolbar>\n<\/BlockControls><\/code><\/pre>\n
O componente IconButton aceita um \u00edcone de painel do WordPress<\/a> ou um SVG para o prop icon<\/code>. Podemos fornecer alguns outros adere\u00e7os como className<\/code>e label<\/code>(aparecer\u00e1 na dica de ferramenta ao passar o mouse sobre o bot\u00e3o). O prop em que estamos mais interessados \u200b\u200b\u00e9 obviamente o onClick<\/code>prop que dispara quando o bot\u00e3o \u00e9 clicado. Aqui podemos fornecer uma fun\u00e7\u00e3o e basicamente fazer o que quisermos. As possibilidades s\u00e3o infinitas e depende do que voc\u00ea quer fazer. No c\u00f3digo acima eu simplesmente console log algo quando o bot\u00e3o \u00e9 clicado. \u00c0 medida que progredirmos nesta s\u00e9rie de tutoriais, voc\u00ea provavelmente ter\u00e1 algumas ideias de como fazer com que seu bot\u00e3o personalizado fa\u00e7a o que voc\u00ea deseja que ele fa\u00e7a.<\/p>\n
\"Criar<\/a><\/p>\n
Isto \u00e9 o que fizemos at\u00e9 agora. Na pr\u00f3xima etapa da s\u00e9rie, come\u00e7aremos a analisar coisas mais avan\u00e7adas e aprenderemos como criar nossos pr\u00f3prios componentes para utilizar o estado e outros benef\u00edcios.<\/p>\n
Fonte de grava\u00e7\u00e3o:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Neste post vamos aprender como adicionar as barras de ferramentas do WordPress Gutenberg ao nosso bloco; alinhamento de texto, alinhamento de bloco e nossas pr\u00f3prias barras de ferramentas personalizadas.<\/p>\n","protected":false},"author":1,"featured_media":153354,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,898,837,941,941,920,1110,920,816,816,837,846,846,867,867],"tags":[1170],"class_list":["post-233477","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-guia-para-iniciantes","category-gutenberg-8","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\/233477","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=233477"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233477\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/153354"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=233477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=233477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=233477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}