I den h\u00e4r sista delen av Gutenbergs handledningsserie f\u00f6r anpassade block kommer vi att l\u00e4ra oss hur man anv\u00e4nder komponenter av h\u00f6gre ordning f\u00f6r att anv\u00e4nda WordPress-komponenter f\u00f6r att utf\u00f6ra fr\u00e5gor om inl\u00e4gg och annan grundl\u00e4ggande WordPress-information.<\/p>\n
I den f\u00f6reg\u00e5ende delen l\u00e4rde vi oss om dynamiska block och det slutade med att vi implementerade funktionalitet f\u00f6r att skriva in ett inl\u00e4ggs-ID och anv\u00e4nda PHP f\u00f6r att dynamiskt h\u00e4mta inl\u00e4gget och rendera det i frontend- och f\u00f6rhandsgranskningsl\u00e4ge. Att manuellt skriva in ett inl\u00e4ggs-ID \u00e4r inte intuitivt eller anv\u00e4ndarv\u00e4nligt. Det \u00e4r mycket b\u00e4ttre att ge anv\u00e4ndaren ett s\u00e4tt att v\u00e4lja eller s\u00f6ka efter inl\u00e4gg efter inl\u00e4ggstitel och klicka p\u00e5 n\u00e5got f\u00f6r att v\u00e4lja ett.<\/p>\n
En del av att l\u00f6sa detta \u00e4r ganska l\u00e4tt; hur du fr\u00e5gar efter inl\u00e4gg fr\u00e5n ditt blocks Den andra delen av att l\u00f6sa detta \u00e4r lite upp till dig; vilket \u00e4r hur man presenterar listan eller valet i v\u00e5rt block. Hur ska du presentera listan med inl\u00e4gg att v\u00e4lja mellan? I ett urval, lista med kryssrutor eller alternativknappar? Eller vill du erbjuda m\u00f6jligheten att s\u00f6ka, och d\u00e4rmed implementera en autokompletteringsl\u00f6sning eller en filterl\u00f6sning? Ska du till\u00e5ta att v\u00e4lja flera inl\u00e4gg eller bara ett? Vanligtvis kan du l\u00f6sa detta genom att anv\u00e4nda olika WordPress-komponenter, men du m\u00e5ste best\u00e4mma dig f\u00f6r vilken l\u00f6sning du vill implementera.<\/p>\n L\u00e5t oss f\u00f6rst l\u00e4ra oss lite om komponenter av h\u00f6gre ordning och WordPress-datamodulen, innan vi tittar p\u00e5 hur vi kan utf\u00f6ra postf\u00f6rfr\u00e5gningar i v\u00e5rt block.<\/p>\n N\u00e4r du arbetar med React beh\u00f6ver du ofta \u00f6verf\u00f6ra status till underordnade komponenter eller upp\u00e5t till en gemensam f\u00f6r\u00e4ldrakomponent s\u00e5 att alla andra underordnade komponenter har tillg\u00e5ng till dem. En l\u00f6sning f\u00f6r att l\u00f6sa problemet med att centralisera ett programs tillst\u00e5nd \u00e4r att anv\u00e4nda Redux<\/a>. Med Redux kan du bygga butiker \u2013 som \u00e4r objekt som h\u00e5ller en applikations status och information.<\/p>\n WordPress Datamodulen<\/a> \u00e4r ett nav av olika butiker och ger funktioner f\u00f6r att hantera data mellan olika moduler. Det \u00e4r byggt ovanp\u00e5 Redux \u2013 men misstag det inte som en Redux f\u00f6r WordPress, eftersom det finns en hel del skillnader. Du kan registrera dina egna butiker inom WordPress, eller kanske \u00e4nnu viktigare, komma \u00e5t WordPress registrerade butiker.<\/p>\n H\u00e4r \u00e4r en \u00f6versikt \u00f6ver de tillg\u00e4ngliga butikerna<\/a> i WordPress-datamodulen (kommer f\u00f6rmodligen att f\u00f6r\u00e4ndras med tiden). Alla WordPress-butiker finns i modulen Core Data<\/a>. Det finns till exempel butiker som inneh\u00e5ller redakt\u00f6rens data ( F\u00f6r att komma \u00e5t data fr\u00e5n butiker m\u00e5ste du anv\u00e4nda v\u00e4ljare. WordPress har en v\u00e4ljare i \u00d6ppna Gutenberg-redigeraren i Chrome och \u00f6ppna konsolens fels\u00f6kningsverktyg. Skriv in:<\/p>\n Och tryck p\u00e5 Enter. Du b\u00f6r f\u00e5 ett objekt som svar med alla v\u00e4ljare (funktioner) du kan anv\u00e4nda. Som exempel hittar du funktioner som Prova \u00e4ven andra butiker \u00e4n Detta returnerar all information om alla block f\u00f6r n\u00e4rvarande i ditt inl\u00e4gg. Du kan leka med detta i Chrome-konsolfels\u00f6kningen och f\u00f6rs\u00f6ka anropa n\u00e5gra funktioner f\u00f6r att se vad du f\u00e5r som svar. Vissa kr\u00e4ver parametrar och andra inte.<\/p>\n F\u00f6r att kunna anv\u00e4nda v\u00e4ljare och komma \u00e5t butiker m\u00e5ste vi anv\u00e4nda dem inom komponenter av h\u00f6gre ordning. Komponenter av h\u00f6gre ordning \u00e4r helt enkelt ett m\u00f6nster av att g\u00f6ra n\u00e5got i React. Vi skickar en komponent till en funktion (eller komponent) som kan l\u00e4gga till n\u00e5gra rekvisita, och returnerar sedan en ny komponent.<\/p>\n Inuti WordPress Datamodul hittar vi Detta har varit mycket teori, s\u00e5 l\u00e5t oss b\u00f6rja titta p\u00e5 lite kod och praktiska exempel.<\/p>\n F\u00f6r att sammanfatta ovanst\u00e5ende m\u00e5ste vi st\u00e4lla in den h\u00f6gre ordningens komponent Funktionen Om du f\u00f6ljde denna handledningsserie fr\u00e5n f\u00f6reg\u00e5ende del skulle du ha ett anpassat block som accepterar ett manuellt inskrivet inl\u00e4ggs-ID i en textinmatning. Blocket anv\u00e4nder PHP f\u00f6r att dynamiskt rendera inl\u00e4gget i frontend (och i f\u00f6rhandsgranskningsl\u00e4ge). L\u00e5t oss ta bort kravet p\u00e5 att manuellt skriva in post-ID och ers\u00e4tta det med n\u00e5got mer intuitivt. Som n\u00e4mnts tidigare m\u00e5ste du sj\u00e4lv best\u00e4mma hur du ska presentera listan med inl\u00e4gg och det b\u00e4sta s\u00e4ttet att l\u00e5ta anv\u00e4ndaren v\u00e4lja ett inl\u00e4gg. F\u00f6r att g\u00f6ra det enkelt l\u00e4gger vi till ett urval av alla inl\u00e4ggstitlar att v\u00e4lja mellan.<\/p>\n L\u00e5t oss b\u00f6rja koda in detta. F\u00f6rst m\u00e5ste vi destrukturera det vi beh\u00f6ver fr\u00e5n datapaketet;<\/p>\n Sedan anv\u00e4nder vi Med koden ovanf\u00f6r Vi kan nu g\u00e5 in p\u00e5 v\u00e5r komponent H\u00e5ll ett \u00f6ga p\u00e5 din konsolfels\u00f6kare. Du kanske m\u00e4rker att detta loggar tv\u00e5 g\u00e5nger; f\u00f6rst L\u00e5t oss f\u00f6rbereda oss f\u00f6r att fylla i ett urval med inl\u00e4ggen som returneras och f\u00f6r det kommer vi att anv\u00e4nda WordPress-komponenten Om du tittar p\u00e5 konsolens loggade (andra) svar kan du se att vi f\u00e5r en rad postobjekt. Varje inl\u00e4gg inneh\u00e5ller det mesta av inl\u00e4ggets information, men f\u00f6r valen i ett urval \u00e4r vi bara intresserade av inl\u00e4ggs-ID som v\u00e4rde och inl\u00e4ggstitel som etikett. S\u00e5 vi g\u00e5r igenom Observera att vi m\u00e5ste h\u00e4nvisa inl\u00e4ggets titel som Efter detta beh\u00f6ver vi helt enkelt l\u00e4gga till en Vi st\u00e4ller in Det var verkligen allt! Om du f\u00f6ljde koden fr\u00e5n f\u00f6reg\u00e5ende steg borde du redan ha kod som l\u00e4ser det sparade inl\u00e4ggets ID och visar det!<\/p>\n Sj\u00e4lvklart rekommenderar jag att du implementerar listan och valet av inl\u00e4gg annorlunda \u00e4n bara ett enkelt urval. Detta \u00e4r inte en snygg eller anv\u00e4ndarv\u00e4nlig l\u00f6sning, s\u00e4rskilt f\u00f6r webbplatser med m\u00e5nga inl\u00e4gg. P\u00e5 tal om antalet inl\u00e4gg, m\u00e4rkte du att v\u00e4ljaren getEntityRecords endast returnerar maximalt de 10 senaste inl\u00e4ggen? Det \u00e4r standardbeteendet f\u00f6r getEntityRecords, men vi kan \u00e4ndra post-fr\u00e5gan genom att skicka en tredje parameter.<\/p>\n Genom att skicka ett objekt som den tredje parametern till getEntityRecords kan vi \u00e4ndra postfr\u00e5gan. Obs: Detta \u00e4r inte en utt\u00f6mmande lista och kan \u00e4ven komma att \u00e4ndras!<\/p>\n L\u00e5t oss \u00e4ndra v\u00e5r fr\u00e5ga. Vi vill g\u00f6ra tv\u00e5 saker; f\u00f6rst vill vi h\u00e4mta alla inl\u00e4gg och inte bara de 10 senaste. F\u00f6r att g\u00f6ra detta tillhandah\u00e5ller vi Du kanske tror; v\u00e4nta, hur f\u00e5r vi det aktuella post-ID? Gl\u00f6m inte att vi inom den h\u00f6gre ordningens komponent L\u00e5t oss \u00e4ndra Ovanst\u00e5ende f\u00f6r\u00e4ndring \u00e4r ganska sj\u00e4lvf\u00f6rklarande. Vi genererar ett fr\u00e5geobjekt med egenskaperna Det h\u00e4r inl\u00e4gget avslutar guideserien Hur man skapar anpassade Gutenberg-block. Serien var t\u00e4nkt att g\u00e5 igenom grunderna f\u00f6r att utveckla dina egna anpassade block, vilket ger dig en utg\u00e5ngspunkt f\u00f6r att utveckla dina egna och mer komplexa block. H\u00e5ll definitivt utkik efter fler Gutenberg-relaterade handledningar h\u00e4r<\/a>. Kanske hittar du en handledning som mer specifikt f\u00f6rklarar n\u00e5got du ville g\u00f6ra sj\u00e4lv!<\/p>\nedit<\/code>funktion. Vi har n\u00e5gra alternativ f\u00f6r detta, och det b\u00e4sta alternativet \u00e4r att anv\u00e4nda n\u00e5gra av de s\u00e5 kallade h\u00f6gre ordningens komponenterna<\/a> fr\u00e5n WordPress. Du kan ocks\u00e5 anv\u00e4nda Javascript-webbl\u00e4sarmetoder f\u00f6r att utf\u00f6ra ett AJAX-anrop mot WordPress REST API med till exempel [fetch](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API)<\/code>eller axios. WordPress tillhandah\u00e5ller faktiskt sin egen version av fetch<\/code>: apiFetch()<\/code>.<\/p>\nWordPress Core Data-modul och komponenter av h\u00f6gre ordning<\/h2>\n
core\/editor<\/code>), notiser (core\/notices<\/code>), blockdata (core\/blocks<\/code>), visningsportinformation (core\/viewport<\/code>), och sist men inte minst sj\u00e4lva huvudarkivet \u2013 core<\/code>.<\/p>\nwp.data<\/code>paketet; [select](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#select)()<\/code>. Du kan ocks\u00e5 manipulera butikerna med dispatch<\/code>, men detta t\u00e4cks inte av denna handledningsserie. Du kan faktiskt v\u00e4ldigt enkelt prova v\u00e4ljaren sj\u00e4lv f\u00f6r att se vad som finns i WordPresss butiker.<\/p>\nTestar v\u00e4ljaren<\/h3>\n
wp.data.select('core')<\/code><\/pre>\ngetMedia<\/code>, getTaxonomy<\/code>, getAuthors<\/code>, och s\u00e5 vidare. Den vi kommer att anv\u00e4nda f\u00f6r att fr\u00e5ga inl\u00e4gg finns ocks\u00e5 d\u00e4r men har inte ett intuitivt namn; det heter getEntityRecords<\/code>. F\u00f6r n\u00e4rvarande \u00e4r n\u00e5gra av dessa funktioner dokumenterade<\/a>, men de flesta \u00e4r det tyv\u00e4rr inte.<\/p>\ncore<\/code>till exempel:<\/p>\nwp.data.select('core\/editor').getBlocks()<\/code><\/pre>\n[withSelect](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withSelect)<\/code>; en h\u00f6gre ordningskomponent som kan anv\u00e4ndas f\u00f6r att injicera rekvisita med hj\u00e4lp av registrerade v\u00e4ljare. Med andra ord; inom withSelect<\/code>vi har tillg\u00e5ng till v\u00e4ljaren select()<\/code>och kan anv\u00e4nda den f\u00f6r att utf\u00f6ra samtal. V\u00e4ljarresultaten kommer att vara rekvisita till komponenten vi skickar till withSelect<\/code>. Om du beh\u00f6ver kombinera flera komponenter av h\u00f6gre ordning erbjuder WordPress Data-modulen compose<\/code>funktionen, men detta ligger utanf\u00f6r omfattningen av denna handledning. Vi kommer bara att anv\u00e4nda en komponent av h\u00f6gre ordning; withSelect<\/code>.<\/p>\nH\u00e4mta inl\u00e4gg med hj\u00e4lp av withSelect, v\u00e4lj och f\u00e5 EntityRecords<\/h2>\n
withSelect<\/code>f\u00f6r v\u00e5rt block. Inuti detta kan vi anv\u00e4nda v\u00e4ljare f\u00f6r att komma \u00e5t WordPresss butiker, som kommer att vara rekvisita till komponenten vi skickar till withSelect<\/code>. Vi kommer att anv\u00e4nda core<\/code>butiken och v\u00e4ljaren getEntityRecords<\/code>f\u00f6r att fr\u00e5ga inl\u00e4gg.<\/p>\ngetEntityRecords<\/code>\u00e4r tyv\u00e4rr inte s\u00e4rskilt dokumenterad<\/a> f\u00f6r tillf\u00e4llet. Men jag har l\u00e4rt mig att vi kan skicka postType<\/code>som f\u00f6rsta parameter (entitetstyp) och sedan posttypen som andra parameter (t.ex. ’ post<\/code>’ eller ’ page<\/code>’). Den tredje parametern \u00e4r valfri och kan vara ett objekt med fr\u00e5geargument. Vi kommer att titta p\u00e5 den tredje parametern senare.<\/p>\nKodning av
withSelect<\/code><\/h3>\nconst { withSelect, select } = wp.data;<\/code><\/pre>\nwithSelect<\/code>i v\u00e5rt blocks edit<\/code>funktion och f\u00f6r vidare v\u00e5r redigeringskomponent; FirstBlockEdit<\/code>. Inuti withSelect<\/code>destrukturerar vi select<\/code>som parameter och anv\u00e4nder v\u00e4ljaren select()<\/code>f\u00f6r att fr\u00e5ga inl\u00e4gg med getEntityRecords<\/code>. Vi returnerar ett objekt med en egenskap som vi anropar posts<\/code>som inneh\u00e5ller resultatet av select()<\/code>anropet.<\/p>\n...\nedit: withSelect(select => {\n return {\n posts: select('core').getEntityRecords('postType', 'post')\n }\n})(FirstBlockEdit),\nsave:() => { return null }\n...<\/code><\/pre>\nFirstBlockEdit<\/code>kommer v\u00e5r komponent nu att ha en ny rekvisita; posts<\/code>. Vad vi \u00e4n returnerar inuti den withSelect<\/code>h\u00f6gre ordningens komponent kommer att vara tillg\u00e4nglig som rekvisita till den komponent vi skickar (i parentesen i slutet).<\/p>\nHantera inl\u00e4ggen fr\u00e5n v\u00e4ljaren<\/h3>\n
FirstBlockEdit<\/code>och ta en titt p\u00e5 den nya props.posts<\/code>. Eftersom v\u00e5r komponent \u00e4r en klassbaserad komponent m\u00e5ste vi referera till rekvisita med this<\/code>. L\u00e5t oss konsollogga ut det i render()<\/code>funktionen i FirstBlockEdit<\/code>:<\/p>\nrender() {\n const { attributes, setAttributes } = this.props;\n console.log(this.props.posts);\n ...\n}<\/code><\/pre>\nnull<\/code>och sedan n\u00e5gon g\u00e5ng senare loggar den en m\u00e4ngd inl\u00e4gg. Detta beror p\u00e5 att fr\u00e5ga efter inl\u00e4gg sker asynkront. V\u00e5r komponent renderas f\u00f6rst f\u00f6re svaret, d\u00e5 props.posts<\/code>\u00e4r null<\/code>. N\u00e4r vi f\u00e5r ett svar, renderas v\u00e5r komponent igen med rekvisitan ifylld. Du b\u00f6r alltid komma ih\u00e5g att ta emot denna lilla tidsperiod utan data i din kod.<\/p>\nL\u00e4gger till ett urval f\u00f6r att visa inl\u00e4ggen<\/h3>\n
SelectControl<\/code>. Komponenten SelectControl<\/code>accepterar en rad val d\u00e4r varje val \u00e4r ett objekt med egenskaperna value<\/code>och label<\/code>.<\/p>\nposts<\/code>propen och fyller i en arrayvariabel som vi skickar vidare till SelectControl<\/code>. Gl\u00f6m inte att hantera den lilla tidsramen d\u00e4r posts<\/code>rekvisitan \u00e4r null<\/code>. I s\u00e5 fall kommer vi att fylla i valmatrisen med ett alternativ som har etiketten "Loading…".<\/p>\nlet choices = [];\nif (this.props.posts) {\n choices.push({ value: 0, label: __('Select a post', 'awhitepixel') });\n this.props.posts.forEach(post => {\n choices.push({ value: post.id, label: post.title.rendered });\n });\n} else {\n choices.push({ value: 0, label: __('Loading...', 'awhitepixel') })\n}<\/code><\/pre>\npost.title.rendered<\/code>. Du kan leta sj\u00e4lv i den loggade konsolen posts<\/code>och se hur informationen \u00e4r uppbyggd f\u00f6r varje inl\u00e4gg.<\/p>\nSelectControl<\/code>var vi vill ha den. Det kan vara inuti sj\u00e4lva blocket (helst inom koden f\u00f6r redigeringsl\u00e4ge), eller inuti Inspector.<\/p>\n<SelectControl\n label={__('Selected Post', 'awhitepixel')}\n options={choices}\n value={attributes.selectedPostId}\n onChange={(newval) => setAttributes({ selectedPostId: parseInt(newval) })}\n\/><\/code><\/pre>\nSelectControl<\/code>att referera till attributet selectedPostId<\/code>som vi definierade i f\u00f6reg\u00e5ende steg. Vi st\u00e4ller in det sparade v\u00e4rdet i rekvisitan value<\/code>och hanterar att uppdatera det i onChange<\/code>prop \u2013 precis som vi har gjort flera g\u00e5nger tidigare. Vi s\u00e4kerst\u00e4ller att ett nummer lagras genom att anv\u00e4nda parseInt()<\/code>eftersom det selectedPostId<\/code>har typen number<\/code>. Och vi passerar den genererade upps\u00e4ttningen av val i rekvisitan options<\/code>.<\/p>\n\u00c4ndra fr\u00e5gan f\u00f6r getEntityRecords<\/h3>\n
getEntityRecords<\/code>Som tidigare n\u00e4mnts saknas tyv\u00e4rr dokumentationen f\u00f6r. Men genom att l\u00e4sa \u00f6ver hela webben har jag samlat en lista \u00f6ver m\u00f6jliga fr\u00e5geargument;<\/p>\n\n
per_page<\/code>: St\u00e4ll in ett antal f\u00f6r att begr\u00e4nsa antalet inl\u00e4gg. St\u00e4ll in p\u00e5 f\u00f6r -1<\/code>att h\u00e4mta maximalt 100. Standard 10<\/code>.<\/li>\nexclude<\/code>: Uteslut vissa inl\u00e4gg fr\u00e5n fr\u00e5gan. St\u00e4ll in ett inl\u00e4ggs-ID eller en array av nummer f\u00f6r flera inl\u00e4ggs-ID:n.<\/li>\nparent_exclude<\/code>: Uteslut vissa f\u00f6r\u00e4ldrainl\u00e4gg. St\u00e4ll in ett inl\u00e4ggs-ID eller en upps\u00e4ttning av flera inl\u00e4ggs-ID:n.<\/li>\norderby<\/code>: Best\u00e4m ordningen p\u00e5 inl\u00e4ggen. Troligtvis kan du anv\u00e4nda samma parametrar som i WP_Querys orderby<\/a>. Kan vara t.ex. ’ menu_order<\/code>’.<\/li>\norder<\/code>: Antingen 'asc'<\/code>eller ’ desc'<\/code>f\u00f6r stigande eller fallande ordning.<\/li>\nstatus<\/code>: Filtrera efter poststatus. Kan vara en str\u00e4ng, en str\u00e4ng med flera statusar separerade med kommatecken eller en matris med statusstr\u00e4ngar. Till exempel ['publish', 'draft']<\/code>f\u00f6r att fr\u00e5ga b\u00e5de publicerade och utkastade inl\u00e4gg.<\/li>\ncategories<\/code>: Filtrera inl\u00e4gg efter vissa kategorier. Ange ett kategori-ID eller en upps\u00e4ttning kategori-ID:n. Jag tror att detta bara fungerar f\u00f6r postkategorier och inte andra anpassade taxonomier.<\/li>\ntags<\/code>: Filtrera inl\u00e4gg efter vissa taggar. Ange ett tagg-ID eller en upps\u00e4ttning tagg-ID:n. Fungerar endast f\u00f6r posttaggar och inte andra anpassade taxonomier.<\/li>\nsearch<\/code>: L\u00e4gg till en s\u00f6kfr\u00e5ga (str\u00e4ng).<\/li>\n<\/ul>\n-1<\/code>till per_page<\/code>. F\u00f6r det andra vill vi utesluta det aktuella inl\u00e4gget fr\u00e5n inl\u00e4ggslistan genom att tillhandah\u00e5lla det aktuella inl\u00e4ggets ID till exclude<\/code>. Det \u00e4r ofta ingen mening att visa en inl\u00e4ggsgenv\u00e4g eller f\u00f6rhandsgranskning av sj\u00e4lva det aktuella inl\u00e4gget.<\/p>\nwithSelect<\/code>och med select<\/code>v\u00e4ljaren kan komma \u00e5t alla WordPresss k\u00e4rndatalager. Det aktuella inl\u00e4ggs-ID:t \u00e4r en naturlig sak att lagra i en av WordPress k\u00e4rnbutiker. Inuti core\/editor<\/code>hittar vi funktionen getCurrentPostId()<\/code>.<\/p>\nwithSelect<\/code>\u00e5terg\u00e5ngen till n\u00e5got s\u00e5 h\u00e4r:<\/p>\nedit: withSelect(select => {\n const currentPostId = select('core\/editor').getCurrentPostId();\n const query = {\n per_page: -1,\n exclude: currentPostId\n }\n return {\n posts: select('core').getEntityRecords('postType', 'post', query)\n }\n})(FirstBlockEdit),<\/code><\/pre>\nper_page<\/code>och exclude<\/code>och skickar detta som tredje parameter till getEntityRecords()<\/code>. Nu ska v\u00e5r props.posts<\/code>insida i FirstBlockEdit<\/code>komponenten lista ut alla inl\u00e4gg men utesluta det aktuella inl\u00e4gget.<\/p>\nSlutsats<\/h2>\n