InspectorControls<\/code>. Tudo o que voc\u00ea colocar dentro deste componente ser\u00e1 exibido na barra lateral e n\u00e3o dentro do pr\u00f3prio bloco\/editor. Voc\u00ea basicamente pode colocar o componente e seu conte\u00fado em todos os lugares no retorno da edit<\/code>fun\u00e7\u00e3o.<\/p>\nAl\u00e9m disso, voc\u00ea lidaria com as configura\u00e7\u00f5es dentro da barra lateral como elas estavam dentro do bloco. Cada configura\u00e7\u00e3o requer um atributo e voc\u00ea carrega e atualiza os atributos da mesma maneira.<\/p>\n
![\"Criar](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153127-61e50856030af.png\")
<\/a><\/p>\nVamos primeiro dar uma olhada r\u00e1pida em como a barra lateral do nosso bloco se parece (quando nosso bloco est\u00e1 ativo no editor), com base no c\u00f3digo que acabamos na etapa anterior.<\/p>\n
Todos os blocos ir\u00e3o, por padr\u00e3o, mostrar o \u00edcone, nome e descri\u00e7\u00e3o do bloco, e a se\u00e7\u00e3o Avan\u00e7ado \u2013 recolhida. Dentro do Advanced voc\u00ea encontrar\u00e1 uma entrada de texto para fornecer a classe CSS para o bloco.<\/p>\n
Adicionando uma se\u00e7\u00e3o da barra lateral e algumas configura\u00e7\u00f5es<\/h2>\n
A barra lateral \u00e9 dividida em se\u00e7\u00f5es (referidas como pain\u00e9is no c\u00f3digo) e para um design e funcionalidade ideais (incluindo a funcionalidade de recolhimento aberto), devemos usar os componentes do WordPress para gerar pain\u00e9is corretamente.<\/p>\n
Use o componente PanelBody<\/code>para adicionar uma se\u00e7\u00e3o (aquelas que voc\u00ea pode abrir ou recolher), encontrada no wp.components<\/code>pacote. O componente aceita alguns adere\u00e7os, por exemplo, para o t\u00edtulo e se o painel deve ou n\u00e3o ser aberto ou fechado como padr\u00e3o. Voc\u00ea tamb\u00e9m pode fornecer classe personalizada, \u00edcone e anexar uma fun\u00e7\u00e3o de evento ao gatilho abrir-fechar.<\/p>\nDentro PanelBody<\/code>do WordPress, recomenda-se usar o PanelRow<\/code>componente que atua como cont\u00eaineres gen\u00e9ricos dentro do painel \u2013 para garantir a racionaliza\u00e7\u00e3o do design. Este componente aplica automaticamente alguns estilos de margem e linha flex\u00edvel para o seu conte\u00fado. Por causa do flex-direction: row<\/code>estilo " " voc\u00ea deve envolver cada configura\u00e7\u00e3o dentro de um PanelRow<\/code>. Ou voc\u00ea pode ignor\u00e1-lo completamente e assumir a responsabilidade de estiliz\u00e1-lo voc\u00ea mesmo com divs e tal.<\/p>\nAdicionando um painel e configura\u00e7\u00f5es<\/h3>\n
Vamos adicionar um painel de barra lateral para o nosso bloco com algumas configura\u00e7\u00f5es dentro, s\u00f3 para ver na pr\u00e1tica. Adicionaremos um controle de altern\u00e2ncia, uma entrada de sele\u00e7\u00e3o, um seletor de cores e uma caixa de sele\u00e7\u00e3o \u2013 apenas para obter alguma experi\u00eancia com diferentes tipos de componentes de entrada. Deixei o conte\u00fado do bloco (com os dois RichText<\/code>s) e a save<\/code>fun\u00e7\u00e3o como antes.<\/p>\nconst { registerBlockType } = wp.blocks;\nconst { RichText, InspectorControls } = 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 toggle: {\n type: 'boolean',\n default: true\n },\n favoriteAnimal: {\n type: 'string',\n default: 'dogs'\n },\n favoriteColor: {\n type: 'string',\n default: '#DDDDDD'\n },\n activateLasers: {\n type: 'boolean',\n default: false\n }\n },\n edit: (props) => { \n const { attributes, setAttributes } = props;\n return (<div>\n <InspectorControls>\n <PanelBody\n title=\"Most awesome settings ever\"\n initialOpen={true}\n >\n <PanelRow>\n <ToggleControl\n label=\"Toggle me\"\n checked={attributes.toggle}\n onChange={(newval) => setAttributes({ toggle: newval })}\n \/>\n <\/PanelRow>\n <PanelRow>\n <SelectControl\n label=\"What's your favorite animal?\"\n value={attributes.favoriteAnimal}\n options={[\n {label: \"Dogs\", value: 'dogs'},\n {label: \"Cats\", value: 'cats'},\n {label: \"Something else\", value: 'weird_one'},\n ]}\n onChange={(newval) => setAttributes({ favoriteAnimal: newval })}\n \/>\n <\/PanelRow>\n <PanelRow>\n <ColorPicker\n color={attributes.favoriteColor}\n onChangeComplete={(newval) => setAttributes({ favoriteColor: newval.hex })}\n disableAlpha\n \/>\n <\/PanelRow>\n <PanelRow>\n <CheckboxControl\n label=\"Activate lasers?\"\n checked={attributes.activateLasers}\n onChange={(newval) => setAttributes({ activateLasers: newval })}\n \/>\n <\/PanelRow>\n <\/PanelBody>\n <\/InspectorControls>\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 },\n save: (props) => { \n const { attributes } = props;\n return (<div>\n <RichText.Content \n tagName=\"h2\"\n value={attributes.myRichHeading}\n \/>\n <RichText.Content \n tagName=\"p\"\n value={attributes.myRichText}\n \/>\n <\/div>\n );\n }\n});<\/code><\/pre>\nComo sempre, come\u00e7amos desestruturando os componentes e fun\u00e7\u00f5es que queremos usar. No attributes<\/code>interior registerBlockType()<\/code>, definimos um atributo por entrada e correspondemos ao tipo – por exemplo, o controle de altern\u00e2ncia espera um booleano e, como os valores do menu suspenso s\u00e3o strings, esse atributo tamb\u00e9m deve ser um tipo string.<\/p>\nNa linha #41<\/code>iniciamos o InspectorControls<\/code>componente, e tudo a partir desse ponto at\u00e9 a linha #80<\/code>aparecer\u00e1 na barra lateral. O resto aparecer\u00e1 dentro do pr\u00f3prio editor, e n\u00e3o fiz nenhuma altera\u00e7\u00e3o l\u00e1.<\/p>\n![\"Criar](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153127-61e50857e3c95.png\")
<\/a><\/p>\nDentro, primeiro criamos um painel com PanelBody<\/code>e com o prop initialOpen<\/code>definido como true, dizemos ao Gutenberg que este painel deve ser aberto por padr\u00e3o. E ent\u00e3o cabe a n\u00f3s o que adicionar dentro de cada arquivo PanelRow<\/code>.<\/p>\nPara o componente ToggleControl<\/code>, usamos as mesmas props que fizemos antes com entradas de texto, exceto que, em vez da prop value<\/code>, fornecemos o valor do atributo dentro da prop checked<\/code>. Isso se aplica a qualquer entrada que espere um atributo marcado em HTML simples, por exemplo, caixas de sele\u00e7\u00e3o. Para bot\u00f5es de op\u00e7\u00e3o, voc\u00ea usaria o prop selected<\/code>, pois isso \u00e9 o que voc\u00ea usaria em HTML simples tamb\u00e9m. Tenha em mente que o atributo para esta entrada deve ser do tipo boolean<\/code>.<\/p>\nQuanto CheckboxControl<\/code>ao manuseio de uma caixa de sele\u00e7\u00e3o singular, funciona exatamente da mesma forma que ToggleControl<\/code>– retorna um booleano, esteja ou n\u00e3o marcado.<\/p>\nO SelectControl<\/code>gera uma lista suspensa de sele\u00e7\u00e3o e espera as op\u00e7\u00f5es poss\u00edveis como uma matriz no prop options<\/code>. Cada elemento deve ser um objeto com as propriedades label<\/code>e value<\/code>. O mesmo se aplica a caixas de sele\u00e7\u00e3o e bot\u00f5es de op\u00e7\u00e3o (RadioControl<\/code>). Em circunst\u00e2ncias normais, voc\u00ea provavelmente geraria as op\u00e7\u00f5es como uma vari\u00e1vel fora da sa\u00edda HTML.<\/p>\nVoc\u00ea pode notar que ColorPicker<\/code>funciona um pouco diferente dos outros, pois este \u00e9 um componente mais complexo e n\u00e3o uma entrada HTML padr\u00e3o. Forne\u00e7a o prop color<\/code>para a cor salva e, em vez de onChange<\/code>(dispara uma vez ao clicar, mas tamb\u00e9m toda vez que o valor \u00e9 alterado ao arrastar – o que pode resultar em muitos inc\u00eandios) use onChangeComplete<\/code>. A prop retornada neste evento tamb\u00e9m \u00e9 um objeto onde precisamos decidir qual parte queremos salvar em nosso atributo. Neste exemplo queremos salvar o valor hexadecimal (sem alfa\/opacidade), ent\u00e3o dentro setAttributes()<\/code>extra\u00edmos a hex<\/code>propriedade do color<\/code>objeto retornado. \u00c9 tamb\u00e9m por isso que adicionamos a propriedadedisableAlpha<\/code>como remover a interface do usu\u00e1rio do canal alfa (para controlar a opacidade), pois n\u00e3o faz sentido oferecer isso ao usu\u00e1rio quando nunca salvamos o valor da opacidade.<\/p>\nCada um dos componentes tem um label<\/code>prop dispon\u00edvel, exceto o colorpicker. Se voc\u00ea quiser produzir um r\u00f3tulo ou texto antes dele, precisar\u00e1 mexer no HTML ou no estilo para garantir que fique bom.<\/p>\nObviamente, voc\u00ea pode adicionar quantos pain\u00e9is quiser, basta adicionar outro PanelBody<\/code>componente ap\u00f3s o anterior.<\/p>\nSe voc\u00ea estiver interessado em aprender mais sobre como adicionar configura\u00e7\u00f5es de bloco, tenho tutoriais separados para configura\u00e7\u00f5es e componentes mais complexos para o Inspector; Como adicionar uma sele\u00e7\u00e3o<\/a> de imagem e como adicionar um painel de configura\u00e7\u00f5es de cores<\/a>.<\/p>\nManipula\u00e7\u00e3osave<\/code><\/h3>\nDeixei a save<\/code>fun\u00e7\u00e3o como estava antes. Depende de voc\u00ea e tudo depende do que as configura\u00e7\u00f5es controlam na sa\u00edda. Voc\u00ea j\u00e1 sabe como obter os valores de cada configura\u00e7\u00e3o. Como exemplo, vamos supor que o atributo booleano activateLasers<\/code>controle se um elemento HTML personalizado \u00e9 renderizado ou n\u00e3o. Se o atributo for true<\/code>um div deve ser gerado, caso contr\u00e1rio n\u00e3o. Voc\u00ea pode fazer isso com o if-check tradicional ou usar o inline if<\/code>e o &&<\/code>operador do JSX. Leia mais sobre isso no guia do React para renderiza\u00e7\u00e3o condicional<\/a>.<\/p>\nsave: (props) => { \n const { attributes } = props;\n return (<div>\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}<\/code><\/pre>\nComo usamos RichText<\/code>essa sa\u00edda n\u00e3o seria vis\u00edvel no editor, mas aparecer\u00e1 no frontend.<\/p>\nVoc\u00ea encontrar\u00e1 mais componentes no reposit\u00f3rio do wp.components<\/code> Github<\/a>. A maioria dessas pastas deve fornecer um leia-me com alguma documenta\u00e7\u00e3o sobre como us\u00e1-lo. Eu aprendi a maior parte disso olhando neste reposit\u00f3rio e tamb\u00e9m nos principais componentes do WordPress como eles fizeram isso.<\/p>\n