documentazione di WordPress<\/a>, qui ho inserito soltanto quelle che ritengo le pi\u00f9 comuni e utili.<\/p>\n\n\n\n\u00c8 importante modificare il nome del selettore nel file style.css in modo che funzioni correttamente con questo blocco Gutenberg.<\/p>\n\n\n\n
Allineamento del testo<\/h2>\n\n\n\n Duplichiamo ancora una volta l’ultimo blocco Gutenberg che abbiamo creato, modifichiamo il numero da 4 a 5 e aggiungiamo una ulteriore funzione, che ci permetter\u00e0 di controllare l’allineamento del testo.<\/p>\n\n\n\n
Come prima cosa dobbiamo aggiungere un attributo che chiameremo “alignment”:<\/p>\n\n\n\n
attributes: {\n content: {\n type: 'string',\n source: 'html',\n selector: 'p',\n },\n alignment: {\n type: 'string',\n default: 'left',\n },\n },<\/pre>\n\n\n\nAggiungiamo il valore nell’example:<\/p>\n\n\n\n
example: {\n attributes: {\n content: 'Hello World',\n alignment: 'left',\n },\n },<\/pre>\n\n\n\nAll’interno della funzione save creiamo una variabile per “alignment” e una funzione per impostare il nuovo valore della variabile quando viene modificato l’allineamento.<\/p>\n\n\n\n
var alignment = props.attributes.alignment;\n\n function onChangeAlignment( newAlignment ) {\n props.setAttributes( {\n alignment:\n newAlignment === undefined ? 'left' : newAlignment,\n } );\n }<\/pre>\n\n\n\nInfine all’interno del return della funzione edit dobbiamo aggiungere un blocco, in questo caso il return della funzione si complica perch\u00e9 dobbiamo ritornare dei “nested divs”<\/p>\n\n\n\n
return el(\n 'div',\n blockProps,\n el(\n BlockControls,\n { key: 'controls' },\n el( AlignmentToolbar, {\n value: alignment,\n onChange: onChangeAlignment,\n } )\n ),\n el( RichText, {\n key: 'richtext',\n tagName: 'p',\n style: { textAlign: alignment },\n onChange: onChangeContent,\n value: content,\n } )\n );<\/pre>\n\n\n\nPer la funzione “save” invece usiamo l’attributo alignment per aggiungere una classe, poi tramite il file style.css impostiamo l’allineamento in modo corretto.<\/p>\n\n\n\n
save: function ( props ) {\n var blockProps = useBlockProps.save();\n\n return el(\n 'div',\n blockProps,\n el( RichText.Content, {\n tagName: 'p',\n className:\n 'supporthost-block-align-' +\n props.attributes.alignment,\n value: props.attributes.content,\n } )\n );\n },<\/pre>\n\n\n\nE aggiungiamo al file style.css questo codice:<\/p>\n\n\n\n
.supporthost-block-align-left {\n text-align: left;\n}\n\n.supporthost-block-align-center {\n\ttext-align: center;\n}\n\n.supporthost-block-align-right {\n\ttext-align: right;\n}<\/pre>\n\n\n\nCome per gli altri blocchi, possiamo attivare il plugin, fare un hard refresh dell’editor e usare il blocco, in questo caso il blocco SupportHost 05.<\/p>\n\n\n\nMa come possiamo avere pi\u00f9 campi, per creare un blocco Gutenberg pi\u00f9 complesso?<\/p>\n\n\n\n
Un blocco per le recensioni<\/h2>\n\n\n\n Prendiamo come esempio i box che usiamo nel sito di SupportHost per le recensioni:<\/p>\n\n\n\nPer fare qualcosa di simile, quello che farei \u00e8 usare il blocco colonne di Gutenberg, poi creare un blocco con 3 diversi input, uno per il nome, uno per la posizione\/professione ed uno per la recensione.<\/p>\n\n\n\n
Vediamo come possiamo creare un blocco di questo tipo.<\/p>\n\n\n\n
Prima di tutto duplichiamo il nuovo plugin e cambiamo i vari nomi in modo di passare da 5 a 6, questo sar\u00e0 il nostro blocco numero 6.<\/p>\n\n\n\n
Come prima dobbiamo aggiungere 2 nuovi attributi, uno per il nome e uno per la posizione:<\/p>\n\n\n\n
attributes: {\n name: {\n type: 'string',\n source: 'html',\n selector: '.supporthost-testimonial-name',\n },\n position: {\n type: 'string',\n source: 'html',\n selector: '.supporthost-testimonial-position',\n },\n content: {\n type: 'string',\n source: 'html',\n selector: '.supporthost-testimonial-content',\n },\n alignment: {\n type: 'string',\n default: 'center',\n },\n },<\/pre>\n\n\n\nCome probabilmente hai notato, in questo caso come “selector” non usiamo un elemento HTML, ma una classe, in modo che da avere un selettore univoco per ogni attributo.<\/p>\n\n\n\n
Come abbiamo fatto prima aggiungiamo le voci al nostro esempio:<\/p>\n\n\n\n
example: {\n attributes: {\n name: 'Ivan',\n position: 'SupportHost',\n content: 'Lorem ipsum dolor sit amet..',\n alignment: 'center'\n },\n },<\/pre>\n\n\n\nHo accorciato il valore di content per semplicit\u00e0 in questo esempio.<\/p>\n\n\n\n
Adesso dobbiamo andare a modificare le funzioni edit e save, aggiungendo come prima cosa le variabili per name e position, e le funzioni per l’aggiornamento del valore con la funzione onChange:<\/p>\n\n\n\n
var name = props.attributes.name;\n var position = props.attributes.position;\n\n function onChangeName( newName ) {\n props.setAttributes( { name: newName } );\n }\n function onChangePosition( newPosition ) {\n props.setAttributes( { position: newPosition } );\n }<\/pre>\n\n\n\nQuindi aggiungiamo il codice nel return:<\/p>\n\n\n\n
el( RichText, {\n key: 'richtext',\n tagName: 'p',\n style: { textAlign: alignment },\n onChange: onChangeName,\n value: name,\n placeholder: 'Insert name here...'\n } ),\n el( RichText, {\n key: 'richtext',\n tagName: 'p',\n style: { textAlign: alignment },\n onChange: onChangePosition,\n value: position,\n placeholder: 'Insert position here...'\n } ),<\/pre>\n\n\n\nFacciamo lo stesso anche per la funzione save, in questo modo:<\/p>\n\n\n\n
el( RichText.Content, {\n tagName: 'p',\n className:\n 'supporthost-testimonial-name supporthost-block-align-' +\n props.attributes.alignment,\n value: props.attributes.name,\n } ),\n el( RichText.Content, {\n tagName: 'p',\n className:\n 'supporthost-testimonial-position supporthost-block-align-' +\n props.attributes.alignment,\n value: props.attributes.position,\n } ),<\/pre>\n\n\n\nIl codice completo di block.js risulta essere:<\/p>\n\n\n\n
( function ( blocks, element, blockEditor ) {\n var el = element.createElement;\n var RichText = blockEditor.RichText;\n var useBlockProps = blockEditor.useBlockProps;\n var BlockControls = blockEditor.BlockControls;\n var AlignmentToolbar = blockEditor.AlignmentToolbar;\n\n blocks.registerBlockType( 'supporthost-blocks\/supporthost-06', {\n\n attributes: {\n name: {\n type: 'string',\n source: 'html',\n selector: '.supporthost-testimonial-name',\n },\n position: {\n type: 'string',\n source: 'html',\n selector: '.supporthost-testimonial-position',\n },\n content: {\n type: 'string',\n source: 'html',\n selector: '.supporthost-testimonial-content',\n },\n alignment: {\n type: 'string',\n default: 'center',\n },\n },\n example: {\n attributes: {\n name: 'Ivan',\n position: 'SupportHost',\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas semper feugiat. Proin tempus sem nec sapien pulvinar tristique vitae ac odio. Ut laoreet ligula id auctor hendrerit. Aliquam rutrum eu enim quis sollicitudin. Donec ut bibendum nisl. Etiam tempor, dolor id interdum vehicula, metus tortor vestibulum lorem, nec volutpat eros odio id orci. Donec vitae suscipit orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut malesuada luctus lectus, at ullamcorper dolor tempor in. Sed sed ex ullamcorper, convallis elit et, interdum elit. Etiam massa magna, cursus eget lorem vel, varius malesuada nibh. Donec non enim interdum, pellentesque enim efficitur, scelerisque turpis. Fusce lacus nulla, consectetur sed orci quis, luctus interdum nisi.',\n alignment: 'center'\n },\n },\n \n edit: function ( props ) {\n var blockProps = useBlockProps();\n var name = props.attributes.name;\n var position = props.attributes.position;\n var content = props.attributes.content;\n var alignment = props.attributes.alignment;\n\n function onChangeName( newName ) {\n props.setAttributes( { name: newName } );\n }\n function onChangePosition( newPosition ) {\n props.setAttributes( { position: newPosition } );\n }\n function onChangeContent( newContent ) {\n props.setAttributes( { content: newContent } );\n }\n\n function onChangeAlignment( newAlignment ) {\n props.setAttributes( {\n alignment:\n newAlignment === undefined ? 'center' : newAlignment,\n } );\n }\n\n return el(\n 'div',\n blockProps,\n el(\n BlockControls,\n { key: 'controls' },\n el( AlignmentToolbar, {\n value: alignment,\n onChange: onChangeAlignment,\n } )\n ),\n el( RichText, {\n key: 'richtext',\n tagName: 'p',\n style: { textAlign: alignment },\n onChange: onChangeName,\n value: name,\n placeholder: 'Insert name here...'\n } ),\n el( RichText, {\n key: 'richtext',\n tagName: 'p',\n style: { textAlign: alignment },\n onChange: onChangePosition,\n value: position,\n placeholder: 'Insert position here...'\n } ),\n el( RichText, {\n key: 'richtext',\n tagName: 'p',\n style: { textAlign: alignment },\n onChange: onChangeContent,\n value: content,\n placeholder: 'Insert review here...'\n } )\n );\n },\n\n save: function ( props ) {\n var blockProps = useBlockProps.save();\n\n return el(\n 'div',\n blockProps,\n el( RichText.Content, {\n tagName: 'p',\n className:\n 'supporthost-testimonial-name supporthost-block-align-' +\n props.attributes.alignment,\n value: props.attributes.name,\n } ),\n el( RichText.Content, {\n tagName: 'p',\n className:\n 'supporthost-testimonial-position supporthost-block-align-' +\n props.attributes.alignment,\n value: props.attributes.position,\n } ),\n el( RichText.Content, {\n tagName: 'p',\n className:\n 'supporthost-testimonial-content supporthost-block-align-' +\n props.attributes.alignment,\n value: props.attributes.content,\n } )\n );\n },\n\n } );\n} )( \n window.wp.blocks,\n\twindow.wp.element,\n\twindow.wp.blockEditor\n );<\/pre>\n\n\n\nAbbiamo bisogno di alcuni aggiustamenti al file style.css in modo che il blocco abbia una grafica accattivante. Diamo una dimensione del font superiore al nome, mentre riduciamo la dimensione del font della posizione e del testo delle recensione:<\/p>\n\n\n\n
.wp-block-supporthost-blocks-supporthost-06 {\n\tborder-top: 5px solid #fca249;\n\tpadding: 25px;\n\ttransition-property: all;\n transition-duration: 0.5s;\n box-shadow: 0 5px 6px 0 rgb(0 0 0 \/ 23%);\n}\n\n.supporthost-testimonial-name {\n\tmargin-top: 30px;\n\tfont-weight: 700;\n\tfont-size: 1.25em;\n}\n\n.supporthost-testimonial-position {\n\tmargin-top: 15px;\n\topacity: 0.75;\n\tfont-size: 0.75em;\n}\n\n.supporthost-testimonial-content {\n\tmargin-top: 15px;\n\tfont-size: 0.75em;\n}\n\n.wp-block-supporthost-blocks-supporthost-06:hover {\n\ttransform: scale(1.05,1.05);\n}\n\n.supporthost-block-align-left {\n text-align: left;\n}\n\n.supporthost-block-align-center {\n\ttext-align: center;\n}\n\n.supporthost-block-align-right {\n\ttext-align: right;\n}<\/pre>\n\n\n\nE siamo pronti ad usare il blocco, ovviamente solo dopo aver attivato il plugin e fatto un hard refresh della pagina dell’editor.<\/p>\n\n\n\nE se vogliamo aggiungere un’immagine?<\/p>\n\n\n\n
Creare un blocco con una immagine<\/h2>\n\n\n\n Se vogliamo aggiungere un’immagine a un blocco Gutenberg, dobbiamo aggiungere 2 diversi attributi, uno per l’ID dell’immagine e uno per l’url.<\/p>\n\n\n\n
Dovremo aggiungere una nuova dipendenza nel file block.js, components.<\/p>\n\n\n\n
E ovviamente modificare le funzioni edit e save.<\/p>\n\n\n\n
Iniziamo.<\/p>\n\n\n\n
Dopo che abbiamo duplicato il plugin e modificato i nomi per dargli un nuovo numero, aggiungiamo la nuova dipendenza in questo modo:<\/p>\n\n\n\n
( function ( blocks, element, blockEditor, components ) {\n\n...\n\n} )( \n window.wp.blocks,\n window.wp.element,\n window.wp.blockEditor,\n window.wp.components\n );<\/pre>\n\n\n\nAggiungiamo i 2 attributi che ci servono per l’immagine:<\/p>\n\n\n\n
attributes: {\n mediaID: {\n\t\ttype: 'number',\n\t },\n\t mediaURL: {\n\t\ttype: 'string',\n\t\tsource: 'attribute',\n\t\tselector: 'img',\n\t\tattribute: 'src',\n\t },\n name: {\n type: 'string',\n source: 'html',\n selector: '.supporthost-testimonial-name',\n },\n position: {\n type: 'string',\n source: 'html',\n selector: '.supporthost-testimonial-position',\n },\n content: {\n type: 'string',\n source: 'html',\n selector: '.supporthost-testimonial-content',\n },\n alignment: {\n type: 'string',\n default: 'center',\n },\n },<\/pre>\n\n\n\nE come negli altri casi aggiungiamo gli stessi dati nell’example:<\/p>\n\n\n\n
example: {\n attributes: {\n name: 'Ivan',\n position: 'SupportHost',\n content: 'Lorem ipsum dolor sit amet...',\n alignment: 'center',\n mediaID: 1,\n\t\tmediaURL: 'https:\/\/images.unsplash.com\/photo-1549150712-1d243024db80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80',\n },\n },<\/pre>\n\n\n\nIn questo caso ho usato un link verso un’immagine su unsplash da mostrare nell’anteprima, sperando che non verr\u00e0 eliminata, in caso nell’anteprima si vedr\u00e0 un’immagine mancante.<\/p>\n\n\n\n
Anche qui ho accorciato il contenuto di content, per semplificare il codice.<\/p>\n\n\n\n
Adesso andiamo ad aggiungere la variabile e la funzione per l’immagine all’interno della funzione edit:<\/p>\n\n\n\n
var mediaID = props.attributes.mediaID;\n var mediaURL = props.attributes.mediaURL;\n\n var onSelectImage = function ( media ) {\n\t\treturn props.setAttributes( {\n\t\t\tmediaURL: media.url,\n\t\t\tmediaID: media.id,\n\t\t} );\n\t };<\/pre>\n\n\n\nIl prossimo passo \u00e8 aggiungere il codice nel return della funzione edit per mostrare il bottone per aggiungere un’immagine direttamente nel blocco.<\/p>\n\n\n\n
Ho deciso di mostrare un’immagine prima del nome, la foto della persona che lascia la recensione.<\/p>\n\n\n\n
el(\n 'div',\n { className: 'supporthost-testimonial-image', style: { textAlign: alignment }, },\n el( MediaUpload, {\n onSelect: onSelectImage,\n allowedTypes: 'image',\n value: mediaID,\n render: function ( obj ) {\n return el(\n components.Button,\n {\n className: mediaID\n ? 'image-button'\n : 'button button-large',\n onClick: obj.open,\n },\n ! mediaID\n ? 'Upload Image'\n : el( 'img', { src: mediaURL } )\n );\n },\n } )\n),<\/pre>\n\n\n\nAllo stesso modo dobbiamo modificare il return della funzione save:<\/p>\n\n\n\n
el(\n 'div',\n { className: 'supporthost-testimonial-image supporthost-block-align-' + props.attributes.alignment, },\n el( 'img', { src: props.attributes.mediaURL } )\n),<\/pre>\n\n\n\nPer questioni di semplicit\u00e0 ti consiglio di scaricare il file da GitHub per controllare il codice completo.<\/p>\n\n\n\n
Per avere un effetto grafico pi\u00f9 carino ho aggiunto del codice css al file style.css precedente, nel dettaglio ho aggiunto:<\/p>\n\n\n\n
.supporthost-testimonial-image img {\n border-radius: 100%;\n max-width: 125px;\n border: 3px solid #000;\n}<\/pre>\n\n\n\nE per sistemare al meglio l’immagine nell’editor ho aggiunto nel file editor.css:<\/p>\n\n\n\n
.supporthost-testimonial-image img {\n margin-top: 50%;\n}<\/pre>\n\n\n\nQuesto \u00e8 l’aspetto dei due blocchi che abbiamo creato per le recensioni. Quello a sinistra \u00e8 l’esempio precedente, senza immagine, e quello a destra \u00e8 quello in cui abbiamo inserito l’immagine.<\/p>\n\n\n\n
Ecco come vediamo i nostri due blocchi nell’editor:<\/p>\n\n\n\nE qui ti mostro i blocchi Gutenberg che abbiamo creato con un esempio in cui abbiamo inserito testo e immagini:<\/p>\n\n\n\nInoltre, non so se avevi notato che nel blocco precedente il nome, la posizione e il testo della recensione non avevano uno stile, in questo blocco ho risolto aggiungendo le diverse classi in questo modo nell’HTML dell’editor.<\/p>\n\n\n\n
className: 'supporthost-testimonial-name',<\/pre>\n\n\n\nFino ad ora abbiamo creato dei blocchi statici, ma come possiamo prendere dei dati dal database in tempo reale e creare dei blocchi dinamici?<\/p>\n\n\n\n
Ad esempio, come possiamo fare se vogliamo mostrare la lista degli ultimi 10 post?<\/p>\n\n\n\n
Creare un blocco dinamico<\/h2>\n\n\n\n Per creare un blocco dinamico non serve la funzione save. I dati infatti vengono presi in tempo reale dal database, e non avrebbe senso scrivere la lista degli ultimi 10 post nel database.<\/p>\n\n\n\n
Iniziamo col creare una cartella che chiameremo “supporthost-block-8” e il relativo file “supporthost-block-8.php”.<\/p>\n\n\n\n
Il file php avr\u00e0 questo codice:<\/p>\n\n\n\n
<?php\n\/**\n * Plugin Name: SupportHost block 08\n *\/\n\nfunction supporthost_block_dynamic_render_callback( $block_attributes, $content ) {\n $recent_posts = wp_get_recent_posts( array(\n 'numberposts' => 3,\n 'post_status' => 'publish',\n ) );\n\n if ( count( $recent_posts ) === 0 ) {\n return 'No posts yet';\n }\n\n $return = '<ul>';\n foreach ( $recent_posts as $post ) {\n $return .= sprintf(\n '<li><a class=\"wp-block-my-plugin-latest-post\" href=\"%1$s\">%2$s<\/a><\/li>',\n esc_url( get_permalink( $post['ID'] ) ),\n esc_html( get_the_title( $post['ID'] ) )\n );\n }\n $return .= '<\/ul>';\n\n return $return;\n}\n\nfunction supporthost_block_08_register_block() {\n\n register_block_type( __DIR__ , array(\n 'render_callback' => 'supporthost_block_dynamic_render_callback'\n ) );\n\n}\nadd_action( 'init', 'supporthost_block_08_register_block' );<\/pre>\n\n\n\nLa prima funzione “supporthost_block_dynamic_render_callback” \u00e8 la funzione callback.<\/p>\n\n\n\n
In altre parole \u00e8 la funzione che cerca gli ultimi post nel database, e restituisce il codice HTML che visualizzeremo nell’editor e nel frontend del sito.<\/p>\n\n\n\n
La funzione “supporthost_block_08_register_block”, come per gli altri blocchi, serve a registrare il blocco, chiamando il file block.json con la differenza che qui passiamo nel secondo paragrafo un array per chiamare la funzione di callback.<\/p>\n\n\n\n
Creiamo il file block.asset.php ed inseriamo questo codice:<\/p>\n\n\n\n
<?php return\n array( 'dependencies' =>\n array(\n 'wp-blocks',\n 'wp-element',\n 'wp-block-editor',\n 'wp-polyfill',\n 'wp-server-side-render'\n ),\n 'version' => '0.1'\n );<\/pre>\n\n\n\nDal momento che vogliamo usare serverSideRender per vedere il widget identico sia nell’editor che nel frontend.<\/p>\n\n\n\n
Creiamo il file block.json, che come per gli altri blocchi contiene le informazioni del blocco, nel nostro caso specifico:<\/p>\n\n\n\n
{\n \"apiVersion\": 2,\n \"title\": \"SupportHost: 08\",\n \"name\": \"supporthost-blocks\/supporthost-08\",\n \"category\": \"layout\",\n \"icon\": \"admin-generic\",\n \"editorScript\": \"file:.\/block.js\",\n \"editorStyle\": \"file:.\/editor.css\",\n \"style\": \"file:.\/style.css\"\n}<\/pre>\n\n\n\nDal momento che sto chiamando i files style.css e editor.css, li creo ma li lascio vuoti per il momento.<\/p>\n\n\n\n
Creo il file block.js con il seguente codice:<\/p>\n\n\n\n
( function ( blocks, element, serverSideRender, blockEditor ) {\n var el = element.createElement,\n registerBlockType = blocks.registerBlockType,\n ServerSideRender = serverSideRender,\n useBlockProps = blockEditor.useBlockProps;\n\n registerBlockType( 'supporthost-blocks\/supporthost-08', {\n\n edit: function ( props ) {\n var blockProps = useBlockProps();\n return el(\n 'div',\n blockProps,\n el( ServerSideRender, {\n block: 'supporthost-blocks\/supporthost-08',\n attributes: props.attributes,\n } )\n );\n },\n } );\n} )(\n window.wp.blocks,\n window.wp.element,\n window.wp.serverSideRender,\n window.wp.blockEditor\n);<\/pre>\n\n\n\nIn pratica abbiamo soltanto la funzione edit, che restituisce il codice che generiamo con la funzione php di callback.<\/p>\n\n\n\n
Se hai seguito il tutorial fino a qui, questo codice dovrebbe spiegarsi da solo.<\/p>\n\n\n\n
Definiamo delle variabili e abbiamo un return per la funzione edit.<\/p>\n\n\n\n
Conclusioni<\/h2>\n\n\n\n In questo tutorial abbiamo imparato come creare dei blocchi Gutenberg personalizzati usando JavaScript. Siamo partiti da un esempio basilare per comprendere la struttura di un blocco. <\/p>\n\n\n\n
Con esempi via via pi\u00f9 complessi abbiamo visto quali sono le potenzialit\u00e0 dei blocchi e cosa ci permettono di fare. <\/p>\n\n\n\n
Adesso dovresti avere le basi per creare i blocchi in base alle tue esigenze. Se, invece, ti interessa gestire le condizioni di visibilit\u00e0, cio\u00e8 scegliere se rendere visibile un blocco solo in alcune circostanze, controlla la guida sulla gestione della visibilit\u00e0 dei blocchi<\/a> su WordPress.<\/p>\n\n\n\n\u00c8 tutto chiaro? Sei riuscito a seguire il tutorial e a creare dei nuovi blocchi? Fammi sapere con un commento.<\/p>\n","protected":false},"excerpt":{"rendered":"
In questo tutorial impareremo a creare un blocco Gutenberg personalizzato. Ci sono diversi modi di creare blocchi, per semplificare la procedura e renderla comprensibile a tutti utilizzeremo plain JavaScript. Abbiamo scelto di seguire questo metodo e non utilizzare JSX per evitare la compilazione. Per riuscire a seguire questo tutorial devi solo avere conoscenze di base […]<\/p>\n","protected":false},"author":1,"featured_media":63771,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[33],"tags":[],"class_list":["post-34484","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/34484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/comments?post=34484"}],"version-history":[{"count":8,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/34484\/revisions"}],"predecessor-version":[{"id":133442,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/34484\/revisions\/133442"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media\/63771"}],"wp:attachment":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media?parent=34484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/categories?post=34484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/tags?post=34484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}