{"id":228246,"date":"2022-10-14T10:15:00","date_gmt":"2022-10-14T07:15:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228246"},"modified":"2022-11-09T01:29:21","modified_gmt":"2022-11-08T22:29:21","slug":"wordpressi-loomisploki-skripti-uelevaade","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/wordpressi-loomisploki-skripti-uelevaade\/","title":{"rendered":"WordPressi loomisploki skripti \u00fclevaade"},"content":{"rendered":"\n<p>Ametlik WordPressi redigeerija (Gutenberg) meeskond on pakkunud teile korraliku v\u00e4ikese skripti, et saaksite oma npm-skriptiga plokkpluginat <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">luua .<\/a><code>@wordpress\/create-block<\/code><\/p>\n<p>See artikkel annab \u00fclevaate WordPressi loomisplokkskriptist ja selle v\u00e4ljastatavate \u00fcksikasjadest.<\/p>\n<p><strong>M\u00c4RKUS. See artikkel on m\u00f5eldud ploki skripti loomise vanemale versioonile<\/strong><\/p>\n<p>Kuigi teooriat saab endiselt rakendada, ei pruugi osa selles artiklis sisalduvast teabest enam uusima loomisploki skriptiga \u00fchilduda. <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Meie uuendatud plokiskripti loomise juhendit<\/a> saate vaadata siit .<\/p>\n<h2>Blokeerimisskripti loomise k\u00e4ivitamine<\/h2>\n<p>Ametlik dokumentatsioon annab teile <code>npm init @wordpress\/block<\/code>k\u00e4sule edastamiseks m\u00f5ned erinevad parameetrid.<\/p>\n<p>Seadistuse jaoks k\u00e4ivitasin selle interaktiivses re\u017eiimis, j\u00e4ttes parameetrid v\u00e4lja. Sisestasin oma terminali (samal ajal kui <code>cd<\/code>oma <code>wp-content\/plugins<\/code>kausta) j\u00e4rgmise k\u00e4su:<\/p>\n<pre><code>npm init @wordpress\/block\n<\/code><\/pre>\n<p>Skript esitas mulle paar k\u00fcsimust, et aidata mul oma plokki \u00fcles ehitada.<\/p>\n<p>Soovides luua oma pluginaidee jaoks stardiplokki (&#8216;tervislikud m\u00e4rkmed&#8217;), vastasin k\u00fcsimustele j\u00e4rgmiselt:<\/p>\n<ul>\n<li>\n<p><strong>Identifitseerimiseks kasutatav plokk (ka pistikprogrammi ja v\u00e4ljundkausta nimi):<\/strong> Ma tahan, et minu ploki nimi oleks <code>Wholesome Notes<\/code>, seega sisestasin <code>wholesome-notes<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>Ploki nime sisemine nimeruum (midagi teie toodete jaoks ainulaadset):<\/strong> kuna see peaks olema unikaalne k\u00f5igi minu sisestatud toodete jaoks <code>wholesome-code<\/code>, kuna see on minu ettev\u00f5tte nimi. Tagantj\u00e4rele m\u00f5eldes oleks parem l\u00fchistada <code>wc<\/code>v\u00f5i <code>wcltd<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>Teie ploki kuvatav pealkiri:<\/strong> Sisestasin pistikprogrammi pealkirja <code>Wholesome Notes<\/code>.<\/p>\n<\/li>\n<li>\n<p>WordPressi loomisploki skripti \u00fclevaade Ma polnud 100% kindel, mida siia kirjutada tahan, seega sisestasin lihtsalt teksti, mida kavatsen hiljem muuta.<\/p>\n<\/li>\n<li>\n<p><strong>Armatuurlaud ploki tuvastamise h\u00f5lbustamiseks (valikuline):<\/strong> <a href=\"https:\/\/developer.wordpress.org\/resource\/dashicons\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPressi Dashiconsi ressursi<\/a> kiire avamine valisin selle, <code>admin-comments<\/code>kuna sellel on m\u00e4rkmelaadi ikoon.<\/p>\n<\/li>\n<li>\n<p><strong>Kategooria nimi, mis aitab kasutajatel teie plokki sirvida ja avastada (kasutage nooleklahve):<\/strong> Valisin <code>layout<\/code>, kuigi ausalt \u00f6eldes vajaks seda t\u00fc\u00fcpi plokid ilmselt oma kategooriat. See on midagi, mida saan hiljem muuta.<\/p>\n<\/li>\n<\/ul>\n<p>Jooksmine<code>npm init @wordpress\/block<\/code><\/p>\n<p>Seej\u00e4rel l\u00e4ks skript edasi ja installis k\u00f5ik vajalikud s\u00f5ltuvused npm-i kaudu (praegu installib see lihtsalt <code>wp-scripts<\/code>npm-paketi s\u00f5ltuvusena).<\/p>\n<h2>V\u00e4ljundi kontrollimine<\/h2>\n<p>\u00dclaltoodud k\u00e4skudega annab WordPressi loomisploki skript teile j\u00e4rgmise v\u00e4ljundi:<\/p>\n<ul>\n<li>tervislikud-m\u00e4rkmed\n<ul>\n<li>ehitada\n<ul>\n<li>index.asset.php<\/li>\n<li>index.js<\/li>\n<li>index.js.map<\/li>\n<\/ul>\n<\/li>\n<li>node_modules<\/li>\n<li>src\n<ul>\n<li>index.js<\/li>\n<\/ul>\n<\/li>\n<li>.editorconfig<\/li>\n<li>.gitignoreeri<\/li>\n<li>toimetaja.css<\/li>\n<li>package.json<\/li>\n<li>stiil.css<\/li>\n<li>terved-m\u00e4rkmed.php<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e80786cc626.png\" alt=\"WordPressi loomisploki skripti \u00fclevaade\" \/><a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/blokeeri v\u00e4ljund<\/p>\n<p>J\u00e4rgmine on k\u00f5igi nende failide ja kaustade jaotus.<\/p>\n<p><code>wholesome-notes<\/code><\/p>\n<p>See on pistikprogrammi juurkaust, sellel on sama nimi, mis ma seadistusk\u00fcsimustes &#8216;n\u00e4lkja&#8217; jaoks sisestasin.<\/p>\n<p><code>\/build<\/code><\/p>\n<p>See on ehitamise kaust. <code>\/src<\/code>See sisaldab k\u00f5iki kaustast loodud JavaScripti ja PHP varasid. Need pannakse j\u00e4rjekorda pealaadurifaili kaudu <code>wholesome-notes.php<\/code>.<\/p>\n<p><code>\/build\/index.assets.php<\/code><\/p>\n<p>See PHP-fail genereeritakse automaatselt <code>\/src<\/code>kausta kompileerimisel. See sisaldab massiivi k\u00f5igist WordPressi redigeerija (Gutenberg) JavaScripti s\u00fcndsustest, mida teie pistikprogramm kasutab. See pannakse j\u00e4rjekorda p\u00f5hilaadurifaili kaudu <code>wholesome-notes.php<\/code>.<\/p>\n<p><code>\/build\/index.js<\/code><\/p>\n<p>See on peamine kompileeritud JavaScripti fail ja see asetatakse j\u00e4rjekorda peamise <code>wholesome-notes.php<\/code>laadimisfaili kaudu.<\/p>\n<p><code>\/build\/index.js.map<\/code><\/p>\n<p>See fail luuakse ainult siis, kui kompileerite varasid arendusre\u017eiimi jaoks (IE k\u00e4itate, <code>npm start<\/code>mitte <code>npm run build<\/code>varade kompileerimisel. See on kasulik fail JavaScripti siluritele, mis aitab vigade ilmnemisel tuvastada failinimesid ja reanumbreid.<\/p>\n<p><code>\/node_modules<\/code><\/p>\n<p>See on kaust, kuhu on installitud k\u00f5ik teie pistikprogrammi JavaScripti s\u00f5ltuvused.<\/p>\n<p><code>\/src<\/code><\/p>\n<p>See on kaust, mis sisaldab k\u00f5iki teie pistikprogrammi kompileerimata varasid.<\/p>\n<p><code>\/src\/index.js<\/code><\/p>\n<p>See on teie WordPressi redaktori (Gutenbergi) ploki peamine kompileerimata JavaScripti fail. See sisaldab algselt kogu ploki loogikat.<\/p>\n<p><code>\/.editorconfig<\/code><\/p>\n<p>See fail sisaldab teie IDE (integreeritud arenduskeskkonna) jaoks kasulikke eelseadeid, n\u00e4iteks Visual Studio koodi.<\/p>\n<p><code>\/.gitignore<\/code><\/p>\n<p>See fail k\u00e4sib gitil teatud faile ignoreerida, kui kasutate git-hoidlat (nt GitHub).<\/p>\n<p><code>\/editor.css<\/code><\/p>\n<p>Selle faili stiilid v\u00e4ljastatakse ainult redaktoris, see lisatakse j\u00e4rjekorda peamise <code>wholesome-notes.php<\/code>laadimisfaili kaudu.<\/p>\n<p><code>\/package.json<\/code><\/p>\n<p>See fail sisaldab k\u00f5iki pistikprogrammi npm-i s\u00f5ltuvusi ja k\u00e4ske, mida saate k\u00e4ivitada. Pange t\u00e4hele, et pistikprogramm kasutab <code>wp-scripts<\/code>( <code>@wordpress\/scripts<\/code>) baasina, nii et algselt on laaditud s\u00f5ltuvused selle paketi jaoks.<\/p>\n<p><code>\/style.css<\/code><\/p>\n<p>Selle faili stiilid v\u00e4ljastatakse redaktoris ja saidi esiosas, need pannakse j\u00e4rjekorda peamise <code>wholesome-notes.php<\/code>laadimisfaili kaudu.<\/p>\n<p><code>\/wholesome-notes.php<\/code><\/p>\n<p>See on pistikprogrammi peamine laadimisfail. Selle nimi m\u00e4\u00e4rati &#8216;n\u00e4lkja&#8217; kaudu, mille sisestasime esialgsesse h\u00e4\u00e4lestusskripti. See paneb j\u00e4rjekorda k\u00f5ik pistikprogrammi jaoks vajalikud JavaScripti varad.<\/p>\n<h2>Plugina uurimine<\/h2>\n<p>Kui olete p\u00e4rast plugina loomist selle aktiveerinud ja redaktorisse sisestanud, n\u00e4eb see v\u00e4lja nagu j\u00e4rgmised ekraanipildid (esi- ja taustaprogramm).<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e807884c3f2.png\" alt=\"WordPressi loomisploki skripti \u00fclevaade\" \/>Loo plokiskript \u2013 vaikeliides<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e807893d3d5.png\" alt=\"WordPressi loomisploki skripti \u00fclevaade\" \/>Loo plokiskript \u2013 vaikimisi tagaosa<\/p>\n<p>Nagu n\u00e4ete, pakub plokk meile m\u00f5nda p\u00f5hiv\u00e4ljundit, mida saame oma ploki rakendamiseks h\u00f5lpsasti muuta.<\/p>\n<h3>Blokeeri CSS<\/h3>\n<p>Nagu n\u00e4ete ekraanipiltidelt, <code>editor.css<\/code>rakendab n\u00e4itekood redigeerijas punase piiri, samas kui n\u00e4idete stiilid <code>styles.css<\/code>rakendatakse nii esi- kui ka tagaprogrammile.<\/p>\n<h3>JavaScripti blokeerimine<\/h3>\n<p>Sisendpunkt vastloodud ploki kohandamiseks on <code>\/src\/index.js<\/code>fail.<\/p>\n<p>Selles failis on palju tekstisisest dokumentatsiooni, mis selgitab, miks teatud funktsioone imporditakse, n\u00e4iteks <code>registerBlockType<\/code>ploki registreerimine ja <code>__<\/code>i18n tekstit\u00f5lke tugi.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e8078a4b117.png\" alt=\"WordPressi loomisploki skripti \u00fclevaade\" \/>Looge Block index.js tekstisisesed kommentaarid<\/p>\n<p>See annab teile ka v\u00e4ga lihtsa v\u00e4ljundi ploki registreerimisse edastatavatele <code>edit<\/code>ja funktsioonidele.<code>save<\/code><\/p>\n<p><strong>M\u00e4rkus<\/strong>. Skripti hilisemates versioonides on need eraldi failidesse ekstraheeritud ja lisatud sellesse faili moodulitena.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e8078b6b4b9.png\" alt=\"WordPressi loomisploki skripti \u00fclevaade\" \/>Looge Block index.js Redigeeri ja salvesta<\/p>\n<h2>Bloki ehitamine<\/h2>\n<p>Loomisploki <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">npm dokumentatsiooni<\/a> kohaselt saate oma terminalis (plugina juurkaustast) kasutada mitmeid k\u00e4ske, et teha n\u00e4iteks koodi kvaliteeti v\u00f5i v\u00e4rskendada pakette.<\/p>\n<p>Peamised k\u00e4sud, mida ploki koostamiseks vajate, on <code>npm start<\/code>arendamiseks m\u00f5eldud plugina <code>npm run build<\/code>kompileerimine ja l\u00f5pliku versiooni kompileerimine.<\/p>\n<p><code>wp-scripts<\/code>( <code>@wordpress\/scripts<\/code>npm-paketist) on teie pistikprogrammi peamine s\u00f5ltuvus. See s\u00f5ltuvus v\u00f5tab kogu teie bloki jaoks vajaliku t\u00f6\u00f6riista \u00e4ra, nii et saate keskenduda ainult JavaScripti loomisele.<\/p>\n<p>Kulisside taga <code>wp-scripts<\/code>kasutab <code>webpack<\/code>kogu teie vara <code>\/build\/index.js<\/code>faili kompileerimiseks.<\/p>\n<p>Lisateavet saate <code>wp-scripts<\/code>plokiredaktori k\u00e4siraamatust ja veebipaketi koostamise seadistamise <a href=\"https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-scripts\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kohta<\/a> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/tutorials\/javascript\/js-build-setup\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">leiate k\u00e4siraamatu jaotisest \u201eJavaScripti j\u00e4rgu seadistamine&quot;.<\/a><\/p>\n<h3>Veebipaketi loomise ploki seadistuse laiendamine<\/h3>\n<p>Teie ploki koodibaas v\u00f5ib h\u00f5lmata mitut faili v\u00f5i isegi sisaldada mitut alamplokki v\u00f5i sisaldada keerulisi stiile. Sellistel aegadel v\u00f5ite soovida laiendada veebipaketi sisseehitatud seadistust <code>wp-scripts<\/code>.<\/p>\n<p>Lisateabe saamiseks vaadake minu artiklit <a href=\"https:\/\/wholesomecode.ltd\/articles\/extending-the-wordpress-create-block-script-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">veebipaketi konfiguratsiooni<\/a> <a href=\"https:\/\/wholesomecode.ltd\/articles\/extending-the-wordpress-create-block-script-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">laiendamise kohta<code>wp-scripts<\/code><\/a> v\u00f5i vaadake juhiseid plokiredaktori <a href=\"https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-scripts\/#provide-your-own-webpack-config\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">k\u00e4siraamatu jaotisest<\/a> Paketiskriptid .<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ametlik WordPressi redigeerija (Gutenberg) meeskond on pakkunud teile kena v\u00e4ikese skripti, et saaksite oma @wordpress\/create-block npm-skriptiga luua plokkplugina. See artikkel annab&#8230;<\/p>\n","protected":false},"author":1,"featured_media":224138,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[718,894,842,863],"tags":[1165],"class_list":["post-228246","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-kood","category-opetused","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=228246"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228246\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/224138"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=228246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=228246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=228246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}