{"id":233831,"date":"2023-02-23T13:42:00","date_gmt":"2023-02-23T10:42:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233831"},"modified":"2022-11-11T12:41:15","modified_gmt":"2022-11-11T09:41:15","slug":"luo-mukautettu-gutenberg-lohko-osa-2-rekisteroeintilohko","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/luo-mukautettu-gutenberg-lohko-osa-2-rekisteroeintilohko\/","title":{"rendered":"Luo mukautettu Gutenberg-lohko – Osa 2: Rekister\u00f6intilohko"},"content":{"rendered":"\n

T\u00e4ss\u00e4 osassa kirjoitamme Javascriptin rekister\u00f6id\u00e4ksemme ja m\u00e4\u00e4ritt\u00e4\u00e4ksemme mukautetun lohkomme. Lopuksi rekister\u00f6imme skriptin PHP:ll\u00e4 ja teemme tarvittavan PHP-koodin, jotta WordPress tunnistaa sen uudeksi lohkoksi.<\/p>\n

Ensin lyhyt huomautus WordPress Gutenbergin toimintojen ja komponenttien k\u00e4ytt\u00e4misest\u00e4.<\/p>\n

Globaali wp<\/code>paketti ja tuhoutuminen<\/h2>\n

Kun olemme Javascript-tiedostossa, joka on jonossa Gutenberg-editorissa, meill\u00e4 on p\u00e4\u00e4sy globaaliin objektiin\/pakettiin: wp<\/code>. T\u00e4m\u00e4 on hyvin, vaihteleva suuri Javascript-objekti ja se sis\u00e4lt\u00e4\u00e4 koko joukon hy\u00f6dyllisi\u00e4 komponentteja ja toimintoja, joita k\u00e4yt\u00e4mme lohkojen luomiseen. Kun kirjoitat Javascripti\u00e4 mukautetuille lohkoille, viittaat wp<\/code>melko paljon.<\/p>\n

Siksi on yleist\u00e4, sek\u00e4 nykyaikaisessa Javascriptiss\u00e4 ett\u00e4 Reactissa, tuhota se, mit\u00e4 haluamme k\u00e4ytt\u00e4\u00e4 siit\u00e4. Pohjimmiltaan se tarkoittaa vain sit\u00e4, ett\u00e4 m\u00e4\u00e4rittelemme paikalliset muuttujat suuremman rakenteen osista. Esimerkiksi ensimm\u00e4inen k\u00e4ytt\u00e4m\u00e4mme funktio registerBlockType()<\/code>on sis\u00e4ll\u00e4 wp.blocks<\/code>. Voisimme kutsua funktion seuraavasti:<\/p>\n

wp.blocks.registerBlockType();<\/code><\/pre>\n
Mutta se on helpompi tuhota n\u00e4in:<\/p>\n
const { registerBlockType } = wp.blocks;\nregisterBlockType();<\/code><\/pre>\n
Nyt voit viitata funktioon suoraan ilman sen rakenteen etuliitett\u00e4. Siit\u00e4 tulee paljon hy\u00f6dyllisemp\u00e4\u00e4, kun viitataan toimintoihin tai komponentteihin, joita toistamme usein.<\/p>\n
Teemme t\u00e4ss\u00e4 sarjassa uudelleenj\u00e4rjestelyj\u00e4, ja kun etenemme opetusohjelmassa, n\u00e4emme kuinka paljon luettavampaa ja lyhyemp\u00e4\u00e4 koodimme tulee.<\/p>\n
Uuden lohkon rekister\u00f6inti<\/h2>\n
Uuden mukautetun lohkon rekister\u00f6intitoiminto on registerBlockType()<\/code>saatavilla wp.blocks<\/code>paketissa. Se hyv\u00e4ksyy kaksi parametria; ensin merkkijono, jossa on lohkon nimiavaruus ja nimi, ja toiseksi objekti t\u00e4ydell\u00e4 lohkokokoonpanolla.<\/p>\n
Gutenberg odottaa, ett\u00e4 kaikilla lohkoilla on nimiavaruus ja nimi, joiden v\u00e4liss\u00e4 on kauttaviiva. Nimiavaruuden tarkoituksena on varmistaa, ett\u00e4 lohkosi nimi ei ole ristiriidassa muiden samaa nime\u00e4 k\u00e4ytt\u00e4vien lohkojen kanssa. Kaikki WordPressin lohkot k\u00e4ytt\u00e4v\u00e4t nimiavaruutta core<\/code>. Esimerkiksi WordPressin vakiokappalelohkolla on nimi core\/paragraph<\/code>. Jos valitset toisen nimitilan, voit my\u00f6s luoda lohkon nimelt\u00e4 kappale ilman ongelmia.<\/p>\n
Valitse sinulle ainutlaatuinen slug-version nimiavaruus. K\u00e4yt\u00e4n awp<\/code>t\u00e4ss\u00e4 sarjassa nimiavaruutta (lyhyt versio A White Pixelist\u00e4).<\/p>\n
Avaa l\u00e4hdetiedosto, jonka loimme viimeisess\u00e4 vaiheessa; src\/block-awhitepixel-myfirstblock.js<\/code>, editorissa. Ensin soitetaan registerBlockType<\/code>destructuredista wp.blocks<\/code>nimell\u00e4 awp\/firstblock<\/code>. S\u00e4\u00e4d\u00e4 nime\u00e4si ja nimiavaruuttasi.<\/p>\n
const { registerBlockType } = wp.blocks;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    \/\/ Your block configuration and code here\n});<\/code><\/pre>\n
Toisessa parametrissa, lohkokonfiguraatioobjektissa, meid\u00e4n on m\u00e4\u00e4ritett\u00e4v\u00e4 muutama ominaisuus, jotta se rekister\u00f6id\u00e4\u00e4n onnistuneesti. Muista, ett\u00e4 lohkokokoonpano on objekti, mik\u00e4 tarkoittaa, ett\u00e4 sinun on kirjoitettava kaikki avain + arvo -pareina pilkulla erotettuina. Mahdollisia konfigurointiominaisuuksia on melko v\u00e4h\u00e4n, joten k\u00e4yd\u00e4\u00e4n n\u00e4m\u00e4 l\u00e4pi ja n\u00e4emme lopullisen koodin lopussa.<\/p>\n
Pakollinen: otsikko<\/h3>\n
Ensimm\u00e4inen vaadittu ominaisuus on title<\/code>. T\u00e4m\u00e4 on nimi, joka tulee n\u00e4kyviin, kun valitset lohkojen v\u00e4lill\u00e4. Aseta t\u00e4m\u00e4 ominaisuus mink\u00e4 tahansa nimen mukaan merkkijonossa.<\/p>\n
Lis\u00e4\u00e4mme otsikoksi seuraavaa:<\/p>\n
title: 'My first block',<\/code><\/pre>\n
PS: Tarkastellaan uudelleen, kuinka kirjoitamme kaikki lohkomme merkkijonot varmistaaksemme, ett\u00e4 ne voidaan k\u00e4\u00e4nt\u00e4\u00e4 osassa 8. Mutta toistaiseksi pid\u00e4mme sen yksinkertaisena ja kirjoitamme vain merkkijonoja.<\/p>\n
Pakollinen: luokka<\/h3>\n
Ominaisuus category<\/code>m\u00e4\u00e4ritt\u00e4\u00e4, miss\u00e4 lohkokategoriassa lohkosi n\u00e4kyy, kun valitset lohkoja lis\u00e4tt\u00e4v\u00e4ksi editorissa. Mahdolliset arvot ovat common<\/code>, formatting<\/code>, layout<\/code>, widgets<\/code>, embed<\/code>.<\/p>\n
Laitetaan se common<\/code>ensimm\u00e4iseen lohkoluokkaan.<\/p>\n
category: 'common',<\/code><\/pre>\n
Valinnainen: kuvake<\/h3>\n
Jos olet k\u00e4ytt\u00e4nyt Gutenbergi\u00e4, olet todenn\u00e4k\u00f6isesti huomannut, ett\u00e4 kaikissa lohkoissa on kuvakkeet. Voit lis\u00e4t\u00e4 lohkoosi kuvakkeen joko merkkijonolla, joka viittaa mihin tahansa WordPressin Dashiconiin<\/a>, tai voit tarjota mukautetun svg<\/code>elementin.<\/p>\n
Valitsen vain yhden WordPressin dashiconeista, hymi\u00f6n<\/a> \u2013 mutta voit valita mink\u00e4 tahansa. Huomaa, ett\u00e4 ohitat "dashicons-":n lis\u00e4\u00e4misen kuvakeluokkasi nimeen.<\/p>\n
icon: 'smiley',<\/code><\/pre>\n
Valinnainen: kuvaus<\/h3>\n
Voit antaa kuvauksen, joka n\u00e4kyy Asetukset-sivupalkissa (oikealla), kun esto on aktiivinen.<\/p>\n
Lis\u00e4\u00e4n vain lyhyen tekstin esimerkkin\u00e4:<\/p>\n
description: 'Learning in progress',<\/code><\/pre>\n
Valinnainen: avainsanat<\/h3>\n
Gutenberg tukee hakutoimintoa valittaessa lohkotyyppej\u00e4. Voit tarjota joukon mahdollisia osumia kiinteist\u00f6ss\u00e4 keywords<\/code>. Ilman keywords<\/code>sit\u00e4 l\u00f6yt\u00e4isit lohkon vain etsim\u00e4ll\u00e4 sen nime\u00e4.<\/p>\n
Lis\u00e4\u00e4n example<\/code>ja test<\/code>, jotta voimme helposti l\u00f6yt\u00e4\u00e4 mukautetun lohkomme, kun alamme kirjoittaa jotakin n\u00e4ist\u00e4 avainsanoista.<\/p>\n
keywords: ['example', 'test'],<\/code><\/pre>\n
Valinnainen: attribuutit<\/h3>\n
Kiinteist\u00f6 attributes<\/code>on eritt\u00e4in t\u00e4rke\u00e4 ominaisuus, johon palaamme melko usein t\u00e4ss\u00e4 opetusohjelmasarjassa. T\u00e4nne tallennat lohkosi j\u00e4sennellyt tiedot ja k\u00e4ytt\u00e4j\u00e4n sy\u00f6tt\u00e4m\u00e4t tiedot. Voit kuvitella sen muuttujina. Emme lis\u00e4\u00e4 sit\u00e4 toistaiseksi, mutta palaamme t\u00e4h\u00e4n varmasti pian.<\/p>\n
(Tyylik\u00e4s) pakollinen: muokkaa ja valinnainen: tallenna<\/h3>\n
Sis\u00e4lt\u00f6 edit<\/code>ja save<\/code>ominaisuudet on itse asiassa paikka, jossa lis\u00e4\u00e4t kaiken koodisi sek\u00e4 editorin tulostukseen ett\u00e4 k\u00e4ytt\u00f6liittym\u00e4n hahmonnukseen. Molemmat ominaisuudet odottavat funktion, jonka pit\u00e4isi palauttaa jonkin verran tulosta.<\/p>\n
Ominaisuus edit<\/code>kuvaa lohkosi rakennetta editorissa. Kiinteist\u00f6 save<\/code>k\u00e4sittelee pohjimmiltaan kahta asiaa; lohkotulostuksesi k\u00e4ytt\u00f6liittym\u00e4ss\u00e4, mutta my\u00f6s rakenne siit\u00e4, kuinka lohkosi tallennetaan tietokantaan. Ty\u00f6skentelet enimm\u00e4kseen, edit<\/code>koska t\u00e4nne lis\u00e4\u00e4t sy\u00f6tteit\u00e4 asioiden sy\u00f6tt\u00e4miseen tai valitsemiseen sek\u00e4 lohkon tietojen p\u00e4ivitt\u00e4miseen. Funktio save<\/code>ei saa p\u00e4ivitt\u00e4\u00e4 tai muokata tietoja mill\u00e4\u00e4n tavalla, sen pit\u00e4isi vain tulostaa.<\/p>\n
Gutenbergin t\u00e4ytyy pysty\u00e4 rakentamaan uudelleen lohkosi kaikkine asetuksineen editorissa save<\/code>funktion (ja attribuuttien) tulosten perusteella. Jos Gutenberg avaa joskus viestin, jossa aiemmin tallennettu lohkotulos poikkeaa (jopa hieman) tallennuksen m\u00e4\u00e4ritt\u00e4misest\u00e4, lohkosi mit\u00e4t\u00f6ityy.<\/p>\n
\"Luo<\/a><\/p>\n
Voin taata, ett\u00e4 kohtaat t\u00e4m\u00e4n paljon kehitt\u00e4ess\u00e4si mukautettuja lohkoja. Kun n\u00e4in tapahtuu, sinun on poistettava lohko (ty\u00f6kalupalkin pisteist\u00e4) ja lis\u00e4tt\u00e4v\u00e4 se uudelleen. Suosittelen my\u00f6s selaimen p\u00e4ivitt\u00e4mist\u00e4 (F5 tai CTRL+R).<\/p>\n
WordPressill\u00e4 on oma dokumentaatiosivu<\/a> lohkon muokkaus- ja tallennustoimintoja varten, jos haluat lis\u00e4tietoja.<\/p>\n
Mit\u00e4 tulee ensimm\u00e4iseen lohkoomme, tuotetaan jotain perustietoa. Palautamme saman molemmille edit<\/code>ja save<\/code>; ":)" k\u00e4\u00e4rittyn\u00e4 <div><\/code>. Lohkon kuvake on loppujen lopuksi hymi\u00f6.<\/p>\n
edit:() => { \n    return <div>:)<\/div> \n},\nsave:() => { \n    return <div>:)<\/div> \n}<\/code><\/pre>\n
Muut ominaisuudet<\/h3>\n
Kohdalle registerBlockType<\/code>; parent<\/code>, supports<\/code>, transforms<\/code>, example<\/code>, ja styles<\/code>. Ohitamme n\u00e4m\u00e4 toistaiseksi, koska useimmat ovat edistyneemp\u00e4\u00e4 tai r\u00e4\u00e4t\u00e4l\u00f6ity\u00e4 lohkorakennusta varten. Jos olet kiinnostunut lukemaan n\u00e4ist\u00e4 lis\u00e4\u00e4, tutustu WordPressin dokumentaatioon<\/a>.<\/p>\n
Lopullinen rekisterilohkokoodi<\/h2>\n
Koodimme n\u00e4ytt\u00e4\u00e4 nyt suunnilleen t\u00e4lt\u00e4.<\/p>\n
const { registerBlockType } = wp.blocks;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    category: 'common',\n    icon: 'smiley',\n    description: 'Learning in progress',\n    keywords: ['example', 'test'],\n    edit: () => { \n        return <div>:)<\/div> \n    },\n    save: () => { \n        return <div>:)<\/div> \n    }\n});<\/code><\/pre>\n
T\u00e4ll\u00e4 meill\u00e4 on tarpeeksi, jotta lohkomme rekister\u00f6id\u00e4\u00e4n onnistuneesti mukautetuksi lohkoksi. Katsotaanpa sit\u00e4 k\u00e4yt\u00e4nn\u00f6ss\u00e4 Gutenberg-editorissa.<\/p>\n
Muistitko k\u00e4\u00e4nt\u00e4\u00e4 Javascriptin? Edellisess\u00e4 vaiheessa opimme, ett\u00e4 emme voi ladata t\u00e4t\u00e4 Javascript-tiedostoa Gutenbergiin; tarvitsemme k\u00e4\u00e4nnetyn version. Yleens\u00e4 kehit\u00e4t npm run start<\/code>juoksemalla taustalla tai voit juosta npm run build<\/code>nyt kerran. Sen pit\u00e4isi k\u00e4\u00e4nt\u00e4\u00e4 l\u00e4hde-Javascript ja sijoittaa se minne tahansa m\u00e4\u00e4ritit sen sijoitettavaksi ja nimett\u00e4v\u00e4ksi webpack.config.js<\/code>.<\/p>\n
Lohkon rekister\u00f6innin PHP-osa<\/h2>\n
Jokaista lohkoa varten sinun on rekister\u00f6it\u00e4v\u00e4 Javascript-tiedosto, ja t\u00e4m\u00e4 on aivan sama kuin mink\u00e4 tahansa muun WordPressin skriptin rekister\u00f6iminen – k\u00e4ytt\u00e4m\u00e4ll\u00e4 [wp_register_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_script\/)()<\/code>. Huomaa, ett\u00e4 rekister\u00f6imme skriptin, emme aseta sit\u00e4 jonoon. T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 meid\u00e4n on my\u00f6s kutsuttava PHP-funktio rekister\u00f6im\u00e4\u00e4n jokainen mukautettu lohko, ja t\u00e4m\u00e4 toiminto vastaa komentosarjan jonosta, kun sit\u00e4 tarvitaan.<\/p>\n
Pid\u00e4n Gutenbergiin liittyv\u00e4\u00e4 koodia mieluummin erillisess\u00e4 tiedostossa teemoissani. Mutta voit, ja me aiomme t\u00e4ss\u00e4 opetusohjelmassa, yksinkertaisesti kirjoittaa kaiken PHP-koodin suoraan teeman sis\u00e4\u00e4n functions.php<\/code>yksinkertaisuuden vuoksi.<\/p>\n
Suosittelen k\u00e4ytt\u00e4m\u00e4\u00e4n init<\/code>koukkua toimintoasi varten, ei enqueue_block_assets<\/code>. Voimme yhdist\u00e4\u00e4 sek\u00e4 skriptin ett\u00e4 lohkon rekister\u00f6innin.<\/p>\n
add_action('init', function() {\n    wp_register_script('awp-myfirstblock-js', get_template_directory_uri(). '\/assets\/js\/gutenberg\/block-awhitepixel-myfirstblock.js');\n\u00a0\n    register_block_type('awp\/firstblock', [\n        'editor_script' => 'awp-myfirstblock-js',\n    ]);\n});<\/code><\/pre>\n
PHP-funktio, jota k\u00e4yt\u00e4mme uuden lohkon rekister\u00f6intiin, on [register_block_type](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/)()<\/code>. Samoin kuin Javascriptin registerBlockType()<\/code>se hyv\u00e4ksyy kaksi parametria; lohkon nimiavaruus ja nimi sek\u00e4 taulukko argumenteilla. Varmista, ett\u00e4 annat t\u00e4sm\u00e4lleen saman nimiavaruuden ja nimen PHP:ss\u00e4 kuin Javascriptiss\u00e4.<\/p>\n
Toisessa argumentissa on muutamia mahdollisia argumentteja (joihin palaamme my\u00f6hemmin t\u00e4ss\u00e4 sarjassa). Mutta t\u00e4rkein on se editor_script<\/code>, miss\u00e4 annat wp_register_script()<\/code>rekister\u00f6idyn skriptin kahvan (ensimm\u00e4inen parametri).<\/p>\n
Ja siin\u00e4 se!<\/p>\n
Meid\u00e4n lohkomme Gutenberg-editorissa<\/h2>\n
Nyt kun p\u00e4ivit\u00e4t editorin jossain viestiss\u00e4, sinun pit\u00e4isi l\u00f6yt\u00e4\u00e4 lohkomme \u2013 joko avaamalla yhteinen luokka tai etsim\u00e4ll\u00e4 mit\u00e4 tahansa antamaasi avainsanoja tai nime\u00e4.<\/p>\n
\"Luo<\/a>\"Luo<\/a><\/p>\n
Lohkomme tekee yksinkertaisen ":)"-merkin sek\u00e4 editorissa ett\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4. Toistaiseksi et voi muokata mit\u00e4\u00e4n lohkossa, mutta sen opimme seuraavissa vaiheissa!<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
T\u00e4ss\u00e4 opetusohjelmassa kirjoitamme Javascriptin mukautetun lohkomme rekister\u00f6imiseksi. Lopuksi rekister\u00f6imme skriptin ja teemme tarvittavan PHP-koodin.<\/p>\n","protected":false},"author":1,"featured_media":151979,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[895,938,938,895,813,1110,843,813,843,864,864],"tags":[1166],"class_list":{"0":"post-233831","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-koodi","8":"category-gutenberg-5","11":"category-laajennuksia","12":"category-n-a","13":"category-opetusohjelmia","16":"category-wordpress-5","18":"tag-affiai-fi"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=233831"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233831\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/151979"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233831"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}