{"id":233657,"date":"2023-02-20T15:57:00","date_gmt":"2023-02-20T12:57:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233657"},"modified":"2023-02-24T19:05:53","modified_gmt":"2023-02-24T16:05:53","slug":"laegg-till-en-custom-inspector-sidebar-i-wordpress-gutenberg-med-post-meta","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/laegg-till-en-custom-inspector-sidebar-i-wordpress-gutenberg-med-post-meta\/","title":{"rendered":"L\u00e4gg till en Custom Inspector Sidebar i WordPress Gutenberg med Post Meta"},"content":{"rendered":"\n

I den h\u00e4r handledningen kommer vi att unders\u00f6ka hur man l\u00e4gger till en anpassad sidof\u00e4lt till Inspector (h\u00f6ger sidof\u00e4lt) i WordPress Gutenberg. Inuti kommer vi att implementera ett f\u00e4lt kopplat till en postmeta. Allt \u00e4r implementerat med Javascript, inuti Gutenberg-redigeraren, och \u00e4r ett alternativ till att l\u00e4gga till metaboxar p\u00e5 traditionellt s\u00e4tt.<\/p>\n

\"L\u00e4gg<\/a><\/p>\n

Se upp!<\/h3>\n

Det h\u00e4r \u00e4r en handledning f\u00f6r att skapa din egen anpassade sidof\u00e4lt. Men om du \u00e4r intresserad av att bara l\u00e4gga till meta\/inst\u00e4llningar till standardinspekt\u00f6rens sidof\u00e4lt ("Dokument"-fliken), har jag en handledning f\u00f6r exakt det:<\/p>\n

Vad vi kommer att skapa<\/h2>\n

WordPress Gutenberg l\u00e5ter utvecklare skapa anpassade sidof\u00e4lt genom att skapa ett s\u00e5 kallat Javascript-plugin. (Inte att f\u00f6rv\u00e4xla med traditionella WordPress-plugins). Genom att anv\u00e4nda ett Javascript-plugin kan vi skapa ett nytt sidof\u00e4lt och \u00e4ven ansluta till menyn "Verktyg och alternativ".<\/p>\n

Vi kommer att l\u00e4gga till ett nytt menyalternativ i "Verktyg" som \u00f6ppnar v\u00e5rt anpassade sidof\u00e4lt. Inneh\u00e5llet i sidof\u00e4ltet \u00e4r helt upp till dig, men jag ska g\u00e5 igenom n\u00e5gra exempel, inklusive hur man kopplar ett inl\u00e4ggsmetaf\u00e4lt inuti det.<\/p>\n

\"L\u00e4gg<\/a><\/p>\n

Konfigurera ditt Javascript<\/h2>\n

F\u00f6r den h\u00e4r handledningen kommer jag att skriva ES6\/ESNext Javascript med JSX vilket betyder att vi m\u00e5ste st\u00e4lla in en kompilator. Om du vill f\u00f6lja med och inte skriva ES5 Javascript m\u00e5ste du s\u00e4tta upp en utvecklingsmilj\u00f6 som kompilerar ditt Javascript allt eftersom. Om du inte \u00e4r bekant med detta, f\u00f6lj mitt inl\u00e4gg som f\u00f6rklarar hur du st\u00e4ller in det h\u00e4r<\/a> och kom sedan tillbaka hit.<\/p>\n

Jag har st\u00e4llt in min webpack.config.js<\/code>f\u00f6r att kompilera min Javascript-k\u00e4llfil till min temamapps \/assets\/js\/sidebar-plugin.js<\/code>. Den h\u00e4r kompilerade filen \u00e4r vad vi beh\u00f6ver st\u00e4lla i k\u00f6 till Gutenberg-redigeraren. Medan jag skriver den h\u00e4r koden har jag startat runtime-kompilatorn som kompilerar om Javascript varje g\u00e5ng jag sparar \u00e4ndringar i k\u00e4llkoden (npm run start<\/code>). Allt detta f\u00f6rklaras ing\u00e5ende i den tidigare n\u00e4mnda handledningen.<\/p>\n

Jag skriver detta i ett tema, men det fungerar likadant i ett plugin. Kom bara ih\u00e5g att justera s\u00f6kv\u00e4garna n\u00e4r du l\u00e4gger till skriptet i editorn.<\/p>\n

L\u00e4gger till skriptet i redigeraren<\/h2>\n

F\u00f6r att l\u00e4gga till v\u00e5rt skript till Gutenberg-redigeraren m\u00e5ste vi skriva lite PHP. Om du \u00e4r i ett tema, functions.php<\/code>\u00e4r ett bra st\u00e4lle att b\u00f6rja, eller n\u00e5gonstans i dina plugin-filer. Observera att vi m\u00e5ste l\u00e4gga till det slutliga kompilerade skriptet, inte k\u00e4llkoden. I mitt exempel finns det kompilerade Javascriptet i min temamapps \/assets\/js\/sidebar-plugin.js<\/code>.<\/p>\n

Vi skapar en funktion kopplad till enqueue_block_editor_assets<\/code>. Inuti g\u00f6r vi som vanligt [wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>. Som beroenden till skriptet l\u00e4gger vi till tv\u00e5; wp-plugins<\/code>, och wp-edit-post<\/code>. Dessa tv\u00e5 paket m\u00e5ste laddas f\u00f6re v\u00e5rt skript eftersom vi anv\u00e4nder funktioner fr\u00e5n dem.<\/p>\n

add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script('awp-sidebar-plugin', get_stylesheet_directory_uri(). '\/assets\/js\/sidebar-plugin.js', ['wp-plugins', 'wp-edit-post']);\n});<\/code><\/pre>\n
Eftersom vi st\u00e4ller skriptet i k\u00f6 i kroken enqueue_block_editor_assets<\/code>kommer v\u00e5rt skript bara att laddas n\u00e4r Gutenberg-redigeraren \u00e4r aktiv. Bra! Nu \u00e4r allt klart f\u00f6r att skriva v\u00e5rt Javascript-plugin.<\/p>\n
Registrera ett Javascript-plugin<\/h2>\n
Det f\u00f6rsta steget \u00e4r att registrera ett plugin. Det g\u00f6r vi med [registerPlugin](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/plugins#registerPlugin)<\/code>funktionen i wp.plugins inifr\u00e5n wp.plugins<\/code>paketet.<\/p>\n
Som parameter till registerPlugin tillhandah\u00e5ller vi ett namn (se till att det \u00e4r unikt) och ett objekt med inst\u00e4llningar. Som ett minimum m\u00e5ste du tillhandah\u00e5lla en komponent f\u00f6r render-egenskapen. Du kan ocks\u00e5 valfritt l\u00e4gga till en ikon fr\u00e5n WordPresss dashcons<\/a>. T\u00e4nk p\u00e5 att om du inte anger en ikon kommer den att falla tillbaka till plugin-ikonen. I demonstrationssyfte anv\u00e4nder jag 'carrot'<\/code>ikonen.<\/p>\n
N\u00e4r det g\u00e4ller komponenten b\u00f6rjar vi med att definiera en grundl\u00e4ggande komponent som returnerar en enkel div med lite slumpm\u00e4ssig text i. Och f\u00f6re all kod destrukturerar vi funktionerna fr\u00e5n de paket vi vill anv\u00e4nda.<\/p>\n
const { registerPlugin } = wp.plugins;\n\u00a0\nconst CustomSidebarComponent =() => {\n    return(\n        <div>Hey!<\/div>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
Om inget h\u00e4nder (inte ens fel) n\u00e4r du uppdaterar Gutenberg \u00e4r vi alla redo. Vi ser inte v\u00e5r komponent eftersom vi inte har ber\u00e4ttat f\u00f6r WordPress var den ska renderas. N\u00e4sta steg \u00e4r att ansluta till den anpassade sidof\u00e4ltsmenyn och verktygsmenykomponenterna f\u00f6r att rendera v\u00e5ra saker.<\/p>\n
Registrera ett anpassat sidof\u00e4lt<\/h2>\n
Men f\u00f6rst en f\u00f6rklaring i hur Gutenberg hanterar anpassade sidof\u00e4lt och varf\u00f6r vi beh\u00f6ver g\u00f6ra vad vi ska g\u00f6ra. N\u00e4r vi lyckas registrera en anpassad sidof\u00e4lt kommer en sak att h\u00e4nda automatiskt initialt. Gutenberg kommer att l\u00e4gga till en genv\u00e4g till v\u00e5rt sidof\u00e4lt i det \u00f6vre verktygsf\u00e4ltet, bredvid menyn Verktyg. Detta h\u00e4nder eftersom v\u00e5r sidof\u00e4lt automatiskt blir "f\u00e4st".<\/p>\n
\"L\u00e4gg<\/a><\/p>\n
Problemet med att bara l\u00e4gga till en anpassad sidof\u00e4lt \u00e4r att alla anv\u00e4ndare kan "l\u00f6sg\u00f6ra" denna genv\u00e4g. N\u00e4r de g\u00f6r det finns det ingen \u00e5tkomstpunkt f\u00f6r att \u00f6ppna sidof\u00e4ltet igen! Det \u00e4r d\u00e4rf\u00f6r vi ocks\u00e5 m\u00e5ste l\u00e4gga till ett menyalternativ till menyn Verktyg.<\/p>\n
Registrering av ett anpassat sidof\u00e4lt g\u00f6rs med komponenten PluginSidebar<\/code>fr\u00e5n wp.editPost<\/code>paketet. Att l\u00e4gga till ett menyalternativ till menyn Verktyg g\u00f6rs med den passande namngivna komponenten PluginSidebarMoreMenuItem<\/code>(ocks\u00e5 i wp.editPost<\/code>paketet).<\/p>\n
F\u00f6r PluginSidebar<\/code>komponenten m\u00e5ste vi tillhandah\u00e5lla n\u00e5gra rekvisita. Du b\u00f6r tillhandah\u00e5lla minst name<\/code>och title<\/code>. Rekvisiten title<\/code>\u00e4r sj\u00e4lvf\u00f6rklarande, det h\u00e4r \u00e4r namnet som kommer att visas \u00f6verst i sidof\u00e4ltet. I rekvisitan name<\/code>ger en unik snigel. N\u00e4r du l\u00e4gger till menyalternativet m\u00e5ste du referera till denna snigel.<\/p>\n
Att l\u00e4gga till en PluginSidebarMoreMenuItem<\/code>(verktygsmeny) komponent kr\u00e4ver minst en rekvisita; target<\/code>. H\u00e4r anger du samma namn som du gav i sidof\u00e4ltets name<\/code>rekvisita. Som inneh\u00e5ll i komponenten skriver du texten som kommer att visas som menyalternativ. Vanligtvis skulle detta vara detsamma som sidof\u00e4ltets title<\/code>.<\/p>\n
Eftersom React kr\u00e4ver en enda omslagsnod runt komponentens retur, lindar vi in \u200b\u200ballt inuti en Fragment<\/code>komponent (fr\u00e5n wp.element<\/code>paketet). Jag lindar ocks\u00e5 in mina str\u00e4ngar __()<\/code>fr\u00e5n wp.i18n<\/code>paketet f\u00f6r att m\u00f6jligg\u00f6ra \u00f6vers\u00e4ttning.<\/p>\n
const { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\n\u00a0\nconst CustomSidebarComponent =() => {\n    return(\n        <Fragment>\n            <PluginSidebar \n                name=\"awp-custom-sidebar\" \n                title={__('My Custom sidebar', 'awp')}\n            >Hello there.<\/PluginSidebar>\n            <PluginSidebarMoreMenuItem \n                target='awp-custom-sidebar'\n                >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n        <\/Fragment>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
Med ovanst\u00e5ende kod kommer vi att f\u00e5 f\u00f6ljande tv\u00e5 (mest troligt tre) saker att h\u00e4nda. Du kommer att f\u00e5 en morotsikongenv\u00e4g i verktygsf\u00e4ltet (om du inte har lossat den \u00e4nnu). Om du klickar p\u00e5 detta \u00f6ppnas sidof\u00e4ltet. Du kommer ocks\u00e5 att ha f\u00e5tt ett nytt menyalternativ till sidof\u00e4ltet i Verktygsmenyn, under rubriken "Plugins".<\/p>\n
\"L\u00e4gg<\/a><\/p>\n
L\u00e4gger till inneh\u00e5ll i sidof\u00e4ltet<\/h2>\n
Det faktiska inneh\u00e5llet i sidof\u00e4ltet \u00e4r helt upp till dig. Du beh\u00f6ver bara l\u00e4gga till HTML eller komponenter inuti PluginSidebar<\/code>komponenten med vad du vill (i st\u00e4llet f\u00f6r texten "Hej d\u00e4r.").<\/p>\n
Du kanske m\u00e4rker att inneh\u00e5llet i sidof\u00e4ltet saknar utfyllnad. Detta \u00e4r avsiktligt eftersom tanken \u00e4r att du ska skapa paneler inuti den h\u00e4r sidof\u00e4ltet. Paneler \u00e4r de hopf\u00e4llbara sektionerna i Gutenbergs normala sidof\u00e4lt. Det \u00e4r komponenter som du mycket enkelt kan l\u00e4gga till i ditt anpassade sidof\u00e4lt. Du kan l\u00e4gga till s\u00e5 m\u00e5nga paneler som du vill och de \u00e4r bra f\u00f6r att gruppera olika saker.<\/p>\n
L\u00e4gger till paneler i v\u00e5r sidof\u00e4lt<\/h3>\n
L\u00e5t oss snabbt titta p\u00e5 hur vi kan l\u00e4gga till paneler i v\u00e5r sidof\u00e4lt. Om du har skapat dina egna anpassade blocktyper kanske du \u00e4r bekant med dessa komponenter. Vi anv\u00e4nder PanelBody<\/code>och valfritt PanelRow<\/code>fr\u00e5n wp.components<\/code>paketet.<\/p>\n
F\u00f6r en PanelBody<\/code>komponent tillhandah\u00e5ller du som minimum rekvisitan title<\/code>. Du kan valfritt ange sant eller falskt till initialOpen<\/code>rekvisiten f\u00f6r att avg\u00f6ra om panelen ska ut\u00f6kas som standard eller inte. Som inneh\u00e5ll inuti komponenten \u00e4r allt inuti panelen.<\/p>\n
Inuti en PanelBody<\/code>kan du valfritt anv\u00e4nda PanelRow<\/code>komponenter. De \u00e4r egentligen inte n\u00f6dv\u00e4ndiga men kan hj\u00e4lpa dig att f\u00e5 en bra styling f\u00f6r ditt panelinneh\u00e5ll.<\/p>\n
L\u00e5t oss till exempel l\u00e4gga till tv\u00e5 paneler i v\u00e5r anpassade sidof\u00e4lt.<\/p>\n
const { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\nconst { PanelBody, PanelRow } = wp.components;\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        <Fragment>\n            <PluginSidebarMoreMenuItem \n                target='awp-custom-sidebar'\n                >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n            <PluginSidebar \n                name=\"awp-custom-sidebar\" \n                title={__('My Custom sidebar', 'awp')}\n            >                \n                <PanelBody\n                    title={__('This is a panel section', 'awp')}\n                    initialOpen={true}\n                >\n                    <PanelRow>\n                        Put any component or content here.\n                    <\/PanelRow>\n                <\/PanelBody>\n                <PanelBody\n                    title={__('Another section', 'awp')}\n                    initialOpen={false}\n                >\n                    <PanelRow>\n                        This is a collapsed section by default.\n                    <\/PanelRow>\n                <\/PanelBody>\n            <\/PluginSidebar>\n        <\/Fragment>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
Med den h\u00e4r koden b\u00f6rjar v\u00e5r anpassade sidof\u00e4lt verkligen se ut som om den h\u00f6r hemma i Gutenberg!<\/p>\n
\"L\u00e4gg<\/a><\/p>\n
L\u00e4gga till inl\u00e4ggsmetaf\u00e4lt i det anpassade sidof\u00e4ltet<\/h2>\n
Nu b\u00f6rjar vi verkligen g\u00e5 in p\u00e5 de anv\u00e4ndbara sakerna f\u00f6r en anpassad sidof\u00e4lt; l\u00e4gga till inst\u00e4llningar och lagra deras v\u00e4rden. Men f\u00f6rst m\u00e5ste vi f\u00f6rst\u00e5 hur.<\/p>\n
Det \u00e4r v\u00e4ldigt enkelt att l\u00e4gga till inst\u00e4llningsf\u00e4lt (indata, kryssrutor, v\u00e4xlingsf\u00e4lt, etc) i sidof\u00e4ltet genom att anv\u00e4nda de f\u00e4rdiga att anv\u00e4nda komponenterna i WordPress-paketen. Men vi m\u00e5ste \u00f6verv\u00e4ga hur vi ska lagra v\u00e4rdena. Det uppenbara alternativet \u00e4r att lagra dem som post-meta. Men att ansluta en inst\u00e4llning till ett postmetaf\u00e4lt kr\u00e4ver lite extra kod. Mer specifikt beh\u00f6ver vi anv\u00e4nda s\u00e5 kallade h\u00f6gre ordningskomponenter<\/a> f\u00f6r att h\u00e4mta och uppdatera postmeta inuti Javascript. Vi m\u00e5ste ocks\u00e5 registrera varje inl\u00e4ggsmeta med PHP och g\u00f6ra dem tillg\u00e4ngliga f\u00f6r REST API.<\/p>\n
F\u00f6r att avsluta denna handledning kommer jag att visa hur man l\u00e4gger till en postmeta med nyckel awp_my_custom_meta<\/code>som ska lagras som antingen sant eller falskt. I sidof\u00e4ltet kommer det att visas som ett v\u00e4xlingsf\u00e4lt (en sann\/falsk komponent).<\/p>\n
Registrera inl\u00e4ggsmeta f\u00f6r REST API<\/h3>\n
Det f\u00f6rsta steget f\u00f6r att l\u00e4gga till postmeta i v\u00e5r Javascript-fil \u00e4r att registrera dem och definiera dem som tillg\u00e4ngliga i REST API. F\u00f6r att g\u00f6ra detta \u00e5terg\u00e5r vi till PHP igen.<\/p>\n
Inuti en funktion kopplad till init<\/code>handlingen anv\u00e4nder vi [register_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_meta\/)()<\/code>funktionen. Som parametrar m\u00e5ste vi definiera objekttypen som ’ post<\/code>’ eftersom vi anv\u00e4nder den som postmeta (det utesluter inte t.ex. sidposttyp). Vi tillhandah\u00e5ller meta-nyckeln och sedan en rad argument. Det kritiska att l\u00e4gga till i argumentarrayen \u00e4r att st\u00e4lla in ’ show_in_rest<\/code>’ till true<\/code>. Post-meta anv\u00e4nds vanligtvis som ’ single<\/code>’ (t\u00e4nk hur du anv\u00e4nder get_post_meta()<\/code>). Vi definierar ocks\u00e5 type<\/code>. N\u00e4r det g\u00e4ller v\u00e5rt fall st\u00e4ller vi in \u200b\u200bden p\u00e5 ’ boolean<\/code>’.<\/p>\n
add_action('init', function() {\n    register_meta('post', 'awp_my_custom_meta', [\n        'show_in_rest' => true,\n        'single' => true,\n        'type' => 'boolean'\n    ]);\n});<\/code><\/pre>\n
Med denna kod \u00e4r awp_my_custom_meta<\/code>postmetaf\u00e4ltet tillg\u00e4ngligt fr\u00e5n Gutenberg. Du m\u00e5ste upprepa register_meta()<\/code>f\u00f6r varje inl\u00e4ggsmeta du vill l\u00e4gga till i sidof\u00e4ltet.<\/p>\n
L\u00e5t oss nu \u00e5terg\u00e5 till v\u00e5rt Javascript.<\/p>\n
L\u00e4gger till en inst\u00e4llning i v\u00e5rt sidof\u00e4lt<\/h3>\n
L\u00e5t oss b\u00f6rja med den enkla delen: L\u00e4gga till input till v\u00e5r sidof\u00e4lt. Senare kommer vi att l\u00e4gga till mer kod f\u00f6r att faktiskt koppla inst\u00e4llningsf\u00e4ltet till postmeta. P\u00e5 grund av hur vi m\u00e5ste g\u00f6ra detta, definierar vi en separat ny komponent f\u00f6r v\u00e5r inst\u00e4llning. S\u00e5 inuti panelen som du vill l\u00e4gga till dina inst\u00e4llningar, ringer du helt enkelt denna nya komponent.<\/p>\n
L\u00e5t oss kalla komponenten CustomSidebarMetaComponent<\/code>(du kan kalla den n\u00e5got som \u00e4r relevant f\u00f6r ditt projekt). Inuti den h\u00e4r komponenten vill vi rendera ett v\u00e4xlingsf\u00e4lt. F\u00f6r att g\u00f6ra detta anv\u00e4nder vi ToggleControl<\/code>komponenten fr\u00e5n wp.components<\/code>paketet. Som rekvisita till ToggleControl tillhandah\u00e5ller vi en passande etikett i title<\/code>rekvisitan. En ToggleControl beh\u00f6ver ocks\u00e5 rekvisita onChange<\/code>f\u00f6r att uppdatera v\u00e4rdet och checked<\/code>f\u00f6r det aktuella v\u00e4rdet. Vi kommer att utel\u00e4mna dessa tv\u00e5 f\u00f6r nu tills n\u00e4sta steg.<\/p>\n
...\nconst { PanelBody, PanelRow, ToggleControl } = wp.components;\n\u00a0\nconst CustomSidebarMetaComponent = () => {\n    return(\n        <ToggleControl\n            label={__('My custom post meta', 'awp')}\n        \/>\n    );\n}\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        ...       \n        <PanelBody\n            title={__('This is a panel section', 'awp')}\n            initialOpen={true}\n        >\n            <PanelRow>\n                <CustomSidebarMetaComponent \/>\n            <\/PanelRow>\n        <\/PanelBody>\n        ...<\/code><\/pre>\n
Med ovanst\u00e5ende kod b\u00f6r du f\u00e5 ett v\u00e4xlingsf\u00e4lt i sidof\u00e4ltet. Den \u00e4r avmarkerad och ingenting h\u00e4nder n\u00e4r du klickar p\u00e5 den. Det \u00e4r n\u00e4sta steg: koppla den till v\u00e5r postmeta.<\/p>\n
\u00c5tkomst till postmeta med withSelect och withDispatch<\/h3>\n
F\u00f6r att komma \u00e5t och uppdatera ett postmetav\u00e4rde m\u00e5ste vi anv\u00e4nda h\u00f6gre ordningskomponenter (HOC) f\u00f6r att komma \u00e5t WordPress version av butiker (liknande Redux). WordPress ger oss n\u00e5gra anv\u00e4ndbara HOC med funktioner vi kan anv\u00e4nda i wp.data<\/code>paketet.<\/p>\n
Komponenten av h\u00f6gre ordning [withSelect](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withSelect)<\/code>\u00e4r att f\u00f6rse v\u00e5r komponent med rekvisita som, i v\u00e5rt fall, h\u00e4mtas fr\u00e5n post-meta. Vi anv\u00e4nder detta f\u00f6r att f\u00e5 v\u00e4rdet av v\u00e5r postmeta. Inuti withSelect<\/code>kan vi anv\u00e4nda select('core\/editor').getEditedPostAttribute('meta')<\/code>f\u00f6r att h\u00e4mta det aktuella inl\u00e4ggets meta.<\/p>\n
\u00c5 andra sidan [withDispatch](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withDispatch)<\/code>\u00e4r det en komponent av h\u00f6gre ordning som kan utf\u00f6ra \u00e5tg\u00e4rder. I v\u00e5rt fall vill vi uppdatera inl\u00e4ggets meta n\u00e4r motsvarande f\u00e4ltinst\u00e4llning \u00e4ndras i v\u00e5r sidof\u00e4lt. Inuti den h\u00e4r komponenten anv\u00e4nder vi dispatch('core\/editor').editPost()<\/code>f\u00f6r att informera WordPress om att skicka en \u00e5tg\u00e4rd. Inuti objektet vi tillhandah\u00e5ller s\u00e4ger vi till WordPress att det \u00e4r meta vi vill uppdatera.<\/p>\n
Slutligen m\u00e5ste vi kombinera withSelect<\/code>och withDispatch<\/code>med v\u00e5r komponent som hanterar post-metaf\u00e4ltet (CustomSidebarMetaComponent<\/code>). F\u00f6r att g\u00f6ra detta anv\u00e4nder vi WordPress’ compose<\/code>fr\u00e5n wp.compose<\/code>paketet. Tanken \u00e4r det withSelect<\/code>och withDispatch<\/code>f\u00f6rser v\u00e5r CustomSidebarMetaComponent<\/code>komponent med rekvisita. withSelect<\/code>tillhandah\u00e5ller v\u00e4rdet av postmeta som prop, och withDispatch<\/code>tillhandah\u00e5ller en funktion som vi kan anropa f\u00f6r att uppdatera v\u00e4rdet som prop. Vi st\u00e4ller in dessa rekvisita p\u00e5 v\u00e5rt ToggleField checked<\/code>och onChange<\/code>, motsvarande.<\/p>\n
Det \u00e4r mycket att f\u00f6rklara. L\u00e5t oss titta p\u00e5 den faktiska koden:<\/p>\n
...\nconst { compose } = wp.compose;\nconst { withDispatch, withSelect } = wp.data;\n\u00a0\nconst CustomSidebarMetaComponent = (props) => {\n    return(\n        <ToggleControl\n            label={__('My custom post meta', 'awp')}\n            checked={props.customPostMetaValue}\n            onChange={props.setCustomPostMeta}\n        \/>\n    );\n}\n\u00a0\nconst CustomSidebarMeta = compose([\n    withSelect(select => {\n        return { customPostMetaValue: select('core\/editor').getEditedPostAttribute('meta')['awp_my_custom_meta'] }\n    }),\n    withDispatch(dispatch => {\n        return { \n            setCustomPostMeta: function(value) {\n                dispatch('core\/editor').editPost({ meta: { awp_my_custom_meta: value } });\n            }\n        }\n    })\n])(CustomSidebarMetaComponent);\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        ...\n        <PanelBody\n            title={__('This is a panel section', 'awp')}\n            initialOpen={true}\n        >\n            <PanelRow>\n                <CustomSidebarMeta \/>\n            <\/PanelRow>\n        <\/PanelBody>\n        ...<\/code><\/pre>\n
L\u00e5t oss b\u00f6rja fr\u00e5n b\u00f6rjan. Som ligger l\u00e4ngst ner. P\u00e5 line #36<\/code>\u00e4ndrar vi komponenten vi renderar i v\u00e5r sidof\u00e4lt till den komponent vi skapade med compose<\/code>(vid line #15<\/code>). Komponenten CustomSidebarMeta<\/code>kommer att kombinera komponenterna withSelect<\/code>och withDispatch<\/code>och returnera CustomSidebarMetaComponent<\/code>.<\/p>\n
De CustomSidebarMetaComponent<\/code>kommer att ha tillg\u00e5ng till customPostMetaValue<\/code>rekvisitan fr\u00e5n withSelect<\/code>, och setCustomPostMeta<\/code>rekvisitan fr\u00e5n withDispatch<\/code>Dessa tv\u00e5 vi anv\u00e4nder f\u00f6r checked<\/code>och onChange<\/code>rekvisita i ToggleField<\/code>.<\/p>\n
Observera att #5<\/code>vi i rad l\u00e4gger props<\/code>till som parametrar till komponenterna f\u00f6r att g\u00f6ra rekvisita tillg\u00e4ngliga i komponenten.<\/p>\n
Slutsats och sista ord<\/h2>\n
Jag hoppas verkligen att denna handledning var till n\u00e5gon nytta f\u00f6r dig. Detta \u00e4r vad jag lyckades f\u00f6rst\u00e5 om \u00e4mnet under mycket f\u00f6rs\u00f6k och misstag. Det finns knappt n\u00e5gon dokumentation om detta \u00e4mne \u00e4nnu. Jag k\u00e4mpar fortfarande med detta, s\u00e4rskilt n\u00e4r det g\u00e4ller att effektivt hantera flera inl\u00e4ggsmeta. Om jag lyckas l\u00e4ra mig n\u00e5gra bra knep kommer jag definitivt att uppdatera den h\u00e4r handledningen!<\/p>\n
F\u00f6rhoppningsvis genom att f\u00f6lja denna handledning b\u00f6r du ha kod som framg\u00e5ngsrikt l\u00e4gger till en ny anpassad sidof\u00e4lt till WordPress Gutenberg-redigeraren, och f\u00f6rhoppningsvis med n\u00e5got meningsfullt inneh\u00e5ll och inst\u00e4llningar. H\u00e4r \u00e4r den sista koden f\u00f6r det anpassade sidof\u00e4ltet med postmetaf\u00e4lt.<\/p>\n
const { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\nconst { PanelBody, PanelRow, ToggleControl } = wp.components;\nconst { compose } = wp.compose;\nconst { withDispatch, withSelect } = wp.data;\n\u00a0\nconst CustomSidebarMetaComponent = (props) => {\n    return(\n        <ToggleControl\n            label={__('My custom post meta', 'awp')}\n            checked={props.customPostMetaValue}\n            onChange={props.setCustomPostMeta}\n        \/>\n    );\n}\n\u00a0\nconst CustomSidebarMeta = compose([\n    withSelect(select => {\n        return { customPostMetaValue: select('core\/editor').getEditedPostAttribute('meta')['awp_my_custom_meta'] }\n    }),\n    withDispatch(dispatch => {\n        return { \n            setCustomPostMeta: function(value) {\n                dispatch('core\/editor').editPost({ meta: { awp_my_custom_meta: value } });\n            }\n        }\n    })\n])(CustomSidebarMetaComponent);\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        <Fragment>\n            <PluginSidebarMoreMenuItem \n                target='awp-custom-sidebar'\n                icon='carrot'\n            >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n            <PluginSidebar \n                name=\"awp-custom-sidebar\" \n                title={__('My Custom sidebar', 'awp')}\n            >                \n                <PanelBody\n                    title={__('This is a panel section', 'awp')}\n                    initialOpen={true}\n                >\n                    <PanelRow>\n                        <CustomSidebarMeta \/>\n                    <\/PanelRow>\n                <\/PanelBody>\n                <PanelBody\n                    title={__('Another section', 'awp')}\n                    initialOpen={false}\n                >\n                    <PanelRow>\n                        This is a collapsed section by default.\n                    <\/PanelRow>\n                <\/PanelBody>\n            <\/PluginSidebar>\n        <\/Fragment>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script('awp-sidebar-plugin', get_stylesheet_directory_uri(). '\/assets\/js\/sidebar-plugin.js', ['wp-plugins', 'wp-edit-post']);\n});\n\u00a0\nadd_action('init', function() {\n    register_meta('post', 'awp_my_custom_meta', [\n        'show_in_rest' => true,\n        'single' => true,\n        'type' => 'boolean'\n    ]);\n});<\/code><\/pre>\n
Inspelningsk\u00e4lla:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
En handledning f\u00f6r hur man l\u00e4gger till en anpassad sidof\u00e4lt till inspekt\u00f6ren i WordPress Gutenberg. Inuti kommer vi att implementera ett f\u00e4lt kopplat till en postmeta.<\/p>\n","protected":false},"author":1,"featured_media":223619,"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-233657","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\/233657","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=233657"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233657\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/223619"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}