{"id":228135,"date":"2022-10-14T10:17:00","date_gmt":"2022-10-14T07:17:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228135"},"modified":"2022-11-09T00:54:31","modified_gmt":"2022-11-08T21:54:31","slug":"przeglad-skryptu-tworzenia-bloku-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/przeglad-skryptu-tworzenia-bloku-wordpress\/","title":{"rendered":"Przegl\u0105d skryptu tworzenia bloku WordPress"},"content":{"rendered":"\n<p>Oficjalny zesp\u00f3\u0142 edytora WordPress (Gutenberg) udost\u0119pni\u0142 <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">zgrabny ma\u0142y skrypt, dzi\u0119ki kt\u00f3remu mo\u017cesz utworzy\u0107 wtyczk\u0119 blokow\u0105<\/a> za pomoc\u0105 ich <code>@wordpress\/create-block<\/code>skryptu npm.<\/p>\n<p>Ten artyku\u0142 zawiera om\u00f3wienie skryptu tworzenia bloku WordPress wraz ze szczeg\u00f3\u0142ami jego wynik\u00f3w.<\/p>\n<p><strong>UWAGA: ten artyku\u0142 dotyczy starszej wersji skryptu tworzenia bloku<\/strong><\/p>\n<p>Chocia\u017c teori\u0119 mo\u017cna nadal zastosowa\u0107, niekt\u00f3re informacje zawarte w tym artykule mog\u0105 nie by\u0107 ju\u017c zgodne z najnowszym skryptem tworzenia bloku. Tutaj mo\u017cesz <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">zapozna\u0107 si\u0119 z naszym zaktualizowanym przewodnikiem tworzenia skrypt\u00f3w blokowych<\/a>.<\/p>\n<h2>Uruchamianie skryptu tworzenia bloku<\/h2>\n<p>Oficjalna dokumentacja podaje kilka r\u00f3\u017cnych parametr\u00f3w do przekazania do <code>npm init @wordpress\/block<\/code>polecenia.<\/p>\n<p>W mojej konfiguracji uruchomi\u0142em go w trybie interaktywnym, pomijaj\u0105c parametry. Wprowadzi\u0142em nast\u0119puj\u0105ce polecenie do mojego terminala (podczas gdy <code>cd<\/code>ed w moim <code>wp-content\/plugins<\/code>folderze):<\/p>\n<pre><code>npm init @wordpress\/block\n<\/code><\/pre>\n<p>Skrypt zada\u0142 mi kilka pyta\u0144, aby pom\u00f3c mi zbudowa\u0107 m\u00f3j blok.<\/p>\n<p>Chc\u0105c stworzy\u0107 blok startowy dla pomys\u0142u wtyczki, kt\u00f3ry mam (\u201eWholesome Notes&quot;), odpowiedzia\u0142em na nast\u0119puj\u0105ce pytania:<\/p>\n<ul>\n<li>\n<p><strong>\u015alimak bloku u\u017cywany do identyfikacji (tak\u017ce nazwa wtyczki i folderu wyj\u015bciowego):<\/strong> Chc\u0119, aby m\u00f3j blok nazywa\u0142 si\u0119 <code>Wholesome Notes<\/code>, wi\u0119c wprowadzi\u0142em <code>wholesome-notes<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>Wewn\u0119trzna przestrze\u0144 nazw dla nazwy bloku (co\u015b unikalnego dla Twoich produkt\u00f3w):<\/strong> Poniewa\u017c powinna by\u0107 unikalna dla wszystkich moich produkt\u00f3w, kt\u00f3re wprowadzi\u0142em <code>wholesome-code<\/code>, poniewa\u017c jest to nazwa mojej firmy. Z perspektywy czasu by\u0142oby to lepiej skr\u00f3ci\u0107 do <code>wc<\/code>lub <code>wcltd<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>Wy\u015bwietlany tytu\u0142 Twojego bloku:<\/strong> wpisa\u0142em tytu\u0142 wtyczki, <code>Wholesome Notes<\/code>.<\/p>\n<\/li>\n<li>\n<p>Przegl\u0105d skryptu tworzenia bloku WordPressa Nie by\u0142em w 100% pewien, co chc\u0119 tutaj napisa\u0107, wi\u0119c w\u0142a\u015bnie wprowadzi\u0142em tekst, kt\u00f3ry zamierzam zmieni\u0107 p\u00f3\u017aniej.<\/p>\n<\/li>\n<li>\n<p><strong>Dashicon u\u0142atwiaj\u0105cy identyfikacj\u0119 bloku (opcjonalnie):<\/strong> Szybko <a href=\"https:\/\/developer.wordpress.org\/resource\/dashicons\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">przywo\u0142uj\u0105c zas\u00f3b Dashicons WordPress<\/a>, wybra\u0142em <code>admin-comments<\/code>, poniewa\u017c ma ikon\u0119 stylu notatki.<\/p>\n<\/li>\n<li>\n<p><strong>Nazwa kategorii u\u0142atwiaj\u0105ca u\u017cytkownikom przegl\u0105danie i odkrywanie Twojego bloku (u\u017cyj klawiszy strza\u0142ek):<\/strong> Wybra\u0142em <code>layout<\/code>, chocia\u017c szczerze m\u00f3wi\u0105c ten typ bloku prawdopodobnie potrzebowa\u0142by w\u0142asnej kategorii. To co\u015b, co mog\u0119 p\u00f3\u017aniej zmieni\u0107.<\/p>\n<\/li>\n<\/ul>\n<p>Dzia\u0142anie<code>npm init @wordpress\/block<\/code><\/p>\n<p>Skrypt nast\u0119pnie przeszed\u0142 do przodu i zainstalowa\u0142 wszystkie potrzebne zale\u017cno\u015bci za po\u015brednictwem npm (w tym momencie po prostu instaluje <code>wp-scripts<\/code>pakiet npm jako zale\u017cno\u015b\u0107).<\/p>\n<h2>Sprawdzanie wyj\u015bcia<\/h2>\n<p>Dzi\u0119ki powy\u017cszym poleceniom skrypt WordPress Create Block Script daje nast\u0119puj\u0105ce dane wyj\u015bciowe:<\/p>\n<ul>\n<li>zdrowe-notatki\n<ul>\n<li>budowa\u0107\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>.gitignore<\/li>\n<li>edytor.css<\/li>\n<li>pakiet.json<\/li>\n<li>styl.css<\/li>\n<li>zdrowe-notatki.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=\"Przegl\u0105d skryptu tworzenia bloku WordPress\" \/><a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/wyj\u015bcie bloku<\/p>\n<p>Poni\u017cej znajduje si\u0119 podzia\u0142 ka\u017cdego z tych plik\u00f3w i folder\u00f3w.<\/p>\n<p><code>wholesome-notes<\/code><\/p>\n<p>To jest folder g\u0142\u00f3wny wtyczki, ma tak\u0105 sam\u0105 nazw\u0119 jak ta, kt\u00f3r\u0105 wpisa\u0142em dla &quot;slug&quot; w pytaniach konfiguracyjnych.<\/p>\n<p><code>\/build<\/code><\/p>\n<p>To jest folder kompilacji. Zawiera wszystkie zasoby JavaScript i PHP wygenerowane z <code>\/src<\/code>folderu. S\u0105 one umieszczane w kolejce poprzez g\u0142\u00f3wny <code>wholesome-notes.php<\/code>plik programu \u0142aduj\u0105cego.<\/p>\n<p><code>\/build\/index.assets.php<\/code><\/p>\n<p>Ten plik PHP jest generowany automatycznie podczas <code>\/src<\/code>kompilacji folderu. Zawiera tablic\u0119 wszystkich przyzwoito\u015bci JavaScript edytora WordPress (Gutenberg) u\u017cywanych przez twoj\u0105 wtyczk\u0119. Jest umieszczany w kolejce poprzez g\u0142\u00f3wny <code>wholesome-notes.php<\/code>plik programu \u0142aduj\u0105cego.<\/p>\n<p><code>\/build\/index.js<\/code><\/p>\n<p>Jest to g\u0142\u00f3wny skompilowany plik JavaScript, kt\u00f3ry jest umieszczany w kolejce poprzez g\u0142\u00f3wny <code>wholesome-notes.php<\/code>plik programu \u0142aduj\u0105cego.<\/p>\n<p><code>\/build\/index.js.map<\/code><\/p>\n<p>Ten plik jest generowany tylko wtedy, gdy kompilujesz zasoby do trybu programistycznego (tzn. uruchamiasz, <code>npm start<\/code>a nie <code>npm run build<\/code>kompilujesz zasoby. Jest to plik pomocny dla debuger\u00f3w JavaScript, kt\u00f3ry pomaga zidentyfikowa\u0107 nazwy plik\u00f3w i numery wierszy w przypadku wyst\u0105pienia b\u0142\u0119d\u00f3w.<\/p>\n<p><code>\/node_modules<\/code><\/p>\n<p>Jest to folder, w kt\u00f3rym zainstalowane s\u0105 wszystkie zale\u017cno\u015bci JavaScript dla Twojej wtyczki.<\/p>\n<p><code>\/src<\/code><\/p>\n<p>To jest folder, kt\u00f3ry zawiera wszystkie nieskompilowane zasoby Twojej wtyczki.<\/p>\n<p><code>\/src\/index.js<\/code><\/p>\n<p>To jest g\u0142\u00f3wny nieskompilowany plik JavaScript dla bloku edytora WordPress (Gutenberg). Pocz\u0105tkowo zawiera ca\u0142\u0105 logik\u0119 bloku.<\/p>\n<p><code>\/.editorconfig<\/code><\/p>\n<p>Ten plik zawiera przydatne ustawienia wst\u0119pne dla IDE (zintegrowanego \u015brodowiska programistycznego), takie jak Visual Studio Code.<\/p>\n<p><code>\/.gitignore<\/code><\/p>\n<p>Ten plik m\u00f3wi git, aby ignorowa\u0142 niekt\u00f3re pliki, gdy zatwierdzasz do repozytorium git (takiego jak GitHub).<\/p>\n<p><code>\/editor.css<\/code><\/p>\n<p>Style w tym pliku s\u0105 wyprowadzane tylko w edytorze, s\u0105 umieszczane w kolejce poprzez g\u0142\u00f3wny <code>wholesome-notes.php<\/code>plik \u0142aduj\u0105cy.<\/p>\n<p><code>\/package.json<\/code><\/p>\n<p>Ten plik zawiera wszystkie zale\u017cno\u015bci npm dla wtyczki oraz polecenia, kt\u00f3re mo\u017cna uruchomi\u0107. Zauwa\u017c, \u017ce wtyczka wykorzystuje <code>wp-scripts<\/code>( <code>@wordpress\/scripts<\/code>) jako swoj\u0105 podstaw\u0119, wi\u0119c pocz\u0105tkowo \u0142adowane zale\u017cno\u015bci dotycz\u0105 tego pakietu.<\/p>\n<p><code>\/style.css<\/code><\/p>\n<p>Style w tym pliku s\u0105 wy\u015bwietlane w edytorze, a na interfejsie witryny s\u0105 umieszczane w kolejce za po\u015brednictwem g\u0142\u00f3wnego <code>wholesome-notes.php<\/code>pliku \u0142aduj\u0105cego.<\/p>\n<p><code>\/wholesome-notes.php<\/code><\/p>\n<p>To jest g\u0142\u00f3wny plik \u0142aduj\u0105cy wtyczki. Jego nazwa zosta\u0142a ustawiona poprzez \u201eslug&#8221;, kt\u00f3ry wprowadzili\u015bmy w pocz\u0105tkowym skrypcie instalacyjnym. Umieszcza w kolejce wszystkie zasoby JavaScript potrzebne do wtyczki.<\/p>\n<h2>Eksploracja wtyczki<\/h2>\n<p>Po utworzeniu wtyczki, je\u015bli j\u0105 aktywujesz i wstawisz do edytora, b\u0119dzie wygl\u0105da\u0107 jak poni\u017csze zrzuty ekranu (frontend i backend).<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e807884c3f2.png\" alt=\"Przegl\u0105d skryptu tworzenia bloku WordPress\" \/>Utw\u00f3rz skrypt blokowy \u2013 domy\u015blny interfejs<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e807893d3d5.png\" alt=\"Przegl\u0105d skryptu tworzenia bloku WordPress\" \/>Utw\u00f3rz skrypt blokowy \u2013 domy\u015blny back-end<\/p>\n<p>Jak wida\u0107, blok dostarcza nam podstawowych danych wyj\u015bciowych, kt\u00f3re mo\u017cemy \u0142atwo zmieni\u0107, aby zaimplementowa\u0107 nasz w\u0142asny blok.<\/p>\n<h3>Blokuj CSS<\/h3>\n<p>Jak wida\u0107 na zrzutach ekranu, przyk\u0142adowy kod w <code>editor.css<\/code>implementuje czerwon\u0105 granic\u0119 w edytorze, podczas gdy przyk\u0142adowe style w <code>styles.css<\/code>s\u0105 stosowane zar\u00f3wno do frontonu, jak i do backendu.<\/p>\n<h3>Blokuj JavaScript<\/h3>\n<p>Punktem wej\u015bcia do dostosowania nowo utworzonego bloku jest <code>\/src\/index.js<\/code>plik.<\/p>\n<p>W tym pliku znajduje si\u0119 mn\u00f3stwo dokumentacji wbudowanej, wyja\u015bniaj\u0105cej, dlaczego niekt\u00f3re funkcje s\u0105 importowane, takie jak <code>registerBlockType<\/code>rejestracja bloku i <code>__<\/code>obs\u0142uga t\u0142umaczenia tekstu i18n.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e8078a4b117.png\" alt=\"Przegl\u0105d skryptu tworzenia bloku WordPress\" \/>Utw\u00f3rz blok index.js Komentarze w wierszu<\/p>\n<p>Daje r\u00f3wnie\u017c bardzo podstawowe dane wyj\u015bciowe dla funkcji <code>edit<\/code>i <code>save<\/code>, kt\u00f3re s\u0105 przekazywane do rejestracji bloku.<\/p>\n<p><strong>Uwaga:<\/strong> w p\u00f3\u017aniejszych wersjach skryptu zosta\u0142y one wyodr\u0119bnione do w\u0142asnych plik\u00f3w i do\u0142\u0105czone jako modu\u0142y w tym pliku.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e8078b6b4b9.png\" alt=\"Przegl\u0105d skryptu tworzenia bloku WordPress\" \/>Utw\u00f3rz blok index.js Edytuj i zapisz<\/p>\n<h2>Budowanie bloku<\/h2>\n<p>Zgodnie z <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dokumentacj\u0105 create block npm<\/a>, mo\u017cesz u\u017cy\u0107 kilku polece\u0144 w swoim terminalu (z folderu g\u0142\u00f3wnego wtyczki), aby wykonywa\u0107 takie czynno\u015bci, jak sprawdzanie jako\u015bci kodu lub aktualizowanie pakiet\u00f3w.<\/p>\n<p>G\u0142\u00f3wne polecenia, kt\u00f3rych b\u0119dziesz potrzebowa\u0107 do zbudowania bloku, to <code>npm start<\/code>skompilowanie wtyczki do rozwoju i <code>npm run build<\/code>skompilowanie ostatecznej wersji.<\/p>\n<p><code>wp-scripts<\/code>(z <code>@wordpress\/scripts<\/code>pakietu npm) jest g\u0142\u00f3wn\u0105 zale\u017cno\u015bci\u0105 dla twojej wtyczki. Ta zale\u017cno\u015b\u0107 abstrahuje od wszystkich narz\u0119dzi dla twojego bloku, wi\u0119c mo\u017cesz po prostu skupi\u0107 si\u0119 na tworzeniu kodu JavaScript.<\/p>\n<p>Za kulisami <code>wp-scripts<\/code>u\u017cywa <code>webpack<\/code>do kompilacji wszystkich zasob\u00f3w do <code>\/build\/index.js<\/code>pliku.<\/p>\n<p>Wi\u0119cej informacji <code>wp-scripts<\/code>na ten temat mo\u017cna znale\u017a\u0107 w <a href=\"https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-scripts\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Podr\u0119czniku edytora blok\u00f3w, a wi\u0119cej informacji na temat konfiguracji kompilacji pakietu internetowego mo\u017cna znale\u017a\u0107 w<\/a> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/tutorials\/javascript\/js-build-setup\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sekcji Podr\u0119cznika \u201eKonfiguracja kompilacji JavaScript&#8221;.<\/a><\/p>\n<h3>Rozszerzanie konfiguracji pakietu internetowego Utw\u00f3rz blok<\/h3>\n<p>Baza kodu Twojego bloku mo\u017ce obejmowa\u0107 wiele plik\u00f3w, a nawet mie\u0107 wiele podblok\u00f3w lub zawiera\u0107 z\u0142o\u017cone style. W takich sytuacjach mo\u017cesz chcie\u0107 rozszerzy\u0107 konfiguracj\u0119 pakietu webpack, kt\u00f3ra jest wbudowana w program <code>wp-scripts<\/code>.<\/p>\n<p>Aby uzyska\u0107 wi\u0119cej informacji, zobacz m\u00f3j artyku\u0142 na temat <a href=\"https:\/\/wholesomecode.ltd\/articles\/extending-the-wordpress-create-block-script-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">rozszerzania <code>wp-scripts<\/code>konfiguracji<\/a> pakietu internetowego lub zapoznaj si\u0119 <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\">z sekcj\u0105 Skrypty pakiet\u00f3w w podr\u0119czniku Block Editor<\/a>, aby uzyska\u0107 wskaz\u00f3wki.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Oficjalny zesp\u00f3\u0142 edytora WordPress (Gutenberg) udost\u0119pni\u0142 zgrabny ma\u0142y skrypt, dzi\u0119ki kt\u00f3remu mo\u017cesz utworzy\u0107 wtyczk\u0119 blokow\u0105 za pomoc\u0105 skryptu @wordpress\/create-block npm.Ten artyku\u0142 zawiera &#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":[721,897,845,866],"tags":[1169],"class_list":["post-228135","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-kod","category-samouczki","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=228135"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228135\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/224138"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=228135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=228135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=228135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}