{"id":233852,"date":"2023-02-24T14:13:00","date_gmt":"2023-02-24T11:13:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233852"},"modified":"2022-11-11T12:47:51","modified_gmt":"2022-11-11T09:47:51","slug":"skapa-anpassat-gutenberg-block-del-3-rekvisita-och-wordpress-komponenter","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/skapa-anpassat-gutenberg-block-del-3-rekvisita-och-wordpress-komponenter\/","title":{"rendered":"Skapa anpassat Gutenberg-block – Del 3: Rekvisita och WordPress-komponenter"},"content":{"rendered":"\n

Det f\u00f6reg\u00e5ende steget<\/a> i denna handledningsserie gick igenom hur man registrerar ett anpassat block, b\u00e5de i Javascript och i PHP. I det h\u00e4r steget kommer vi att l\u00e4ra oss hur man anv\u00e4nder WordPress komponenter f\u00f6r att l\u00e4gga till olika typer av f\u00e4lt och inst\u00e4llningar.<\/p>\n

F\u00f6r att kunna anv\u00e4nda WordPress komponenter i v\u00e5rt block beh\u00f6ver vi f\u00f6rst veta om rekvisita.<\/p>\n

Rekvisita<\/h2>\n

Props \u00e4r en viktig funktion i React och \u00e4r i grunden ett s\u00e4tt att \u00f6verf\u00f6ra variabler eller funktioner till andra komponenter. Om du inte \u00e4r bekant med React-rekvisita kan du l\u00e4sa Reacts officiella handledning<\/a> om detta.<\/p>\n

WordPress tillhandah\u00e5ller n\u00e5gra rekvisita f\u00f6r edit<\/code>och save<\/code>funktioner i registerBlockType()<\/code>. Inuti dessa rekvisita f\u00e5r vi tillg\u00e5ng till kritiska saker, s\u00e5som attribut och en metod f\u00f6r att uppdatera v\u00e5ra attribut. Vi kommer att g\u00e5 igenom attribut i detalj i n\u00e4sta steg<\/a>! <\/p>\n

Hittills i v\u00e5rt block har vi skrivit funktionen f\u00f6r edit<\/code>och save<\/code>s\u00e5 h\u00e4r:<\/p>\n

edit:() => { \n    return <div>:)<\/div> \n},<\/code><\/pre>\n
Du b\u00f6r v\u00e4nja dig vid att l\u00e4gga till parametern props<\/code>till b\u00e5de edit<\/code>och save<\/code>, som s\u00e5:<\/p>\n
edit: (props) => { \n    return <div>:)<\/div> \n},<\/code><\/pre>\n
Nu har du full tillg\u00e5ng till variabeln props<\/code>och allt den inneh\u00e5ller inifr\u00e5n edit<\/code>och save<\/code>. Om du \u00e4r nyfiken kan du l\u00e4gga till ett console.log(props);<\/code>i edit<\/code>funktionen f\u00f6re return<\/code>p\u00e5st\u00e5endet. Du b\u00f6r se vilka rekvisita som finns tillg\u00e4ngliga i konsolfels\u00f6karen.<\/p>\n
Anv\u00e4nder WordPress-komponenter<\/h2>\n
Som tidigare n\u00e4mnts har vi tillg\u00e5ng till ett enormt bibliotek av komponenter och anv\u00e4ndbara funktioner i det globala paketet wp<\/code>. Du hittar f\u00e4rdiga komponenter f\u00f6r alla typer av ing\u00e5ngsrelaterade komponenter du kan t\u00e4nka dig. Exempel inkluderar textinmatning, rik textinmatning, rullgardinsmenyer, v\u00e4xlar, kryssrutor, knappar i olika stilar, mediauppladdningsverktyg och f\u00e4rgv\u00e4ljare. Det finns \u00e4ven funktioner och komponenter f\u00f6r mer avancerad funktionalitet. Som att fr\u00e5ga WordPress efter inneh\u00e5ll (inl\u00e4gg, kategorier, etc) med antingen inbyggda funktioner eller h\u00e4mtning med REST API.<\/p>\n
Det \u00e4r b\u00e5de enklare och rekommenderat att anv\u00e4nda WordPress UI-komponenter. Detta f\u00f6r att se till att designen och funktionaliteten \u00e4r s\u00e5 str\u00f6mlinjeformad som m\u00f6jligt f\u00f6r att inte f\u00f6rvirra eller irritera anv\u00e4ndarna.<\/p>\n
Men i skrivande stund \u00e4r dokumentationen f\u00f6r Gutenberg tyv\u00e4rr v\u00e4ldigt knapp. Jag har hittat det b\u00e4sta s\u00e4ttet att l\u00e4ra mig om vad som finns i wp<\/code>paketet och hur komponenterna faktiskt fungerar genom att titta i deras officiella Gutenberg Github-repo<\/a>. Vissa av paketen (mapparna) har en readme-text som erbjuder lite dokumentation. Ta en titt p\u00e5 readme f\u00f6r en knapp<\/a> eller v\u00e4xeln<\/a> till exempel.<\/p>\n
Github-repo ska motsvara vad som finns inuti wp<\/code>paketet (beroende p\u00e5 vilken version du har och vilken gren du tittar p\u00e5 i Github). Detta inneb\u00e4r att varje mapp du ser i rotkatalogen packages<\/code>i Github finns i det globala wp<\/code>paketet. Som ett exempel kom ih\u00e5g att funktionen vi anv\u00e4nde i f\u00f6reg\u00e5ende steg, registerBlockType()<\/code>, var inuti wp.blocks<\/code>, vilket betyder att du hittar k\u00e4llkoden f\u00f6r denna funktion exporterad inom packages\/blocks\/<\/code>.<\/p>\n
Eftersom jag har utvecklat ett antal anpassade Gutenberg-block och gr\u00e4vt en hel del i Github-repo, har jag uppt\u00e4ckt att det finns n\u00e5gra paket som inneh\u00e5ller den vanligaste funktionaliteten som anv\u00e4nds f\u00f6r att skapa anpassade block. Jag tar med dem nedan.<\/p>\n
F\u00f6r en mer komplett \u00f6versikt \u00f6ver tillg\u00e4ngliga komponenter rekommenderar jag att du laddar ner min gratis e-bok som t\u00e4cker tillg\u00e4ngliga komponenter i Gutenberg! Den inneh\u00e5ller de vanligaste och mest anv\u00e4ndbara komponenterna med dokumentation om rekvisita och kodexempel:<\/p>\n
En snabb \u00f6versikt \u00f6ver de vanligaste paketen du kommer att anv\u00e4nda f\u00f6r block<\/h3>\n
Uppenbarligen finns det mycket mer tillg\u00e4ngligt, men nedan \u00e4r det som \u00e4r vanligast f\u00f6r blockutveckling. Vi kommer att anv\u00e4nda de flesta om inte alla av dessa i denna handledningsserie. N\u00e4r du vill anv\u00e4nda en komponent m\u00e5ste du veta i vilket paket den finns.<\/p>\n
wp.components<\/h4>\n
Du hittar de flesta UI-ing\u00e5ngskomponenter inuti wp.components<\/code>. Exempel \u00e4r olika textinmatning, markering, kryssrutor, radioknappar, dragbara komponenter, knappar, f\u00e4rgv\u00e4ljare, datumv\u00e4ljare och s\u00e5 vidare. Du hittar ocks\u00e5 UI-komponenter som du kan anv\u00e4nda f\u00f6r blockverktygsf\u00e4ltet och inneh\u00e5llet i sidof\u00e4ltet f\u00f6r inst\u00e4llningar (kallas InspectorControls) i editorn.<\/p>\n
Kolla in mapparna i Github-repo<\/a>.<\/p>\n
wp.blockEditor och wp.editor<\/h4>\n
I dessa tv\u00e5 paket hittar du anv\u00e4ndbara komponenter f\u00f6r rik text, hantering av bilder\/mediauppladdning och komponenter f\u00f6r att faktiskt l\u00e4gga till verktygsf\u00e4lt eller anpassade Inspector-paneler (sidof\u00e4lt).<\/p>\n
I slutet av den h\u00e4r serien kommer vi att titta p\u00e5 att bygga dynamiska block d\u00e4r vi kommer att anv\u00e4nda PHP f\u00f6r att rendera blockutdata, och f\u00f6r det kommer vi att anv\u00e4nda en komponent fr\u00e5n wp.editor<\/code>.<\/p>\n
Som jag f\u00f6rst\u00e5r det b\u00f6rjade de flesta komponenter i wp.editor<\/code>tidiga Gutenberg-dagar, men s\u00e4rskilt efter WordPress 5.3 flyttades m\u00e5nga av dem till wp.blockEditor<\/code>. Om du anv\u00e4nder en komponent wp.editor<\/code>som WordPress planerar att flytta in i wp.blockEditor<\/code>kommer den inte att misslyckas fr\u00e5n och med nu, men i konsolfels\u00f6kning kommer du att f\u00e5 varningar om att den har blivit utfasad och att du b\u00f6r byta till wp.blockEditor<\/code>n\u00e4r du kan. Och reversibelt om du f\u00f6ljer den h\u00e4r serien med en \u00e4ldre WordPress-version av n\u00e5gon anledning kan du st\u00f6ta p\u00e5 fel n\u00e4r du anropar komponenter som inte har flyttats till wp.blockEditor<\/code>\u00e4nnu.<\/p>\n
\"Skapa<\/a><\/p>\n
wp.element<\/h4>\n
Inuti wp.element<\/code>hittar du komponenter som motsvarar React-komponenter. Till exempel Component<\/code>(som motsvarar React.Component<\/code>) och Fragment<\/code>( React.Fragment<\/code>). Vi kommer att anv\u00e4nda dessa n\u00e4r vi b\u00f6rjar dela upp v\u00e5r kod i separata komponenter.<\/p>\n
wp.i18n<\/h4>\n
Som namnet anger wp.i18n<\/code>inneh\u00e5ller paketet funktioner f\u00f6r hantering av \u00f6vers\u00e4ttning. Den inneh\u00e5ller samma \u00f6vers\u00e4ttningsfunktioner som vi k\u00e4nner till dem i PHP; till exempel __()<\/code>och _e()<\/code>. Vi kommer att titta p\u00e5 detta i detalj i <<<>>>> n\u00e4r vi l\u00e4r oss hur man \u00f6vers\u00e4tter v\u00e5rt block.<\/p>\n
wp.data<\/h4>\n
Paketet wp.data<\/code>\u00e4r till f\u00f6r att fr\u00e5ga WordPress efter data utanf\u00f6r editorn. Det finns komponenter f\u00f6r att skicka meddelanden, withSelect<\/code>och select<\/code>som vi kommer att anv\u00e4nda senare i den h\u00e4r serien f\u00f6r att s\u00f6ka efter inl\u00e4gg i v\u00e5rt block.<\/p>\n
wp.compose<\/h4>\n
Det tidigare paketet och wp.compose<\/code>\u00e4r f\u00f6r mer avancerad blockbyggnad. Inuti detta paket hittar vi komponenter och funktioner f\u00f6r att skapa s\u00e5 kallade komponenter av h\u00f6gre ordning. Komponenter av h\u00f6gre ordning<\/a> \u00e4r en m\u00f6nsterteknik i React f\u00f6r att \u00e5teranv\u00e4nda komponenter och logik, och vi kommer att anv\u00e4nda detta i kombination med wp.data<\/code>f\u00f6r att fr\u00e5ga inl\u00e4gg.<\/p>\n
Nog prat \u2013 hur anv\u00e4nder du n\u00e5gra av dessa komponenter i praktiken?<\/h2>\n
Som n\u00e4mnts tidigare; f\u00f6r att kunna anv\u00e4nda WordPress komponenter m\u00e5ste du veta var de finns. F\u00f6rhoppningsvis kommer min \u00f6versikt ovan i kombination med Github-repo<\/a> att ge dig en uppfattning om var du kan f\u00e5 tag i dem.<\/p>\n
Gl\u00f6m inte att du alltid kan l\u00e4gga till alla vanliga HTML-taggar, som div, span, rubriker och s\u00e5 vidare. Kom bara ih\u00e5g att f\u00f6lja Reacts riktlinjer<\/a> i attribut. Till exempel class<\/code>\u00e4r ett reserverat nyckelord i React (f\u00f6r att skapa klassbaserade komponenter), s\u00e5 om du vill l\u00e4gga till en klass till ett HTML-element m\u00e5ste du anv\u00e4nda className<\/code>.<\/p>\n
Obs: Gl\u00f6m inte npm run start<\/code>att kompilera din kod under utvecklingen.<\/p>\n
Som ett enkelt exempel, l\u00e5t oss prova n\u00e5gra komponenter f\u00f6r att se hur de ser ut. Vi destrukturerar dem fr\u00e5n deras motsvarande paket och anv\u00e4nder dem i v\u00e5r edit<\/code>funktion.<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { RichText } = wp.blockEditor;\nconst { TextControl, TextareaControl } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    ...\n    edit: (props) => { \n        return (<div>\n                Text input:\n                <TextControl \/> \n                Textarea:\n                <TextareaControl \/>\n                Richtext:\n                <RichText \/>\n            <\/div>\n        );\n    },\n    ...\n});<\/code><\/pre>\n
Detta kommer till exempel att resultera i att v\u00e5rt block ser ut s\u00e5 h\u00e4r i editorn.<\/p>\n
\"Skapa<\/a><\/p>\n
Du kommer att m\u00e4rka att du kommer att f\u00e5 felmeddelanden i konsolen n\u00e4r du skriver i dem, och att det inte kommer att spara det du skriver in n\u00e4r du uppdaterar inl\u00e4gget (och uppdaterar). Detta beror p\u00e5 att vi saknar rekvisita p\u00e5 komponenterna som \u00e4r kopplingen till attribut, d\u00e4r all v\u00e5r blockdata lagras. Rekvisitan ansvarar f\u00f6r att skicka de sparade v\u00e4rdena och funktioner som ansvarar f\u00f6r att uppdatera v\u00e5ra attribut n\u00e4r n\u00e5got \u00e4ndras i v\u00e5ra ing\u00e5ngar. Detta \u00e4r vad vi kommer att g\u00f6ra i n\u00e4sta steg, d\u00e4r vi \u00e4ntligen ska b\u00f6rja skriva lite kod p\u00e5 riktigt.<\/p>\n
Inspelningsk\u00e4lla:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
I f\u00f6reg\u00e5ende steg registrerade vi ett anpassat Gutenberg-block. I det h\u00e4r steget kommer vi att l\u00e4ra oss hur du anv\u00e4nder WordPress-komponenter f\u00f6r att l\u00e4gga till olika typer av inst\u00e4llningar.<\/p>\n","protected":false},"author":1,"featured_media":151761,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[901,724,942,942,848,901,1110,818,818,848,724,868,868],"tags":[1173],"class_list":["post-233852","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koda","category-utvecklaren","category-gutenberg-9","category-handledningar","category-n-a","category-plugins-3","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=233852"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233852\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/151761"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233852"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233852"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}