Questo post \u00e8 una rapida introduzione a un modo per mantenere il tuo codice Gutenberg conforme agli standard attuali utilizzando gli hook React. Vedremo come questo \u00e8 vantaggioso, perch\u00e9 dovremmo farlo e come.<\/p>\n
Presumo che tu abbia gi\u00e0 una certa esperienza di lavoro con blocchi o plug-in Gutenberg un po’ pi\u00f9 complessi che interrogano i post o recuperano e aggiornano i meta dei post. E quindi ho lavorato con All’inizio del 2019, React ha lanciato hook<\/a> (versione 16.8), che ti consentono di utilizzare lo stato senza utilizzare una classe e migliorare altre funzionalit\u00e0 che offrono codice pi\u00f9 leggibile e riutilizzabile. Ad esempio, rimuovendo la necessit\u00e0 di avvolgere il codice in componenti di ordine superiore per accedere ai registri. E nell’estate 2019 WordPress \u00e8 seguito<\/a>, lanciando hook personalizzati: I vantaggi dei ganci sono molti. L’esempio pi\u00f9 comune consente di utilizzare lo stato del componente senza dover scrivere una classe Javascript ( Passiamo subito ad alcuni esempi e vediamo come implementare Iniziamo con A scopo dimostrativo inizier\u00f2 con un semplice esempio. Supponiamo di avere un componente di blocco in cui ho un selettore di post da qualche parte. Per popolare le scelte dei post devo accedere al registro ‘ Se voglio interrogare i post in un blocco, dovrei avvolgere il mio componente in Tieni presente che questo esempio di codice non \u00e8 completo come un vero blocco funzionale o plug-in JS, \u00e8 stato eliminato per mostrare solo i concetti fondamentali di Come puoi vedere in linea Come accennato in precedenza, questo metodo funziona perfettamente e continuer\u00e0 a farlo. Ma ci sono diversi aspetti negativi di questo. Uno \u00e8 che questo non \u00e8 molto facile da capire. Certo, questo era un esempio molto semplice. A prima vista al componente stesso non sei sicuro da dove Facciamolo meglio usando i ganci.<\/p>\n Convertire un Il codice sopra fornisce lo stesso identico risultato di quello con Nota importante<\/strong>: Ora diamo un’occhiata a Ancora una volta, a scopo dimostrativo, i miei esempi di codice non sono parti di codice funzionali complete: illustrano solo le parti relative a questi modelli. In questo esempio presumo di avere un campo di testo che mostra un meta post e desidero aggiornare il valore meta post in caso di modifica.<\/p>\n Poich\u00e9 Per esempio:<\/p>\n A riga Ancora una volta possiamo vedere che il codice non \u00e8 cos\u00ec semplice da capire. Dovresti sapere cercare l’involucro per capire qual Cambiare Per esempio:<\/p>\n In linea Tuttavia, l’utilizzo \u00c8 probabile che se stai usando Se devi utilizzare pi\u00f9 componenti di ordine superiore avvolti attorno al tuo componente, molto probabilmente utilizzerai un’altra funzione di Gutenberg; Diamo un’occhiata a un esempio pi\u00f9 completo di un componente che recupera un meta valore di post in un campo di testo e si aggiorna quando il suo valore viene modificato. Iniziamo con il modo in cui dovremmo farlo usando In linea Come puoi vedere, il codice necessario al di fuori del nostro componente \u00e8 pi\u00f9 lungo del componente stesso. Non so voi, ma per me sembra un po’ sconnesso. Gli sviluppatori possono iniziare a leggere questo codice dall’alto, senza vedere la parte inferiore, e iniziare a chiedersi da dove Diamo un’occhiata a come convertire l’esempio sopra in hook.<\/p>\n Quanto \u00e8 bello e leggibile?! Possiamo vedere immediatamente nel nostro componente Nota che in Spero che questo sia stato informativo e utile per qualcuno l\u00e0 fuori. Non ho ancora familiarit\u00e0 con i ganci, ma vedendo i vantaggi di usarli non torner\u00f2 indietro!<\/p>\n[withSelect](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#withSelect)<\/code>e\/o [withDispatch](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#withDispatch)<\/code>. Si tratta di componenti di ordine superiore in WordPress che ti consentono di accedere ai negozi di WordPress per recuperare o inviare informazioni che sono un po’ al di fuori del "normale" blocco o modifica dei post. Probabilmente sei stato anche costretto a utilizzare compose<\/code>per combinare i tuoi componente con pi\u00f9 componenti di ordine superiore. Se il tuo codice utilizza questi modelli, non preoccuparti: funzionano perfettamente e continueranno a funzionare! Ma con l’avanzare della tecnologia, possiamo fare di meglio.<\/p>\n[useDispatch](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useDispatch)<\/code>e [useSelect](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useSelect)<\/code>.<\/p>\nuseState<\/code>). Ma secondo me il vantaggio pi\u00f9 grande \u00e8 la riutilizzabilit\u00e0. Eliminando la necessit\u00e0 di utilizzare modelli come oggetti di scena e componenti di ordine superiore, i componenti possono essere scritti in parti molto pi\u00f9 indipendenti. Un altro vantaggio degli hook \u00e8 che semplifica la lettura e la comprensione del codice!<\/p>\nuseSelect<\/code>e useDispatch<\/code>hook nel nostro codice!<\/p>\nImplementazione
useSelect<\/code><\/h2>\nwithSelect<\/code>e il relativo hook useSelect<\/code>. Questi sono usati per ottenere oggetti di scena derivati \u200b\u200b\u200b\u200bdallo stato da selettori registrati. Esempi comuni sono l’accesso ai selettori ‘ core<\/code>‘ o ‘ core\/editor<\/code>‘ per eseguire query per i post (getEntityRecords<\/code>), accedere ai meta dei post (getEditedPostAttribute<\/code>) o semplicemente per ottenere il tipo di post corrente o altre informazioni.<\/p>\ncore<\/code>‘ ed eseguire una GetEntityRecords()<\/code>chiamata.<\/p>\nUsando alla vecchia maniera
withSelect<\/code><\/h3>\nwithSelect<\/code>. Questo \u00e8 comunemente fatto nella export<\/code>dichiarazione.<\/p>\nwithSelect<\/code>. Se stai cercando esempi di codice pratici, ho altri articoli che trattano questo: ad esempio come implementare blocchi con un post select<\/a> o come aggiungere post meta all’ispettore<\/a>. Quelli sono scritti con withSelect<\/code>e withDispatch<\/code>, cos\u00ec fanno quelli, e poi torna qui per imparare a trasformarli in hook.<\/p>\nconst { withSelect } = wp.data;\n\u00a0\nconst AWP_Example_Plugin = ({ somePosts }) => {\n console.log(\"Posts from withSelect = \", somePosts);\n return(\n <div>\n ...\n <\/div>\n );\n}\n\u00a0\nexport default withSelect( (select) => { \n return {\n somePosts: select( 'core' ).getEntityRecords( 'postType', 'page' ),\n };\n}) (AWP_Example_Plugin );<\/code><\/pre>\n#12-16<\/code>avvolgo il mio componente con withSelect<\/code>. All’interno della funzione withSelect posso accedere al negozio che voglio, e restituisco una query post nel prop ” somePosts<\/code>“. Questo prop sar\u00e0 quindi disponibile all’interno del mio AWP_Example_Plugin<\/code>componente (come puoi vedere destrutto somePosts<\/code>dagli oggetti di scena in linea #3<\/code>).<\/p>\nsomePosts<\/code>provenga l’elica o cosa sia. Dovresti sapere per cercare l’istruzione di esportazione e vedere se ci sono dei wrapper. Sembra anche un po’ sconnesso. Fai una buona parte del lavoro importante al di fuori del tuo componente, per qualcosa che desideri effettivamente disponibile all’interno del tuo componente.<\/p>\nConversione in
useSelect<\/code><\/h3>\nwithSelect<\/code>in useSelect<\/code>\u00e8 semplicissimo. Il primo passo \u00e8 che possiamo definire la variabile somePosts<\/code>all’interno del nostro componente, piuttosto che all’esterno export<\/code>dall’istruzione. Il secondo passaggio \u00e8 spostare l’intera funzione che avevamo withSelect<\/code>in useSelect<\/code>. E questo \u00e8 tutto.<\/p>\nconst { useSelect } = wp.data;\n\u00a0\nconst AWP_Example_Plugin =() => {\n const { somePosts } = useSelect( (select) => { \n return {\n somePosts: select( 'core' ).getEntityRecords( 'postType', 'page' ),\n };\n } );\n console.log(\"Posts from useSelect = \", somePosts);\n return(\n <div>\n ...\n <\/div>\n );\n}\n\u00a0\nexport default AWP_Example_Plugin;<\/code><\/pre>\nwithSelect<\/code>. La differenza \u00e8 che ora il codice \u00e8 molto pi\u00f9 comprensibile! Ora possiamo vedere molto facilmente che la variabile somePosts<\/code>sta memorizzando il risultato di una query post, proprio all’interno del nostro componente.<\/p>\nuseSelect<\/code>accetta un secondo parametro; una serie di dipendenze. Le dipendenze sono variabili che assicurano l’esecuzione solo useSelect<\/code>quando una delle dipendenze (valori di variabili) \u00e8 cambiata. Questo bit \u00e8 pi\u00f9 importante useDispatch<\/code>qui che qui, quindi lo spiegher\u00f2 ulteriormente nella useDispatch<\/code>sezione seguente.<\/p>\nImplementazione
useDispatch<\/code><\/h2>\nwithDispatch<\/code>e al suo hook corrispondente useDispatch<\/code>. Sono usati per inviare oggetti di scena ai registri. Ad esempio, dicendo a Gutenberg di aggiornare un meta post tramite ‘ core\/editor<\/code>‘.<\/p>\nUsando alla vecchia maniera
withDispatch<\/code><\/h3>\nwithDispatch<\/code>\u00e8 un componente di ordine superiore, avrei bisogno di avvolgere il mio componente all’interno di questo. Questo \u00e8 comunemente fatto nella export<\/code>dichiarazione. Per creare il campo di testo per il nostro meta lavoro noi<\/p>\nconst { withDispatch } = wp.data;\nconst { __ } = wp.i18n;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\nconst AWP_Example_Plugin = ({ setPostMeta }) => { \n return(\n <PluginDocumentSettingPanel title={ __( 'withDispatch Example', 'txtdomain') }>\n <PanelRow>\n <TextControl\n label={ __( 'Example post meta', 'txtdomain') }\n value=\"\"\n onChange={ (value) => setPostMeta( { example_post_meta: value }) }\n \/>\n <\/PanelRow>\n <\/PluginDocumentSettingPanel>\n );\n}\n\u00a0\nexport default withDispatch( (dispatch) => {\n return {\n setPostMeta( newMeta) {\n dispatch( 'core\/editor' ).editPost( { meta: newMeta } );\n }\n };\n} )( AWP_Example_Plugin );<\/code><\/pre>\n#20-26<\/code>avvolgiamo il componente all’interno withDispatch<\/code>, in cui restituiamo una funzione " setPostMeta<\/code>" che invia post meta (per aggiornarlo). At line #6<\/code>destrutturiamo il prop in modo da poterlo utilizzare nell’evento del campo di testo onChange<\/code>at line #13<\/code>. (Si noti che l’esempio sopra non sarebbe funzionale perch\u00e9 impostiamo il valore del campo di testo su una stringa vuota. Questo \u00e8 solo per dimostrare come utilizzeremmo dispatch).<\/p>\nsetPostMeta<\/code>\u00e8 o da dove viene l’elica " ". Facciamolo meglio usando i ganci!<\/p>\nConversione in
useDispatch<\/code><\/h3>\nwithDispatch<\/code>in useDispatch<\/code>non \u00e8 cos\u00ec semplice come convertirsi withSelect<\/code>in useSelect<\/code>. Comunque \u00e8 ancora abbastanza facile. Ci sono due cose da tenere a mente. Uno \u00e8 che useDispatch<\/code>prende il nome di un negozio come primo parametro. Quindi accediamo al negozio e chiamiamo le sue funzioni disponibili quando lo utilizziamo (ad esempio in un onChange<\/code>evento di un campo di testo). In secondo luogo, l’array di dipendenze al useDispatch<\/code>secondo parametro di ‘s \u00e8 pi\u00f9 importante di useSelect<\/code>. Puoi rischiare che il tuo codice finisca in un ciclo infinito se non gestisci correttamente le dipendenze. Solo quando le variabili di dipendenza vengono modificate, lo script verr\u00e0 eseguito nuovamente useDispatch<\/code>.<\/p>\nconst { useDispatch } = wp.data;\nconst { __ } = wp.i18n;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\nconst AWP_Example_Plugin =() => { \n const tmpMetaValue = \"\";\n const { editPost } = useDispatch( 'core\/editor', [ tmpMetaValue ] );\n\u00a0\n return(\n <PluginDocumentSettingPanel title={ __( 'useDispatch Example', 'txtdomain') }>\n <PanelRow>\n <TextControl\n label={ __( 'Example post meta', 'txtdomain') }\n value={ tmpMetaValue }\n onChange={ (value) => editPost( { meta: { example_post_meta: value } }) }\n \/>\n <\/PanelRow>\n <\/PluginDocumentSettingPanel>\n );\n}\n\u00a0\nexport default AWP_Example_Plugin;<\/code><\/pre>\n#8<\/code>destrutturiamo ci\u00f2 di cui abbiamo bisogno dal negozio’ core\/editor<\/code>‘. Siamo interessati solo alla editPost<\/code>funzione che possiamo utilizzare per aggiornare il meta dei post. Come secondo parametro useDispatch<\/code>forniamo le dipendenze. Come per un esempio di aggiornamento del meta meta, usare il valore del meta post (usando useSelect<\/code>) sarebbe perfetto come dipendenza. In questo esempio l’ho appena impostato come variabile fittizia. Guarda pi\u00f9 in basso per un esempio pi\u00f9 completo e realistico. E poi alla riga dell’evento #16<\/code>del campo di testo onChange<\/code>, chiamiamo editPost<\/code>per aggiornare il meta. Nota la differenza in questa riga con l’utilizzo withDispatch<\/code>sopra! Poich\u00e9 utilizziamo editPost<\/code>direttamente invece di restituire una funzione per aggiornare post meta per noi (setPostMeta<\/code>), dobbiamo fornire un oggetto conmeta<\/code>come chiave e quindi un oggetto con il meta meta che vogliamo aggiornare. Abbiamo un po’ diviso il withDispatch<\/code>codice in pezzi.<\/p>\nuseDispatch<\/code>rende il codice molto pi\u00f9 leggibile e comprensibile. Niente pi\u00f9 codice aggiunto al di fuori del nostro componente che dobbiamo usare all’interno.<\/p>\nUn esempio pi\u00f9 completo ed eliminando la necessit\u00e0 di
compose<\/code><\/h2>\nwithDispatch<\/code>, avrai bisogno withSelect<\/code>anche di quel componente. Negli esempi per la conversione in useDispatch<\/code>sopra stiamo aggiornando un valore meta post. Ma affinch\u00e9 il campo di testo funzioni correttamente (e mostri anche il valore corrente), dovremmo anche recuperare il meta valore post.<\/p>\n[compose](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/)<\/code>. \u00c8 una funzione utile per combinare pi\u00f9 componenti di ordine superiore in un componente di ordine superiore su cui puoi avvolgere il tuo componente.<\/p>\nwithSelect<\/code>e withDispatch<\/code>(e quindi anche compose<\/code>).<\/p>\nUsando
withSelect<\/code>, withDispatch<\/code>ecompose<\/code><\/h3>\nconst { __ } = wp.i18n;\nconst { compose } = wp.compose;\nconst { withSelect, withDispatch } = wp.data;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\n\u00a0\nconst AWP_Example_Plugin = ({ postMeta, setPostMeta }) => {\n return(\n <PluginDocumentSettingPanel title={ __( 'withSelect and withDispatch Example', 'txtdomain') }>\n <PanelRow>\n <TextControl\n label={ __( 'Example post meta', 'txtdomain') }\n value={ postMeta.example_post_meta }\n onChange={ (value) => setPostMeta( { example_post_meta: value }) }\n \/>\n <\/PanelRow>\n <\/PluginDocumentSettingPanel>\n );\n}\n\u00a0\nexport default compose( [\n withSelect( (select) => { \n return {\n postMeta: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n };\n } ),\n withDispatch( (dispatch) => {\n return {\n setPostMeta( newMeta) {\n dispatch( 'core\/editor' ).editPost( { meta: newMeta } );\n }\n };\n }) ] )( AWP_Example_Plugin );<\/code><\/pre>\n#21-34<\/code>li componiamo withSelect<\/code>e withDispatch<\/code>li avvolgiamo attorno al nostro componente. postMeta<\/code>from withSelect<\/code>e setPostMeta<\/code>from withDispatch<\/code>sono ora disponibili nel nostro componente come oggetti di scena. Li destrutturiamo in linea #7<\/code>e li usiamo in #13<\/code>e #14<\/code>.<\/p>\npostMeta<\/code>e da dove setPostMeta<\/code>provengono: sembrano essere magicamente disponibili. Per me questo \u00e8 molto poco intuitivo.<\/p>\nUsando
useSelect<\/code>euseDispatch<\/code><\/h3>\nconst { __ } = wp.i18n;\nconst { useSelect, useDispatch } = wp.data;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\n\u00a0\nconst AWP_Example_Plugin = () => {\n const { postMeta } = useSelect( (select) => { \n return {\n postMeta: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n };\n } );\n const { editPost } = useDispatch( 'core\/editor', [ postMeta.example_post_meta ] );\n\u00a0\n return(\n <PluginDocumentSettingPanel title={ __( 'useSelect and useDispatch Example', 'txtdomain') }>\n <PanelRow>\n <TextControl\n label={ __( 'Example post meta', 'txtdomain') }\n value={ postMeta.example_post_meta }\n onChange={ (value) => editPost( { meta: { example_post_meta: value } }) }\n \/>\n <\/PanelRow>\n <\/PluginDocumentSettingPanel>\n );\n}\n\u00a0\nexport default AWP_Example_Plugin;<\/code><\/pre>\npostMeta<\/code>da dove viene recuperato e come accediamo a editPost<\/code>. Il nostro componente \u00e8 diventato anche molto pi\u00f9 facile da riutilizzare.<\/p>\nuseDispatch<\/code>linea #12<\/code>aggiungiamo il postmeta che stiamo aggiornando come dipendenza (postMeta.example_post_meta<\/code>). Se dovessi mantenere aggiornate pi\u00f9 meta variabili post in questo componente, dovresti aggiungerle ciascuna come dipendenza per assicurarti che la spedizione venga eseguita (salvando effettivamente la meta meta) quando il valore di una di esse cambia.<\/p>\n