{"id":233956,"date":"2023-02-27T12:47:00","date_gmt":"2023-02-27T09:47:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233956"},"modified":"2022-11-11T13:24:11","modified_gmt":"2022-11-11T10:24:11","slug":"skapa-anpassat-gutenberg-block-del-4-attribut","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/skapa-anpassat-gutenberg-block-del-4-attribut\/","title":{"rendered":"Skapa anpassat Gutenberg-block – Del 4: Attribut"},"content":{"rendered":"\n

I den h\u00e4r delen ska vi titta p\u00e5 hur man definierar attribut, h\u00e4mtar deras v\u00e4rden och uppdaterar dem. Med attribut kan vi acceptera input fr\u00e5n editorn, spara den och mata ut den hur vi vill. I f\u00f6reg\u00e5ende steg<\/a> tittade vi p\u00e5 WordPress-komponenter, var man hittar dem och hur man implementerar dem. I det h\u00e4r inl\u00e4gget kommer vi att l\u00e4gga till rekvisita f\u00f6r att g\u00f6ra kopplingen till attribut \u2013 den sparade informationen.<\/p>\n

Definiera attribut<\/h2>\n

Attribut l\u00e4ggs till som objekt i en array till attributes<\/code>egenskapen i registerBlockType()<\/code>. Varje attributs nyckel \u00e4r attributnamnet, och du m\u00e5ste ha egenskapen type<\/code>som ett minimum.<\/p>\n

Fastigheten type<\/code>kan vara n\u00e5got av f\u00f6ljande; null<\/code>, boolean<\/code>, object<\/code>, array<\/code>, number<\/code>, string<\/code>, eller integer<\/code>.<\/p>\n

Du kan valfritt tillhandah\u00e5lla egenskapen default<\/code>f\u00f6r att definiera startv\u00e4rdet f\u00f6r ditt attribut. Om du inte anger en standard kommer attributet att vara som standard null<\/code>.<\/p>\n

Ett annat attribut egenskap \u00e4r source<\/code>som fungerar tillsammans med selector<\/code>egenskapen, men det h\u00e4r \u00e4r knepiga saker som vi kommer att titta p\u00e5 i detalj l\u00e4ngre ner nedan.<\/p>\n

Till exempel att definiera tv\u00e5 attribut; exampleText<\/code>som str\u00e4ng och postIds<\/code>som en array skulle se ut s\u00e5 h\u00e4r:<\/p>\n

const { registerBlockType } = wp.blocks;\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    category: 'common',\n    attributes: {\n        exampleText: {\n            type: 'string',\n            default: ''\n        },\n        postIds: {\n            type: 'array'\n            default: []\n        }\n    },\n    edit: (props) => { \n    ...<\/code><\/pre>\n
Allt du beh\u00f6ver sparat f\u00f6r ditt block (indata fr\u00e5n anv\u00e4ndaren\/redigeraren) kr\u00e4ver ett attribut<\/strong>. Det \u00e4r upp till dig hur du strukturerar dina data, genom att definiera separata attribut f\u00f6r varje eller samla ihop dem i ett objekt. Det kommer bara att vara en skillnad i hur du h\u00e4mtar deras data och hur du uppdaterar dem.<\/p>\n
H\u00e4mta attributv\u00e4rden<\/h2>\n
Attribut finns som rekvisita till dina block edit<\/code>och save<\/code>funktioner. Om du har f\u00f6ljt denna serie fr\u00e5n f\u00f6reg\u00e5ende steg<\/a>, kom ih\u00e5g att vi uppdaterade funktionerna f\u00f6r att skicka rekvisita som parameter.<\/p>\n
Det \u00e4r vanligt att destrukturera<\/strong> attribut fr\u00e5n rekvisita eftersom du vanligtvis h\u00e4nvisar till dem ofta. Att till exempel mata ut ett anropat attribut exampleText<\/code>skulle se ut s\u00e5 h\u00e4r:<\/p>\n
edit: (props) => { \n    const { attributes } = props;\n    return <div>{attributes.exampleText}<\/div>\n},<\/code><\/pre>\n
Uppdaterar attributv\u00e4rden<\/h2>\n
F\u00f6r att uppdatera attribut har vi en metod tillg\u00e4nglig i rekvisita, kallad setAttributes()<\/code>. Denna funktion accepterar ett objekt d\u00e4r du kan l\u00e4gga till alla attribut du vill uppdatera. Du kan bara uppdatera ett attribut, flera eller alla samtidigt. Om du har flera attribut definierade och kr\u00e4ver setAttributes()<\/code>att endast uppdatera ett av dem, ber\u00f6rs inte de andra.<\/p>\n
Om du har erfarenhet av React kommer du f\u00f6rmodligen omedelbart att k\u00e4nna igen likheter mellan setAttributes()<\/code>och setState()<\/code>. De fungerar exakt likadant, men skillnaden \u00e4r att tillst\u00e5ndet i React bara \u00e4r n\u00e5got som lagras lokalt i den komponenten, och attribut sparas faktiskt som data utanf\u00f6r komponenten.<\/p>\n
F\u00f6r att uppdatera ett attribut, skulle du vanligtvis f\u00f6rst\u00f6ra funktionen fr\u00e5n rekvisita, och kalla det s\u00e5 h\u00e4r: Nedan uppdaterar vi exampleText<\/code>attributet till "Hej".<\/p>\n
const { setAttributes } = props;\nsetAttributes({ exampleText: 'Hi' });<\/code><\/pre>\n
Naturligtvis skulle du k\u00f6ra setAttributes()<\/code>inifr\u00e5n n\u00e5gon handling. Ett vanligt exempel \u00e4r inuti onChange<\/code>rekvisiten p\u00e5 n\u00e5got slags inmatningsf\u00e4lt som anv\u00e4nds f\u00f6r att lagra v\u00e4rdet p\u00e5 exampleText<\/code>attributet.<\/p>\n
Se till att spara attribut i den typ du har definierat p\u00e5 attributet. Du kommer inte ha n\u00e5gon tur n\u00e4r du f\u00f6rs\u00f6ker spara objekt i ett str\u00e4ngattribut till exempel.<\/p>\n
L\u00e5t oss prova det i praktiken! Initiera npm run start<\/code>om du inte redan har gjort det.<\/p>\n
Visa ett attribut i en anpassad textinmatning och uppdatering av attributets v\u00e4rde<\/h2>\n
I f\u00f6reg\u00e5ende steg lade vi till n\u00e5gra komponenter i edit<\/code>t.ex. en textinmatning, men ingenting lagrades. L\u00e5t oss l\u00e4gga till ett attribut och en textinmatning f\u00f6r det i v\u00e5rt block. Vi kommer b\u00e5de att se till att textinmatningen visar det aktuella v\u00e4rdet, och n\u00e4rhelst inmatningen \u00e4ndras uppdaterar vi attributet.<\/p>\n
L\u00e4gga till textinmatningen och dess onChange<\/code>rekvisita<\/h3>\n
const { registerBlockType } = wp.blocks;\nconst { TextControl } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    category: 'common',\n    attributes: {\n        exampleText: {\n            type: 'string',\n            default: ''\n        }\n    },\n    edit: (props) => { \n        const { attributes, setAttributes } = props;\n        return (<div>\n                <TextControl \n                    value={attributes.exampleText}\n                    onChange={(newtext) => setAttributes({ exampleText: newtext })}\n                \/> \n            <\/div>\n        );\n    },\n    save:() => { \n        return <div>:)<\/div> \n    }\n});<\/code><\/pre>\n
Vi destrukturerar attributes<\/code>och setAttributes<\/code>kommer props<\/code>att anv\u00e4nda b\u00e5da. Sedan anv\u00e4nder vi en TextControl<\/code>komponent fr\u00e5n WordPress wp.components<\/code>paket. Vi skickar tv\u00e5 rekvisita till den; value<\/code>kommer att st\u00e4lla in ing\u00e5ngens v\u00e4rde (b\u00e5de initialt och medan vi skriver) och en \u00e5tg\u00e4rd p\u00e5 ing\u00e5ngens h\u00e4ndelse onChange<\/code>.<\/p>\n
I value<\/code>st\u00e4ller vi in \u200b\u200bdet till v\u00e4rdet av v\u00e5rt attribut; attributes.exampleText<\/code>. I onChange<\/code>h\u00e4ndelse av att vi k\u00f6r en funktion som skickar det inskrivna v\u00e4rdet p\u00e5 v\u00e5r indata som parameter, newtext<\/code>(ing\u00e5ngsv\u00e4rdet \u00e4r en prop som returneras fr\u00e5n komponenten). I den funktionen anropar setAttributes()<\/code>och uppdaterar vi attributet exampleText<\/code>till det som skrevs in i inmatningen.<\/p>\n
Detta \u00e4r grundl\u00e4ggande React \u2013 f\u00f6rutom att vi arbetar med attribut och inte stat. Om ovanst\u00e5ende f\u00f6rvirrade dig rekommenderar jag att du tittar p\u00e5 en snabb handledning i React, eftersom dessa f\u00f6rmodligen kommer att f\u00f6rklara detta b\u00e4ttre \u00e4n mig!<\/p>\n
Uppdatera din editor och se hur blocket fungerar! Du b\u00f6r f\u00e5 en vanlig textinmatning f\u00f6r att skriva saker i, och den kommer att sparas n\u00e4r du trycker p\u00e5 Spara\/Uppdatera i postredigering.<\/p>\n
Resultatet i frontend och i databasen<\/h3>\n
Om du tittar p\u00e5 ditt inl\u00e4gg i frontend b\u00f6r det fortfarande eka en div med ":)" eftersom det \u00e4r vad vi fortfarande har i v\u00e5r save<\/code>funktion. Men n\u00e5got har h\u00e4nt bakom kulisserna! V\u00e5rt blocks kommentarblock inneh\u00e5ller nu v\u00e4rdet av v\u00e5rt attribut i JSON.<\/p>\n
\"Skapa<\/a><\/p>\n
Du kan inte se kommentarsblocken i en mall som g\u00f6r ett normalt the_content()<\/code>anrop. F\u00f6r att se kommentarsblocken har du tv\u00e5 alternativ. Titta antingen p\u00e5 post_content<\/code>tabellen i postdatabasen. Eller l\u00e4gg echo get_the_content()<\/code>till mallen och titta p\u00e5 den i Inspect\/debugging tool.<\/p>\n
Uppenbarligen har vi tillg\u00e5ng till attributen i save<\/code>ocks\u00e5, fr\u00e5n rekvisita.<\/p>\n
Visar ing\u00e5ngens v\u00e4rde isave<\/code><\/h3>\n
L\u00e5t oss visa v\u00e4rdet p\u00e5 attributet inuti en div i v\u00e5r save<\/code>funktion:<\/p>\n
save: (props) => { \n    const { attributes } = props;\n    return <div>{attributes.exampleText}<\/div>\n}<\/code><\/pre>\n
Obs: N\u00e4r du har gjort denna \u00e4ndring kommer du att f\u00e5 ett brutet block i inl\u00e4gget du redan har lagt till detta block till. Detta h\u00e4nder eftersom redakt\u00f6ren m\u00f6ter en annan utdata save<\/code>\u00e4n vad vi har definierat nu. Ta bort blocket och l\u00e4gg till det igen. Ange n\u00e5got i din textinmatning, uppdatera inl\u00e4gget och visa det i frontend.<\/p>\n
Och detta \u00e4r faktiskt k\u00e4rnan i det. Du best\u00e4mmer vilka attribut du beh\u00f6ver f\u00f6r att spara det du vill ha i ditt block. I edit<\/code>kommer du att \u00e5terge s\u00e4tt f\u00f6r anv\u00e4ndaren att mata in, se till att de aktuella v\u00e4rdena visas och uppdatera dem n\u00e4r de \u00e4ndras. Och i save<\/code>extraherar du de sparade attributen och \u00e5terger utdata som du vill.<\/p>\n
Vi kommer att ber\u00f6ra m\u00e5nga fler olika komponenter och attribut n\u00e4r vi g\u00e5r i denna handledningsserie. Men l\u00e5t oss titta p\u00e5 en annan komponent i det h\u00e4r inl\u00e4gget f\u00f6r att se vad attributet egenskap source<\/code>handlar om.<\/p>\n
RichText och attributegenskapensource<\/code><\/h2>\n
WordPress- RichText<\/code>komponenten ger dig ett "kantfritt" textomr\u00e5de med st\u00f6d f\u00f6r textformatering. Du kanske f\u00f6redrar att anv\u00e4nda detta ist\u00e4llet f\u00f6r en (ful?) standardtextinmatning eller textomr\u00e5de. Men t\u00e4nk p\u00e5 att det RichText<\/code>m\u00e5ste hanteras lite annorlunda eftersom det finns flera rekvisita du m\u00e5ste vara medveten om, och det \u00e4r skillnad p\u00e5 hur vi f\u00e5r tag i v\u00e4rdet i v\u00e5r save<\/code>funktion.<\/p>\n
L\u00e4gga till en RichText<\/code>komponent<\/h3>\n
Den enklaste formen av RichText<\/code>\u00e4r att implementera det som du skulle g\u00f6ra med en textinmatning:<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { RichText } = wp.blockEditor;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    ...\n    attributes: {\n        myRichText: {\n            type: 'string',\n            default: ''\n        }\n    },\n    edit: (props) => { \n        const { attributes, setAttributes } = props;\n        return (<div>\n                <RichText \n                    value={attributes.myRichText}\n                    onChange={(newtext) => setAttributes({ myRichText: newtext })}\n                \/> \n            <\/div>\n        );\n    },\n    ...<\/code><\/pre>\n
Vi destrukturerar RichText<\/code>komponenten fr\u00e5n wp.blockEditor<\/code>paketet, men i \u00f6vrigt \u00e4r ovanst\u00e5ende identisk med vad vi gjorde med standardtextinmatningen.<\/p>\n
Hantering save<\/code>medRichText<\/code><\/h3>\n
Men i save<\/code>funktionen m\u00e5ste du anv\u00e4nda RichText<\/code>komponenten igen f\u00f6r att f\u00e5 v\u00e4rdet p\u00e5 attributet. Vi anropar RichText.Content<\/code>och st\u00e4ller in rekvisitan value<\/code>till v\u00e5rt attribut:<\/p>\n
save: (props) => { \n    const { attributes } = props;\n    return (<div>\n            <RichText.Content \n                value={attributes.myRichText}\n            \/>\n        <\/div>\n    );\n}<\/code><\/pre>\n
Detta kommer att mata ut vad som \u00e4n skrevs i RichText<\/code>in-redigeraren direkt utan n\u00e5gon HTML-kod.<\/p>\n
N\u00e4r du arbetar med RichText<\/code>vill du troligen styra HTML-omslaget runt texten, till exempel a <p><\/code>eller a <h2><\/code>, b\u00e5de i frontend och i editor. F\u00f6r det kan vi anv\u00e4nda en rekvisita som heter tagName<\/code>.<\/p>\n
Komponenten RichText<\/code>till\u00e5ter flera andra rekvisita ocks\u00e5. Du kan definiera en platsh\u00e5llartext som visas (blekas) n\u00e4r den \u00e4r tom med placeholder<\/code>rekvisitan. Komponenten l\u00e5ter dig ocks\u00e5 styra vilka formateringsalternativ f\u00e4ltet till\u00e5ter (vilka knappar det visar i verktygsf\u00e4ltet).<\/p>\n
RichText<\/code>medtagName<\/code><\/h3>\n
Med propen tagName<\/code>kan du f\u00f6rdefiniera vilken HTML-tagg dess utdata ska lindas in i. N\u00e4r du anv\u00e4nder tagName<\/code>b\u00f6r du anv\u00e4nda samma tagName<\/code>prop och v\u00e4rde i b\u00e5de edit<\/code>och save<\/code>.<\/p>\n
S\u00e4g att du vill s\u00e4tta ditt attributv\u00e4rde i en <h2><\/code>, som i editorn tvingar all indata att vara en h2. I edit<\/code>kan du g\u00f6ra:<\/p>\n
<RichText \n    tagName=\"h2\"\n    placeholder=\"Write your heading here\"\n    value={attributes.myRichText}\n    onChange={(newtext) => setAttributes({ myRichText: newtext })}\n\/><\/code><\/pre>\n
Och i save<\/code>:<\/p>\n
<RichText.Content \n    tagName=\"h2\"\n    value={attributes.myRichText}\n\/><\/code><\/pre>\n
Ovanst\u00e5ende kommer nu att mata ut vad som \u00e4n skrevs i RichText<\/code>omr\u00e5det inuti en <h2><\/code>tagg.<\/p>\n
Anv\u00e4nder sig avsource<\/code><\/h3>\n
Sj\u00e4lvklart kan du kombinera flera richtext f\u00f6r ett block, till exempel en f\u00f6r rubrik och en f\u00f6r ett stycke. Kom bara ih\u00e5g att var och en kommer att beh\u00f6va sin egen egenskap. Till exempel:<\/p>\n
attributes: {\n    myRichHeading: {\n        type: 'string'\n    },\n    myRichText: {\n        type: 'string'\n    }\n},\nedit: (props) => { \n    const { attributes, setAttributes } = props;\n    return (<div>\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},\nsave: (props) => { \n    const { attributes } = props;\n    return (<div>\n            <RichText.Content \n                tagName=\"h2\"\n                value={attributes.myRichHeading}\n            \/>\n            <RichText.Content \n                tagName=\"p\"\n                value={attributes.myRichText}\n            \/>\n        <\/div>\n    );\n}<\/code><\/pre>\n
Men du kommer nu att b\u00f6rja st\u00f6ta p\u00e5 n\u00e5gra problem. \u00c4ven om du kan g\u00f6ra textformatering i editorn, kommer ingenting (eller en del) av din formatering att sparas. N\u00e4r du tittar p\u00e5 inl\u00e4gget i frontend kommer det helt enkelt ut som h2<\/code>och en p<\/code>, utan n\u00e5gon formatering du har gjort (kursiv, fetstil, l\u00e4nk). Inte ens kommentarblocket f\u00f6r ditt block inneh\u00e5ller formateringen. Det h\u00e4r \u00e4r det knepiga med RichText<\/code>. F\u00f6r att l\u00f6sa detta m\u00e5ste vi arbeta med attributet egenskap source<\/code>.<\/p>\n
Egenskapen source<\/code>som till\u00e5ter WordPress att extrahera och tolka inneh\u00e5llet direkt fr\u00e5n inl\u00e4ggets inneh\u00e5ll. Om ett attribut inte har n\u00e5gon source<\/code>inst\u00e4llning, kommer det att sparas i och extraheras fr\u00e5n HTML-kommentarblocket.<\/p>\n
N\u00e4r vi arbetar med RichText<\/code>st\u00e4ller vi vanligtvis in source<\/code>p\u00e5 html<\/code>, som anv\u00e4nder WordPress bibliotek f\u00f6r att analysera HTML-uppm\u00e4rkning. Egenskapen source<\/code>fungerar tillsammans med ett annat attribut egenskap; selector<\/code>som definierar vilken HTML-tagg den ska extraheras fr\u00e5n.<\/p>\n
Som ett exempel st\u00e4ller vi in source<\/code>\u200b\u200bsom html<\/code>i v\u00e5rt stycke RichText<\/code>, och st\u00e4ller in selector<\/code>som p<\/code>(annars \u00e4r det f\u00f6rinst\u00e4llt att roten av blocket blockeras).<\/p>\n
attributes: {\n    ...\n    myRichText: {\n        type: 'string',\n        source: 'html',\n        selector: 'p'\n    }\n},<\/code><\/pre>\n
Nu b\u00f6r v\u00e5r andra RichText<\/code>framg\u00e5ngsrikt spara all textformatering. Du kommer ocks\u00e5 att m\u00e4rka att kommentarsblocket nu bara visar myRichHeading<\/code>attributet i JSON. Attributet myRichText<\/code>har helt f\u00f6rsvunnit fr\u00e5n kommentarsblocket. Detta beror p\u00e5 att med source<\/code>WordPress nu analyserar inl\u00e4ggets inneh\u00e5ll ist\u00e4llet f\u00f6r kommentarsblocket f\u00f6r attributv\u00e4rdet.<\/p>\n
\"Skapa<\/a><\/p>\n
F\u00f6r att vara helt \u00e4rlig har jag inte jobbat s\u00e5 mycket med source<\/code>attributet alls och skulle rekommendera att undvika det om du kan. WordPress dokumentation f\u00f6rklarar lite mer om k\u00e4lla och attribut<\/a> f\u00f6r att du vill kolla upp det sj\u00e4lv.<\/p>\n
I det h\u00e4r inl\u00e4gget har vi l\u00e4rt oss grunderna om attribut; hur man definierar dem, uppdaterar dem och matar ut deras v\u00e4rden. I n\u00e4sta steg kommer vi att titta p\u00e5 fler olika komponenter och hur man l\u00e4gger till inst\u00e4llningar utanf\u00f6r sj\u00e4lva blockinneh\u00e5llet; i verktygsf\u00e4ltet och editorns sidof\u00e4lt (kallas Inspekt\u00f6r).<\/p>\n
Inspelningsk\u00e4lla:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
I denna Gutenberg-blocklektion f\u00f6r nyb\u00f6rjare kommer vi att titta p\u00e5 hur man definierar attribut, h\u00e4mtar deras v\u00e4rden och uppdaterar dem.<\/p>\n","protected":false},"author":1,"featured_media":151358,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[942,942,848,1110,818,818,848,868,868],"tags":[1173],"class_list":["post-233956","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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\/233956","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=233956"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233956\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/151358"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}