{"id":233884,"date":"2023-02-23T17:58:00","date_gmt":"2023-02-23T14:58:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233884"},"modified":"2023-02-23T18:00:42","modified_gmt":"2023-02-23T15:00:42","slug":"tutorial-crea-uno-slider-come-blocco-gutenberg-dinamico","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/tutorial-crea-uno-slider-come-blocco-gutenberg-dinamico\/","title":{"rendered":"Tutorial: crea uno slider come blocco Gutenberg dinamico"},"content":{"rendered":"\n

Questo tutorial spiega come creare un blocco Gutenberg di WordPress dinamico. Il risultato finale \u00e8 un dispositivo di scorrimento che mostra l’immagine in primo piano dai post della categoria selezionata. Il codice include l’utilizzo di un componente di ordine superiore (withSelect<\/code>) per recuperare tutte le categorie all’interno dell’editor di blocchi.<\/p>\n

Cosa faremo<\/h2>\n

Il blocco eseguir\u00e0 il rendering di un semplice dispositivo di scorrimento utilizzando lo script jQuery Cycle2<\/a>. Ma puoi usare qualsiasi altro script di scorrimento. Il blocco all’interno dell’editor visualizzer\u00e0 un elenco di tutte le categorie consentendo all’utente di selezionare una categoria. Quando si visualizza il blocco nel frontend, recuperer\u00e0 dinamicamente i post dalla categoria scelta e mostrer\u00e0 le loro immagini in primo piano come diapositive. Questo tutorial lo manterr\u00e0 abbastanza semplice permettendoti di espandere e regolare il tuo dispositivo di scorrimento come preferisci.<\/p>\n

Ho scelto di non eseguire il rendering della presentazione all’interno dell’editor. Di solito ti assicuri che il rendering nell’editor e nel frontend sia lo stesso. Ma nel caso di uno slider mi piace mantenerlo semplice per non far esplodere l’utente con animazioni costanti all’interno dell’editor.<\/p>\n

Il blocco avr\u00e0 solo due impostazioni; la scelta della categoria e il numero di diapositive (post). Consiglio di aggiungere pi\u00f9 impostazioni come la velocit\u00e0 di scorrimento, le impostazioni per la visualizzazione di pillole, frecce, testo e altre impostazioni tipiche del dispositivo di scorrimento. Dovrebbe essere abbastanza semplice aggiungere tu stesso queste impostazioni.<\/p>\n

Tutto il codice \u00e8 scritto in Javascript ES6 \/ ES2015+. Tieni presente che questo codice ha bisogno di Babel per trasformare e creare i file Javascript finali. Consulta la guida qui sotto se non sai come fare.<\/p>\n

Imposta i file<\/h2>\n

In questo esempio stiamo creando il blocco all’interno di un tema. Nella cartella del tema ho una sottocartella ‘ gutenberg\/<\/code>‘ dove ho posizionato il mio package.json<\/code>e webpack-config.js<\/code>. All’interno della sottocartella ‘ src\/<\/code>‘ in questa cartella \u00e8 dove inserisco tutti i miei file di build. La mia configurazione del webpack \u00e8 impostata per posizionare i file di build nella mia sottocartella del tema ‘ assets\/js\/<\/code>‘.<\/p>\n

Crea un nuovo file sorgente vuoto theme-folder\/gutenberg\/src\/block-slider.js<\/code>e imposta Webpack per creare il file di build in theme-folder\/assets\/js\/block-slider.js<\/code>. Puoi modificare le posizioni e\/o i nomi dei file come preferisci, ricorda solo di modificare il codice di seguito.<\/p>\n

Dobbiamo anche scaricare lo script di scorrimento necessario. Puoi scaricare Cycle2 a questo link<\/a>, oppure puoi usare qualsiasi altro script di diapositiva e modificare il codice qui sotto. Sto mettendo il jquery.cycle2.min.js<\/code>file nella cartella della mia cartella del tema \/assets\/js\/<\/code>.<\/p>\n

Preparer\u00f2 anche un piccolo file CSS che verr\u00e0 caricato solo nell’editor. Abbiamo solo un piccolo pezzo di styling per rendere la categoria selezionata in modo ottimale. Creo un file vuoto editor-block-slider.css<\/code>e lo inserisco in theme-folder\/assets\/css\/<\/code>.<\/p>\n

Infine andiamo a un file PHP che viene caricato nel tema. Per semplicit\u00e0 sto facendo la parte PHP nel tema functions.php<\/code>.<\/p>\n

Registra il blocco Gutenberg in PHP<\/h2>\n

Tutti i blocchi Gutenberg devono essere registrati con [register_block_type](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/)()<\/code>. Preferisco chiamarlo all’interno di una funzione agganciata a init<\/code>. Il primo parametro \u00e8 il nome del blocco incluso lo spazio dei nomi. Ho deciso di chiamare il mio script di scorrimento awp\/slider<\/code>(regola come preferisci). Il secondo argomento \u00e8 un array di argomenti.<\/p>\n

All’interno della stessa funzione registrer\u00f2 lo script di build con [wp_register_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_script\/)()<\/code>e registrer\u00f2 il mio file CSS dell’editor con [wp_register_style](https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_style\/)()<\/code>. Entrambi questi handle verranno aggiunti come argomenti rispettivamente a ‘ editor_script<\/code>‘ e ‘ editor_style<\/code>‘. Per quanto riguarda le dipendenze, ho aggiunto alcuni dei pacchetti pi\u00f9 basilari per lo script per garantire che il nostro script di blocco sia caricato nell’ordine corretto. Per quanto riguarda lo stile dell’editor, l’uso di ‘ wp-edit-blocks<\/code>‘ \u00e8 una buona dipendenza per evitare che i tuoi stili vengano sovrascritti.<\/p>\n

E infine, poich\u00e9 si tratta di un blocco dinamico, \u00e8 necessario aggiungere anche l’ render_callback<\/code>argomento ‘ ‘, che punta a una funzione responsabile del rendering del blocco nel frontend.<\/p>\n

add_action('init', function() {\n    wp_register_script(\n        'awp-block-slider-js', \n        get_template_directory_uri(). '\/assets\/js\/block-slider.js', \n        ['wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-data']\n    );\n    wp_register_style(\n        'awp-block-slider-style', \n        get_template_directory_uri(). '\/assets\/css\/editor-block-slider.css', \n        ['wp-edit-blocks']\n    );\n\u00a0\n    register_block_type('awp\/slider', [\n        'editor_script' => 'awp-block-slider-js',\n        'editor_style' => 'awp-block-slider-style',\n        'render_callback' => 'awp_gutenberg_slider_render',\n    ]);\n});<\/code><\/pre>\n
Infine definiamo la funzione render. Otteniamo due parametri per la funzione di callback; una matrice di attributi dal blocco e il contenuto interno (non utilizzato in questo blocco). Restituir\u00f2 semplicemente una stringa fittizia. Torneremo e completeremo la funzione di rendering in seguito. Ricorda di restituire una stringa, non un’eco.<\/p>\n
function awp_gutenberg_slider_render($attributes, $content) {\n    return 'Slider render comes here.';\n}<\/code><\/pre>\n
Torneremo alla funzione di rendering PHP alla fine di questo tutorial. Ora \u00e8 il momento di passare a Javascript!<\/p>\n
Registra un blocco Gutenberg personalizzato in Javascript<\/h2>\n
Apriamo il nostro block-slider.js<\/code>file sorgente. A questo punto avvier\u00f2 lo script (npm run start<\/code>) per trasformare tutto ci\u00f2 che facciamo in questo file nel file di build mentre procediamo. Dobbiamo registrare il blocco usando [registerBlockType](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-registration\/)()<\/code>. Controlla il link per vedere tutti i possibili argomenti.<\/p>\n
Come abbiamo deciso in register_block_type()<\/code>PHP, il nostro blocco si chiama awp\/slider<\/code>. Vogliamo anche aggiungere due attributi al blocco, come accennato in precedenza: uno per l’ID del termine selezionato e uno per il numero di diapositive.<\/p>\n
Mi piace aggiungere anche la funzionalit\u00e0 di allineamento dei blocchi. Verr\u00e0 aggiunto automaticamente aggiungendo ‘ align<\/code>‘ supports<\/code>all’oggetto. Se vuoi tutti gli allineamenti dei blocchi puoi semplicemente impostare align<\/code>su true. Tuttavia un dispositivo di scorrimento allineato a sinistra o a destra non ha molto senso, quindi definir\u00f2 i tipi specifici di allineamento del blocco supportati da questo blocco: "Allinea al centro" (‘ center<\/code>‘), "Larghezza" (‘ wide<\/code>‘) e " Full width" (‘ full<\/code>‘). Inoltre, per definire un align predefinito e renderlo accessibile da PHP, aggiungo ‘ align<\/code>‘ come attributo al nostro blocco.<\/p>\n
Ho impostato l’argomento del blocco edit<\/code>su un componente separato che creeremo in seguito. E infine la save<\/code>funzione restituisce semplicemente null<\/code>, perch\u00e9 questo \u00e8 un blocco dinamico.<\/p>\n
const { __ } = wp.i18n;\nconst { registerBlockType } = wp.blocks;\n\u00a0\nregisterBlockType('awp\/slider', {\n    title: __('AWP Slider', 'awp'),\n    icon: 'slides',\n    category: 'common',\n    supports: {\n        align: ['center', 'wide', 'full']\n    },\n    attributes: {\n        align: {\n            type: 'string',\n            default: 'center'\n        },\n        termId: {\n            type: 'number',\n            default: 0\n        },\n        numSlides: {\n            type: 'number',\n            default: 3\n        },\n    },\n    edit: BlockEdit,\n    save:() => { return null; }\n});<\/code><\/pre>\n
Dobbiamo definire il componente per la edit<\/code>propriet\u00e0. Prima del codice di registrazione definisco un componente di funzione BlockEdit<\/code>che rende semplicemente a div<\/code>e a Placeholder<\/code>con del testo fittizio.<\/p>\n
const { __ } = wp.i18n;\nconst { registerBlockType } = wp.blocks;\nconst { Placeholder } = wp.components;\nconst BlockEdit = (props) => {\n    return(\n        <div className={props.className}>\n            <Placeholder\n                label={__('Slider Category', 'awp')}\n            >\n                Select category comes here.\n            <\/Placeholder>\n        <\/div>\n    );\n}\n\u00a0\nregisterBlockType('awp\/slider', {\n    ...<\/code><\/pre>\n
[Placeholder](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/placeholder)<\/code>\u00e8 un bel componente per il rendering di un’area per le impostazioni e non necessariamente per il rendering effettivo di un blocco. All’interno del Placeholder<\/code>componente viene visualizzato un elenco di termini tra cui scegliere.<\/p>\n
A questo punto il nostro blocco dovrebbe essere disponibile in WordPress Gutenberg! Creiamo un nuovo post, aggiungiamo un nuovo blocco e troviamo il nostro blocco all’interno della categoria Comune. Ecco come appare attualmente il nostro blocco:<\/p>\n
\"Tutorial:<\/a>\"Tutorial:<\/a><\/p>\n
Aggiunta delle impostazioni dell’Inspector<\/h2>\n
Aggiungiamo alcune impostazioni all’Inspector (barra laterale destra dell’editor). Come accennato, il nostro blocco ha solo un’impostazione; numero di diapositive. \u00c8 qui che ti consiglio di aggiungere pi\u00f9 impostazioni per il tuo blocco di scorrimento. Ricorda di registrare gli attributi per ogni impostazione che aggiungi.<\/p>\n
Per aggiungere qualcosa all’Inspector utilizziamo il componente [InspectorControls](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/block-editor\/src\/components\/inspector-controls)<\/code>( wp.blockEditor<\/code>). All’interno eseguiamo il rendering di una [PanelBody](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/panel#panelbody)<\/code>( wp.components<\/code>) per aggiungere una nuova sezione comprimibile. Quindi eseguiamo semplicemente il rendering di un [RangeControl](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/range-control)<\/code>( wp.components<\/code>) per creare un’impostazione di input per scegliere il numero di diapositive. Impostiamo il minimo su 1 e il massimo su 10. Colleghiamo l’ evento value<\/code>e onChange<\/code>all’attributo numSlides<\/code>.<\/p>\n
const { __ } = wp.i18n;\nconst { registerBlockType } = wp.blocks;\nconst { InspectorControls } = wp.blockEditor;\nconst { Placeholder, PanelBody, RangeControl } = wp.components;\n\u00a0\nconst BlockEdit = (props) => {\n    const { attributes, setAttributes } = props;\n\u00a0\n    return(\n        <div className={props.className}>\n            <InspectorControls>\n                <PanelBody\n                    title={__('Slider Settings', 'awp')}\n                    initialOpen={true}\n                >\n                    <RangeControl\n                        label={__('Number of slides', 'awp')}\n                        value={attributes.numSlides}\n                        onChange={(val) => setAttributes({ numSlides: val })}\n                        min={1}\n                        max={10}\n                    \/>\n                <\/PanelBody>\n            <\/InspectorControls>\n            <Placeholder\n                ...<\/code><\/pre>\n
Con il codice sopra ora dovremmo ottenere una bella sezione con un dispositivo di scorrimento dell’intervallo per impostare il numero di diapositive.<\/p>\n
\"Tutorial:<\/a><\/p>\n
Ancora una volta, ti consiglio di giocare aggiungendo pi\u00f9 impostazioni al tuo dispositivo di scorrimento. Il passaggio successivo \u00e8 la creazione dell’elemento per il rendering di un elenco di categorie tra cui scegliere.<\/p>\n
Creazione di un componente di selezione di categoria<\/h2>\n
Per mantenere il nostro codice ordinato e riutilizzabile, creiamo il componente selettore di categoria in un file separato. All’interno della cartella build creo un nuovo file awp-category-picker.js<\/code>.<\/p>\n
All’interno di questo file definiamo un componente che scorrer\u00e0 attraverso tutte le categorie attualmente in WordPress e le render\u00e0 in qualche modo. Per ottenere le categorie dobbiamo avvolgerlo all’interno di un cosiddetto componente di ordine superiore, che fornir\u00e0 al nostro componente ci\u00f2 di cui abbiamo bisogno tramite oggetti di scena. Per fare questo useremo [withSelect](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withSelect)<\/code>. All’interno withSelect<\/code>possiamo fare una richiesta per recuperare tutte le categorie in WordPress utilizzando il selettore del negozio [select](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#select)()<\/code>. Possiamo usare:<\/p>\n
select('core').getEntityRecords('taxonomy', '<category_slug>', <args>)<\/code><\/pre>\n
per recuperare tutti i termini all’interno dello slug della tassonomia fornito. Se non hai familiarit\u00e0 con i componenti e i selettori di ordine superiore in WordPress Gutenberg, ho un post che spiega questo concetto in modo pi\u00f9 dettagliato: Crea un blocco Gutenberg personalizzato \u2013 Parte 10: Recupero di post e componenti di ordine superiore<\/a>.<\/p>\n
Poich\u00e9 dobbiamo esportare un componente da questo file, posizioniamo la combinazione di withSelect<\/code>e il nostro componente definito export default<\/code>nell’istruzione. Il nostro CategorySelect<\/code>componente restituisce semplicemente un div con del testo fittizio in modo da poter vedere che funziona. Dovrebbe fornire il withSelect<\/code>prop ‘ terms<\/code>‘ a CategorySelect<\/code>. Ho aggiunto un console.log()<\/code>su questo oggetto in modo da poter vedere che funziona.<\/p>\n
const { withSelect } = wp.data;\n\u00a0\nconst CategorySelect = (props) => {\n    console.log(props.terms);\n\u00a0\n    return(\n        <div>This is category select<\/div>\n    );\n}\n\u00a0\nexport default withSelect((select, props) => {\n    return {\n        terms: select('core').getEntityRecords('taxonomy', 'category', {per_page: -1})\n    }\n})(CategorySelect);<\/code><\/pre>\n
L’ultima cosa che dobbiamo fare \u00e8 importare e utilizzare questo componente del selettore di categoria nel nostro blocco personalizzato.<\/p>\n
Tornando, block-slider.js<\/code>dobbiamo prima importare il componente nella parte superiore del file. E all’interno del nostro Placeholder<\/code>componente eseguiamo semplicemente il rendering del componente.<\/p>\n
const { Placeholder, PanelBody, RangeControl } = wp.components;\n\u00a0\nimport CategorySelect from '.\/awp-category-picker';\n\u00a0\nconst BlockEdit = (props) => {\n        ...\n            <Placeholder\n                label={__('Slider Category', 'awp')}\n            >\n                <CategorySelect \n                \/>\n            <\/Placeholder>\n        ...<\/code><\/pre>\n
Con il codice sopra il tuo blocco dovrebbe ora rendere il div dal CategorySelect<\/code>componente. Se apri la Console nel tuo browser dovresti anche vedere alcuni log. Ricorda che withSelect<\/code>\u00e8 una query asincrona, il che significa che potrebbe essere visualizzata pi\u00f9 volte. La prima volta che i termini prop sono null<\/code>. Ma gli ultimi log dovrebbero finire con una matrice di termini di categoria.<\/p>\n
Grande! Continuiamo a lavorare con il nostro CategorySelect<\/code>componente e facciamo in modo che renda effettivamente l’elenco dei termini consentendo all’utente di selezionarne uno!<\/p>\n
Rendering di un elenco di termini tra cui scegliere<\/h3>\n
Esistono molti modi per eseguire il rendering di un elenco di scelte in cui l’utente pu\u00f2 selezionare un elemento. Se vuoi qualcosa di veramente semplice, puoi eseguire il rendering di un menu a discesa di selezione standard ([SelectControl](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/select-control)<\/code>). Dipende interamente da te. Ho optato per un approccio pi\u00f9 pulito e piacevole utilizzando [MenuGroup](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/menu-group)<\/code>( wp.components<\/code>) e [MenuItem](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/menu-item)<\/code>( wp.components<\/code>).<\/p>\n
All’interno di un MenuGroup<\/code>componente abbiamo bisogno di scorrere l’ props.terms<\/code>array e per ogni elemento vogliamo visualizzare un MenuItem<\/code>componente che rende il nome del termine. E ovviamente vogliamo renderizzarlo solo se props.terms<\/code>contiene effettivamente qualcosa (richiesta asincrona, ricordi?).<\/p>\n
const { withSelect } = wp.data;\nconst { MenuGroup, MenuItem } = wp.components;\n\u00a0\nconst CategorySelect = (props) => {\n    const { terms } = props;\n    return(\n        <MenuGroup\n            className=\"awp-categoryselect\"\n        >\n            {terms && (terms.map((item) => (<MenuItem\n                        role=\"menuitemradio\"\n                    >\n                        {item.name}\n                    <\/MenuItem>\n                ))\n            )}\n        <\/MenuGroup>\n    );\n}\n\u00a0\nexport default withSelect((select, props) => {\n    ...<\/code><\/pre>\n
Ho assegnato al MenuGroup<\/code>componente una classe personalizzata, poich\u00e9 dovremo indirizzarlo con CSS. E ho impostato l’elica role<\/code>su MenuItem<\/code>” menuitemradio<\/code>‘ per assicurarmi che se ne possa scegliere solo uno alla volta. Per impostazione predefinita funzionano come caselle di controllo, consentendo cos\u00ec di scegliere pi\u00f9 elementi.<\/p>\n
Con il codice sopra il nostro blocco dovrebbe ora (dopo un piccolo secondo) visualizzare un bell’elenco di tutte le categorie nella tua istanza di WordPress.<\/p>\n
Potresti notare che il nostro blocco si espander\u00e0 per contenere tutte le categorie. Se ci troviamo in un’istanza WordPress con molte categorie, questo diventa rapidamente un problema. Vogliamo assicurarci che il selettore sia un contenitore di altezza massima che ottiene una barra di scorrimento verticale se sono presenti molte categorie. \u00c8 qui che entra in gioco il nostro file CSS.<\/p>\n
Nel nostro editor-block-slider.css<\/code>file aggiungi:<\/p>\n
.awp-categoryselect div {\n    max-height: 200px;\n    overflow: hidden scroll;\n    border: 1px solid #b3bcc0;\n}<\/code><\/pre>\n
Questo CSS prende di mira l’interno div<\/code>all’interno del nostro MenuGroup<\/code>e si assicura che non superi mai i 200px. Se il contenuto del MenuGroup<\/code>diventa pi\u00f9 grande (pi\u00f9 categorie) mostrer\u00e0 una barra di scorrimento verticale. Questo \u00e8 il minimo indispensabile di CSS per il nostro blocco, ma puoi ovviamente aggiungere pi\u00f9 CSS se lo desideri.<\/p>\n
L’ultima cosa che dobbiamo correggere nel nostro selettore di categoria \u00e8 la funzionalit\u00e0 per mostrare l’elemento attualmente selezionato e consentire all’utente di selezionare un termine dall’elenco. Per questo abbiamo bisogno di passare alcuni oggetti di scena a questo componente dal nostro blocco.<\/p>\n
In block-slider.js<\/code>abbiamo bisogno di passare il termine selezionato corrente (valore dell’attributo termId<\/code>) e una funzione per aggiornare il termine selezionato (setAttributes<\/code>) come prop al nostro componente selettore di categoria.<\/p>\n
...\n\u00a0\nconst BlockEdit = (props) => {\n    const { attributes, setAttributes } = props;\n\u00a0\n    const selectTerm = (termId) => {\n        setAttributes({ termId: termId });\n    }\n\u00a0\n    return(\n        ...\n            <Placeholder\n                label={__('Slider Category', 'awp')}\n            >\n                <CategorySelect \n                    selectedTermId={attributes.termId}\n                    selectTerm={selectTerm}\n                \/>\n            <\/Placeholder>\n        ...<\/code><\/pre>\n
Nel codice sopra alla riga #6<\/code>definiamo una funzione che aggiorna semplicemente l’attributo termId<\/code>. Passiamo questo nome di funzione come prop a CategorySelect<\/code>at line #17<\/code>. E alla riga #16<\/code>passiamo il valore corrente di termId<\/code>. Con possiamo aggiornare il nostro CategorySelect<\/code>componente per riflettere l’elemento scelto e consentire all’utente di scegliere effettivamente un termine.<\/p>\n
Di nuovo awp-category-picker.js<\/code>, aggiungiamo alcuni nuovi oggetti di scena su MenuItem<\/code>. Ritorniamo true<\/code>o false<\/code>per l’oggetto di scena indipendentemente dal isSelected<\/code>fatto che l’ID del termine corrente sia lo stesso di quello correntemente selezionato. Avviamo la selectTerm<\/code>funzione onClick<\/code>nell’evento, passando il termine ID. E per rendere visivo l’elemento selezionato, aggiungiamo condizionatamente un’icona prima di ogni elemento.<\/p>\n
...\nconst CategorySelect = (props) => {\n    const { terms, selectedTermId, selectTerm } = props;\n\u00a0\n    return(\n        <MenuGroup\n            className=\"awp-categoryselect\"\n        >\n            {terms && (terms.map((item) => (<MenuItem\n                        role=\"menuitemradio\"\n                        isSelected={item.id == selectedTermId}\n                        icon={item.id == selectedTermId? 'yes': 'no-alt'}\n                        onClick={() => selectTerm(item.id)}\n                    >\n                        {item.name}\n                    <\/MenuItem>\n                ))\n            )}\n        ...<\/code><\/pre>\n
Con questo il nostro selettore di categoria dovrebbe apparire cos\u00ec:<\/p>\n
\"Tutorial:<\/a><\/p>\n
L’elenco dovrebbe contrassegnare chiaramente il termine selezionato con un’icona di controllo e puoi invece fare clic su qualsiasi termine per selezionarlo.<\/p>\n
Questo era tutto per l’editor e la parte Javascript! Ci\u00f2 che resta ora \u00e8 il rendering del frontend, che faremo in PHP.<\/p>\n
Rendering del blocco dinamico in PHP<\/h2>\n
Prima di immergerci nella funzione di rendering, prendiamoci cura di alcune cose prima.<\/p>\n
Per prima cosa dobbiamo accodare lo script cycle2 nel frontend in modo che il nostro codice slider si trasformi effettivamente in uno slider. Lo facciamo con una semplice funzione agganciata a wp_enqueue_scripts<\/code>. Regola quanto segue se hai optato per un altro script di scorrimento.<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    wp_enqueue_script(\n        'cycle2-slider-js', \n        get_template_directory_uri(). '\/assets\/js\/jquery.cycle2.min.js', \n        ['jquery'], \n        '', \n        true\n    );\n});<\/code><\/pre>\n
In secondo luogo vogliamo tornare alla register_block_type()<\/code>chiamata di funzione. Quando gestiamo i blocchi dinamici dovremmo assolutamente aggiungere un nuovo argomento; attributes<\/code>. In questo argomento definiamo tutti gli attributi che abbiamo definito registerBlockType<\/code>in Javascript, inclusi i loro valori predefiniti. In caso contrario, non tutti gli attributi saranno disponibili nel nostro callback di rendering. Se un attributo \u00e8 stato lasciato invariato nell’editor dei blocchi, l’attributo e il suo valore non saranno disponibili nell’array degli attributi in PHP. Quindi ti consiglio di fare sempre attenzione ad aggiungere l’ attributes<\/code>array alla funzione PHP register_block_type()<\/code>quando lavori con blocchi dinamici. Per il nostro blocco sarebbe simile a questo:<\/p>\n
register_block_type('awp\/slider', [\n    'editor_script' => 'awp-block-slider-js',\n    'editor_style' => 'awp-block-slider-style',\n    'render_callback' => 'awp_gutenberg_slider_render',\n    'attributes' => [\n        'align' => ['type' => 'string', 'default' => 'center'],\n        'termId' => ['type' => 'number', 'default' => 0],\n        'numSlides' => ['type' => 'number', 'default' => 3]\n    ]\n]);<\/code><\/pre>\n
Ora torniamo alla nostra funzione di rendering di callback awp_gutenberg_slider_render()<\/code>. L’output dipende completamente da te, soprattutto se hai scelto di utilizzare un altro script di scorrimento. Quello che segue \u00e8 un semplice esempio.<\/p>\n
L’idea principale \u00e8 che controlliamo se \u00e8 stato scelto o meno un termine ($attributes['termId']<\/code>). Se \u00e8 popolato, creiamo un [WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)()<\/code>argomento con gli argomenti per il numero di post ($attributes['numSlides']<\/code>) e l’ID della categoria selezionata. Quindi si tratta di generare l’HTML corretto per far funzionare cycle2, scorrere i post e visualizzare le immagini in primo piano come diapositive.<\/p>\n
function awp_gutenberg_slider_render($attributes, $content) {\n    if (empty($attributes['termId'])) {\n        return '';\n    }\n\u00a0\n    $postQuery = new WP_Query([\n        'posts_per_page' => $attributes['numSlides'],\n        'cat' => $attributes['termId']\n    ]);\n\u00a0\n    if ($postQuery->have_posts()) {\n        $output = '<div class=\"wp-block-awp-slider align'. $attributes['align']. '\">';\n        $output .= '<div class=\"cycle-slideshow\" data-cycle-timeout=4000>';\n        while ($postQuery->have_posts()) {\n            $postQuery->the_post();\n\u00a0\n            if (has_post_thumbnail()) {\n                $img_url = get_the_post_thumbnail_url(get_the_ID(), 'loop-thumbnail');\n                $output .= '<img src=\"'. $img_url. '\" \/>';\n            }\n        }\n        wp_reset_postdata();\n        $output .= '<\/div>';\n        $output .= '<\/div>';\n\u00a0\n        return $output;\n\u00a0\n    } else {\n        return '';\n    }\n}<\/code><\/pre>\n
Nota come aggiungo la corretta classe di allineamento dei blocchi in linea #12<\/code>. Il risultato dovrebbe essere uno slider delle immagini in primo piano. Tieni presente che questo \u00e8 un esempio di base che presenta alcuni difetti. Ad esempio, recuperiamo gli ultimi tre post dalla categoria selezionata. Ma supponendo che uno di loro non abbia un’immagine in primo piano, il dispositivo di scorrimento mostrer\u00e0 solo due post.<\/p>\n
La cosa importante da ricordare \u00e8 restituire una stringa e non farla eco. Raccomando anche di utilizzare una sorta di funzionalit\u00e0 di creazione di modelli nel tema per rendering a blocchi dinamici come questi. Pu\u00f2 diventare rapidamente una riparazione disordinata e la creazione di HTML come una stringa.<\/p>\n
Parole finali<\/h2>\n
Questo tutorial ti ha mostrato come creare un blocco personalizzato WordPress Gutenberg dinamico in cui esegui il rendering del contenuto del frontend in PHP. E hai visto come utilizzare il componente di ordine superiore per withSelect<\/code>eseguire query per tutti i termini di categoria e un metodo per visualizzare un elenco selezionabile.<\/p>\n
Tutto il codice sopra \u00e8 scritto nel modo pi\u00f9 semplice possibile. Ho solo aggiunto il minimo assoluto di impostazioni. Il dispositivo di scorrimento funziona ma di solito ne vuoi di pi\u00f9, ad esempio creare collegamenti alle diapositive, mostrare i titoli dei post, le frecce del dispositivo di scorrimento o l’opzione per personalizzare la velocit\u00e0 o altre impostazioni del dispositivo di scorrimento. L’idea \u00e8 di mostrarti le basi e semplificare l’estensione, la costruzione e la modifica per soddisfare le esigenze del tuo progetto.<\/p>\n
Fonte di registrazione:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Un tutorial su come creare un blocco Gutenberg dinamico di WordPress con withSelect e rendering PHP. Il risultato finale \u00e8 uno slider.<\/p>\n","protected":false},"author":1,"featured_media":151907,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[896,896,720,939,939,1110,814,814,720,844,844,865,865],"tags":[1168],"class_list":["post-233884","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-sviluppatore","category-gutenberg-6","category-n-a","category-plugin-2","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233884","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=233884"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233884\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/151907"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=233884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=233884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=233884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}