![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153621-61e511f57cf93.png\")
<\/a><\/p>\nA fun\u00e7\u00e3o de sele\u00e7\u00e3o de m\u00eddia ser\u00e1 funcionalmente exatamente igual \u00e0 fun\u00e7\u00e3o de imagem em destaque do WordPress. Vamos dentro do Inspector adicionar um painel que consiste em um bot\u00e3o para escolher uma imagem.<\/p>\n
Ao clicar no bot\u00e3o, a janela "Selecionar ou fazer upload de m\u00eddia" ser\u00e1 exibida, permitindo que voc\u00ea selecione um arquivo da Biblioteca de m\u00eddia. Limitamos a Biblioteca de m\u00eddia a mostrar apenas imagens. Depois que uma imagem \u00e9 selecionada, o pop-up \u00e9 fechado e o painel visualiza uma pequena miniatura da imagem selecionada. Abaixo os bot\u00f5es de visualiza\u00e7\u00e3o para alterar e remover a imagem ser\u00e3o exibidos. Exatamente como na imagem em destaque.<\/p>\n
Este tutorial pressup\u00f5e que voc\u00ea usar\u00e1 a imagem selecionada como plano de fundo do bloco \u2013 apenas como exemplo. \u00c9 por isso que armazenamos o URL da imagem. Vou incluir um exemplo de como usar a imagem selecionada (tanto na fun\u00e7\u00e3o Armazenamos o ID da m\u00eddia e a URL da m\u00eddia nos atributos do bloco. O c\u00f3digo usa Tamb\u00e9m estou “pegando emprestado" nomes de classe da funcionalidade de imagem em destaque do WordPress para garantir que tudo pare\u00e7a bom e n\u00e3o haja necessidade de escrever nenhum CSS por conta pr\u00f3pria. Claro que isso \u00e9 opcional.<\/p>\n O que voc\u00ea precisa salvar nos atributos do seu bloco depende um pouco de voc\u00ea. No m\u00ednimo, precisamos armazenar o ID da m\u00eddia, obviamente. Isso pode ser suficiente se voc\u00ea n\u00e3o precisar usar o URL da m\u00eddia em nenhum lugar no c\u00f3digo do script. Por exemplo, se voc\u00ea usar Vamos come\u00e7ar definindo nossos atributos. O ID da m\u00eddia deve ser o n\u00famero do tipo e o padr\u00e3o \u00e9 0. Isso facilita a compara\u00e7\u00e3o. E o URL da m\u00eddia deve ser tipo string com string vazia padr\u00e3o.<\/p>\n Para tornar nosso c\u00f3digo mais ordenado, definimos um componente separado para a No retorno do componente renderizamos um simples Mas primeiro, vamos desestruturar o componente necess\u00e1rio no in\u00edcio do arquivo:<\/p>\n Acima do Agora queremos renderizar este componente em nossa Se voc\u00ea n\u00e3o estiver familiarizado com Certificamo-nos de consultar a m\u00eddia apenas se o atributo de ID de m\u00eddia estiver realmente definido como algo diferente de 0. \u00c9 assim que nossa fun\u00e7\u00e3o de edi\u00e7\u00e3o se parecer\u00e1:<\/p>\n No final, ap\u00f3s fechar Finalmente vem a parte divertida: A parte do Inspetor.<\/p>\n O componente em que estamos interessados \u200b\u200b\u00e9 O H\u00e1 mais alguns adere\u00e7os dispon\u00edveis para Desestruturar os novos componentes primeiro;<\/p>\n Vamos adicionar O c\u00f3digo acima desestrutura Dentro do Ao clicar no bot\u00e3o, o pop-up Biblioteca de m\u00eddia deve aparecer. No entanto, selecionar uma imagem n\u00e3o funciona no momento, porque estamos perdendo os adere\u00e7os Vamos definir a Nota<\/strong>: Estou definindo minhas fun\u00e7\u00f5es como fun\u00e7\u00f5es de seta ( Logo antes da instru\u00e7\u00e3o de retorno do componente, defino uma Experimente agora e agora voc\u00ea poder\u00e1 selecionar uma imagem da Biblioteca de m\u00eddia. A m\u00eddia selecionada \u00e9 salva nos atributos do bloco. No entanto, ainda n\u00e3o h\u00e1 visualiza\u00e7\u00e3o no Inspetor e, como voc\u00ea selecionou uma imagem, o bot\u00e3o para selecionar uma imagem desaparece. O painel agora est\u00e1 vazio. A pr\u00f3xima etapa \u00e9 renderizar a visualiza\u00e7\u00e3o sempre que uma imagem for selecionada, al\u00e9m de fornecer op\u00e7\u00f5es para remov\u00ea-la ou alter\u00e1-la.<\/p>\n Dentro do Para nos ajudar a renderizar uma boa visualiza\u00e7\u00e3o, usamos o componente Primeiro desestruturamos o componente necess\u00e1rio:<\/p>\n Como voc\u00ea pode ver, acessamos o prop que o Agora voc\u00ea deve obter uma boa visualiza\u00e7\u00e3o da imagem selecionada!<\/p>\n Como renderizamos a imagem de visualiza\u00e7\u00e3o dentro, Atualmente n\u00e3o h\u00e1 como remover ou redefinir a imagem selecionada. Vamos consertar isso!<\/p>\n Devemos, no m\u00ednimo, oferecer ao usu\u00e1rio a possibilidade de remover a imagem selecionada. A partir de agora, depois de selecionar uma imagem, voc\u00ea s\u00f3 pode alter\u00e1-la, mas n\u00e3o remov\u00ea-la.<\/p>\n Faremos o mesmo que o WordPress faz para a imagem em destaque: Um novo Para este evento executamos uma nova fun\u00e7\u00e3o dentro Tudo o que essa fun\u00e7\u00e3o faz \u00e9 redefinir nossos dois valores de atributo.<\/p>\n Agora teremos um link bom e claro para remover a imagem:<\/p>\n Quando voc\u00ea clica no bot\u00e3o novo, a imagem selecionada e o pr\u00f3prio bot\u00e3o desaparecem, e o bot\u00e3o para selecionar uma imagem aparece novamente.<\/p>\n Esta etapa \u00e9 totalmente opcional. Como mencionado anteriormente, clicar na imagem de visualiza\u00e7\u00e3o da imagem abrir\u00e1 a Biblioteca de m\u00eddia e permitir\u00e1 que voc\u00ea altere a imagem. No entanto, isso pode n\u00e3o ser t\u00e3o intuitivo para todos entenderem. O WordPress adiciona um bot\u00e3o separado para alterar a imagem, apenas para deixar bem claro. N\u00f3s podemos fazer o mesmo.<\/p>\n Para renderizar um bot\u00e3o de mudan\u00e7a de imagem, basicamente repetimos o c\u00f3digo que temos para selecionar a imagem: outro Ent\u00e3o agora voc\u00ea deve obter isso:<\/p>\nedit<\/code>quanto na save<\/code>fun\u00e7\u00e3o). Ao escolher uma imagem, a imagem aparecer\u00e1 como plano de fundo do nosso bloco, tanto dentro do editor quanto no frontend.<\/p>\nwithSelect<\/code>, um componente de ordem superior fornecido no wp.data<\/code>pacote, para consultar mais informa\u00e7\u00f5es sobre a m\u00eddia selecionada, por ID.<\/p>\nSalvando a m\u00eddia selecionada em atributos<\/h2>\n
ServerSideRender<\/code>onde o PHP \u00e9 respons\u00e1vel por renderizar a sa\u00edda do bloco. Nesse caso, voc\u00ea pode obter facilmente o URL da imagem do ID da m\u00eddia usando, por exemplo, [wp_get_attachment_image_src](https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_attachment_image_src\/)()<\/code>. Por\u00e9m no exemplo abaixo estou mostrando um exemplo simples de exibi\u00e7\u00e3o da imagem como plano de fundo do nosso bloco, ent\u00e3o tamb\u00e9m armazeno a URL da m\u00eddia como atributo. Usaremos o atributo URL em ambos edit<\/code>(para adicionar o plano de fundo no editor) e no save<\/code>(para adicionar o plano de fundo no frontend).<\/p>\nattributes: {\n mediaId: {\n type: 'number',\n default: 0\n },\n mediaUrl: {\n type: 'string',\n default: ''\n }\n},<\/code><\/pre>\nCriando o componente<\/h2>\n
edit<\/code>fun\u00e7\u00e3o do bloco. Mais tarde, passaremos esse componente withSelect<\/code>para envolv\u00ea-lo em nosso componente.<\/p>\n<div><\/code>para o conte\u00fado do bloco. Suponho que voc\u00ea ter\u00e1 ou ter\u00e1 mais conte\u00fado de bloco real para substituir o conte\u00fado de exemplo fict\u00edcio. Tamb\u00e9m renderizamos InspectorControls<\/code>(package wp.blockEditor<\/code>) para adicionar uma se\u00e7\u00e3o ao inspetor. Por enquanto eu adiciono um vazio PanelBody<\/code>dentro do arquivo InspectorControls<\/code>. Eu adiciono um <div><\/code>com a mesma classe que a se\u00e7\u00e3o de imagens em destaque do WordPress usa. Isso garante que nosso estilo pare\u00e7a bom. Mais tarde, preencheremos isso PanelBody<\/code>com o c\u00f3digo para a funcionalidade de sele\u00e7\u00e3o de m\u00eddia.<\/p>\nconst { InspectorControls } = wp.blockEditor;\nconst { PanelBody } = wp.components;\nconst { Fragment } = wp.element;<\/code><\/pre>\nregisterBlockType<\/code>eu defino um componente simples chamado BlockEdit<\/code>. Se voc\u00ea preferir mover isso para um arquivo separado, voc\u00ea pode faz\u00ea-lo. Isso \u00e9 comum e recomendado, mas para este tutorial estou mantendo as coisas simples e mantendo-as no mesmo arquivo.<\/p>\nconst BlockEdit = (props) => {\n const { attributes, setAttributes } = props;\n\u00a0\n return (<Fragment>\n <InspectorControls>\n <PanelBody\n title={__('Select block background image', 'awp')}\n initialOpen={ true }\n >\n <div className=\"editor-post-featured-image\">\n ...We will add code here...\n <\/div>\n <\/PanelBody>\n <\/InspectorControls>\n <div>\n ... Your block content here...\n <\/div>\n <\/Fragment>\n );\n};<\/code><\/pre>\nedit<\/code>fun\u00e7\u00e3o. Mas queremos envolv\u00ea-lo em um arquivo withSelect<\/code>.<\/p>\nUsando
withSelect<\/code>na edit<\/code>fun\u00e7\u00e3o<\/h2>\nwithSelect<\/code>, \u00e9 um componente \u00fatil de ordem superior que nos permite realizar consultas. Voc\u00ea pode, por exemplo, consultar postagens com isso. No entanto, usaremos a fun\u00e7\u00e3o select('core').getMedia()<\/code>para consultar o ID da m\u00eddia. Como resposta, obteremos um objeto com todas as informa\u00e7\u00f5es da m\u00eddia. O objeto de m\u00eddia que recebemos em resposta ser\u00e1 fornecido como prop em nosso BlockEdit<\/code>componente, pronto para uso. Bonito.<\/p>\nedit: withSelect((select, props) => {\n return { media: props.attributes.mediaId? select('core').getMedia(props.attributes.mediaId): undefined };\n})(BlockEdit),<\/code><\/pre>\nwithSelect<\/code>a fila #3<\/code>\u00e9 onde pedimos withSelect<\/code>para devolver nosso BlockEdit<\/code>componente. Com isso nosso BlockEdit<\/code>componente agora tem acesso a props.media<\/code>.<\/p>\nRenderizando uma sele\u00e7\u00e3o de m\u00eddia<\/h2>\n
MediaUpload<\/code>(package wp.blockEditor<\/code>). Se voc\u00ea estiver interessado, o reposit\u00f3rio Github do WordPress para Gutenberg tem alguma documenta\u00e7\u00e3o sobre este componente<\/a>. Tamb\u00e9m envolveremos este componente dentro de um componente chamado MediaUploadCheck<\/code>(package wp.blockEditor<\/code>). Esse componente garante que o usu\u00e1rio atual tenha recursos para usar a Biblioteca de m\u00eddia, portanto, \u00e9 uma boa pr\u00e1tica us\u00e1-lo.<\/p>\nMediaUpload<\/code>componente tem uma prop necess\u00e1ria: render<\/code>. A forma como este componente funciona \u00e9 que definimos uma fun\u00e7\u00e3o para o render<\/code>prop onde renderizamos a sa\u00edda para a “\u00e1rea de upload de m\u00eddia”. No nosso caso vamos renderizar um Button<\/code>(package wp.components<\/code>). Dentro do suporte de renderiza\u00e7\u00e3o do MediaUpload, temos acesso \u00e0 open<\/code>fun\u00e7\u00e3o que podemos chamar para fazer o WordPress abrir o pop-up da Biblioteca de M\u00eddia:<\/p>\n<\/a><\/p>\nMediaUpload<\/code>. Abordaremos os importantes para torn\u00e1-lo funcional neste tutorial, mas h\u00e1 mais alguns com os quais voc\u00ea pode brincar. Voc\u00ea pode pelo menos estar interessado no prop allowedTypes<\/code>onde voc\u00ea pode limitar quais tipos de arquivo s\u00e3o poss\u00edveis de selecionar na Biblioteca. No nosso caso, configuramos para permitir apenas imagens.<\/p>\nAdicionando o
MediaUpload<\/code><\/h3>\nconst { Button } = wp.components;\nconst { MediaUpload, MediaUploadCheck } = wp.blockEditor;<\/code><\/pre>\nMediaUploadCheck<\/code>e MediaUpload<\/code>dentro do nosso div<\/code>em nosso PanelBody<\/code>:<\/p>\n<div className=\"editor-post-featured-image\">\n <MediaUploadCheck>\n <MediaUpload\n allowedTypes={ ['image'] }\n render={({open}) => (<Button \n className={attributes.mediaId == 0? 'editor-post-featured-image__toggle': 'editor-post-featured-image__preview'}\n onClick={open}\n >\n {attributes.mediaId == 0 && __('Choose an image', 'awp')}\n <\/Button>\n )}\n \/>\n <\/MediaUploadCheck>\n<\/div><\/code><\/pre>\n<\/a><\/p>\nopen<\/code>dentro da fun\u00e7\u00e3o para render<\/code>. Renderizamos um simples Button<\/code>onde sua onClick<\/code>propriedade executar\u00e1 a open<\/code>fun\u00e7\u00e3o. Tamb\u00e9m adicionei os mesmos nomes de classe que a funcionalidade de imagem em destaque do WordPress para garantir que n\u00e3o precisamos adicionar nenhum estilo.<\/p>\nButton<\/code>componente verificamos se uma imagem foi definida ou n\u00e3o (attributes.mediaId<\/code>). Caso contr\u00e1rio, ecoamos o texto “Escolha uma imagem”. Devemos agora obter isso em nosso bloco.<\/p>\nonSelect<\/code>e em. Vamos corrigir isso agora. Definimos para o ID de m\u00eddia selecionado e configuramos para executar uma fun\u00e7\u00e3o que definiremos mais tarde dentro de nosso componente.value``MediaUpload``value``onSelect<\/code><\/p>\n...\n<MediaUploadCheck>\n <MediaUpload\n onSelect={onSelectMedia}\n value={attributes.mediaId}\n allowedTypes={ ['image'] }\n ...<\/code><\/pre>\nonSelectMedia<\/code>fun\u00e7\u00e3o dentro do nosso componente.<\/p>\nManipulando a sele\u00e7\u00e3o de m\u00eddia<\/h3>\n
onSelectMedia =() => { }<\/code>). As fun\u00e7\u00f5es de seta s\u00e3o muito novas no ESNext e muito bacanas. A desvantagem \u00e9 que o uso de fun\u00e7\u00f5es de seta requer que voc\u00ea adicione suporte para isso em sua configura\u00e7\u00e3o do Babel. Se voc\u00ea ainda n\u00e3o fez isso, recomendo olhar sob o t\u00edtulo “Configurando o Babel” neste post<\/a>.<\/p>\nonSelectMedia<\/code>fun\u00e7\u00e3o. Tudo o que precisamos fazer \u00e9 atualizar nossos atributos usando setAttributes()<\/code>. Como par\u00e2metro para onSelectMedia<\/code>obtermos um objeto de m\u00eddia. Simplesmente extra\u00edmos o que precisamos do objeto de m\u00eddia. No nosso caso, \u00e9 o ID da m\u00eddia e o URL de tamanho completo, que s\u00e3o as propriedades id<\/code>e, url<\/code>respectivamente.<\/p>\nconst BlockEdit = (props) => {\n const { attributes, setAttributes } = props;\n\u00a0\n const onSelectMedia = (media) => {\n props.setAttributes({\n mediaId: media.id,\n mediaUrl: media.url\n });\n }\n\u00a0\n return(\n ...<\/code><\/pre>\nRenderizando uma imagem de visualiza\u00e7\u00e3o<\/h2>\n
Button<\/code>componente que renderizamos dentro MediaUpload<\/code>da render<\/code>prop, ecoamos um texto “Escolha uma imagem” se uma imagem ainda n\u00e3o estiver definida. Mas precisamos adicionar algum c\u00f3digo para quando uma imagem for definida aqui; uma pr\u00e9via.<\/p>\nResponsiveWrapper<\/code>(package wp.components<\/code>). Para ResponsiveWrapper<\/code>funcionar plenamente, precisamos fornecer adere\u00e7os para a altura e a largura. Tamb\u00e9m precisamos do URL da miniatura. N\u00e3o adianta usar a URL completa (que pode ser gigantesca) para renderizar uma visualiza\u00e7\u00e3o dentro do Inspector. \u00c9 aqui que withSelect<\/code>entra o prop. Dentro do componente n\u00f3s renderizamos uma simples <img><\/code>tag HTML.<\/p>\nconst { ResponsiveWrapper } = wp.components;<\/code><\/pre>\n<Button \n className={attributes.mediaId == 0? 'editor-post-featured-image__toggle': 'editor-post-featured-image__preview'}\n onClick={open}\n>\n {attributes.mediaId == 0 && __('Choose an image', 'awp')}\n {props.media != undefined && \n <ResponsiveWrapper\n naturalWidth={ props.media.media_details.width }\n naturalHeight={ props.media.media_details.height }\n >\n <img src={props.media.source_url} \/>\n <\/ResponsiveWrapper>\n }\n<\/Button><\/code><\/pre>\nwithSelect<\/code>componente nos forneceu, props.media<\/code>. Buscamos a largura, altura e url para o tamanho da miniatura da m\u00eddia do objeto.<\/p>\nButton<\/code>clicar na imagem de visualiza\u00e7\u00e3o acionar\u00e1 a Button<\/code>fun\u00e7\u00e3o do onClick<\/code>\u2013 que \u00e9 abrir a Biblioteca de M\u00eddia. Dessa forma voc\u00ea j\u00e1 pode alterar a imagem selecionada.<\/p>\nAdicionando uma fun\u00e7\u00e3o de remo\u00e7\u00e3o<\/h3>\n
Button<\/code>abaixo da imagem de visualiza\u00e7\u00e3o (totalmente fora de seu MediaUploadCheck<\/code>). Ao fornecer alguns adere\u00e7os inteligentes Button<\/code>, fazemos com que pare\u00e7a um link (isLink<\/code>) com a cor de texto vermelha (isDestructive<\/code>). Leia a documenta\u00e7\u00e3o do Button<\/a> para ver o que mais \u00e9 poss\u00edvel. Envolvemos o bot\u00e3o dentro de outro MediaUploadCheck<\/code>, apenas para garantir que o usu\u00e1rio tenha os recursos certos.<\/p>\n ...\n <\/MediaUploadCheck>\n {attributes.mediaId != 0 && \n <MediaUploadCheck>\n <Button onClick={removeMedia} isLink isDestructive>{__('Remove image', 'awp')}<\/Button>\n <\/MediaUploadCheck>\n }\n <\/div>\n<\/PanelBody><\/code><\/pre>\nButton<\/code>do onClick<\/code>nosso componente: removeMedia()<\/code>. N\u00f3s o definimos em algum lugar logo antes da fun\u00e7\u00e3o de retorno do componente, como fizemos com onSelectMedia<\/code>.<\/p>\nconst removeMedia =() => {\n props.setAttributes({\n mediaId: 0,\n mediaUrl: ''\n });\n}<\/code><\/pre>\n<\/a><\/p>\nAdicionando um bot\u00e3o de substitui\u00e7\u00e3o<\/h3>\n
MediaUpload<\/code>componente. Fornecemos a mesma fun\u00e7\u00e3o para onSelect<\/code>, allowedFileTypes<\/code>e value<\/code>como antes. Dentro do render<\/code>prop para MediaUpload<\/code>n\u00f3s simplesmente renderizamos outro Button<\/code>que abre a Media Library. Vamos colocar este bot\u00e3o antes do bot\u00e3o Remover \u2013 pois isso faz mais sentido para o usu\u00e1rio final:<\/p>\n<\/MediaUploadCheck>\n{attributes.mediaId != 0 && \n <MediaUploadCheck>\n <MediaUpload\n title={__('Replace image', 'awp')}\n value={attributes.mediaId}\n onSelect={onSelectMedia}\n allowedTypes={['image']}\n render={({open}) => (<Button onClick={open} isDefault isLarge>{__('Replace image', 'awp')}<\/Button>\n )}\n \/>\n <\/MediaUploadCheck>\n}\n{attributes.mediaId != 0 && \n <MediaUploadCheck>\n <Button onClick={removeMedia} ...<\/code><\/pre>\n