{"id":233582,"date":"2023-02-17T10:22:00","date_gmt":"2023-02-17T07:22:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233582"},"modified":"2022-11-11T00:28:27","modified_gmt":"2022-11-10T21:28:27","slug":"crea-un-blocco-gutenberg-personalizzato-parte-7-crea-i-tuoi-componenti-personalizzati","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/crea-un-blocco-gutenberg-personalizzato-parte-7-crea-i-tuoi-componenti-personalizzati\/","title":{"rendered":"Crea un blocco Gutenberg personalizzato – Parte 7: crea i tuoi componenti personalizzati"},"content":{"rendered":"\n

Finora in questa serie di tutorial abbiamo scritto tutto il codice all’interno registerBlockType()<\/code>della edit<\/code>funzione di. \u00c8 del tutto possibile, e spesso consigliato, assegnare invece la modifica a un componente separato. In questo modo possiamo utilizzare funzionalit\u00e0 come lo stato dei componenti e i metodi del ciclo di vita. \u00c8 anche molto pi\u00f9 pulito, leggibile e fornisce codice riutilizzabile!<\/p>\n

Se non hai familiarit\u00e0 con la creazione di componenti React o quali sono i metodi di stato e ciclo di vita, ti consiglio di leggere prima la guida ufficiale di React su questo argomento<\/a>.<\/p>\n

Definizione di un componente di classe peredit<\/code><\/h2>\n

\u00c8 possibile definire un componente come una funzione o una classe. Con un componente di classe puoi utilizzare funzionalit\u00e0 come ad esempio i metodi dello stato e del ciclo di vita. Tuttavia, nelle versioni pi\u00f9 recenti di React (16+) \u00e8 possibile utilizzare gli hook React per simulare lo stato e i metodi del ciclo di vita all’interno dei componenti della funzione. Ma in questo tutorial ci concentreremo sulla creazione di un componente di classe. Ci\u00f2 che abbiamo creato finora in questa serie, "inline" in registerBlockType()<\/code>for edit<\/code>e save<\/code>, sono componenti di funzioni.<\/p>\n

Per definire un componente di classe estendiamo WordPress’ Component<\/code>(nel wp.element<\/code>pacchetto), esattamente come estenderesti un componente di classe a React.Component<\/code>.<\/p>\n

Tieni presente che il tuo componente di classe deve includere la funzione render()<\/code>. E a causa di come funziona Javascript, la tua classe deve essere definita prima della tua registerBlockType()<\/code>chiamata (scrivi prima il tuo componente di classe nel file e tienilo registerBlockType()<\/code>dopo di esso. Pi\u00f9 avanti in questo post impareremo come separare i componenti in file separati, esportare e includere loro).<\/p>\n

In breve, cos\u00ec:<\/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
Gli oggetti di scena da edit<\/code>vengono applicati automaticamente al nostro componente. Non dimenticare che un componente di classe \u00e8 necessario fare riferimento agli oggetti di scena con this.props<\/code>. \u00c8 comune nel core Gutenberg di WordPress utilizzare componenti separati per le edit<\/code>funzioni poich\u00e9 molto spesso contengono molto pi\u00f9 codice. La save<\/code>funzione pu\u00f2 spesso essere lasciata a registerBlockType()<\/code>meno che non contenga anche molto codice.<\/p>\n
In questo modo ora puoi scrivere il tuo componente proprio come faresti con React. \u00c8 possibile aggiungere funzioni, costruttori, metodi dello stato e del ciclo di vita.<\/p>\n
Questo \u00e8 il codice che siamo finiti nell’ultimo passaggio, convertito in un componente di 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 hai destrutturato attributes<\/code>e setAttributes<\/code>dagli oggetti di scena come abbiamo fatto noi, tutto ci\u00f2 che devi cambiare quando ti muovi in \u200b\u200bun componente di classe separato \u00e8 cambiare una riga; #9<\/code>da props<\/code>a this.props<\/code>. Tutto il codice funzioner\u00e0 come prima senza correggere nient’altro. Questo \u00e8 il bello della destrutturazione. Se non lo destrutturassi e ti riferissi ad esempio props.attributes<\/code>direttamente, avresti bisogno di aggiungere this.<\/code>davanti a tutti i riferimenti individuali a attributes<\/code>e setAttributes<\/code>ovunque.<\/p>\n
Iniziamo a fare le cose che ora possiamo fare con un componente di classe!<\/p>\n
Definizione di funzioni ethis<\/code><\/h2>\n
Certo, s\u00ec, puoi definire le funzioni dall’interno del edit<\/code>componente della funzione, prima di chiamare return<\/code>. Ma personalmente ho sempre preferito separare la funzionalit\u00e0 dalla logica. Trovo meglio separare le funzioni per la logica e altri scopi al di fuori della funzione responsabile del rendering dell’output. Alcune persone preferiscono anche chiamare funzioni negli eventi, invece di eseguirle in linea come abbiamo fatto finora (facendo setAttributes()<\/code>ad onChange<\/code>esempio).<\/p>\n
A partire da ora il nostro codice ha due cose che potrebbero essere utili per passare alle funzioni; InspectorControls<\/code>e BlockControls<\/code>. Questo accorcer\u00e0 return<\/code>notevolmente il nostro codice e render\u00e0 il nostro codice pi\u00f9 facile da leggere.<\/p>\n
Definiamo due funzioni che restituiscono l’intero InspectorControls<\/code>blocco e l’intero BlockControls<\/code>blocco. Usando le funzioni freccia (functionName =() => { ... }<\/code>) abbiamo pieno accesso this<\/code>per ottenere oggetti di scena. Se non hai eseguito l’ultima parte del passaggio 1, l’impostazione di Babel con le sintassi pi\u00f9 recenti, otterrai errori di compilazione. Dovresti ricorrere alla creazione di un costruttore e all’associazione this<\/code>per ogni funzione. Puoi leggere di pi\u00f9 sulla gestione this<\/code>all’inizio della pagina delle FAQ di React<\/a>.<\/p>\n
Ricorda anche che, poich\u00e9 ora siamo in una classe, devi chiamare tutte le sue funzioni con this.<\/code>davanti.<\/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
Nota che ho escluso il contenuto effettivo di InspectorControls<\/code>e BlockControls<\/code>per mantenere il codice pi\u00f9 breve. Niente nel loro codice deve cambiare.<\/p>\n
Stiamo anche utilizzando il fatto che l’ return<\/code>istruzione pu\u00f2 anche restituire un array. Tutto nell’array verr\u00e0 visualizzato come al solito nell’ordine in cui si trova. Questo rende facile per noi chiamare le funzioni direttamente all’interno return<\/code>dell’istruzione.<\/p>\n
Ovviamente puoi anche definire metodi del ciclo di vita, come componentDidMount()<\/code>. Non c’\u00e8 differenza nel fare questi nei componenti Gutenberg rispetto a React.<\/p>\n
Costruttore e stato di utilizzo<\/h2>\n
Proviamo a implementare lo stato nel nostro componente. Tieni presente che lo stato \u00e8 solo qualcosa memorizzato temporaneamente all’interno del nostro componente di classe e non viene salvato da nessuna parte, ad esempio negli attributi. \u00c8 solo per mantenere il controllo \u2013 beh \u2013 dello stato del tuo componente. Gli usi comuni dello stato sono l’utilizzo dello stato come flag di stato durante l’attesa del ritorno di una chiamata asincrona, il mantenimento del punteggio di qualcosa di temporaneo prima di salvarlo in un attributo o l’implementazione di "modalit\u00e0 di anteprima\/modifica" del blocco.<\/p>\n
Ti riferisci allo stato e allo stato di aggiornamento proprio come in React; con this.state<\/code>e setState()<\/code>. Normalmente inizializzeresti lo stato nel costruttore. E per quanto riguarda la definizione di un costruttore \u2013 \u00e8 esattamente come in React \u2013 non dimenticare di passare props<\/code>e fare super(props)<\/code>altrettanto. In breve:<\/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
Commutatore di modifica\/anteprima in modalit\u00e0 blocco<\/h3>\n
Usiamo ci\u00f2 che abbiamo imparato nel passaggio precedente in Barre degli strumenti per creare un "selettore di modalit\u00e0" per il nostro blocco. Implementiamo una barra degli strumenti con un pulsante che alterna lo stato tra anteprima e modalit\u00e0 di modifica. In modalit\u00e0 di modifica il blocco ottiene i due componenti RichText come al solito. Ma quando si passa alla modalit\u00e0 di anteprima, abbiamo disabilitato la modifica e il rendering dell’output del blocco.<\/p>\n
Per prima cosa creiamo un costruttore e impostiamo lo stato con una propriet\u00e0 booleana; editMode<\/code>che inizia come true<\/code>. \u00c8 super(props)<\/code>necessario quando si definisce un costruttore in un componente React basato sulla 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
Nella nostra funzione per l’output delle barre degli strumenti cambiamo il pulsante personalizzato che abbiamo creato in precedenza (che solo console.log<\/code>qualcosa quando si fa clic su di esso). Sul suo onClick<\/code>supporto chiamiamo setState()<\/code>e neghiamo il editMode<\/code>valore booleano corrente. Per rendere pi\u00f9 facile la comprensione per l’utente, passiamo anche all’icona e all’etichetta del pulsante. Ad esempio, quando la modalit\u00e0 di anteprima \u00e8 attiva, il pulsante mostra l’etichetta “Modifica" e un’icona a forma di matita che \u00e8 comunemente accettabile come modifica.<\/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 infine all’interno del metodo di rendering principale per il nostro blocco, possiamo fare quello che vogliamo. Questa parte dipende davvero da te: fai lo stesso che abbiamo fatto con l’etichetta e l’icona sul pulsante in alto. Aggiungiamo due blocchi di output, uno if this.state.editMode<\/code>is true<\/code>(che dovrebbero essere i soliti RichText<\/code>componenti modificabili) e un altro se \u00e8 false<\/code>.<\/p>\n
Ad esempio sto usando due componenti di WordPress da wp.components<\/code>; Placeholder<\/code>e Disabled<\/code>per la modalit\u00e0 di anteprima. Il Placeholder<\/code>componente mette il tuo blocco in una bella casella grigia che rende davvero chiaro che non \u00e8 modificabile. Tieni presente che viene fornito in allegato con lo stile, quindi se desideri un’anteprima perfetta, questo potrebbe non essere adatto a te. E avvolgo anche tutto all’interno di un Disabled<\/code>componente che rende tutto ci\u00f2 che contiene non modificabile, non selezionabile e non trascinabile. Questa \u00e8 la nostra nuova render()<\/code>funzione nel nostro 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
Sto anche usando un componente Fragment<\/code>( wp.element<\/code>pacchetto) che \u00e8 lo stesso di React.Fragment<\/code>. Se non hai familiarit\u00e0 con esso, avvolgiamo l’output al suo interno quando non vogliamo aggiungere ulteriori wrapper HTML non necessari. In React tutto deve avere un nodo radice. Quando la modalit\u00e0 di modifica \u00e8 attiva (line #13<\/code>) emettiamo due RichText<\/code>componenti uno dopo l’altro, quindi abbiamo bisogno di un rootnode attorno a loro.<\/p>\n
Quando la modalit\u00e0 di anteprima \u00e8 attiva (line #29<\/code>) emettiamo i valori dei due RichText<\/code>componenti. Come facciamo in save<\/code>, usiamo RichText.Content<\/code>per restituire i loro valori invece del piccolo editor.<\/p>\n
Il componente Placeholder<\/code>\u00e8 disponibile in stile flex e di default con la riga in direzione flex. Fornire true<\/code>l’elica isColumnLayout<\/code>lo cambia in colonna in direzione flessibile (quindi tutto si impila). Ma come accennato in precedenza, potresti voler saltare questo componente e piuttosto generare la tua anteprima esattamente come sarebbe nel frontend.<\/p>\n
E con ci\u00f2 abbiamo un interruttore di anteprima\/modifica in modalit\u00e0 blocco. Ovviamente puoi regolare il contenuto della "modalit\u00e0 di modifica" per mostrare ad esempio ingressi di controllo o altro.<\/p>\n<\/p>\n
Puoi creare tutti i componenti che desideri, non sei limitato ad averne solo uno per la edit<\/code>funzione! Crea semplicemente pi\u00f9 componenti e includili all’interno di una return<\/code>dichiarazione. Questa \u00e8 l’idea di React, in realt\u00e0: costruire pezzi di codice incapsulati, possibilmente ciascuno gestendo il proprio stato e combinandoli per creare interfacce utente complesse.<\/p>\n
Fonte di registrazione:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
In questa parte del nostro tutorial sul blocco di Gutenberg impareremo come spostare la funzione di modifica di registerBlockType in un componente separato basato sulla 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":[896,896,720,835,939,939,1110,804,804,835,720,844,844,865,865],"tags":[1168],"class_list":{"0":"post-233582","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-codice","9":"category-sviluppatore","10":"category-guida-per-principianti","11":"category-gutenberg-6","13":"category-n-a","14":"category-php-6","18":"category-tutorial","20":"category-wordpress-6","22":"tag-affiai-it"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233582","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=233582"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233582\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/152941"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=233582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=233582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=233582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}