{"id":233696,"date":"2023-02-19T17:33:00","date_gmt":"2023-02-19T14:33:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233696"},"modified":"2022-11-11T08:55:32","modified_gmt":"2022-11-11T05:55:32","slug":"crea-un-blocco-gutenberg-personalizzato-parte-9-blocchi-dinamici-e-rendering-php","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/crea-un-blocco-gutenberg-personalizzato-parte-9-blocchi-dinamici-e-rendering-php\/","title":{"rendered":"Crea un blocco Gutenberg personalizzato – Parte 9: Blocchi dinamici e rendering PHP"},"content":{"rendered":"\n

Finora abbiamo reso l’output del blocco in Javascript. Tuttavia, con contenuti dinamici come post recenti o visualizzazione di un post, \u00e8 necessario eseguire il rendering dell’output del blocco in PHP. In questo post impareremo come e perch\u00e9.<\/p>\n

Perch\u00e9 dobbiamo gestire i blocchi dinamici in modo diverso?<\/h2>\n

Alcuni esempi sono ovvi; un blocco che mostra gli ultimi post in una categoria \u00e8 dinamico perch\u00e9 i post cambieranno nel tempo. Non scegli i post nel blocco; invece probabilmente avrai le impostazioni per scegliere la categoria, quali informazioni mostrare per ogni post, il numero di post, il numero di colonne e cos\u00ec via. Ogni volta che WordPress carica un post con questo blocco, \u00e8 necessario interrogare WordPress in quel momento per i post pi\u00f9 recenti. La visualizzazione dello stesso post il mese successivo potrebbe produrre risultati diversi anche se il post con il blocco stesso non \u00e8 stato aggiornato.<\/p>\n

Ma la necessit\u00e0 di blocchi dinamici a volte non \u00e8 cos\u00ec ovvia. Potresti immaginare un blocco di post in primo piano in cui scegli un post specifico per visualizzarlo, non \u00e8 necessariamente dinamico. Ma potrebbe essere \u2013 e dovrebbe essere. Ricorda che il post selezionato pu\u00f2 aggiornare il titolo, l’estratto o l’immagine in primo piano in qualsiasi momento e ci\u00f2 dovrebbe riflettersi nei blocchi che presentano questo post.<\/p>\n

Per creare un blocco non dinamico per mostrare un singolo post, dovrai salvare l’ID del post, il suo URL, l’URL dell’immagine in primo piano, la stringa dell’estratto o qualsiasi cosa ti serva per visualizzare l’anteprima del post, negli attributi del blocco. E qui sta il problema. Se aggiorni l’immagine in primo piano del post selezionato, il post con il blocco del post in evidenza non aggiorner\u00e0 automaticamente i suoi attributi. Rimarr\u00e0 salvato con l’URL della vecchia immagine in primo piano. Solo quando modifichi il post con il blocco e ti assicuri che salvi nuovamente gli attributi con le informazioni aggiornate, il blocco mostrer\u00e0 le informazioni aggiornate corrette.<\/p>\n

Quindi, ogni volta che trattiamo contenuti dinamici \u2013 post, categorie o qualsiasi cosa che potrebbe cambiare nel tempo \u2013 abbiamo a che fare con blocchi dinamici. E per i blocchi dinamici dobbiamo usare PHP, codice lato server, per eseguire il rendering del nostro blocco per garantire che recuperi informazioni aggiornate ogni volta che esegue il rendering.<\/p>\n

La natura modificata dei blocchi dinamici nell’editor<\/h2>\n

Quando inizi a sviluppare blocchi dinamici, la natura del tuo blocco all’interno dell’editor cambier\u00e0. Anche la funzione del tuo blocco edit<\/code>deve spesso essere dinamica. Ad esempio, per un blocco di post in primo piano dovrai recuperare i post tra cui scegliere, o per un blocco di notizie pi\u00f9 recenti dovrai recuperare un elenco di categorie tra cui l’utente pu\u00f2 scegliere.<\/p>\n

\u00c8 completamente possibile richiedere informazioni da WordPress dall’interno dell’editor eseguendo richieste AJAX, utilizzando pacchetti e componenti o eseguendole manualmente con l’ API REST di WordPress<\/a>. Indipendentemente dal metodo utilizzato per il blocco, \u00e8 necessario gestire il flusso di input asincrono: il lasso di tempo in attesa di una risposta.<\/p>\n

Esistono pi\u00f9 metodi e modelli per creare un blocco dinamico per Gutenberg. Pi\u00f9 comunemente utilizzerai un modello React chiamato componenti di ordine superiore<\/a> in cui WordPress fornisce molte funzioni e componenti per.<\/p>\n

Vedremo come recuperare i post e come recuperare le categorie nel nostro blocco nella prossima parte del tutorial. Per ora dobbiamo imparare come rendere PHP il nostro blocco.<\/p>\n

Preparare il nostro blocco per il rendering PHP<\/h2>\n

La parte principale che dobbiamo fare in Javascript \u00e8 rendere la save<\/code>funzione del blocco return null<\/code>. Potresti mantenere l’output originale, ma una volta detto a WordPress di utilizzare PHP per il rendering del blocco, questo verr\u00e0 ignorato. Per chiarire a noi stessi e agli altri che l’output del blocco non \u00e8 gestito in Javascript, cambieremo la save<\/code>funzione.<\/p>\n

registerBlockType('awp\/firstblock', {\n    title: __('My first block', 'awhitepixel'), \n    category: 'common',\n    ...\n    edit: FirstBlockEdit,\n    save:() => { return null }\n});<\/code><\/pre>\n
Non dimenticare che la modifica della funzione di salvataggio comporter\u00e0 la rottura di tutti i blocchi esistenti. Aggiungi nuovamente il blocco. Il blocco dovrebbe funzionare come prima; con le impostazioni e aggiornando gli attributi. Ora semplicemente non produrr\u00e0 nulla nel frontend. Il blocco dei commenti sar\u00e0 l\u00ec, memorizzando tutti gli attributi in JSON, ma non verr\u00e0 visualizzato alcun HTML visibile.<\/p>\n
Tuttavia; se qualcuno dei tuoi attributi sta usando la source<\/code>propriet\u00e0, devi cambiarlo. Questo non \u00e8 supportato con i blocchi renderizzati con PHP perch\u00e9 vengono analizzati direttamente dall’output del salvataggio, su cui ora torniamo null<\/code>. Usiamo source sul secondo RichText<\/code>nel nostro blocco \u2013 per il paragrafo. A questo punto l’editor non salver\u00e0 affatto ci\u00f2 che hai inserito RichText<\/code>.<\/p>\n
Quindi, se stai ancora utilizzando source<\/code>l’ myRichText<\/code>attributo, \u00e8 necessario rimuovere le propriet\u00e0 source<\/code>e selector<\/code>per garantire che gli attributi vengano archiviati e non analizzati dalla save<\/code>funzione:<\/p>\n
attributes: {\n    ...\n    myRichText: {\n        type: 'string',\n    },\n    ...<\/code><\/pre>\n
Dopo questo il nostro blocco \u00e8 pronto per il rendering in PHP. Possiamo lasciare i file Javascript (non dimenticare di compilarlo) e il resto \u00e8 fatto in PHP.<\/p>\n
Rendering di blocchi in PHP<\/h2>\n
Per dire a WordPress di eseguire il rendering dell’output del blocco in PHP, aggiungiamo un nuovo argomento alla funzione register_block_type()<\/code>. Dobbiamo aggiungere la chiave render_callback<\/code>all’array con un valore della funzione che dovrebbe eseguire.<\/p>\n
add_action('init', function() {\n    register_block_type('awp\/firstblock', [\n        'editor_script' => 'awp-myfirstblock-js',\n        'render_callback' => 'awp_myfirstblock_render'\n    ]);\n});<\/code><\/pre>\n
La funzione di rendering PHP<\/h3>\n
Definiamo la funzione awp_myfirstblock_render<\/code>pi\u00f9 in basso functions.php<\/code>(o ovunque tu abbia inserito il tuo codice PHP). La nostra funzione otterr\u00e0 due parametri; li chiameremo $attr<\/code>e $content<\/code>.<\/p>\n
function awp_myfirstblock_render($attr, $content) {\n    \/\/ return the block's output here\n}<\/code><\/pre>\n
Il parametro $attr<\/code>sar\u00e0 un array associativo con tutti gli attributi salvati. Il secondo parametro, $content<\/code>, \u00e8 per i blocchi all’interno del nostro blocco. Questo \u00e8 rilevante solo per i blocchi che supportano blocchi nidificati, ad esempio Columns o Cover.<\/p>\n
La funzione non dovrebbe mai echo<\/code>uscire. Tutto l’output deve essere restituito, quindi \u00e8 necessario creare una stringa e restituirla alla fine.<\/p>\n
Qualcosa di importante da ricordare sugli attributi \u00e8 che solo gli attributi salvati appariranno nel primo parametro della funzione. Se un attributo non \u00e8 mai stato effettivamente modificato e salvato, ad esempio basandosi solo sul suo default<\/code>, l’attributo non sar\u00e0 affatto incluso per la nostra funzione PHP.<\/p>\n
Devi gestire questo problema controllando sempre if (isset($attr['...']))<\/code>o nel modo migliore: definendo gli attributi nella nostra register_block_type()<\/code>chiamata. Possiamo fornire un’altra chiave, attributes<\/code>e impostarne il valore su un array con tutti gli attributi che desideriamo estrarre dal nostro blocco. La struttura dovrebbe essere identica a quella che hai definito in Javascript, ma invece di un oggetto Javascript ne hai bisogno in un array PHP. Pu\u00f2 essere un po’ complicato ridefinire gli stessi attributi, ma con un editor di codice intelligente dovrebbe essere abbastanza veloce copiarlo, incollarlo e modificarlo su pi\u00f9 righe in PHP.<\/p>\n
Aggiunta degli attributi per la nostra funzione di rendering<\/h3>\n
Aggiungiamo il nuovo attributes<\/code>elemento register_block_type()<\/code>e incolliamo esattamente gli stessi attributi che abbiamo definito nel nostro file Javascript:<\/p>\n
add_action('init', function() {\n    register_block_type('awp\/firstblock', [\n        'editor_script' => 'awp-myfirstblock-js',\n        'render_callback' => 'awp_myfirstblock_render',\n        'attributes' => [\n            'myRichHeading' => [\n                'type' => 'string'\n            ],\n            'myRichText' => [\n                'type' => 'string'\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    ]);\n});\n\u00a0\nfunction awp_myfirstblock_render($attr, $content) {\n    return '<div>'.$attr['favoriteColor'].'<\/div>';\n}<\/code><\/pre>\n
Tieni presente che se definisci un default<\/code>per tutti gli attributi, il $attr<\/code>parametro della tua funzione dovrebbe sempre contenere tutti gli attributi. Ad esempio, l’attributo textAlignment<\/code>sopra esister\u00e0 solo $attr<\/code>se \u00e8 stato modificato e dovrai controllare isset($attr['textAlignment'])<\/code>.<\/p>\n
Sfortunatamente, al momento, ci sono due cose di cui non ti occuperai con PHP block render<\/strong>. Uno \u00e8 l’ className<\/code>oggetto di scena, quindi devi creare tu stesso la classe di confezionamento (se lo desideri). L’altro \u00e8 la support<\/code>propriet\u00e0 per l’allineamento dei blocchi. Al momento WordPress non supporta questa propriet\u00e0 nei blocchi dinamici. Non otterremo il valore dell’allineamento del blocco scelto a meno che non lo cambiamo in un attributo e lo gestiamo manualmente in Javascript.<\/p>\n
Per quanto riguarda l’output HTML della funzione, dipende completamente da te!<\/p>\n
Richiesta di rendering PHP dall’interno dell’editor<\/h2>\n
E’ possibile richiedere il rendering PHP del nostro blocco all’interno dell’editor. Questo \u00e8 utile se vuoi essere in grado di visualizzare in anteprima l’output del blocco nell’editor. Possiamo farlo con un componente chiamato ServerSideRender<\/code>dal wp.editor<\/code>pacchetto.<\/p>\n
Come supporto ServerSideRender<\/code>, devi definire tutti gli attributi che desideri trasmettere. Come minimo devi fornire il nome del blocco al prop block<\/code>, in modo che WordPress sappia quale metodo di rendering cercare. Questo \u00e8 disponibile per te nella props.name<\/code>funzione edit<\/code>. Devi anche fornire tutti gli attributi di cui hai bisogno nel prop attributes<\/code>. Se lo desideri, puoi anche aggiungere variabili personalizzate al di fuori degli attributi qui. Tieni presente che funzioner\u00e0 solo per l’editor interno e non per il frontend.<\/p>\n
Non \u00e8 possibile utilizzare ServerSideRender<\/code>nella funzione del blocco save<\/code>. La tua save<\/code>funzione deve comunque tornare null<\/code>.<\/p>\n
Implementiamolo ServerSideRender<\/code>nel nostro blocco per vederlo nella pratica.<\/p>\n
Utilizzo di ServerSideRender per la modalit\u00e0 di anteprima\/modifica del blocco<\/h3>\n
Se hai seguito il passaggio precedente in cui abbiamo creato un interruttore della modalit\u00e0 di anteprima\/modifica per il nostro blocco, ora possiamo utilizzare ServerSideRender<\/code>per eseguire il rendering dell’anteprima del blocco da PHP quando passiamo alla modalit\u00e0 di anteprima.<\/p>\n
Per prima cosa dobbiamo ricordarci di destrutturare ServerSideRender<\/code>in alto:<\/p>\n
const { ServerSideRender } = wp.editor;<\/code><\/pre>\n
Se ricordi dal passaggio precedente abbiamo utilizzato i componenti Disabled<\/code>e\/o Placeholder<\/code>per mantenere l’anteprima. Il problema con l’utilizzo Placeholder<\/code>\u00e8 che otteniamo uno stile indesiderato applicato al nostro output. Sostituiamo Placeholder<\/code>con ServerSideRender<\/code>. Puoi scegliere di mantenere il Disabled<\/code>componente, per assicurarti che nessuno dei suoi contenuti sia cliccabile o trascinabile.<\/p>\n
Al codice per il rendering del blocco quando l’attributo editMode<\/code>\u00e8 false, facciamo:<\/p>\n
...\n{!this.state.editMode && \n    <ServerSideRender\n        block={this.props.name}\n        attributes={{ \n            myRichHeading: attributes.myRichHeading, \n            myRichText: attributes.myRichText, \n            textAlignment: attributes.textAlignment, \n            toggle: attributes.toggle, \n            favoriteAnimal: attributes.favoriteAnimal, \n            favoriteColor: attributes.favoriteColor,\n            activateLasers: attributes.activateLasers\n        }}\n    \/>\n}\n...<\/code><\/pre>\n
Ora il nostro pulsante personalizzato nella barra degli strumenti render\u00e0 l’output da PHP quando passiamo alla modalit\u00e0 di anteprima. L’output dovrebbe essere identico quando si visualizza il post nel frontend. Questa \u00e8 una buona abitudine per garantire che l’output sia identico sia nell’editor che nel frontend.<\/p>\n
Esempio: blocco dinamico che mostra un post selezionato<\/h2>\n
L’output nella tua funzione di rendering PHP pu\u00f2 essere qualsiasi cosa e hai pieno accesso a tutte le funzioni di WordPress. Si supponga un blocco in cui un ID post verr\u00e0 salvato in un attributo. Nella render_callback<\/code>funzione PHP puoi interrogare il post dall’ID e produrre le sue informazioni. Dovrebbe essere abbastanza autoesplicativo come farlo, ma ecco un rapido esempio.<\/p>\n
NB<\/strong>: In questo esempio aggiungeremo semplicemente un input di testo all’editor per inserire manualmente un ID post. Questa non \u00e8 una soluzione molto intuitiva e facile da usare per selezionare un post, ma questo \u00e8 ci\u00f2 che impareremo nel passaggio successivo. Il focus qui \u00e8 sulla parte PHP del rendering del post selezionato.<\/p>\n
Aggiungiamo un attributo selectedPostId<\/code>di tipo numero:<\/p>\n
attributes: {\n    selectedPostId: {\n        type: 'number'\n    }\n}<\/code><\/pre>\n
E da qualche parte all’interno della funzione del nostro blocco edit<\/code>aggiungiamo un TextControl<\/code>componente. Pu\u00f2 essere dove vuoi: all’interno del blocco o nell’Inspector.<\/p>\n
<TextControl \n    label={__(\"Type in post ID\", 'awhitepixel')}\n    type=\"number\"\n    value={attributes.selectedPostId}\n    onChange={(newval) => setAttributes({ selectedPostId: parseInt(newval) })}\n\/><\/code><\/pre>\n
Nota che sto prestando particolare attenzione per assicurarmi che l’input salvi correttamente l’attributo come numero convertendolo in intero con parseInt()<\/code>. Anche se impostiamo il tipo prop type<\/code>su number<\/code>per eseguire il rendering di un input numerico, il valore modificato viene comunque interpretato come una stringa. WordPress non salver\u00e0 il tuo attributo se \u00e8 nel formato sbagliato.<\/p>\n
Non dimenticare di aggiungere il nuovo attributo al tuo ServerSideRender<\/code>componente se ne hai uno:<\/p>\n
<ServerSideRender\n    block={this.props.name}\n    attributes={{ \n        selectedPostId: attributes.selectedPostId,\n        ...<\/code><\/pre>\n
La parte PHP<\/h3>\n
Questo avrebbe dovuto occuparsi della parte Javascript. Passiamo a PHP. Per prima cosa dobbiamo aggiungere il nuovo attributo selectedPostId<\/code>all’array attributes<\/code>in register_block_type()<\/code>:<\/p>\n
register_block_type('awp\/firstblock', [\n    'editor_script' => 'awp-myfirstblock-js',\n    'render_callback' => 'awp_myfirstblock_render',\n    'attributes' => [\n        'selectedPostId' => [\n            'type' => 'number',\n            'default' => 0\n        ],\n        ...\n    ]\n]);<\/code><\/pre>\n
Nella render_callback<\/code>funzione ora possiamo accedere all’ID del post con $attr['selectedPostId']<\/code>. Possiamo con ci\u00f2 eseguire un semplice get_post()<\/code>e generare i dati del post; il suo link e titolo:<\/p>\n
function awp_myfirstblock_render($attr, $content) {\n    $str = '';\n    if ($attr['selectedPostId'] > 0) {\n        $post = get_post($attr['selectedPostId']);\n        if (!$post) {\n            return $str;\n        }\n        $str = '<div class=\"awp-myfirstblock\">';\n        $str .= '<a href=\"'. get_the_permalink($post). '\">';\n        $str .= '<h3>'. get_the_title($post). '<\/h3>';\n        $str .= '<\/a>';\n        $str .= '<\/div>';\n    }\n    return $str;\n}<\/code><\/pre>\n
Questo \u00e8 un esempio molto semplice inteso come trampolino di lancio per scrivere codice pi\u00f9 avanzato e personalizzato.<\/p>\n
Ora che sappiamo come gestire il rendering dei blocchi dinamici, il passo successivo \u00e8 imparare a rendere pi\u00f9 intuitiva anche la parte dell’editor. Nel passaggio successivo ci concentreremo su come interrogare i post dall’editor dei blocchi e fornire all’utente un modo migliore per selezionare un post.<\/p>\n
Fonte di registrazione:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Con il contenuto del blocco dinamico come i post recenti o la visualizzazione di un post, \u00e8 necessario eseguire il rendering dell’output del blocco in PHP. In questo post impareremo come e perch\u00e9.<\/p>\n","protected":false},"author":1,"featured_media":152680,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[896,896,939,939,1110,804,804,844,844,865,865],"tags":[1168],"class_list":["post-233696","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-gutenberg-6","category-n-a","category-php-6","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=233696"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233696\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/152680"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=233696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=233696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=233696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}