![\"Lisage](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152503-61e4e03345086.png\")
<\/a><\/p>\nPea p\u00fcsti!<\/h3>\n
See on \u00f5petus oma kohandatud k\u00fclgriba loomisel. Aga kui olete huvitatud lihtsalt meta\/seadete lisamisest Inspectori standardsele k\u00fclgribale (vahekaart "Dokument"), on mul \u00f5petus t\u00e4pselt selle jaoks:<\/p>\n
Mida me loome<\/h2>\n
WordPress Gutenberg v\u00f5imaldab arendajatel luua kohandatud k\u00fclgribasid, kasutades selleks niinimetatud Javascripti pistikprogrammi. (Mitte segi ajada traditsiooniliste WordPressi pistikprogrammidega). Javascripti pistikprogrammi abil saame luua uue k\u00fclgriba ja \u00fchendada selle ka men\u00fc\u00fcga "T\u00f6\u00f6riistad ja suvandid".<\/p>\n
Lisame men\u00fc\u00fcsse "T\u00f6\u00f6riistad" uue men\u00fc\u00fcelemendi, mis avab meie kohandatud k\u00fclgriba. K\u00fclgriba sisu on t\u00e4ielikult teie otsustada, kuid ma toon l\u00e4bi m\u00f5ned n\u00e4ited, sealhulgas kuidas \u00fchendada postituse metav\u00e4li selle sees.<\/p>\n
Selle \u00f5petuse jaoks kirjutan JSX-iga ES6\/ESNext Javascripti, mis t\u00e4hendab, et peame seadistama kompilaatori. Kui soovite teksti j\u00e4lgida ja mitte ES5 Javascripti kirjutada, peate seadistama arenduskeskkonna, mis teie Javascripti t\u00f6\u00f6 k\u00e4igus kompileerib. Kui te pole sellega tuttav, j\u00e4rgige minu postitust, milles selgitatakse, kuidas seda seadistada<\/a>, ja tulge siis siia tagasi.<\/p>\n Olen seadistanud Kirjutan seda teemas, kuid see t\u00f6\u00f6tab samamoodi ka pistikprogrammis. \u00c4rge unustage skripti redaktorisse lisamisel teid kohandada.<\/p>\n Skripti lisamiseks Gutenbergi redaktorisse peame kirjutama PHP. Kui olete teemas, Loome funktsiooni, mis on \u00fchendatud Kuna paneme skripti konksu j\u00e4rjekorda, Esimene samm on plugina registreerimine. Teeme seda RegistrPlugini parameetrina anname nime (veenduge, et see oleks kordumatu) ja seadistustega objekti. V\u00e4hemalt peate esitama renderdusatribuudi komponendi. Soovi korral saate lisada ikooni ka WordPressi armatuurlaualt<\/a>. Pidage meeles, et kui te ikooni ei m\u00e4\u00e4ra, muutub see tagasi pistikprogrammi ikooniks. Demonstreerimiseks kasutan Mis puutub komponenti, siis alustame p\u00f5hikomponendi m\u00e4\u00e4ratlemisest, mis tagastab lihtsa div koos m\u00f5ne juhusliku tekstiga. Ja enne kogu koodi destruktureerime funktsioonid pakettidest, mida soovime kasutada.<\/p>\n Kui Gutenbergi v\u00e4rskendamisel midagi ei juhtu (isegi mitte t\u00f5rkeid), oleme k\u00f5ik valmis minema. Me ei n\u00e4e oma komponenti, kuna me pole WordPressile \u00f6elnud, kus seda renderdada. J\u00e4rgmine samm on meie asjade renderdamiseks kohandatud k\u00fclgriba men\u00fc\u00fc ja t\u00f6\u00f6riistade men\u00fc\u00fckomponentide \u00fchendamine.<\/p>\n Kuid k\u00f5igepealt selgitus selle kohta, kuidas Gutenberg kohandatud k\u00fclgribasid k\u00e4sitleb ja miks me peame tegema seda, mida me teeme. Kui registreerime kohandatud k\u00fclgriba edukalt, juhtub alguses automaatselt \u00fcks asi. Gutenberg lisab meie k\u00fclgribale otsetee \u00fclemisele t\u00f6\u00f6riistaribale, men\u00fc\u00fc T\u00f6\u00f6riistad k\u00f5rvale. See juhtub, kuna meie k\u00fclgriba "kinnitatakse" automaatselt.<\/p>\n Kohandatud k\u00fclgriba lisamise probleem seisneb selles, et iga kasutaja saab selle otsetee lahti \u00fchendada. Kui nad seda teevad, pole k\u00fclgriba uuesti avamiseks juurdep\u00e4\u00e4supunkti! Seet\u00f5ttu peame men\u00fc\u00fcsse T\u00f6\u00f6riistad lisama ka men\u00fc\u00fcelemendi.<\/p>\n Kohandatud k\u00fclgriba registreerimine toimub paketis oleva Komponendi jaoks Kuna React n\u00f5uab \u00fchte m\u00e4hkimiss\u00f5lme komponendi tagasivoolu \u00fcmber, m\u00e4hime k\u00f5ik \u00dclaltoodud koodiga saame juhtuma j\u00e4rgmised kaks (t\u00f5en\u00e4oliselt kolm) asja. T\u00f6\u00f6riistaribale ilmub porgandiikooni otsetee (kui te pole seda veel vabastanud). Sellel kl\u00f5psates avaneb k\u00fclgriba. Samuti saate t\u00f6\u00f6riistamen\u00fc\u00fc k\u00fclgribale uue men\u00fc\u00fcelemendi pealkirja "Pluginad" all.<\/p>\n K\u00fclgriba tegelik sisu on t\u00e4ielikult teie otsustada. Peate lihtsalt lisama HTML-i v\u00f5i komponendi sees olevaid V\u00f5ite m\u00e4rgata, et k\u00fclgriba sisul puudub polster. See on tahtlik, sest idee on see, et loote selle k\u00fclgriba sees paneelid. Paneelid on tavalise Gutenbergi k\u00fclgriba kokkupandavad sektsioonid. Need on komponendid, mida saate oma kohandatud k\u00fclgribale v\u00e4ga lihtsalt lisada. Saate lisada nii palju paneele, kui soovite ja need sobivad suurep\u00e4raselt erinevate asjade r\u00fchmitamiseks.<\/p>\n Vaatame kiiresti, kuidas saame oma k\u00fclgribale paneele lisada. Kui olete loonud oma kohandatud plokit\u00fc\u00fcbid, v\u00f5ite olla nende komponentidega tuttav. Kasutame ja Komponendi jaoks Sees N\u00e4iteks lisame oma kohandatud k\u00fclgribale kaks paneeli.<\/p>\n Selle koodiga hakkab meie kohandatud k\u00fclgriba t\u00f5esti v\u00e4lja n\u00e4gema, nagu see kuuluks Gutenbergi!<\/p>\n<\/a><\/p>\nJavascripti seadistamine<\/h2>\n
webpack.config.js<\/code>oma l\u00e4htekoodi Javascripti faili oma teemakausta kompileerima \/assets\/js\/sidebar-plugin.js<\/code>. See koostatud fail on see, mida peame Gutenbergi redaktorisse j\u00e4rjekorda panema. Selle koodi kirjutamise ajal k\u00e4ivitasin k\u00e4itusaegse kompilaatori, mis kompileerib Javascripti uuesti iga kord, kui salvestan l\u00e4htekoodi muudatused (npm run start<\/code>). K\u00f5ike seda selgitatakse p\u00f5hjalikult eelnevalt mainitud \u00f5petuses.<\/p>\nSkripti lisamine redaktorisse<\/h2>\n
functions.php<\/code>on see hea koht alustamiseks v\u00f5i kuhugi pistikprogrammi failidesse. Pange t\u00e4hele, et peame lisama l\u00f5pliku kompileeritud skripti, mitte l\u00e4htekoodi. Minu n\u00e4ites asub kompileeritud Javascript minu teemakaustas \/assets\/js\/sidebar-plugin.js<\/code>.<\/p>\nenqueue_block_editor_assets<\/code>. Toas teeme tavalist [wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>. Skripti s\u00f5ltuvustena lisame kaks; wp-plugins<\/code>ja wp-edit-post<\/code>. Need kaks paketti tuleb laadida enne meie skripti, kuna kasutame nende funktsioone.<\/p>\nadd_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>\nenqueue_block_editor_assets<\/code>laaditakse meie skript ainult siis, kui Gutenbergi redaktor on aktiivne. Suurep\u00e4rane! N\u00fc\u00fcd on k\u00f5ik meie Javascripti pistikprogrammi kirjutamiseks valmis.<\/p>\nRegistreerige Javascripti pistikprogramm<\/h2>\n
[registerPlugin](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/plugins#registerPlugin)<\/code>funktsiooniga wp.plugins paketi seest wp.plugins<\/code>.<\/p>\n'carrot'<\/code>ikooni.<\/p>\nconst { 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>\nRegistreerige kohandatud k\u00fclgriba<\/h2>\n
<\/a><\/p>\nPluginSidebar<\/code>komponendiga wp.editPost<\/code>. Men\u00fc\u00fcelemendi lisamine men\u00fc\u00fcsse T\u00f6\u00f6riistad toimub sobiva nimega komponendiga PluginSidebarMoreMenuItem<\/code>(samuti wp.editPost<\/code>pakendis).<\/p>\nPluginSidebar<\/code>peame pakkuma m\u00f5ned rekvisiidid. Peaksite esitama minimaalselt name<\/code>ja title<\/code>. Rekvisiit title<\/code>on iseenesestm\u00f5istetav, see on nimi, mis kuvatakse k\u00fclgriba \u00fclaosas. In prop name<\/code>pakkuda unikaalne n\u00e4lkjas. Men\u00fc\u00fcelemendi lisamisel peate viitama sellele n\u00e4lkjale.<\/p>\nPluginSidebarMoreMenuItem<\/code>(T\u00f6\u00f6riistamen\u00fc\u00fc) komponendi lisamiseks on vaja v\u00e4hemalt \u00fchte tugipunkti; target<\/code>. Siin sisestate sama nime, mille andsite k\u00fclgriba name<\/code>rekvisiidis. Komponendi sisuks kirjutate teksti, mis kuvatakse men\u00fc\u00fcelemendina. Tavaliselt on see sama, mis k\u00fclgriba oma title<\/code>.<\/p>\nFragment<\/code>komponendi sisse (wp.element<\/code>pakendist). Pakkin ka oma n\u00f6\u00f6rid pakendist sisse __()<\/code>, wp.i18n<\/code>et oleks v\u00f5imalik t\u00f5lkida.<\/p>\nconst { 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<\/a><\/p>\nSisu lisamine k\u00fclgribale<\/h2>\n
PluginSidebar<\/code>komponente, mida iganes soovite (teksti "Tere" asemel).<\/p>\nPaneelide lisamine meie k\u00fclgribale<\/h3>\n
PanelBody<\/code>valikuliselt pakendist.PanelRow``wp.components<\/code><\/p>\nPanelBody<\/code>esitate v\u00e4hemalt prop title<\/code>. Soovi korral saate initialOpen<\/code>rekvisiidile m\u00e4\u00e4rata t\u00f5ese v\u00f5i v\u00e4\u00e4ra, et otsustada, kas paneeli tuleks vaikimisi laiendada v\u00f5i mitte. Komponendi sees olev sisu on k\u00f5ik paneeli sees.<\/p>\nPanelBody<\/code>saate valikuliselt kasutada PanelRow<\/code>komponente. Need pole tegelikult vajalikud, kuid aitavad teil oma paneeli sisule hea stiili kujundada.<\/p>\nconst { 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