{"id":233534,"date":"2023-02-16T14:33:00","date_gmt":"2023-02-16T11:33:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233534"},"modified":"2022-11-11T00:13:20","modified_gmt":"2022-11-10T21:13:20","slug":"utworz-niestandardowy-blok-gutenberga-czesc-1-konfigurowanie-srodowiska-programistycznego","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/utworz-niestandardowy-blok-gutenberga-czesc-1-konfigurowanie-srodowiska-programistycznego\/","title":{"rendered":"Utw\u00f3rz niestandardowy blok Gutenberga – Cz\u0119\u015b\u0107 1: Konfigurowanie \u015brodowiska programistycznego"},"content":{"rendered":"\n

W pierwszej cz\u0119\u015bci tej serii samouczk\u00f3w, jak tworzy\u0107 niestandardowe bloki Gutenberga, musimy skonfigurowa\u0107 nasze \u015brodowisko programistyczne. Potrzebujemy miejsca, w kt\u00f3rym b\u0119dziemy mogli pisa\u0107 nasz kod w sk\u0142adniach ES6\/ESNext i kompilowa\u0107 go w drodze. Mo\u017cliwe jest pisanie niestandardowych blok\u00f3w Gutenberga przy u\u017cyciu sk\u0142adni ES5 bez konfigurowania Webpack i Babel. Ale kod b\u0119dzie naprawd\u0119 niewygodny do czytania i pisania. Je\u015bli nie masz pewno\u015bci, dlaczego musimy to wszystko zrobi\u0107 lub na czym polega r\u00f3\u017cnica, przeczytaj m\u00f3j post wyja\u015bniaj\u0105cy to<\/a>. Gwarantuj\u0119 Ci, \u017ce gdy wr\u00f3cisz, przekonasz si\u0119, \u017ce zrobisz ten dodatkowy krok w celu napisania lepszego kodu.<\/p>\n

Zak\u0142adam, \u017ce masz ju\u017c lokalny WordPress dzia\u0142aj\u0105cy na stosie LAMP lub podobnym. I \u017ce piszesz motyw lub wtyczk\u0119. Je\u015bli chodzi o mnie, umieszczam sw\u00f3j kod w opracowanym przeze mnie motywie awp-starter-theme<\/code>, znajduj\u0105cym si\u0119 w moim folderze motyw\u00f3w WordPress. Chc\u0119 oddzieli\u0107 m\u00f3j rozw\u00f3j Gutenberga od wszystkich innych plik\u00f3w motyw\u00f3w, wi\u0119c tworz\u0119 podkatalog gutenberg-dev<\/code>w moim folderze g\u0142\u00f3wnym motywu. B\u0119dzie to folder mojego projektu i folder, do kt\u00f3rego b\u0119d\u0119 si\u0119 odwo\u0142ywa\u0107 w dalszej cz\u0119\u015bci serii samouczk\u00f3w.<\/p>\n

Napisa\u0142em ju\u017c szczeg\u00f3\u0142owy przewodnik, jak skonfigurowa\u0107 \u015brodowisko programistyczne dla Gutenberga, wi\u0119c szybko przejd\u0119 przez te kroki. Je\u015bli nigdy wcze\u015bniej tego nie robi\u0142e\u015b, polecam przeczyta\u0107 poni\u017cszy link, poniewa\u017c zawiera wi\u0119cej informacji ni\u017c to, co znajdziesz tutaj!<\/p>\n

Skonfiguruj projekt z webpackiem<\/h2>\n

Korzystaj\u0105c z terminala (terminal iOS lub cmd systemu Windows, oba dzia\u0142aj\u0105 dobrze) przejd\u017a do folderu projektu (w moim przypadku awp-starter-theme\/gutenberg-dev<\/code>). Inicjujemy nowy projekt, prosz\u0105c npm o wygenerowanie package.json<\/code>z og\u00f3ln\u0105 tre\u015bci\u0105.<\/p>\n

Tworzenie pakietu.json<\/h3>\n
npm init -y<\/code><\/pre>\n
Nast\u0119pnie zainstaluj\u0119 skrypty WordPressa, kt\u00f3re bardzo nam pomog\u0105 w konfiguracji za pomoc\u0105 tego polecenia (kt\u00f3re doda podfolder node_modules<\/code>i package-lock.json<\/code>r\u00f3wnie\u017c):<\/p>\n
npm install --save-dev --save-exact @wordpress\/scripts<\/code><\/pre>\n
Otw\u00f3rz package.json<\/code>plik w folderze projektu w edytorze i znajd\u017a scripts<\/code>w\u0142a\u015bciwo\u015b\u0107. Zast\u0119pujemy go dwoma skryptami z w\u0142a\u015bnie zainstalowanego pakietu WordPress:<\/p>\n
\"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\"\n},<\/code><\/pre>\n
Skrypt \u201ebuild" skompiluje moje pliki. Ale poniewa\u017c musi by\u0107 uruchamiany r\u0119cznie za ka\u017cdym razem, gdy wprowadzana jest zmiana, b\u0119dziemy raczej u\u017cywa\u0107 skryptu \u201estart” podczas tworzenia. Nast\u0119pnie zainicjuje \u201etryb ogl\u0105dania”, w kt\u00f3rym nas\u0142uchuje do zmian wprowadzonych w dowolnym pliku skryptu i rekompiluje je za ka\u017cdym razem, gdy zapisujesz zmiany.<\/p>\n
Konfiguracja pakietu internetowego<\/h3>\n
Nast\u0119pnym krokiem jest utworzenie pliku konfiguracyjnego webpacka. Robi\u0119 to, poniewa\u017c nie chc\u0119 u\u017cywa\u0107 domy\u015blnych nazw plik\u00f3w \u017ar\u00f3d\u0142owych i wyj\u015bciowych oraz folder\u00f3w. Chc\u0119 sam zdecydowa\u0107, gdzie s\u0105 moje pliki \u017ar\u00f3d\u0142owe i gdzie powinny trafi\u0107 skompilowane pliki.<\/p>\n
Za pomoc\u0105 @wordpress\/scripts<\/code>pakietu, kt\u00f3ry zainstalowali\u015bmy, mo\u017cemy odziedziczy\u0107 konfiguracj\u0119 webpacka WordPressa i nadpisa\u0107 tylko te cz\u0119\u015bci, kt\u00f3re chcemy zmieni\u0107.<\/p>\n
W naszym folderze projektu utw\u00f3rz nowy plik o nazwie webpack.config.js<\/code>i otw\u00f3rz go w edytorze. Dodaj t\u0119 tre\u015b\u0107:<\/p>\n
const defaultConfig = require(\"@wordpress\/scripts\/config\/webpack.config\");\nconst path = require('path');\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        'block-awhitepixel-myfirstblock': '.\/src\/block-awhitepixel-myfirstblock.js'\n    },\n    output: {\n        path: path.join(__dirname, '..\/assets\/js'),\n        filename: '[name].js'\n    }\n}<\/code><\/pre>\n
Powoduje to zdefiniowanie mojego pliku wpisu (obecnie tylko jednego) we entry<\/code>w\u0142a\u015bciwo\u015bci znajduj\u0105cej si\u0119 w podfolderze src<\/code>w folderze mojego projektu o nazwie block-awhitepixel-myfirstblock.js<\/code>. Oczywi\u015bcie nazwij swoje pliki, jak chcesz, ale pami\u0119taj, aby zmieni\u0107 zar\u00f3wno klucz, jak i warto\u015b\u0107. Poniewa\u017c we output<\/code>w\u0142a\u015bciwo\u015bci prosz\u0119 webpack o skompilowanie moich plik\u00f3w wpis\u00f3w z kluczem wpisu jako nazw\u0105 pliku. We path<\/code>w\u0142a\u015bciwo\u015bci prosz\u0119 o umieszczenie wszystkich skompilowanych plik\u00f3w jeden krok poza folderem mojego projektu i do assets\/js<\/code>folderu motywu. Dostosuj nazwy plik\u00f3w i lokalizacj\u0119 do swojego projektu. Je\u015bli jeste\u015b zdezorientowany, zapoznaj si\u0119 z moim szczeg\u00f3\u0142owym przewodnikiem .<\/a><\/p>\n
Utw\u00f3rz podfolder src\/<\/code>w folderze projektu i tutaj umie\u015bcimy wszystkie pliki \u017ar\u00f3d\u0142owe. (Dostosuj, je\u015bli zmieni\u0142e\u015b entry<\/code>lokalizacj\u0119 w webpack.config.js<\/code>). Utw\u00f3rz plik block-awhitepixel-myfirstblock.js<\/code>tutaj i pozostaw go na razie pusty.<\/p>\n
Jest jeszcze jeden krok \u2013 dotyczy to nas, kt\u00f3rzy chc\u0105 korzysta\u0107 z najnowszych funkcji ESNext. Domy\u015blna konfiguracja WordPress Babel niestety tego nie zawiera. A poniewa\u017c chc\u0119 u\u017cywa\u0107 funkcji takich jak funkcje strza\u0142ek, musz\u0119 r\u00f3wnie\u017c skonfigurowa\u0107 Babel.<\/p>\n
Konfiguracja Babel<\/h2>\n
Najpierw musimy zainstalowa\u0107 kilka pakiet\u00f3w dla naszej konfiguracji Babel, wpisuj\u0105c to polecenie:<\/p>\n
npm install --save-dev @babel\/preset-env @babel\/preset-react @babel\/plugin-proposal-class-properties<\/code><\/pre>\n
Kiedy to zrobisz, utw\u00f3rz nowy plik .babelrc<\/code>w naszym folderze projektu. Tutaj umie\u015bcimy nasz\u0105 konfiguracj\u0119 Babel:<\/p>\n
{\n    \"presets\": [\"@babel\/preset-env\", \"@babel\/preset-react\"],\n    \"plugins\": [\n        [\n            \"@babel\/plugin-proposal-class-properties\"\n        ]\n    ]\n}<\/code><\/pre>\n
I to wszystko w przypadku konfiguracji naszego \u015brodowiska programistycznego!<\/p>\n
Komendy kompilacji<\/h2>\n
Podczas programowania b\u0119dziesz musia\u0142 kompilowa\u0107 pliki JavaScript. W naszym package.json<\/code>dodali\u015bmy dwa skrypty w\u0142a\u015bnie do tego.<\/p>\n
Ilekro\u0107 chcemy programowa\u0107 w naszych plikach JavaScript, uruchamiamy to w terminalu:<\/p>\n
npm run build<\/code><\/pre>\n
To polecenie wykona kompilacj\u0119 za ka\u017cdym razem, gdy uruchomisz to w terminalu. Spr\u00f3buj, a powiniene\u015b zobaczy\u0107, \u017ce generuje plik block-awhitepixel-myfirstblock.js<\/code>(wraz z jednym lub dwoma innymi plikami \u201ezasob\u00f3w”) w zdefiniowanym folderze wyj\u015bciowym, kt\u00f3ry zdefiniowa\u0142e\u015b w webpack.config.js<\/code>. W moim przypadku pojawia si\u0119 w awp-starter-theme\/assets\/js\/<\/code>.<\/p>\n
U\u017cycie powy\u017cszego polecenia dzia\u0142a dobrze, ale denerwuj\u0105ce jest powtarzanie za ka\u017cdym razem, gdy wprowadzasz zmiany w plikach. Prawdopodobnie wolisz zamiast tego uruchomi\u0107 to polecenie:<\/p>\n
npm run start<\/code><\/pre>\n
Spowoduje to ustawienie terminala w \u201etrybie zegarka”, wykrywaj\u0105c wszelkie zmiany zapisane w plikach JavaScript i kompiluj\u0105c je w miar\u0119 post\u0119pu. Za ka\u017cdym razem, gdy twoje pliki zawieraj\u0105 b\u0142\u0119dy, terminal wy\u015bwietli komunikaty o b\u0142\u0119dach. Naci\u015bnij CTRL + C, aby zatrzyma\u0107 proces ogl\u0105dania.<\/p>\n
\"Utw\u00f3rz<\/a><\/p>\n
Jako odniesienie m\u00f3j folder projektu wygl\u0105da teraz jak obraz. Wol\u0119 oddzieli\u0107 wszystkie pliki konfiguracyjne, a zw\u0142aszcza podfolder node_modules\/<\/code>(kt\u00f3ry zawiera dos\u0142ownie dziesi\u0105tki tysi\u0119cy plik\u00f3w) od reszty mojego kodu motywu. U\u0142atwia konfigurowanie regu\u0142 ignorowania \u2013 na przyk\u0142ad kompilatory SCSS lub git ignore. Skonfigurowali\u015bmy ju\u017c konfiguracj\u0119 webpacka, aby skompilowa\u0107 ostateczne pliki bezpo\u015brednio awp-starter-theme\/assets\/js\/<\/code>wraz z innymi plikami JavaScript dla mojego motywu.<\/p>\n
Jeste\u015bmy teraz gotowi do nast\u0119pnej cz\u0119\u015bci<\/a>, w kt\u00f3rej zaczniemy od rejestracji naszego pierwszego niestandardowego bloku.<\/p>\n
\u0179r\u00f3d\u0142o nagrywania:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
W pierwszej cz\u0119\u015bci tej serii samouczk\u00f3w, jak tworzy\u0107 niestandardowe bloki WordPress Gutenberg, dowiadujemy si\u0119, jak skonfigurowa\u0107 nasze \u015brodowisko programistyczne.<\/p>\n","protected":false},"author":1,"featured_media":152983,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[897,940,940,897,1110,815,845,845,866,866,815],"tags":[1169],"class_list":{"0":"post-233534","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-kod","8":"category-gutenberg-7","11":"category-n-a","12":"category-wtyczki","13":"category-samouczki","15":"category-wordpress-7","18":"tag-affiai-pl"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233534","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=233534"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233534\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/152983"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=233534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=233534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=233534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}