npm<\/code> komentosarja, jolla voit luoda lohkolaajennuksen<\/a>, joka luo aloituslohkon, jotta p\u00e4\u00e4set nopeasti k\u00e4yntiin.<\/p>\nOletuksena t\u00e4m\u00e4n luoma WordPress-laajennus on "blokki", mutta se antaa meille my\u00f6s hyv\u00e4n aloituskohdan muunlaisille Gutenberg-laajennuksille.<\/p>\n
Edellytykset<\/h2>\n\n- Node on asennettava koneellesi,<\/a> jotta voit k\u00e4ytt\u00e4\u00e4
npm<\/code>komentoa (joka tarkoittaa Node Package Manageria)<\/li>\n- WordPressin asennus<\/li>\n
- Koodieditori<\/li>\n
- P\u00e4\u00e4sy terminaaliin<\/li>\n<\/ul>\n
Luo laajennus<\/h2>\n
Kun olet asentanut solmun koneellesi, sinulla pit\u00e4isi olla p\u00e4\u00e4sy npm<\/code>komentoon p\u00e4\u00e4tteess\u00e4si.<\/p>\nAvaa p\u00e4\u00e4telaite ja varmista, ett\u00e4 olet valinnut cd<\/code>’d (Changed Directory) WordPress-asennuksesi plugins-kansioon (esim cd wp-content\/plugins<\/code>. ).<\/p>\nKun olet siell\u00e4, suorita seuraava komento:<\/p>\n
npm init @wordpress\/block\n<\/code><\/pre>\nT\u00e4m\u00e4 lataa kaiken, mit\u00e4 komentosarja tarvitsee rakentamisen aloittamiseksi. Kun se on valmis, skripti kysyy sinulta joukon kysymyksi\u00e4, joita tarvitaan laajennuksen m\u00e4\u00e4ritt\u00e4miseen.<\/p>\n
P\u00e4\u00e4tteen k\u00e4ytt\u00e4minen Luo komentosarjan suorittamiseen<\/p>\n
M\u00e4\u00e4rityskysymykset<\/h3>\n
K\u00e4sikirjoitus kysyy seuraavat kysymykset, t\u00e4ss\u00e4 ovat esimerkkivastaukseni:<\/p>\n
\n- \n
Tunnistamiseen k\u00e4ytetty lohkoslug (my\u00f6s laajennuksen ja tuloskansion nimi)<\/strong> \u2014 Haluan, ett\u00e4 lohkoani kutsutaan nimell\u00e4 Wholesome Plugin<\/code>, joten kirjoitin wholesome-plugin<\/code>.<\/p>\n<\/li>\n- \n
Lohkon nimen sis\u00e4inen nimiavaruus (jotain ainutlaatuista tuotteillesi)<\/strong> \u2013 T\u00e4m\u00e4n pit\u00e4isi olla yksil\u00f6llinen kaikille sy\u00f6tt\u00e4milleni tuotteille wholesomecode<\/code>, koska t\u00e4m\u00e4 on yritykseni nimi.<\/p>\n<\/li>\n- \n
Lohkosi n\u00e4ytt\u00f6otsikko<\/strong> \u2014 annoin laajennuksen otsikon, Wholesome Plugin<\/code>.<\/p>\n<\/li>\n- \n
Lohkosi lyhyt kuvaus (valinnainen)<\/strong> \u2014 kirjoitin " An example plugin to demonstrate the create-block-script<\/code>".<\/p>\n<\/li>\n- \n
Dashicon, joka helpottaa lohkosi tunnistamista (valinnainen)<\/strong> \u2014 Valitsin WordPress Dashicons -resurssin<\/a>admin-plugins<\/code> nopeasti esiin, koska siin\u00e4 on laajennuskuvake. Muista j\u00e4tt\u00e4\u00e4 dashicon- etuliitteest\u00e4 pois t\u00e4t\u00e4 tehdess\u00e4si.<\/p>\n<\/li>\n- \n
Luokan nimi, joka auttaa k\u00e4ytt\u00e4ji\u00e4 selaamaan ja l\u00f6yt\u00e4m\u00e4\u00e4n lohkosi (k\u00e4yt\u00e4 nuolin\u00e4pp\u00e4imi\u00e4)<\/strong> \u2013 valitsin design<\/code>. Vaikka mukautettu luokka olisi todenn\u00e4k\u00f6isesti parempi.<\/p>\n<\/li>\n- \n
Laajennuksen tekij\u00e4n nimi (valinnainen). Useita kirjoittajia voidaan luetteloida pilkuilla<\/strong> \u2014 kirjoitin wholesomecode<\/code>.<\/p>\n<\/li>\n- \n
Laajennuksen lisenssin lyhyt nimi (valinnainen)<\/strong> \u2013 Painoin Enter hyv\u00e4ksy\u00e4kseni GPL v2.0:n tai uudemman.<\/p>\n<\/li>\n- \n
Linkki lisenssin koko tekstiin (valinnainen)<\/strong> \u2013 Painoin enteri\u00e4 lis\u00e4t\u00e4kseni GPL v2.0 -lisenssin URL-osoitteen.<\/p>\n<\/li>\n- \n
Laajennuksen nykyinen versionumero<\/strong> \u2014 Painoin enteri\u00e4 lis\u00e4t\u00e4kseni 0.1.0<\/code>.<\/p>\n<\/li>\n<\/ul>\n![\"WordPressin](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d770fb3.png\")
Komentosarjan konfigurointikysymykset<\/p>\n
Skripti p\u00e4\u00e4ttyy sen j\u00e4lkeen.<\/p>\n
Mit\u00e4 juuri tapahtui?<\/h3>\n
Muutamia asioita tapahtuu, kun komentosarja on k\u00e4ynniss\u00e4, n\u00e4m\u00e4 ovat:<\/p>\n
\n- Se luo laajennuksen kansion,<\/li>\n
- Se luo kaikki liit\u00e4nn\u00e4istiedostot (katso lis\u00e4osien tutkiminen saadaksesi lis\u00e4tietoja niiden toiminnasta<\/a> )<\/li>\n
- Se asentaa tarvitsemansa riippuvuudet, mukaan lukien
@wordpress\/scripts<\/code>paketin (t\u00e4m\u00e4 tekee laajennuksen rakentamisesta raskaan)<\/li>\n- Se kokoaa koodin<\/li>\n
- Se tulostaa luettelon komennoista, joita voit k\u00e4ytt\u00e4\u00e4<\/li>\n<\/ul>\n
![\"WordPressin](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d865300.png\")
Rakenna komentoja<\/p>\n
Tutkimme n\u00e4it\u00e4 lis\u00e4\u00e4 laajennuksia k\u00e4sittelev\u00e4ss\u00e4<\/a> osiossa.<\/p>\nPluginin k\u00e4ytt\u00e4minen<\/h2>\n
Ennen kuin voit k\u00e4ytt\u00e4\u00e4 laajennusta, sinun on aktivoitava se. Voit tehd\u00e4 t\u00e4m\u00e4n valitsemalla Plugins<\/code>WordPressin j\u00e4rjestelm\u00e4nvalvojan valikosta ja valitsemalla sitten activate<\/code>laajennuksen nimen alta.<\/p>\n![\"WordPressin](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d958ea6.gif\")
Aktivoi Plugin<\/p>\n
Nyt sinun on muokattava viesti\u00e4 WordPressiss\u00e4 ja lis\u00e4tt\u00e4v\u00e4 laajennus Gutenberg-editorilla.<\/p>\n
![\"WordPressin](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0db497f6.gif\")
Lohkon lis\u00e4\u00e4minen viestiin<\/p>\n
Huomaa, ett\u00e4 laajennus ei tee paljon oletusarvoa, se vain luo lohkon. Se tarjoaa kuitenkin puitteet, joita voit k\u00e4ytt\u00e4\u00e4 oman laajennuksen rakentamiseen.<\/p>\n
Lohkon katselu k\u00e4ytt\u00f6liittym\u00e4ss\u00e4<\/h3>\n
Oletuksena lohko n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4 etup\u00e4\u00e4ss\u00e4. Huomaa, ett\u00e4 sill\u00e4 on hieman erilainen ulkoasu, t\u00e4m\u00e4 on tarkoituksellista, jotta voit tutustua WordPressin etu- ja takaosan CSS:\u00e4\u00e4n.<\/p>\n
![\"WordPressin](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0dd10fa2.png\")
Block etup\u00e4\u00e4ss\u00e4<\/p>\n
Pluginin tutkiminen<\/h2>\n
Luo lohkokomentosarjan koko tarkoitus on, ett\u00e4 voit luoda oman laajennuksen. Tutkitaanpa yksityiskohtaisemmin sen luomia tiedostoja:<\/p>\n
![\"WordPressin](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0de1777f.png\")
Luodut tiedostot<\/p>\n
wholesome-plugin<\/code><\/strong>\u2014 T\u00e4m\u00e4 on laajennuksen juurikansio, sill\u00e4 on sama nimi kuin se, jonka annoin ’slug’:lle asennuskysymyksiss\u00e4.<\/p>\n**\/build**<\/code>\u2014 T\u00e4m\u00e4 on koontikansio. Se sis\u00e4lt\u00e4\u00e4 kaikki \/src<\/code>kansiosta luodut JavaScript- ja PHP-resurssit. N\u00e4m\u00e4 asetetaan jonoon p\u00e4\u00e4lataustiedoston kautta wholesome-notes.php<\/code>.<\/p>\n**\/build\/index.assets.php**<\/code>\u2014 T\u00e4m\u00e4 PHP-tiedosto luodaan automaattisesti, kun \/src<\/code>kansio k\u00e4\u00e4nnet\u00e4\u00e4n. Se sis\u00e4lt\u00e4\u00e4 joukon kaikkia laajennuksen k\u00e4ytt\u00e4mi\u00e4 WordPress Editorin (Gutenberg) JavaScript-syvyyksi\u00e4. Se asetetaan jonoon p\u00e4\u00e4lataustiedoston kautta wholesome-plugin.php<\/code>.<\/p>\n**\/build\/index.css**<\/code>\u2014 T\u00e4m\u00e4 on editorin CSS-tiedosto, ja se asetetaan jonoon p\u00e4\u00e4lataustiedoston kautta wholesome-plugin.php<\/code>.<\/p>\n**\/build\/index.js**<\/code>\u2014 T\u00e4m\u00e4 on t\u00e4rkein k\u00e4\u00e4nnetty JavaScript-tiedosto, ja se asetetaan jonoon p\u00e4\u00e4lataustiedoston kautta wholesome-plugin.php<\/code>.<\/p>\n**\/build\/style-index.css**<\/code>\u2014 T\u00e4m\u00e4 on k\u00e4ytt\u00f6liittym\u00e4n CSS-tiedosto, ja se asetetaan jonoon p\u00e4\u00e4lataustiedoston kautta wholesome-plugin.php<\/code>.<\/p>\n**\/build\/index.js.map**<\/code>\u2014 T\u00e4m\u00e4 tiedosto luodaan vain, kun k\u00e4\u00e4nn\u00e4t resursseja kehitystilaa varten (IE k\u00e4yt\u00e4t, npm start<\/code>etk\u00e4 npm build<\/code>kun k\u00e4\u00e4nn\u00e4t resursseja. Se on hy\u00f6dyllinen tiedosto JavaScript-virheenkorjaajille, joka auttaa tunnistamaan tiedostojen nimet ja rivinumerot virheiden sattuessa.<\/p>\n\n- \n
**\/node_modules**<\/code>\u2014 T\u00e4m\u00e4 on kansio, johon kaikki laajennuksen JavaScript-riippuvuudet on asennettu.<\/p>\n<\/li>\n- \n
**\/src**<\/code>\u2014 T\u00e4m\u00e4 on kansio, joka sis\u00e4lt\u00e4\u00e4 kaikki laajennukseesi k\u00e4\u00e4nt\u00e4m\u00e4tt\u00f6m\u00e4t resurssit.<\/p>\n<\/li>\n- \n
**\/src\/edit.js**<\/code>\u2014 T\u00e4m\u00e4 on lohkon muokkaustoiminto ja ohjaa, kuinka lohko n\u00e4ytet\u00e4\u00e4n lohkoeditorissa, kun se on muokkaustilassa.<\/p>\n<\/li>\n- \n
**\/src\/editor.scss**<\/code>\u2014 T\u00e4m\u00e4 on k\u00e4\u00e4nt\u00e4m\u00e4t\u00f6n SCSS editorille, t\u00e4m\u00e4 k\u00e4\u00e4nnet\u00e4\u00e4n osaksi \/build\/index.css<\/code>.<\/p>\n<\/li>\n- \n
**\/src\/index.js**<\/code>\u2014 T\u00e4m\u00e4 on t\u00e4rkein k\u00e4\u00e4nt\u00e4m\u00e4t\u00f6n JavaScript-tiedosto WordPress Editor (Gutenberg) -lohkollesi. Se rekister\u00f6i lohkon ja sis\u00e4lt\u00e4\u00e4 oletusasetukset.<\/p>\n<\/li>\n- \n
**\/src\/save.js**<\/code>\u2014 T\u00e4m\u00e4 on lohkon tallennustoiminto ja ohjaa lohkon merkint\u00f6j\u00e4, kun se tallennetaan.<\/p>\n<\/li>\n- \n
**\/src\/style.scss**<\/code>\u2014 T\u00e4m\u00e4 on k\u00e4\u00e4nt\u00e4m\u00e4t\u00f6n SCSS k\u00e4ytt\u00f6liittym\u00e4lle, t\u00e4m\u00e4 k\u00e4\u00e4nnet\u00e4\u00e4n osaksi \/build\/style-index.css<\/code>.<\/p>\n<\/li>\n- \n
**\/.editorconfig**<\/code>\u2014 T\u00e4m\u00e4 tiedosto sis\u00e4lt\u00e4\u00e4 hy\u00f6dyllisi\u00e4 esiasetuksia IDE:lle (Integrated Development Environment), kuten Visual Studio Code.<\/p>\n<\/li>\n- \n
**\/.gitignore**<\/code>\u2014 T\u00e4m\u00e4 tiedosto k\u00e4skee giti\u00e4 ohittamaan tietyt tiedostot, kun sitoudut git-tietovarastoon (kuten GitHubiin).<\/p>\n<\/li>\n- \n
**\/editor.css**<\/code>\u2014 T\u00e4m\u00e4n tiedoston tyylit tulostetaan vain editorissa, se asetetaan jonoon p\u00e4\u00e4lataustiedoston kautta wholesome-notes.php<\/code>.<\/p>\n<\/li>\n- \n
**\/block.json**<\/code>\u2014 T\u00e4m\u00e4 tiedosto m\u00e4\u00e4ritt\u00e4\u00e4 laajennuksen, jotta WordPressin lohkokirjasto voi l\u00f6yt\u00e4\u00e4 sen. Jos teet muutoksia laajennukseen, varmista, ett\u00e4 t\u00e4m\u00e4 tiedosto on p\u00e4ivitetty. NPM-komentosarjan uudemmissa versioissa t\u00e4t\u00e4 tiedostoa k\u00e4ytet\u00e4\u00e4n lohkosi \/src\/index.js<\/code>rekister\u00f6innin sijaan.<\/p>\n<\/li>\n- \n
**\/package.json**<\/code>\u2014 T\u00e4m\u00e4 tiedosto sis\u00e4lt\u00e4\u00e4 kaikki laajennuksen npm-riippuvuudet ja komennot, jotka voit suorittaa. Huomaa, ett\u00e4 laajennus k\u00e4ytt\u00e4\u00e4 wp-scripts<\/code>( @wordpress\/scripts<\/code>) pohjanaan, joten alun perin ladatut riippuvuudet ovat t\u00e4lle paketille.<\/p>\n<\/li>\n- \n
**\/readme.txt**<\/code>\u2014 T\u00e4m\u00e4 tiedosto on WordPress-laajennusten arkiston readme-tiedosto, jota tarvitaan, jos haluat, ett\u00e4 lohko luetellaan laajennusarkistoon.<\/p>\n<\/li>\n- \n
**\/wholesome-plugin.php**<\/code>\u2014 T\u00e4m\u00e4 on laajennuksen p\u00e4\u00e4lataustiedosto. Sen nimi asetettiin "slugin" kautta, jonka sy\u00f6timme alkuper\u00e4iseen asennusohjelmaan. Se asettaa jonoon kaikki laajennuksen tarvitsemat JavaScript-omaisuudet.<\/p>\n<\/li>\n<\/ul>\nRakennuskomentojen tutkiminen<\/h3>\n
Ennen kuin voimme suorittaa rakennuskomentojamme, meid\u00e4n on varmistettava, ett\u00e4 olemme laajennuskansiossa. T\u00e4ss\u00e4 esimerkiss\u00e4 ajaisimme cd wholesome-plugin<\/code>terminaalissa vaihtamaan hakemiston laajennuskansioomme.<\/p>\nVoimme sitten suorittaa seuraavat komennot:<\/p>\n
\n- \n
**npm start**<\/code>\u2014 Aloittaa rakentamisen kehityst\u00e4 varten. Jos teet muutoksia laajennukseen, sinun on teht\u00e4v\u00e4 t\u00e4m\u00e4, jotta muutokset tulevat n\u00e4kyviin (sinun on todenn\u00e4k\u00f6isesti my\u00f6s p\u00e4ivitett\u00e4v\u00e4 selaimesi).<\/p>\n<\/li>\n- \n
**npm run build**<\/code>\u2014 Rakentaa koodin tuotantoa varten. Tee t\u00e4m\u00e4, jos olet luomassa laajennuksen julkaisuversiota.<\/p>\n<\/li>\n- \n
**npm run format:js**<\/code>\u2014 Alustaa JavaScript-tiedostot automaattisesti parhaiden k\u00e4yt\u00e4nt\u00f6jen mukaisesti.<\/p>\n<\/li>\n- \n
**npm run lint:css**<\/code>\u2014 Lints (etsii virheit\u00e4) CSS-tiedostoja.<\/p>\n<\/li>\n- \n
**npm run lint:js**<\/code>\u2014 Lints (etsii virheit\u00e4) JavaScript-tiedostoja.<\/p>\n<\/li>\n- \n
**npm run packages-update**<\/code>– P\u00e4ivitt\u00e4\u00e4 WordPress-paketit uusimpaan versioon.<\/p>\n<\/li>\n<\/ul>\nK\u00e4yt\u00e4mme yht\u00e4 tai useampaa n\u00e4ist\u00e4, kun muokkaamme laajennusta.<\/p>\n
Pluginin muokkaaminen<\/h2>\n
Aloitetaan tekem\u00e4ll\u00e4 lohkostamme muokattavissa.<\/p>\n
Lis\u00e4\u00e4 attribuutteja kohteeseen\/src\/index.js<\/code><\/h3>\nAvaa \/src\/index.js<\/code>editorissasi ja lis\u00e4\u00e4 seuraava registerBlockType<\/code>funktion sis\u00e4\u00e4n kohtaan apiVersion<\/code>:<\/p>\nattributes: {\n blockText: {\n default: 'Wholesome Plugin \u2013 hello from the editor!',\n type: 'string',\n },\n},\n<\/code><\/pre>\nT\u00e4m\u00e4 antaa meille paikan tallentaa tiedot laajennuksessamme nimelt\u00e4\u00e4n blockText<\/code>Accessible via attributes<\/code>property (prop). Huomaa, ett\u00e4 olemme antaneet sille oletusarvon luontilaajennuksen komentosarjan luomasta alkuper\u00e4isest\u00e4 tekstist\u00e4.<\/p>\nLis\u00e4\u00e4 RichText kohteeseen\/src\/edit.js<\/code><\/h3>\nAvaa \/src\/edit.js<\/code>editorissasi ja korvaa tuonti kohteelle useBlockProps<\/code>seuraavalla:<\/p>\nimport { RichText, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\nT\u00e4m\u00e4 antaa meille mahdollisuuden k\u00e4ytt\u00e4\u00e4 RichText-komponenttia muokkaustavassamme.<\/p>\n
Muuta sitten koko muokkaustoiminto seuraavaksi:<\/p>\n
export default function Edit( { attributes, setAttributes }) {\n const { blockText } = attributes;\n return (<p { ...useBlockProps() }>\n <RichText\n className=\"block__text\"\n keepPlaceholderOnFocus\n onChange={ (blockText) => setAttributes( { blockText }) }\n placeholder={ __( 'Block Text', 'wholesome-plugin') }\n tagName=\"span\"\n value={ blockText }\n \/>\n <\/p>\n );\n}\n<\/code><\/pre>\nT\u00e4m\u00e4 asettaa komponentin arvon RichText<\/code>samaksi kuin blockText<\/code>attribuutissa tallennettu arvo, ja onChange<\/code>ominaisuus m\u00e4\u00e4ritt\u00e4\u00e4 blockText<\/code>attribuutin sen, mik\u00e4 komponenttiin on koskaan sy\u00f6tetty RichText<\/code>.<\/p>\nTulosta attribuutit sis\u00e4\u00e4n\/src\/save.js<\/code><\/h3>\nAvaa \/src\/save.js<\/code>editorissasi ja korvaa save<\/code>funktio seuraavalla:<\/p>\nexport default function save( { attributes }) {\n const { blockText } = attributes;\n return (<p { ...useBlockProps.save() }>\n { blockText }\n <\/p>\n );\n}\n<\/code><\/pre>\nT\u00e4m\u00e4 yksinkertaisesti tulostaa arvon blockText<\/code>kappaleeseen.<\/p>\nPluginin k\u00e4\u00e4nt\u00e4minen<\/h3>\n
Avaa p\u00e4\u00e4te, varmista, ett\u00e4 olet laajennuksen juurihakemistossa ja suorita seuraava komento:<\/p>\n
K\u00e4sikirjoitus kootaan. Jos sinulla on virheit\u00e4, p\u00e4\u00e4tteen pit\u00e4isi ilmoittaa sinulle, mit\u00e4 ne ovat.<\/p>\n
![\"WordPressin](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0df5e2a4.gif\")
Pluginin rakentaminen<\/p>\n
Lis\u00e4osan lis\u00e4\u00e4minen<\/h3>\n
Varmista, ett\u00e4 olet p\u00e4ivitt\u00e4nyt viestisi. Lohkon edellinen versio voi nyt olla rikki, t\u00e4m\u00e4 on hyv\u00e4, poista se ja lis\u00e4\u00e4 uusi.<\/p>\n
Lis\u00e4\u00e4 lohko k\u00e4ytt\u00e4m\u00e4ll\u00e4 editorin vasemmassa yl\u00e4kulmassa olevaa plussymbolia, ja kun se on lis\u00e4tty, napsauta sen teksti\u00e4. Sinun pit\u00e4isi. nyt voi muokata teksti\u00e4.<\/p>\n
![\"WordPressin](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e151e82.gif\")
Muokattavan lohkon lis\u00e4\u00e4minen<\/p>\n
Pluginin katselu<\/h3>\n
Tallenna viesti ja katso se verkkosivuston etuosassa, muokkaamasi teksti tulee n\u00e4kyviin alkuper\u00e4isen tekstin sijaan.<\/p>\n
![\"WordPressin](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e327430.png\")
Muokattava lohko verkkosivuston etuosassa<\/p>\n
Jos haluat lohkosi n\u00e4kyv\u00e4n mukautetussa lohkoluokassa, lis\u00e4\u00e4 vain seuraava koodi laajennuksen juureen (t\u00e4ss\u00e4 tapauksessa wholesome-plugin.php<\/code>:<\/p>\nfunction wholesomecode_wholesome_plugin_block_categories( $categories) {\n return array_merge(\n $categories,\n [\n [\n 'slug' => 'wholesome-blocks',\n 'title' => __( 'Wholesome Blocks', 'wholesome-boilerplate' ),\n ],\n ]\n );\n}\nadd_action( 'block_categories', 'wholesomecode_wholesome_plugin_block_categories', 10, 2 );\n<\/code><\/pre>\nT\u00e4m\u00e4 rekister\u00f6i mukautetun lohkoluokan lohkon lis\u00e4yslaitteeseen.<\/p>\n
Sitten sinun tarvitsee vain s\u00e4\u00e4t\u00e4\u00e4 funktion category<\/code>argumentti viittaamaan lohkoluokkaasi ja k\u00e4\u00e4nt\u00e4\u00e4 uudelleen:registerBlockType``\/src\/index.js<\/code><\/p>\n\ncategory: 'wholesome-blocks',\n<\/code><\/pre>\nNyt kun tulet lis\u00e4\u00e4m\u00e4\u00e4n lohkoasi, l\u00f6yd\u00e4t sen juuri luomastasi lohkoluokasta:<\/p>\n
![\"WordPressin](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e40fe2e.png\")
Mukautettu lohkoluokka Block Inserterissa<\/p>\n
\n- Tutustu PHP:n k\u00e4ytt\u00e4miseen lohkon render\u00f6imiseen dynaamisilla lohkoilla<\/a><\/li>\n
- Tarkastele post-metakenttien k\u00e4ytt\u00f6\u00e4 lohkosi attribuutteina<\/a><\/li>\n
- Lis\u00e4\u00e4 lohkosivupalkki InspectorControlsilla<\/a><\/li>\n
- Laajenna laajennusta lis\u00e4\u00e4m\u00e4ll\u00e4 uusia tulopisteit\u00e4 webpack.config-tiedostoon<\/a><\/li>\n<\/ul>\n