Det h\u00e4r inl\u00e4gget \u00e4r en snabb introduktion till ett s\u00e4tt att h\u00e5lla din Gutenberg-kod upp till nuvarande standarder genom att anv\u00e4nda React-krokar. Vi f\u00e5r se hur detta \u00e4r f\u00f6rdelaktigt, varf\u00f6r vi b\u00f6r g\u00f6ra det och hur.<\/p>\n
Jag antar att du redan har viss erfarenhet av att arbeta med lite mer komplexa Gutenberg-block eller plugins som fr\u00e5gar efter inl\u00e4gg, eller h\u00e4mtar och uppdaterar postmeta. Och d\u00e4rmed arbetat med Tidigt under 2019 lanserade React hooks<\/a> (version 16.8) \u2013 som l\u00e5ter dig anv\u00e4nda tillst\u00e5nd utan att anv\u00e4nda en klass och f\u00f6rb\u00e4ttrar andra funktioner som ger mer l\u00e4sbar och \u00e5teranv\u00e4ndbar kod. Till exempel att ta bort behovet av att linda in din kod i komponenter av h\u00f6gre ordning f\u00f6r att komma \u00e5t register. Och sommaren 2019 f\u00f6ljde WordPress<\/a> och lanserade anpassade krokar: F\u00f6rdelarna med krokar \u00e4r m\u00e5nga. Det vanligaste exemplet \u00e4r att till\u00e5ta att anv\u00e4nda komponenttillst\u00e5nd utan att beh\u00f6va skriva en Javascript-klass ( L\u00e5t oss hoppa direkt in i n\u00e5gra exempel och se hur vi implementerar L\u00e5t oss b\u00f6rja med I demonstrationssyfte b\u00f6rjar jag med ett enkelt exempel. Anta att jag har en blockkomponent d\u00e4r jag har en postv\u00e4ljare n\u00e5gonstans. F\u00f6r att fylla i inl\u00e4ggsval m\u00e5ste jag komma \u00e5t registret ’ Om jag vill fr\u00e5ga inl\u00e4gg i ett block skulle jag beh\u00f6va sl\u00e5 in min komponent i Observera att det h\u00e4r kodexemplet inte \u00e4r komplett som ett riktigt funktionsblock eller JS-plugin, det har tagits bort f\u00f6r att bara visa k\u00e4rnkoncepten f\u00f6r Som du kan se i rad Som n\u00e4mnts tidigare fungerar den h\u00e4r metoden bra – och kommer att forts\u00e4tta att g\u00f6ra det. Men det finns flera nackdelar med detta. En \u00e4r att detta inte \u00e4r s\u00e4rskilt l\u00e4tt att f\u00f6rst\u00e5. Visst, detta var ett v\u00e4ldigt enkelt exempel. Vid f\u00f6rsta anblicken p\u00e5 sj\u00e4lva komponenten \u00e4r du inte s\u00e4ker p\u00e5 var rekvisitan L\u00e5t oss g\u00f6ra det b\u00e4ttre med krokar.<\/p>\n Att konvertera en Ovanst\u00e5ende kod ger exakt samma resultat som den med Viktig anm\u00e4rkning<\/strong>: L\u00e5t oss nu titta p\u00e5 \u00c5terigen, i demonstrationssyfte \u00e4r mina kodexempel inte kompletta funktionella kodbitar \u2013 de illustrerar bara delarna som r\u00f6r dessa m\u00f6nster. I det h\u00e4r exemplet antar jag att jag har ett textf\u00e4lt som visar en postmeta – och jag vill uppdatera postmetav\u00e4rdet vid f\u00f6r\u00e4ndring.<\/p>\n Eftersom Till exempel:<\/p>\n P\u00e5 raden \u00c5terigen kan vi se att koden inte \u00e4r lika enkel att f\u00f6rst\u00e5. Du m\u00e5ste veta att leta efter omslaget f\u00f6r att ta reda p\u00e5 vad rekvisitan " Att byta Till exempel:<\/p>\n P\u00e5 line \u00c4nd\u00e5 Chansen \u00e4r stor att om du anv\u00e4nder Om du beh\u00f6ver anv\u00e4nda flera komponenter av h\u00f6gre ordning lindade runt din komponent, skulle du sannolikt anv\u00e4nda \u00e4nnu en Gutenberg-funktion; L\u00e5t oss titta p\u00e5 ett mer komplett exempel p\u00e5 en komponent som h\u00e4mtar ett postmetav\u00e4rde i ett textf\u00e4lt och uppdaterar n\u00e4r dess v\u00e4rde \u00e4ndras. Vi b\u00f6rjar med hur vi skulle beh\u00f6va g\u00e5 tillv\u00e4ga med P\u00e5 line Som du kan se \u00e4r den n\u00f6dv\u00e4ndiga koden utanf\u00f6r v\u00e5r komponent l\u00e4ngre \u00e4n sj\u00e4lva komponenten. Jag vet inte med dig, men f\u00f6r mig k\u00e4nns det lite osammanh\u00e4ngande. Utvecklare kan b\u00f6rja l\u00e4sa den h\u00e4r koden fr\u00e5n toppen, inte se den nedre delen, och b\u00f6rja undra var L\u00e5t oss titta p\u00e5 hur vi skulle konvertera ovanst\u00e5ende exempel till krokar.<\/p>\n Hur vackert och l\u00e4sbart \u00e4r inte det?! Vi kan direkt i v\u00e5r komponent se var Observera att Jag hoppas att detta har varit informativt och till hj\u00e4lp f\u00f6r n\u00e5gon d\u00e4r ute. Jag \u00e4r fortfarande lite obekant med krokar, men eftersom jag ser f\u00f6rdelarna med att anv\u00e4nda dem v\u00e4nder jag inte tillbaka!<\/p>\n[withSelect](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#withSelect)<\/code>och\/eller [withDispatch](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#withDispatch)<\/code>. Det h\u00e4r \u00e4r komponenter av h\u00f6gre ordning i WordPress som l\u00e5ter dig komma \u00e5t WordPresss butiker f\u00f6r att h\u00e4mta eller pusha information som ligger lite utanf\u00f6r "normalt" block eller postredigering. Du har m\u00f6jligen ocks\u00e5 tvingats anv\u00e4nda compose<\/code>f\u00f6r att kombinera din komponent med flera komponenter av h\u00f6gre ordning. Om din kod anv\u00e4nder dessa m\u00f6nster, oroa dig inte \u2013 de fungerar perfekt och kommer att forts\u00e4tta att fungera! Men allt eftersom tekniken utvecklats kan vi g\u00f6ra det b\u00e4ttre.<\/p>\n[useDispatch](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useDispatch)<\/code>och [useSelect](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useSelect)<\/code>.<\/p>\nuseState<\/code>). Men enligt mig \u00e4r den st\u00f6rsta f\u00f6rdelen \u00e5teranv\u00e4ndbarhet. Genom att ta bort behovet av att anv\u00e4nda m\u00f6nster som renderingsrekvisita och komponenter av h\u00f6gre ordning kan komponenterna skrivas till mycket mer oberoende bitar. En annan f\u00f6rdel med krokar \u00e4r att det g\u00f6r din kod l\u00e4ttare att l\u00e4sa och f\u00f6rst\u00e5!<\/p>\nuseSelect<\/code>och useDispatch<\/code>krokar i v\u00e5r kod!<\/p>\nGenomf\u00f6rande
useSelect<\/code><\/h2>\nwithSelect<\/code>och dess motsvarande krok useSelect<\/code>. Dessa anv\u00e4nds f\u00f6r att f\u00e5 statligt h\u00e4rledda rekvisita fr\u00e5n registrerade v\u00e4ljare. Vanliga exempel \u00e4r att komma \u00e5t " core<\/code>’ eller ’ core\/editor<\/code>’ v\u00e4ljare f\u00f6r att utf\u00f6ra fr\u00e5gor om inl\u00e4gg (getEntityRecords<\/code>), komma \u00e5t inl\u00e4ggsmeta (getEditedPostAttribute<\/code>) eller helt enkelt f\u00e5 aktuell inl\u00e4ggstyp eller annan information.<\/p>\ncore<\/code>’ och GetEntityRecords()<\/code>ringa.<\/p>\nGammalt s\u00e4tt att anv\u00e4nda
withSelect<\/code><\/h3>\nwithSelect<\/code>. Detta g\u00f6rs vanligtvis i export<\/code>uttalandet.<\/p>\nwithSelect<\/code>. Om du letar efter praktiska kodexempel har jag andra artiklar som t\u00e4cker detta: t.ex. hur man implementerar block med en post select<\/a>, eller hur man l\u00e4gger till post meta till inspekt\u00f6ren<\/a>. De \u00e4r skrivna med withSelect<\/code>och withDispatch<\/code>, det g\u00f6r de ocks\u00e5, och kom sedan tillbaka hit f\u00f6r att l\u00e4ra dig hur du omvandlar dem till krokar.<\/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>lindar jag in min komponent med withSelect<\/code>. Inuti withSelect-funktionen kan jag komma \u00e5t den butik jag vill ha, och jag returnerar en inl\u00e4ggsfr\u00e5ga i rekvisiten " somePosts<\/code>". Denna rekvisita kommer d\u00e5 att finnas tillg\u00e4nglig i min AWP_Example_Plugin<\/code>komponent (som du kan se destrukturerar jag somePosts<\/code>fr\u00e5n rekvisitan p\u00e5 rad #3<\/code>).<\/p>\nsomePosts<\/code>kommer ifr\u00e5n eller vad den \u00e4r. Du m\u00e5ste veta f\u00f6r att leta efter exportf\u00f6rklaringen och se om det finns n\u00e5gra omslag. Det k\u00e4nns ocks\u00e5 lite osammanh\u00e4ngande. Du g\u00f6r en stor del av viktigt arbete utanf\u00f6r din komponent, f\u00f6r n\u00e5got som du faktiskt vill ha tillg\u00e4ngligt i din komponent.<\/p>\nKonverterar till
useSelect<\/code><\/h3>\nwithSelect<\/code>till useSelect<\/code>\u00e4r hur enkelt som helst. Det f\u00f6rsta steget \u00e4r att vi kan definiera variabeln somePosts<\/code>inuti v\u00e5r komponent, snarare \u00e4n p\u00e5 utsidan av export<\/code>p\u00e5st\u00e5endet. Det andra steget \u00e4r att flytta hela funktionen vi hade in withSelect<\/code>till useSelect<\/code>. Och det \u00e4r allt.<\/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>. Skillnaden \u00e4r att koden nu \u00e4r mycket mer begriplig! Vi kan nu mycket enkelt se att variabeln somePosts<\/code>lagrar resultatet av en inl\u00e4ggsfr\u00e5ga, precis inuti v\u00e5r komponent.<\/p>\nuseSelect<\/code>accepterar en andra parameter; en rad beroenden. Beroendena \u00e4r variabler som ser till att vi bara k\u00f6r useSelect<\/code>n\u00e4r ett av beroendena (variabelv\u00e4rdena) har \u00e4ndrats. Den h\u00e4r biten \u00e4r viktigare useDispatch<\/code>\u00e4n h\u00e4r, s\u00e5 jag kommer att f\u00f6rklara den h\u00e4r biten ytterligare i useDispatch<\/code>avsnittet nedan.<\/p>\nGenomf\u00f6rande
useDispatch<\/code><\/h2>\nwithDispatch<\/code>och dess motsvarande krok useDispatch<\/code>. De anv\u00e4nds f\u00f6r att skicka rekvisita till register. Till exempel att s\u00e4ga till Gutenberg att uppdatera ett inl\u00e4ggs meta via ’ core\/editor<\/code>’.<\/p>\nGammalt s\u00e4tt att anv\u00e4nda
withDispatch<\/code><\/h3>\nwithDispatch<\/code>det \u00e4r en komponent av h\u00f6gre ordning, skulle jag beh\u00f6va linda in min komponent i denna. Detta g\u00f6rs vanligtvis i export<\/code>uttalandet. F\u00f6r att f\u00e5 textf\u00e4ltet f\u00f6r v\u00e5r meta att fungera vi<\/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>lindar vi komponenten inuti withDispatch<\/code>, d\u00e4r vi returnerar en funktion " setPostMeta<\/code>" som skickar post-meta (f\u00f6r att uppdatera den). P\u00e5 line #6<\/code>destrukturerar vi rekvisitan s\u00e5 att vi kan anv\u00e4nda den i textf\u00e4ltets onChange<\/code>h\u00e4ndelse vid rad #13<\/code>. (Observera att exemplet ovan inte skulle fungera eftersom vi st\u00e4ller in v\u00e4rdet p\u00e5 textf\u00e4ltet till en tom str\u00e4ng. Detta \u00e4r bara f\u00f6r att visa hur vi skulle anv\u00e4nda dispatch).<\/p>\nsetPostMeta<\/code>" \u00e4r eller kommer ifr\u00e5n. L\u00e5t oss g\u00f6ra det b\u00e4ttre med krokar!<\/p>\nKonverterar till
useDispatch<\/code><\/h3>\nwithDispatch<\/code>till useDispatch<\/code>\u00e4r inte riktigt lika enkelt som det \u00e4r att konvertera withSelect<\/code>till useSelect<\/code>. Det \u00e4r \u00e4nd\u00e5 ganska l\u00e4tt. Det finns tv\u00e5 saker att t\u00e4nka p\u00e5. En \u00e4r som useDispatch<\/code>tar ett butiksnamn som f\u00f6rsta parameter. Vi skulle d\u00e5 komma \u00e5t butiken och anropa dess tillg\u00e4ngliga funktioner n\u00e4r vi anv\u00e4nder den (t.ex. i ett textf\u00e4lts onChange<\/code>h\u00e4ndelse). F\u00f6r det andra \u00e4r upps\u00e4ttningen av beroenden till den useDispatch<\/code>andra parametern viktigare \u00e4n med useSelect<\/code>. Du kan riskera att din kod hamnar i en forever loop om du inte hanterar beroenden korrekt. F\u00f6rst n\u00e4r beroendevariablerna \u00e4ndras kommer skriptet att k\u00f6ras igen 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>destrukturerar vi det vi beh\u00f6ver fr\u00e5n butiken ’ core\/editor<\/code>’. Vi \u00e4r bara intresserade av editPost<\/code>funktionen som vi kan anv\u00e4nda f\u00f6r att uppdatera postmeta. Som andra parameter useDispatch<\/code>tillhandah\u00e5ller vi beroenden. N\u00e4r det g\u00e4ller ett exempel p\u00e5 uppdatering av post-meta, skulle anv\u00e4ndning av v\u00e4rdet p\u00e5 post-meta (genom att anv\u00e4nda useSelect<\/code>) vara perfekt som beroende. I det h\u00e4r exemplet har jag precis satt den som en dummyvariabel. Titta l\u00e4ngre ner f\u00f6r ett mer komplett och realistiskt exempel. Och sedan vid raden #16<\/code>i textf\u00e4ltets onChange<\/code>h\u00e4ndelse ringer vi f\u00f6r editPost<\/code>att uppdatera metan. Observera skillnaden i denna linje med att anv\u00e4nda withDispatch<\/code>ovan! Eftersom vi anv\u00e4nder editPost<\/code>direkt ist\u00e4llet f\u00f6r att returnera en funktion f\u00f6r att uppdatera postmeta f\u00f6r oss (setPostMeta<\/code>), m\u00e5ste vi tillhandah\u00e5lla ett objekt medmeta<\/code>som nyckel och sedan ett objekt med postmeta vi vill uppdatera. Vi har typ delat upp withDispatch<\/code>koden i bitar.<\/p>\nuseDispatch<\/code>g\u00f6r anv\u00e4ndningen av koden mycket mer l\u00e4sbar och begriplig. Ingen mer kod lagt till utanf\u00f6r v\u00e5r komponent som vi beh\u00f6ver anv\u00e4nda inuti.<\/p>\nEtt mer komplett exempel och eliminerar behovet av
compose<\/code><\/h2>\nwithDispatch<\/code>, kommer du att beh\u00f6va withSelect<\/code>i den komponenten ocks\u00e5. I exemplen f\u00f6r konvertering till useDispatch<\/code>ovan uppdaterar vi ett postmetav\u00e4rde. Men f\u00f6r att textf\u00e4ltet ska fungera korrekt (och \u00e4ven visa det aktuella v\u00e4rdet) skulle vi ocks\u00e5 beh\u00f6va h\u00e4mta postmetav\u00e4rdet.<\/p>\n[compose](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/)<\/code>. Det \u00e4r en praktisk funktion att kombinera flera komponenter av h\u00f6gre ordning till en komponent av h\u00f6gre ordning som du kan sl\u00e5 om din komponent.<\/p>\nwithSelect<\/code>och withDispatch<\/code>(och d\u00e4rmed ocks\u00e5 compose<\/code>).<\/p>\nAnv\u00e4nder och
withSelect<\/code>_withDispatch``compose<\/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>komponerar vi withSelect<\/code>och withDispatch<\/code>lindar dem runt v\u00e5r komponent. postMeta<\/code>fr\u00e5n withSelect<\/code>och setPostMeta<\/code>fr\u00e5n withDispatch<\/code>finns nu i v\u00e5r komponent som rekvisita. Vi destrukturerar dem p\u00e5 linje #7<\/code>och anv\u00e4nder dem i #13<\/code>och #14<\/code>.<\/p>\npostMeta<\/code>och setPostMeta<\/code>kommer ifr\u00e5n \u2013 de verkar vara magiskt tillg\u00e4ngliga. F\u00f6r mig \u00e4r detta v\u00e4ldigt ointuitivt.<\/p>\nAnv\u00e4nda
useSelect<\/code>ochuseDispatch<\/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>den h\u00e4mtas ifr\u00e5n och hur vi f\u00e5r tillg\u00e5ng till editPost<\/code>. V\u00e5r komponent blev ocks\u00e5 mycket l\u00e4ttare att \u00e5teranv\u00e4nda.<\/p>\nuseDispatch<\/code>p\u00e5 rad #12<\/code>l\u00e4gger vi till postmeta som vi uppdaterar som beroende (postMeta.example_post_meta<\/code>). Om du skulle h\u00e5lla flera post-metavariabler uppdaterade i den h\u00e4r komponenten, m\u00e5ste du l\u00e4gga till var och en som ett beroende f\u00f6r att s\u00e4kerst\u00e4lla att utskicket k\u00f6rs (egentligen sparar post-meta) n\u00e4r v\u00e4rdet p\u00e5 en av dem \u00e4ndras.<\/p>\n