Zacznijmy od absolutnych podstaw. Jakich j\u0119zyk\u00f3w programowania i narz\u0119dzi b\u0119dziesz potrzebowa\u0107 lub kt\u00f3rych musisz si\u0119 nauczy\u0107, aby najlepiej rozwija\u0107 si\u0119 dla Gutenberga?<\/p>\n
J\u0119zyk i biblioteki, kt\u00f3re musisz zna\u0107<\/h2>\n
Kr\u00f3tka odpowied\u017a na pytanie, jakiego j\u0119zyka musisz u\u017cywa\u0107 do programowania w Gutenberg, to: JavaScript. Jednak w \u015bwiecie JavaScript istnieje wiele poj\u0119\u0107, rozszerze\u0144 i narz\u0119dzi, o kt\u00f3rych powiniene\u015b wiedzie\u0107.<\/p>\n
Przede wszystkim chodzi o wersj\u0119 Javascript. Istnieje oficjalna standaryzacja Javascript; ECMAScript. ECMAScript 5 (cz\u0119sto skracany do ES5<\/strong>) pojawi\u0142 si\u0119 oko\u0142o 10 lat temu i jest wersj\u0105 Javascript, z kt\u00f3r\u0105 wi\u0119kszo\u015b\u0107 z nas, deweloper\u00f3w, jest zaznajomiona. Nast\u0119pnie mamy ECMAScript 6 (cz\u0119sto skracany do ES6<\/strong> ), kt\u00f3ry ukaza\u0142 si\u0119 w 2015 roku. Niekt\u00f3rzy ludzie odnosz\u0105 si\u0119 do tej wersji jako ES2015. I wreszcie ESNext<\/strong>, kt\u00f3ra jest dynamiczn\u0105 nazw\u0105 obejmuj\u0105c\u0105 nadchodz\u0105c\u0105 wersj\u0119, zawieraj\u0105c\u0105 propozycje, kt\u00f3re mamy nadziej\u0119 znale\u017a\u0107 si\u0119 w ka\u017cdej nast\u0119pnej standardowej wersji JavaScript.<\/p>\n By\u0107 mo\u017ce my\u015blisz w stylu \u201ewi\u0119c to wszystko dobrze, a nowsze wersje JavaScript to po prostu wi\u0119cej funkcji. Wi\u0119c u\u017cyj\u0119 tylko najnowszego". Ale jest bardzo wa\u017cna rzecz, kt\u00f3r\u0105 musisz wiedzie\u0107 o wersjach JavaScript, a jest to nast\u0119puj\u0105ca: wi\u0119kszo\u015b\u0107 dzisiejszych przegl\u0105darek rozumie tylko ES5.<\/p>\n Oznacza to, \u017ce je\u015bli chcesz napisa\u0107 JavaScript w ES6 lub ESNext, musisz skonfigurowa\u0107 narz\u0119dzia, kt\u00f3re przekszta\u0142c\u0105 Tw\u00f3j kod w ES5, aby przegl\u0105darki mog\u0142y go zrozumie\u0107. Ale zanim zaczniesz my\u015ble\u0107 o ca\u0142kowitym pomini\u0119ciu nauki ES6 i ESNext, pami\u0119taj, \u017ce ES5 ma 10 lat. I b\u0119dzie to wymaga\u0142o napisania du\u017co wi\u0119cej kodu. B\u0119dzie te\u017c znacznie mniej czytelny i bardziej z\u0142o\u017cony ni\u017c gdyby\u015b napisa\u0142 go w ES6 lub ESNext.<\/p>\n Ponadto do koncepcji Gutenberga chcesz r\u00f3wnie\u017c u\u017cy\u0107 JSX<\/strong> \u2013 rozszerzenia sk\u0142adni do JavaScript. JSX to tak\u017ce j\u0119zyk, kt\u00f3rego przegl\u0105darki nie mog\u0105 zrozumie\u0107 bez jego przekszta\u0142cenia.<\/p>\n Je\u015bli nadal nie jeste\u015b przekonany, \u017ce ES6\/ESNext jest wart dodatkowego kroku w celu jego przekszta\u0142cenia, pozw\u00f3l, \u017ce poka\u017c\u0119 ci por\u00f3wnanie kodu. W ES6 i JSX mo\u017cesz napisa\u0107 to w celu zwr\u00f3cenia prostego akapitu; z klas\u0105 i dynamicznym wyj\u015bciem ze zmiennej;<\/p>\n Dla tych z Was, kt\u00f3rzy s\u0105 w tym nowi i my\u015bl\u0105, \u017ce zapomnia\u0142em cytat\u00f3w \u2013 nie, nie. Na tym polega prostota JSX. Por\u00f3wnajmy powy\u017csze z tym, jak pisa\u0142by\u015b za pomoc\u0105 bibliotek JavaScript ES5 i WordPress:<\/p>\n Ca\u0142y powy\u017cszy kod jest wymagany do wypisania tego, co ES6 i JSX mog\u0105 zrobi\u0107 w pojedynczej, bardzo \u0142atwej do odczytania linii! Wyobra\u017a sobie budowanie bardziej z\u0142o\u017conego interfejsu u\u017cytkownika ze zdarzeniami i warunkami warunkowymi, gdy tylko prosty akapit wymaga tego niewygodnego fragmentu kodu.<\/p>\n Przekonany? Dobrze!<\/p>\n Najpopularniejszym narz\u0119dziem u\u017cywanym przez WordPressa do przekszta\u0142cania ES6\/ESNext jest Babel<\/a>. Zwykle u\u017cywa\u0142by\u015b Babel jako wtyczki do Webpack<\/a>, kt\u00f3ry jest narz\u0119dziem, kt\u00f3re \u0142\u0105czy i minimalizuje twoje pliki JavaScript. Oba narz\u0119dzia u\u017cywaj\u0105 Node.js<\/a>, co daje kilka narz\u0119dzi do uruchamiania skrypt\u00f3w dla Webpack i Babel w wierszu polece\u0144. Je\u015bli brzmi to myl\u0105c, mam post, kt\u00f3ry szczeg\u00f3\u0142owo wyja\u015bnia, jak skonfigurowa\u0107 wszystkie te narz\u0119dzia do<\/a> rozwoju Gutenberga.<\/p>\n Drug\u0105 rzecz\u0105, kt\u00f3r\u0105 musisz wiedzie\u0107 o technologiach, jest to, \u017ce Gutenberg opiera si\u0119 na warstwie abstrakcji na wierzchu React JS<\/strong>. React JS<\/a> to biblioteka JavaScript o otwartym kodzie \u017ar\u00f3d\u0142owym utrzymywana przez Facebooka i zosta\u0142a wydana oko\u0142o roku 2013. Poniewa\u017c React istnieje ju\u017c od jakiego\u015b czasu, istnieje wiele samouczk\u00f3w, przewodnik\u00f3w i dokumentacji dla tej biblioteki. Oficjalna strona Reacta zawiera dobry, szczeg\u00f3\u0142owy samouczek<\/a> dla nowych u\u017cytkownik\u00f3w Reacta. Zdecydowanie nie musisz by\u0107 ekspertem w React, aby tworzy\u0107 dla Gutenberga, ale podstawy tego, jak dzia\u0142a z komponentami i stanami, pomog\u0105 ci bardzo w zrozumieniu Gutenberga.<\/p>\n Jedn\u0105 z najwi\u0119kszych zalet Gutenberga jest odej\u015bcie od sta\u0142ego HTML w tre\u015bci post\u00f3w. WordPress, przed Gutenbergiem i wi\u0119kszo\u015b\u0107 internetowych CMS-\u00f3w przechowuje tre\u015b\u0107 artyku\u0142\u00f3w w czystym HTML. W przypadku prostych tre\u015bci (tytu\u0142y i akapity) generalnie nie jest to problem. Ale mo\u017ce by\u0107 wi\u0119kszy problem w przypadku bardziej z\u0142o\u017conej i dynamicznej zawarto\u015bci bogatej.<\/p>\n Ka\u017cdy CMS, kt\u00f3ry zezwala na dynamiczn\u0105 zawarto\u015b\u0107 w tre\u015bci artyku\u0142u, napotka problemy z zapisaniem tego jako prawid\u0142owego kodu HTML. Mo\u017ce to by\u0107 dowolny obraz, kt\u00f3ry odwo\u0142uje si\u0119 do jego identyfikatora w systemie zamiast pe\u0142nego adresu URL. Lub wid\u017cet, kt\u00f3ry dynamicznie wy\u015bwietla najnowsze posty w danej kategorii. Zwykle zostanie to rozwi\u0105zane przez wypisanie niestandardowego zaszyfrowanego kodu HTML, kt\u00f3ry nie ma sensu normalnie wyprowadza\u0107. A nast\u0119pnie pozw\u00f3l parserowi CMS zaj\u0105\u0107 si\u0119 przekszta\u0142caniem tych element\u00f3w HTML w co\u015b znacz\u0105cego lub dynamicznego. Wad\u0105 tego jest to, \u017ce je\u015bli przeniesiesz swoje tre\u015bci do innego CMS, cz\u0119sto spowoduje to brzydki kod HTML. Tre\u015b\u0107 by\u0142aby wype\u0142niona nieprzeanalizowanym kodem HTML, kt\u00f3ry trzeba r\u0119cznie wyczy\u015bci\u0107. W\u0142a\u015bnie t\u0119 kwesti\u0119 chce rozwi\u0105za\u0107 Gutenberg.<\/p>\n Dzi\u0119ki Gutenberg WordPress zdecydowa\u0142 si\u0119 zapisywa\u0107 dodatkowe i dynamiczne informacje jako komentarze HTML. Komentarze HTML nigdy nie s\u0105 widoczne dla u\u017cytkownik\u00f3w w witrynie i zasadniczo wszystko jest dozwolone w bloku komentarzy. Komentarz HTML zaczyna si\u0119 Nie b\u0119d\u0119 szczeg\u00f3\u0142owo omawia\u0142 struktury blok\u00f3w komentarzy \u2013 szczeg\u00f3\u0142owy przewodnik<\/a> na ten temat znajdziesz w Podr\u0119czniku edytora WordPress. Ale jako przyk\u0142ad, prosty akapit w tre\u015bci posta Gutenberga zostanie zapisany w bazie danych jako:<\/p>\n Je\u015bli chodzi o zawarto\u015b\u0107 dynamiczn\u0105, zwykle w og\u00f3le nie zostanie wy\u015bwietlony \u017caden kod HTML. Wszystkie informacje, kt\u00f3re WordPress potrzebuje, aby zrozumie\u0107, co robi ten blok, znajduj\u0105 si\u0119 w komentarzach HTML. W ten spos\u00f3b Gutenberg przechowuje blok \u201eNajnowszych post\u00f3w”:<\/p>\n Poniewa\u017c wszystko jest komentarzem HTML, przeniesienie post\u00f3w do innego WordPressa bez Gutenberga lub innego systemu CMS sprawi, \u017ce \u017caden brzydki, nieprzeanalizowany kod HTML nie zostanie wypluty. Zostanie po prostu zignorowany i pomini\u0119ty.<\/p>\n Jak zapewne ju\u017c si\u0119 zorientowa\u0142e\u015b, bloki komentarzy zaczynaj\u0105 si\u0119 od nazwy bloku, poprzedzonej ’ Warto wiedzie\u0107:<\/strong> Masz kilka opcji dostosowywania motyw\u00f3w lub wtyczek do Gutenberga. Poni\u017cej wymieniono najcz\u0119stsze dostosowania, kt\u00f3re prawdopodobnie wykonasz jako programista.<\/p>\n WordPress Gutenberg zawiera du\u017cy pakiet typ\u00f3w blok\u00f3w i mo\u017cesz je rozszerzy\u0107. Mo\u017cesz tak\u017ce usun\u0105\u0107 niekt\u00f3re z nich lub zdecydowa\u0107 si\u0119 w niekt\u00f3rych przypadkach, aby zezwoli\u0107 lub usun\u0105\u0107 tylko niekt\u00f3re z nich.<\/p>\n Najpopularniejsz\u0105 metod\u0105 rozszerzania bloku jest dodawanie niestandardowych styl\u00f3w bloku<\/a> \u2013 kt\u00f3re s\u0105 odmianami stylu bloku. Style blokowe nie s\u0105 tak powszechne w domy\u015blnym WordPressie, ale s\u0105 pewne. Sp\u00f3jrz na blok Cytat. W edytorze Gutenberg b\u0119dziesz mia\u0142 pole na prawym pasku bocznym o nazwie \u201eStyle”.<\/p>\n Innym sposobem dostosowywania istniej\u0105cych blok\u00f3w jest u\u017cycie filtr\u00f3w. Prawdopodobnie znasz filtry u\u017cywaj\u0105ce PHP w WordPressie, ale w Gutenbergu s\u0105 teraz filtry oparte na JavaScript na blokach<\/a>. Na przyk\u0142ad mo\u017cesz doda\u0107 w\u0142asne niestandardowe atrybuty (ustawienia) do wszystkich lub okre\u015blonych typ\u00f3w blok\u00f3w lub filtrowa\u0107 spos\u00f3b ich zapisywania lub wyprowadzania.<\/p>\n Mo\u017cesz tak\u017ce manipulowa\u0107 kategoriami blok\u00f3w, a tak\u017ce usuwa\u0107 lub zezwala\u0107 na okre\u015blone bloki w okre\u015blonych sytuacjach. Mo\u017cesz te\u017c na przyk\u0142ad upewni\u0107 si\u0119, \u017ce tylko kilka typ\u00f3w blok\u00f3w jest dozwolonych dla niestandardowego typu postu.<\/p>\n Tworzenie niestandardowych blok\u00f3w to prawdopodobnie pierwsza my\u015bl, kt\u00f3r\u0105 ma wi\u0119kszo\u015b\u0107 programist\u00f3w WordPress. Domy\u015blne bloki w WordPressie mog\u0105 przej\u015b\u0107 d\u0142ug\u0105 drog\u0119, ale je\u015bli budujesz bardziej z\u0142o\u017cony motyw lub wtyczk\u0119, prawdopodobnie masz okre\u015blone potrzeby. Na przyk\u0142ad u\u017cycie Gutenberga do stworzenia \u0142adnie wygl\u0105daj\u0105cej strony g\u0142\u00f3wnej ze skr\u00f3tami do tre\u015bci i zawarto\u015bci dynamicznej. Mo\u017cliwe jest osi\u0105gni\u0119cie najwi\u0119kszej personalizacji za pomoc\u0105 opcji klasy CSS, kt\u00f3ra istnieje dla wszystkich blok\u00f3w. Ale to nie jest szczeg\u00f3lnie przyjazne dla u\u017cytkownika.<\/p>\n Pisanie w\u0142asnych niestandardowych blok\u00f3w jest prawdopodobnie najtrudniejsze w dostosowywaniu motywu lub wtyczki do Gutenberga. Ale mo\u017ce to by\u0107 r\u00f3wnie\u017c najbardziej satysfakcjonuj\u0105ce! Nie tylko b\u0119dziesz m\u00f3g\u0142 tworzy\u0107 bloki, kt\u00f3re dzia\u0142aj\u0105 i wygl\u0105daj\u0105 dok\u0142adnie tak, jak chcesz \u2013 ale to tak\u017ce \u015bwietny spos\u00f3b na szybkie poznanie nowej technologii opartej na Javascript.<\/p>\n Je\u015bli jeste\u015b programist\u0105 motyw\u00f3w WordPress, powiniene\u015b mie\u0107 \u015bwiadomo\u015b\u0107, \u017ce Tw\u00f3j motyw mo\u017ce wymaga\u0107 wielu ustawie\u0144 dla Gutenberga, zw\u0142aszcza w postaci Domy\u015blnie WordPress obs\u0142uguje wi\u0119kszo\u015b\u0107 stylizacji domy\u015blnych blok\u00f3w, wi\u0119c nie musisz si\u0119 zbytnio martwi\u0107 o stylizowanie ich w swoim motywie. Ale tw\u00f3rcy motyw\u00f3w s\u0105 zwykle bardziej wybredni, je\u015bli chodzi o ich projektowanie i stylizacj\u0119. Wi\u0119c prawdopodobnie b\u0119dziesz musia\u0142 dostosowa\u0107 lub doda\u0107 stylizacj\u0119 blokow\u0105. Mo\u017cesz doda\u0107 style edytora tylko do frontendu, tylko do edytora lub do obu. Podr\u0119cznik WordPress Gutenberg zawiera przegl\u0105d styl\u00f3w edytora<\/a> i domy\u015blnych styl\u00f3w blok\u00f3w.<\/p>\nPo co wi\u0119c zawraca\u0107 sobie g\u0142ow\u0119 ES6, ESNext czy JSX?<\/h3>\n
return <p className=\"example\">Hello, my name is {name}<\/p>;<\/code><\/pre>\nreturn wp.element.createElement(\n 'p',\n { className: 'example' },\n 'Hello, my name is ' + name\n);<\/code><\/pre>\nNarz\u0119dzia do transformacji i React JS<\/h3>\n
![\"Podstawy](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153969-61e5175b816e1.png\")
<\/a><\/p>\nPodsumowuj\u0105c:<\/h3>\n
\n
Nowy spos\u00f3b przechowywania tre\u015bci post\u00f3w i dlaczego<\/h2>\n
<!--<\/code>i ko\u0144czy na --><\/code>, a Gutenberg przechowuje dane w okre\u015blonej strukturze w formacie JSON. Ka\u017cdy blok w Gutenbergu jest otoczony pocz\u0105tkowym komentarzem HTML i zamykaj\u0105cym komentarzem HTML po nim.<\/p>\nNowy spos\u00f3b przechowywania tre\u015bci post\u00f3w<\/h3>\n
<!-- wp:paragraph -->\n<p>Lorem ipsum dolor sit amet consectetur adipiscing elit.<\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\n<!-- wp:latest-posts {\"categories\":\"17\",\"displayPostContent\":true,\"excerptLength\":30,\"postLayout\":\"grid\"} \/--><\/code><\/pre>\nwp<\/code>’. Je\u015bli istniej\u0105 jakie\u015b ustawienia niestandardowe, zostan\u0105 one wyprowadzone po nazwie w formacie JSON, jak wida\u0107 na przyk\u0142adzie bloku Ostatnie posty. Gutenberg nazywa je atrybutami, a ta koncepcja jest czym\u015b, z czym bardzo dobrze si\u0119 zapoznasz, kiedy zaczniesz uczy\u0107 si\u0119 rozwija\u0107 dla Gutenberga.<\/p>\n
\nJe\u015bli chcesz dok\u0142adniej przyjrze\u0107 si\u0119, jak zapisywana jest nowa tre\u015b\u0107 posta, mo\u017cesz zajrze\u0107 do wp_posts<\/code>tabeli w bazie danych. Jest jeszcze jedna \u0142atwiejsza metoda podgl\u0105dania pe\u0142nej warto\u015bci bazy danych z poziomu szablon\u00f3w WordPress. W swoim pojedynczym szablonie w p\u0119tli, po prostu u\u017cyj \u201e echo get_the_content()<\/code>„. U\u017cycie normalnego \u201e the_content()<\/code>” spowoduje wy\u015bwietlenie przeanalizowanej tre\u015bci posta, ale powt\u00f3rzenie warto\u015bci tre\u015bci spowoduje wy\u015bwietlenie dok\u0142adnie tego, co jest przechowywane w bazie danych. Mo\u017cesz u\u017cy\u0107 narz\u0119dzia Inspect lub wy\u015bwietli\u0107 \u017ar\u00f3d\u0142o w przegl\u0105darce Chrome lub Firefox, aby zobaczy\u0107 bloki komentarzy.<\/p>\nCo Ty jako programista mo\u017cesz zrobi\u0107 w Gutenberg<\/h2>\n
Rozszerz i dostosuj istniej\u0105ce bloki<\/h3>\n
Tw\u00f3rz w\u0142asne niestandardowe bloki<\/h3>\n
Upewnij si\u0119, \u017ce Tw\u00f3j motyw jest gotowy do Gutenberg<\/h3>\n
add_theme_support()<\/code>. Podr\u0119cznik WordPressa zawiera dobry przegl\u0105d<\/a> wszystkich motyw\u00f3w, kt\u00f3re musisz wzi\u0105\u0107 pod uwag\u0119, aby Tw\u00f3j motyw by\u0142 gotowy do Gutenberga.<\/p>\n