{"id":233578,"date":"2023-02-17T10:29:00","date_gmt":"2023-02-17T07:29:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233578"},"modified":"2022-11-11T00:26:42","modified_gmt":"2022-11-10T21:26:42","slug":"crie-um-bloco-gutenberg-personalizado-parte-7-crie-seus-proprios-componentes-personalizados","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/crie-um-bloco-gutenberg-personalizado-parte-7-crie-seus-proprios-componentes-personalizados\/","title":{"rendered":"Crie um bloco Gutenberg personalizado – Parte 7: crie seus pr\u00f3prios componentes personalizados"},"content":{"rendered":"\n

At\u00e9 agora, nesta s\u00e9rie de tutoriais, escrevemos todo o c\u00f3digo dentro registerBlockType()<\/code>da edit<\/code>fun\u00e7\u00e3o do. \u00c9 totalmente poss\u00edvel e geralmente recomendado atribuir a edi\u00e7\u00e3o a um componente separado. Ao fazer isso, podemos utilizar funcionalidades como o estado do componente e os m\u00e9todos do ciclo de vida. Tamb\u00e9m \u00e9 muito mais limpo, leg\u00edvel e fornece c\u00f3digo reutiliz\u00e1vel!<\/p>\n

Se voc\u00ea n\u00e3o estiver familiarizado com a cria\u00e7\u00e3o de componentes do React ou quais s\u00e3o os m\u00e9todos de estado e ciclo de vida, recomendo ler primeiro o guia oficial do React sobre este t\u00f3pico<\/a>.<\/p>\n

Definindo um componente de classe paraedit<\/code><\/h2>\n

Voc\u00ea pode definir um componente como uma fun\u00e7\u00e3o ou uma classe. Com um componente de classe, voc\u00ea pode usar funcionalidades como, por exemplo, m\u00e9todos de estado e ciclo de vida. No entanto, nas vers\u00f5es mais recentes do React (16+), voc\u00ea pode usar ganchos do React para simular m\u00e9todos de estado e ciclo de vida dentro de componentes de fun\u00e7\u00e3o. Mas neste tutorial vamos nos concentrar na cria\u00e7\u00e3o de um componente de classe. O que criamos at\u00e9 agora nesta s\u00e9rie, "inline" em registerBlockType()<\/code>for edit<\/code>e save<\/code>, s\u00e3o componentes de fun\u00e7\u00e3o.<\/p>\n

Para definir um componente de classe, estendemos o WordPress’ Component<\/code>(no wp.element<\/code>pacote), exatamente como voc\u00ea estenderia um componente de classe para React.Component<\/code>.<\/p>\n

Tenha em mente que seu componente de classe deve incluir a fun\u00e7\u00e3o render()<\/code>. E por causa de como o Javascript funciona sua classe deve ser definida antes de sua registerBlockType()<\/code>chamada (escreva seu componente de classe primeiro no arquivo, e mantenha registerBlockType()<\/code>depois dele. Mais adiante neste post vamos aprender como separar componentes em arquivos separados, exportar e incluir eles).<\/p>\n

Resumindo, assim:<\/p>\n

const { registerBlockType } = wp.blocks;\nconst { Component } = wp.element;\n\u00a0\nclass FirstBlockEdit extends Component {\n    render() {\n        const { attributes, setAttributes } = this.props;\n        return ...\n    }\n}\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    edit: FirstBlockEdit,\n    save: (props) => { \n        return ...\n    }\n});<\/code><\/pre>\n
Os adere\u00e7os de edit<\/code>s\u00e3o aplicados automaticamente ao nosso componente. N\u00e3o esque\u00e7a que um componente de classe que voc\u00ea precisa referenciar adere\u00e7os com this.props<\/code>. \u00c9 comum no n\u00facleo do WordPress Gutenberg usar componentes separados para as edit<\/code>fun\u00e7\u00f5es, pois eles geralmente cont\u00eam muito mais c\u00f3digo. A save<\/code>fun\u00e7\u00e3o muitas vezes pode ser deixada a registerBlockType()<\/code>menos que contenha muito c\u00f3digo tamb\u00e9m.<\/p>\n
Ao fazer isso, agora voc\u00ea pode escrever seu componente como faria com o React. Voc\u00ea pode adicionar fun\u00e7\u00f5es, construtores, m\u00e9todos de estado e de ciclo de vida.<\/p>\n
Este \u00e9 o c\u00f3digo que acabamos na \u00faltima etapa, convertido em um componente de classe:<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { Component } = wp.element;\nconst { RichText, InspectorControls, BlockControls, AlignmentToolbar } = wp.blockEditor;\nconst { ToggleControl, PanelBody, PanelRow, CheckboxControl, SelectControl, ColorPicker, Toolbar, IconButton } = wp.components;\n\u00a0\nclass FirstBlockEdit extends Component {\n\u00a0\n    render() {\n        const { attributes, setAttributes } = this.props;\n        const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n\u00a0\n        return (<div className={alignmentClass}>\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                <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>\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}\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        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    supports: {\n        align: ['wide', 'full']\n    },\n    edit: FirstBlockEdit,\n    save: (props) => { \n        const { attributes } = props;\n\u00a0\n        const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n\u00a0\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
Se voc\u00ea desestruturado attributes<\/code>e setAttributes<\/code>de props como fizemos, tudo o que voc\u00ea precisa mudar ao passar para um componente de classe separado \u00e9 mudar uma linha; #9<\/code>de props<\/code>para this.props<\/code>. Todo o c\u00f3digo funcionar\u00e1 como antes, sem corrigir mais nada. Essa \u00e9 a beleza da desestrutura\u00e7\u00e3o. Se voc\u00ea n\u00e3o desestruturar e se referir props.attributes<\/code>diretamente, por exemplo, voc\u00ea precisaria adicionar this.<\/code>na frente de todas as refer\u00eancias individuais attributes<\/code>e em todos os setAttributes<\/code>lugares.<\/p>\n
Vamos come\u00e7ar a fazer coisas que agora podemos fazer com um componente de classe!<\/p>\n
Definindo fun\u00e7\u00f5es ethis<\/code><\/h2>\n
Concedido, sim, voc\u00ea pode definir fun\u00e7\u00f5es de dentro do edit<\/code>componente de fun\u00e7\u00e3o, antes de chamar return<\/code>. Mas, pessoalmente, sempre preferi separar a funcionalidade pela l\u00f3gica. Acho melhor separar fun\u00e7\u00f5es para fins l\u00f3gicos e outros fora da fun\u00e7\u00e3o respons\u00e1vel por renderizar a sa\u00edda. Algumas pessoas tamb\u00e9m preferem chamar fun\u00e7\u00f5es em eventos, em vez de faz\u00ea-las inline como fizemos at\u00e9 agora (setAttributes()<\/code>por onChange<\/code>exemplo).<\/p>\n
A partir de agora, nosso c\u00f3digo tem duas coisas que podem ser ben\u00e9ficas para mudar para fun\u00e7\u00f5es; InspectorControls<\/code>e BlockControls<\/code>. Isso reduzir\u00e1 nosso return<\/code>consideravelmente e tornar\u00e1 nosso c\u00f3digo mais f\u00e1cil de ler.<\/p>\n
Definimos duas fun\u00e7\u00f5es que retornam o InspectorControls<\/code>bloco inteiro e o BlockControls<\/code>bloco inteiro. Usando as fun\u00e7\u00f5es de seta (functionName =() => { ... }<\/code>) temos acesso total this<\/code>para obter adere\u00e7os. Se voc\u00ea n\u00e3o fez a \u00faltima parte da etapa 1 \u2013 configurando o Babel com as sintaxes mais recentes, voc\u00ea receber\u00e1 erros de compila\u00e7\u00e3o. Voc\u00ea teria que recorrer \u00e0 cria\u00e7\u00e3o de um construtor e vincula\u00e7\u00e3o this<\/code>para cada fun\u00e7\u00e3o. Voc\u00ea pode ler mais sobre manipula\u00e7\u00e3o this<\/code>no in\u00edcio da p\u00e1gina de FAQ do React<\/a>.<\/p>\n
Lembre-se tamb\u00e9m que por estarmos em uma classe agora voc\u00ea precisa chamar todas as suas fun\u00e7\u00f5es com this.<\/code>na frente.<\/p>\n
class FirstBlockEdit extends Component {\n\u00a0\n    getInspectorControls =() => {\n        const { attributes, setAttributes } = this.props;\n\u00a0\n        return (<InspectorControls>\n                ...\n            <\/InspectorControls>\n        );\n    }\n\u00a0\n    getBlockControls = () => {\n        const { attributes, setAttributes } = this.props;\n\u00a0\n        return (<BlockControls>\n                ...\n            <\/BlockControls>\n        );\n    }\n\u00a0\n    render() {\n        const { attributes, setAttributes } = this.props;\n        const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n\u00a0\n        return ([\n            this.getInspectorControls(),\n            this.getBlockControls(),\n            <div className={alignmentClass}>\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}<\/code><\/pre>\n
Observe que exclu\u00ed o conte\u00fado real de InspectorControls<\/code>e BlockControls<\/code>para manter o c\u00f3digo mais curto. Nada em seu c\u00f3digo precisa mudar.<\/p>\n
Tamb\u00e9m estamos utilizando o fato de que a return<\/code>instru\u00e7\u00e3o tamb\u00e9m pode retornar um array. Tudo no array ser\u00e1 renderizado normalmente na ordem em que estiver. Isso facilita a chamada de fun\u00e7\u00f5es diretamente dentro da return<\/code>instru\u00e7\u00e3o.<\/p>\n
Obviamente, voc\u00ea tamb\u00e9m pode definir m\u00e9todos de ciclo de vida, como componentDidMount()<\/code>. N\u00e3o h\u00e1 diferen\u00e7a em fazer isso nos componentes do Gutenberg do que no React.<\/p>\n
Construtor e estado de uso<\/h2>\n
Vamos tentar implementar o estado em nosso componente. Tenha em mente que o estado \u00e9 apenas algo armazenado temporariamente em nosso componente de classe e n\u00e3o \u00e9 salvo em nenhum lugar \u2013 como em atributos. \u00c9 apenas para manter o controle \u2013 bem \u2013 do estado do seu componente. Os usos comuns de state s\u00e3o usar state como um sinalizador de status enquanto aguarda o retorno de uma chamada ass\u00edncrona, mantendo a pontua\u00e7\u00e3o de algo tempor\u00e1rio antes de salv\u00e1-lo em um atributo ou implementando "modos de visualiza\u00e7\u00e3o\/edi\u00e7\u00e3o" do bloco.<\/p>\n
Voc\u00ea se refere ao estado e ao estado de atualiza\u00e7\u00e3o assim como no React; com this.state<\/code>e setState()<\/code>. Normalmente voc\u00ea inicializaria o estado no construtor. E quanto a definir um construtor \u2013 \u00e9 exatamente como no React \u2013 n\u00e3o esque\u00e7a de passar props<\/code>e fazer super(props)<\/code>tamb\u00e9m. Resumidamente:<\/p>\n
class FirstBlockEdit extends Component {\n    constructor(props) {\n        super(props);\n\u00a0\n        this.state = {\n            example: 1\n        }\n    }\n\u00a0\n    render() {\n        this.setState({ example: 2 });\n        console.log(this.state.example);\n        ...<\/code><\/pre>\n
Alternador de edi\u00e7\u00e3o\/visualiza\u00e7\u00e3o do modo de bloco<\/h3>\n
Vamos usar o que aprendemos na etapa anterior em Barras de ferramentas para criar um “alterador de modo" para nosso bloco. Implementamos uma barra de ferramentas com um bot\u00e3o que alterna o estado entre o modo de visualiza\u00e7\u00e3o e edi\u00e7\u00e3o. No modo de edi\u00e7\u00e3o, o bloco obt\u00e9m os dois componentes RichText como de costume. Mas ao mudar para o modo de visualiza\u00e7\u00e3o, desativamos a edi\u00e7\u00e3o e renderizamos a sa\u00edda do bloco.<\/p>\n
Primeiro criamos um construtor e configuramos o estado com uma propriedade booleana; editMode<\/code>que come\u00e7a como true<\/code>. O super(props)<\/code>\u00e9 necess\u00e1rio ao definir um construtor em um componente React baseado em classe.<\/p>\n
class FirstBlockEdit extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            editMode: true\n        }\n    }\n    ...<\/code><\/pre>\n
Em nossa fun\u00e7\u00e3o de sa\u00edda das barras de ferramentas, alteramos o bot\u00e3o personalizado que criamos anteriormente (que apenas console.log<\/code>algo ao clicar nele). Em sua onClick<\/code>prop n\u00f3s chamamos setState()<\/code>e negamos o editMode<\/code>valor booleano atual. Para facilitar a compreens\u00e3o do usu\u00e1rio, alternamos tamb\u00e9m entre o \u00edcone e o r\u00f3tulo do bot\u00e3o. Por exemplo, quando o modo de visualiza\u00e7\u00e3o est\u00e1 ativo, o bot\u00e3o mostra o r\u00f3tulo “Editar” e um \u00edcone de l\u00e1pis que \u00e9 comumente aceito como edi\u00e7\u00e3o.<\/p>\n
getBlockControls = () => {\n    const { attributes, setAttributes } = this.props;\n    return (<BlockControls>\n            <AlignmentToolbar\n                value={attributes.textAlignment}\n                onChange={(newalign) => setAttributes({ textAlignment: newalign })}\n            \/>\n            <Toolbar>\n                <IconButton\n                    label={ this.state.editMode? \"Preview\": \"Edit\" }\n                    icon={ this.state.editMode? \"format-image\": \"edit\" }\n                    onClick={() => this.setState({ editMode: !this.state.editMode })}\n                \/>\n            <\/Toolbar>\n        <\/BlockControls>\n    );\n}<\/code><\/pre>\n
E, finalmente, dentro do m\u00e9todo render principal do nosso bloco, podemos fazer o que quisermos. Esta parte \u00e9 realmente com voc\u00ea – voc\u00ea faz o mesmo que fizemos com o r\u00f3tulo e o \u00edcone no bot\u00e3o acima. Adicionamos dois blocos de sa\u00edda, um if this.state.editMode<\/code>is true<\/code>(que devem ser os componentes edit\u00e1veis \u200b\u200busuais RichText<\/code>) e outro se for false<\/code>.<\/p>\n
Como exemplo estou usando dois componentes do WordPress de wp.components<\/code>; Placeholder<\/code>e Disabled<\/code>para o modo de visualiza\u00e7\u00e3o. O Placeholder<\/code>componente coloca seu bloco em uma bela caixa cinza que deixa bem claro que n\u00e3o \u00e9 edit\u00e1vel. Tenha em mente que ele vem anexado com estilo, portanto, se voc\u00ea deseja uma visualiza\u00e7\u00e3o perfeita, isso pode n\u00e3o ser para voc\u00ea. E eu tamb\u00e9m envolvo tudo dentro de um Disabled<\/code>componente que torna tudo dentro de uneditable, unclicable e unrragable. Esta \u00e9 a nossa nova render()<\/code>fun\u00e7\u00e3o em nosso componente:<\/p>\n
const { ..., Fragment } = wp.element;\nconst {... Placeholder, Disabled } = wp.components;  \/\/ Don't forget to add these at the top\n\u00a0\n...\nrender() {\n    const { attributes, setAttributes } = this.props;\n    const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n\u00a0\n    return ([\n        this.getInspectorControls(),\n        this.getBlockControls(),\n        <div className={alignmentClass}>\n            {this.state.editMode && \n                <Fragment>\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                <\/Fragment>\n            }\n            {!this.state.editMode && \n                <Placeholder isColumnLayout={true}>\n                    <Disabled>\n                        <RichText.Content \n                            tagName=\"h2\"\n                            value={attributes.myRichHeading}\n                        \/>\n                        <RichText.Content\n                            tagName=\"p\"\n                            value={attributes.myRichText}\n                        \/>\n                    <\/Disabled>\n                <\/Placeholder>\n            }\n        <\/div>\n    ]);\n}\n...<\/code><\/pre>\n
Tamb\u00e9m estou usando um componente Fragment<\/code>( wp.element<\/code>pacote) que \u00e9 o mesmo que React.Fragment<\/code>. Se voc\u00ea n\u00e3o estiver familiarizado com ele, n\u00f3s encapsulamos a sa\u00edda dentro dele quando n\u00e3o queremos adicionar wrappers HTML extras desnecess\u00e1rios. Em React tudo deve ter um n\u00f3 raiz. Quando o modo de edi\u00e7\u00e3o est\u00e1 ativo (line #13<\/code>) n\u00f3s produzimos dois RichText<\/code>componentes um ap\u00f3s o outro, ent\u00e3o precisamos de um n\u00f3 raiz ao redor deles.<\/p>\n
Quando o modo de pr\u00e9-visualiza\u00e7\u00e3o est\u00e1 ativo (line #29<\/code>), n\u00f3s produzimos os valores dos dois RichText<\/code>componentes. Como fazemos em save<\/code>, usamos RichText.Content<\/code>para retornar seus valores em vez do pequeno editor.<\/p>\n
O componente Placeholder<\/code>vem em estilo flex\u00edvel e como padr\u00e3o com linha de dire\u00e7\u00e3o flex\u00edvel. Fornecer true<\/code>no prop o isColumnLayout<\/code>altera para a coluna de dire\u00e7\u00e3o flex\u00edvel (para que tudo seja empilhado). Mas, como mencionado anteriormente \u2013 voc\u00ea pode querer pular este componente e gerar sua visualiza\u00e7\u00e3o exatamente como seria no frontend.<\/p>\n
E com isso temos um seletor de visualiza\u00e7\u00e3o\/edi\u00e7\u00e3o do modo de bloco. Obviamente, voc\u00ea pode ajustar o conte\u00fado do “modo de edi\u00e7\u00e3o” para mostrar, por exemplo, entradas de controle ou outros enfeites.<\/p>\n<\/p>\n
Voc\u00ea pode criar quantos componentes quiser, voc\u00ea n\u00e3o est\u00e1 limitado a apenas ter um para a edit<\/code>fun\u00e7\u00e3o! Basta criar mais componentes e inclu\u00ed-los em uma return<\/code>instru\u00e7\u00e3o. Essa \u00e9 a ideia do React, na verdade \u2013 construir peda\u00e7os de c\u00f3digo encapsulados, possivelmente cada um manipulando seu pr\u00f3prio estado e combin\u00e1-los para fazer UIs complexas.<\/p>\n
Fonte de grava\u00e7\u00e3o:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Nesta parte em nosso tutorial de bloco do Gutenberg, aprenderemos como mover a fun\u00e7\u00e3o de edi\u00e7\u00e3o do registerBlockType para um componente separado baseado em classe.<\/p>\n","protected":false},"author":1,"featured_media":152941,"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,837,846,846,867,867],"tags":[1170],"class_list":["post-233578","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-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233578","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=233578"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233578\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/152941"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=233578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=233578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=233578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}