wp<\/code>i destrukturyzacja<\/h2>\nKiedy jeste\u015bmy w pliku JavaScript umieszczonym w kolejce w edytorze Gutenberg, mamy dost\u0119p do globalnego obiektu\/pakietu: wp<\/code>. Jest to bardzo, bardzo du\u017cy obiekt JavaScript i zawiera ca\u0142\u0105 mas\u0119 przydatnych komponent\u00f3w i funkcji, kt\u00f3rych u\u017cyjemy do tworzenia blok\u00f3w. Pisz\u0105c JavaScript dla blok\u00f3w niestandardowych, b\u0119dziesz odwo\u0142ywa\u0107 si\u0119 do wp<\/code>wielu.<\/p>\nDlatego powszechne jest, zar\u00f3wno we wsp\u00f3\u0142czesnym JavaScript, jak i w React, destrukturyzacj\u0119 tego, czego chcemy z niego u\u017cy\u0107. Zasadniczo oznacza to po prostu, \u017ce definiujemy zmienne lokalne z cz\u0119\u015bci wi\u0119kszej struktury. Na przyk\u0142ad pierwsza funkcja, kt\u00f3rej u\u017cyjemy, to registerBlockType()<\/code>ta, kt\u00f3ra istnieje w wp.blocks<\/code>. Mo\u017cemy wywo\u0142a\u0107 funkcj\u0119 tak:<\/p>\nwp.blocks.registerBlockType();<\/code><\/pre>\nAle \u0142atwiej to zdekonstruowa\u0107 tak:<\/p>\n
const { registerBlockType } = wp.blocks;\nregisterBlockType();<\/code><\/pre>\nTeraz mo\u017cesz odwo\u0142ywa\u0107 si\u0119 do funkcji bezpo\u015brednio, bez poprzedzania jej struktur\u0105. O wiele bardziej przydaje si\u0119, gdy odwo\u0142ujemy si\u0119 do funkcji lub komponent\u00f3w, kt\u00f3re b\u0119dziemy cz\u0119sto powtarza\u0107.<\/p>\n
W tej serii przeprowadzimy restrukturyzacj\u0119, a w miar\u0119 post\u0119p\u00f3w w samouczku zobaczymy, o ile bardziej czytelny i kr\u00f3tszy b\u0119dzie nasz kod.<\/p>\n
Rejestracja nowego bloku<\/h2>\n
W pakiecie registerBlockType()<\/code>dost\u0119pna jest funkcja rejestracji nowego bloku niestandardowego. wp.blocks<\/code>Przyjmuje dwa parametry; po pierwsze ci\u0105g z przestrzeni\u0105 nazw i nazw\u0105 bloku, a po drugie obiekt z pe\u0142n\u0105 konfiguracj\u0105 bloku.<\/p>\nGutenberg oczekuje, \u017ce wszystkie bloki b\u0119d\u0105 mia\u0142y przestrze\u0144 nazw i nazw\u0119 zdefiniowan\u0105 z uko\u015bnikiem pomi\u0119dzy nimi. Przestrze\u0144 nazw ma zapewni\u0107, \u017ce nazwa bloku nie b\u0119dzie kolidowa\u0107 z innymi blokami, kt\u00f3re mog\u0105 u\u017cywa\u0107 tej samej nazwy. Wszystkie bloki w WordPressie u\u017cywaj\u0105 przestrzeni nazw core<\/code>. Na przyk\u0142ad standardowy blok akapitu w WordPressie ma nazw\u0119 core\/paragraph<\/code>. Je\u015bli wybierzesz inn\u0105 przestrze\u0144 nazw, mo\u017cesz r\u00f3wnie\u017c utworzy\u0107 blok o nazwie akapit bez powodowania \u017cadnych problem\u00f3w.<\/p>\nWybierz unikaln\u0105 dla siebie przestrze\u0144 nazw wersji slugu. W tej serii u\u017cyj\u0119 przestrzeni nazw awp<\/code>(kr\u00f3tkiej wersji A White Pixel).<\/p>\nOtw\u00f3rz plik \u017ar\u00f3d\u0142owy, kt\u00f3ry stworzyli\u015bmy w ostatnim kroku; src\/block-awhitepixel-myfirstblock.js<\/code>, w edytorze. Najpierw zadzwonimy registerBlockType<\/code>z destructured wp.blocks<\/code>, o nazwie awp\/firstblock<\/code>. Dostosuj swoj\u0105 nazw\u0119 i przestrze\u0144 nazw na bie\u017c\u0105co.<\/p>\nconst { registerBlockType } = wp.blocks;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n \/\/ Your block configuration and code here\n});<\/code><\/pre>\nW drugim parametrze, obiekcie konfiguracji bloku, musimy zdefiniowa\u0107 kilka w\u0142a\u015bciwo\u015bci, aby zosta\u0142 pomy\u015blnie zarejestrowany. Pami\u0119taj, \u017ce konfiguracja bloku jest obiektem, co oznacza, \u017ce \u200b\u200bmusisz zapisa\u0107 wszystko jako pary klucz + warto\u015b\u0107, oddzielone przecinkiem. Istnieje wiele mo\u017cliwych w\u0142a\u015bciwo\u015bci konfiguracyjnych, wi\u0119c przejrzyjmy je, a na ko\u0144cu zobaczymy ostateczny kod.<\/p>\n
Wymagane: tytu\u0142<\/h3>\n
Pierwsza wymagana w\u0142a\u015bciwo\u015b\u0107 to title<\/code>. To jest nazwa, kt\u00f3ra pojawi si\u0119 po wybraniu mi\u0119dzy blokami. Ustaw t\u0119 w\u0142a\u015bciwo\u015b\u0107 jako dowoln\u0105 nazw\u0119, kt\u00f3r\u0105 chcesz w ci\u0105gu.<\/p>\nJako tytu\u0142 dodamy:<\/p>\n
title: 'My first block',<\/code><\/pre>\nPS: Przyjrzymy si\u0119 ponownie, jak piszemy wszystkie \u0142a\u0144cuchy w naszym bloku, aby upewni\u0107 si\u0119, \u017ce mo\u017cna je przet\u0142umaczy\u0107 w cz\u0119\u015bci 8. Ale na razie zachowamy prostot\u0119 i po prostu napiszemy \u0142a\u0144cuchy.<\/p>\n
Wymagane: kategoria<\/h3>\n
W\u0142a\u015bciwo\u015b\u0107 category<\/code>okre\u015bla, w kt\u00f3rej kategorii blok\u00f3w pojawi si\u0119 Tw\u00f3j blok po wybraniu blok\u00f3w do wstawienia w edytorze. Mo\u017cliwe warto\u015bci to common<\/code>, formatting<\/code>, layout<\/code>, widgets<\/code>, embed<\/code>.<\/p>\nUmie\u015b\u0107my to w common<\/code>pierwszej kategorii blok\u00f3w.<\/p>\ncategory: 'common',<\/code><\/pre>\nOpcjonalnie: ikona<\/h3>\n
Je\u015bli korzysta\u0142e\u015b z Gutenberga, prawdopodobnie zauwa\u017cy\u0142e\u015b, \u017ce wszystkie bloki maj\u0105 ikony. Mo\u017cesz doda\u0107 ikon\u0119 do swojego bloku z ci\u0105giem, kt\u00f3ry odnosi si\u0119 do dowolnego z dashikon\u00f3w WordPressa<\/a>, lub mo\u017cesz doda\u0107 niestandardowy svg<\/code>element.<\/p>\nWybior\u0119 tylko jeden z dashikon\u00f3w WordPressa, bu\u017ak\u0119<\/a> \u2013 ale mo\u017cesz wybra\u0107 dowolny. Zauwa\u017c, \u017ce pomijasz dodawanie \u201edashicons-" do nazwy klasy ikony.<\/p>\nicon: 'smiley',<\/code><\/pre>\nOpcjonalnie: opis<\/h3>\n
Mo\u017cesz poda\u0107 opis, kt\u00f3ry b\u0119dzie wy\u015bwietlany na pasku bocznym Ustawienia (po prawej stronie), gdy blok jest aktywny.<\/p>\n
Jako przyk\u0142ad dodam tylko kr\u00f3tki tekst:<\/p>\n
description: 'Learning in progress',<\/code><\/pre>\nOpcjonalnie: s\u0142owa kluczowe<\/h3>\n
Gutenberg obs\u0142uguje funkcj\u0119 wyszukiwania przy wyborze typ\u00f3w blok\u00f3w. We w\u0142a\u015bciwo\u015bci mo\u017cna poda\u0107 tablic\u0119 mo\u017cliwych dopasowa\u0144 keywords<\/code>. Bez keywords<\/code>tego znalaz\u0142by\u015b sw\u00f3j blok, wyszukuj\u0105c jego nazw\u0119.<\/p>\nDodam example<\/code>i test<\/code>, aby\u015bmy mogli \u0142atwo znale\u017a\u0107 nasz niestandardowy blok, gdy zaczniemy wpisywa\u0107 jedno z tych s\u0142\u00f3w kluczowych.<\/p>\nkeywords: ['example', 'test'],<\/code><\/pre>\nOpcjonalnie: atrybuty<\/h3>\n
W\u0142a\u015bciwo\u015b\u0107 attributes<\/code>jest bardzo wa\u017cn\u0105 w\u0142a\u015bciwo\u015bci\u0105, do kt\u00f3rej b\u0119dziemy cz\u0119sto wraca\u0107 w tej serii samouczk\u00f3w. Tutaj przechowujesz swoje dane strukturalne i informacje wprowadzane przez u\u017cytkownika dla swojego bloku. Mo\u017cesz to sobie wyobrazi\u0107 jako zmienne. Na razie tego nie dodamy, ale na pewno nied\u0142ugo do tego wr\u00f3cimy.<\/p>\n(rodzaj) wymagane: edytuj i opcjonalnie: zapisz<\/h3>\n
W ramach w\u0142a\u015bciwo\u015bci edit<\/code>i save<\/code>w rzeczywisto\u015bci dodasz ca\u0142y kod zar\u00f3wno dla danych wyj\u015bciowych edytora, jak i dla renderowania frontendu. Obie te w\u0142a\u015bciwo\u015bci oczekuj\u0105 funkcji, kt\u00f3ra powinna zwr\u00f3ci\u0107 pewne dane wyj\u015bciowe.<\/p>\nW\u0142a\u015bciwo\u015b\u0107 edit<\/code>opisuje struktur\u0119 Twojego bloku w edytorze. W\u0142a\u015bciwo\u015b\u0107 save<\/code>zasadniczo obs\u0142uguje dwie rzeczy; Twoje dane wyj\u015bciowe bloku w interfejsie u\u017cytkownika, ale tak\u017ce struktura tego, w jaki spos\u00f3b Tw\u00f3j blok jest zapisywany w bazie danych. B\u0119dziesz pracowa\u0107 g\u0142\u00f3wnie w edit<\/code>tym miejscu, w kt\u00f3rym dodajesz dane wej\u015bciowe do wprowadzania lub wybierania rzeczy oraz aktualizowania danych bloku. Funkcja save<\/code>nie powinna w \u017caden spos\u00f3b aktualizowa\u0107 ani edytowa\u0107 danych, powinna po prostu wyprowadza\u0107.<\/p>\nGutenberg musi by\u0107 w stanie zrekonstruowa\u0107 tw\u00f3j blok ze wszystkimi jego ustawieniami w edytorze na podstawie tego, co jest wyj\u015bciowe w save<\/code>funkcji (i atrybutach). Je\u015bli Gutenberg kiedykolwiek otworzy post, w kt\u00f3rym poprzednio zapisane dane wyj\u015bciowe bloku r\u00f3\u017cni\u0105 si\u0119 (nawet nieznacznie) od tego, co zdefiniowano w zapisie, tw\u00f3j blok stanie si\u0119 niewa\u017cny.<\/p>\n![\"Utw\u00f3rz](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151978-61e4d21609214.png\")
<\/a><\/p>\nGwarantuj\u0119 Ci, \u017ce b\u0119dziesz si\u0119 z tym cz\u0119sto spotyka\u0107 podczas tworzenia niestandardowych blok\u00f3w. Kiedy tak si\u0119 stanie, musisz usun\u0105\u0107 blok (z kropek na pasku narz\u0119dzi) i doda\u0107 go ponownie. Polecam te\u017c zrobi\u0107 od\u015bwie\u017canie przegl\u0105darki (F5 lub CTRL+R).<\/p>\n
WordPress ma dedykowan\u0105 stron\u0119 dokumentacji<\/a> dla funkcji edycji i zapisywania bloku, je\u015bli chcesz dowiedzie\u0107 si\u0119 wi\u0119cej.<\/p>\nJe\u015bli chodzi o nasz pierwszy blok, wypiszmy co\u015b podstawowego. Zwr\u00f3cimy to samo dla obu edit<\/code>i save<\/code>; \u201e:)” zawini\u0119ty w <div><\/code>. Ikona bloku to w ko\u0144cu bu\u017aka.<\/p>\nedit:() => { \n return <div>:)<\/div> \n},\nsave:() => { \n return <div>:)<\/div> \n}<\/code><\/pre>\nInne w\u0142a\u015bciwo\u015bci<\/h3>\n
Istnieje wi\u0119cej opcjonalnych w\u0142a\u015bciwo\u015bci dla registerBlockType<\/code>; parent<\/code>, supports<\/code>, transforms<\/code>, example<\/code>, i styles<\/code>. Na razie pominiemy je, poniewa\u017c wi\u0119kszo\u015b\u0107 z nich dotyczy bardziej zaawansowanego lub niestandardowego budowania blok\u00f3w. Je\u015bli chcesz dowiedzie\u0107 si\u0119 wi\u0119cej na ten temat, zapoznaj si\u0119 z dokumentacj\u0105 WordPressa<\/a>.<\/p>\nKod bloku ko\u0144cowego rejestru<\/h2>\n
Nasz kod wygl\u0105da teraz mniej wi\u0119cej tak.<\/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>\nDzi\u0119ki temu mamy wystarczaj\u0105co du\u017co, aby nasz blok zosta\u0142 pomy\u015blnie zarejestrowany jako blok niestandardowy. Zobaczmy to w praktyce w edytorze Gutenberga.<\/p>\n
Czy pami\u0119ta\u0142e\u015b o skompilowaniu kodu JavaScript? W poprzednim kroku dowiedzieli\u015bmy si\u0119, \u017ce nie mo\u017cemy za\u0142adowa\u0107 tego pliku JavaScript do Gutenberga; potrzebujemy skompilowanej wersji. Zwykle rozwijasz si\u0119 npm run start<\/code>dzia\u0142aj\u0105c w tle lub mo\u017cesz po prostu uruchomi\u0107 npm run build<\/code>raz teraz. Powinno to skompilowa\u0107 nasz \u017ar\u00f3d\u0142owy Javascript i umie\u015bci\u0107 go w dowolnym miejscu, w kt\u00f3rym ma by\u0107 umieszczony i nazwany w pliku webpack.config.js<\/code>.<\/p>\nCz\u0119\u015b\u0107 PHP rejestracji bloku<\/h2>\n
Dla ka\u017cdego bloku musisz zarejestrowa\u0107 plik Javascript i jest to dok\u0142adnie to samo, co inne skrypty w WordPressie \u2013 u\u017cywaj\u0105c [wp_register_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_script\/)()<\/code>. Zauwa\u017c, \u017ce rejestrujemy skrypt, a nie umieszczamy go w kolejce. Dzieje si\u0119 tak dlatego, \u017ce musimy r\u00f3wnie\u017c wywo\u0142a\u0107 funkcj\u0119 PHP, aby zarejestrowa\u0107 ka\u017cdy niestandardowy blok, a ta funkcja jest odpowiedzialna za kolejkowanie skryptu, gdy jest to potrzebne.<\/p>\nWol\u0119 trzyma\u0107 kod zwi\u0105zany z Gutenbergiem w osobnym pliku w moich motywach. Ale mo\u017cesz, i b\u0119dziemy w tym samouczku, po prostu napisa\u0107 ca\u0142y kod PHP bezpo\u015brednio w motywie functions.php<\/code>dla uproszczenia.<\/p>\nZalecam u\u017cywanie init<\/code>haka do swojej funkcji, a nie enqueue_block_assets<\/code>. Mo\u017cemy po\u0142\u0105czy\u0107 zar\u00f3wno rejestracj\u0119 skryptu, jak i rejestracj\u0119 bloku.<\/p>\nadd_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>\nFunkcja PHP, kt\u00f3rej u\u017cyjemy do zarejestrowania nowego bloku to [register_block_type](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/)()<\/code>. Podobnie jak Javascript registerBlockType()<\/code>przyjmuje dwa parametry; przestrze\u0144 nazw i nazw\u0119 bloku oraz tablic\u0119 z argumentami. Upewnij si\u0119, \u017ce podajesz dok\u0142adnie tak\u0105 sam\u0105 przestrze\u0144 nazw i nazw\u0119 w PHP jak w JavaScript.<\/p>\nW drugim argumencie jest kilka mo\u017cliwych argument\u00f3w (do niekt\u00f3rych wr\u00f3cimy w dalszej cz\u0119\u015bci tej serii). Ale najwa\u017cniejsz\u0105 z nich jest editor_script<\/code>miejsce, w kt\u00f3rym podajesz uchwyt (pierwszy parametr wp_register_script()<\/code>) zarejestrowanego skryptu.<\/p>\nI to wszystko!<\/p>\n
Nasz blok w edytorze Gutenberg<\/h2>\n
Teraz, gdy od\u015bwie\u017cysz edytor w jakim\u015b po\u015bcie, powiniene\u015b znale\u017a\u0107 nasz blok \u2013 albo otwieraj\u0105c kategori\u0119 Wsp\u00f3lne, albo wyszukuj\u0105c dowolne z podanych s\u0142\u00f3w kluczowych lub nazwy.<\/p>\n
![\"Utw\u00f3rz](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151978-61e4d216d1cdb.png\")
<\/a>![\"Utw\u00f3rz](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151978-61e4d217e1762.gif\")
<\/a><\/p>\nNasz blok renderuje proste \u201e:)” zar\u00f3wno w edytorze, jak i we frontendzie. Na razie nie mo\u017cesz edytowa\u0107 niczego w bloku, ale tego nauczymy si\u0119 w kolejnych krokach!<\/p>\n