npm<\/code> skrypt do stworzenia wtyczki blokuj\u0105cej<\/a>, kt\u00f3ra tworzy blok startowy, dzi\u0119ki czemu mo\u017cesz szybko rozpocz\u0105\u0107 prac\u0119.<\/p>\nDomy\u015blnie rodzaj tworzonej wtyczki WordPress to \u201eblok", ale daje nam r\u00f3wnie\u017c dobry punkt wyj\u015bcia dla innych rodzaj\u00f3w wtyczek Gutenberga.<\/p>\n
Warunki wst\u0119pne<\/h2>\n\n- Node musi by\u0107 zainstalowany na twoim komputerze<\/a>, aby mo\u017cna by\u0142o u\u017cy\u0107
npm<\/code>polecenia (co oznacza Node Package Manager)<\/li>\n- Instalacja WordPress<\/li>\n
- Edytor kodu<\/li>\n
- Dost\u0119p do Terminala<\/li>\n<\/ul>\n
Stw\u00f3rz swoj\u0105 wtyczk\u0119<\/h2>\n
Po zainstalowaniu w\u0119z\u0142a na swoim komputerze powiniene\u015b mie\u0107 dost\u0119p do npm<\/code>polecenia w swoim terminalu.<\/p>\nOtw\u00f3rz terminal i upewnij si\u0119, \u017ce cd<\/code>wpisa\u0142e\u015b (Zmieniony katalog) do folderu wtyczek w instalacji WordPressa (np cd wp-content\/plugins<\/code>. ).<\/p>\nTam uruchom nast\u0119puj\u0105ce polecenie:<\/p>\n
npm init @wordpress\/block\n<\/code><\/pre>\nSpowoduje to pobranie wszystkiego, czego skrypt potrzebuje do rozpocz\u0119cia kompilacji. Po zako\u0144czeniu skrypt zada Ci seri\u0119 pyta\u0144 potrzebnych do skonfigurowania wtyczki.<\/p>\n
U\u017cywanie terminala do uruchamiania skryptu tworzenia<\/p>\n
Pytania dotycz\u0105ce konfiguracji<\/h3>\n
Skrypt zada nast\u0119puj\u0105ce pytania, oto moje przyk\u0142adowe odpowiedzi:<\/p>\n
\n- \n
\u015alimak bloku u\u017cywany do identyfikacji (tak\u017ce nazwa wtyczki i folderu wyj\u015bciowego)<\/strong> \u2014 chc\u0119, aby m\u00f3j blok nazywa\u0142 si\u0119 Wholesome Plugin<\/code>, wi\u0119c wprowadzi\u0142em wholesome-plugin<\/code>.<\/p>\n<\/li>\n- \n
Wewn\u0119trzna przestrze\u0144 nazw dla nazwy bloku (co\u015b unikalnego dla Twoich produkt\u00f3w)<\/strong> \u2014 poniewa\u017c powinna by\u0107 unikalna dla wszystkich moich produkt\u00f3w, kt\u00f3re wprowadzi\u0142em wholesomecode<\/code>, poniewa\u017c jest to nazwa mojej firmy.<\/p>\n<\/li>\n- \n
Wy\u015bwietlany tytu\u0142 Twojego bloku<\/strong> \u2014 wpisa\u0142em tytu\u0142 wtyczki, Wholesome Plugin<\/code>.<\/p>\n<\/li>\n- \n
Kr\u00f3tki opis Twojego bloku (opcjonalnie)<\/strong> \u2014 wpisa\u0142em \u201e An example plugin to demonstrate the create-block-script<\/code>„.<\/p>\n<\/li>\n- \n
Dashicon u\u0142atwiaj\u0105cy identyfikacj\u0119 twojego bloku (opcjonalnie)<\/strong> \u2014 Szybko przywo\u0142uj\u0105c zas\u00f3b WordPress Dashicons<\/a>, wybra\u0142em admin-plugins<\/code>, poniewa\u017c ma ikon\u0119 wtyczki. Pami\u0119taj, aby pomin\u0105\u0107 dashicon- z prefiksu dashicon podczas robienia tego.<\/p>\n<\/li>\n- \n
Nazwa kategorii u\u0142atwiaj\u0105ca u\u017cytkownikom przegl\u0105danie i odkrywanie Twojego bloku (u\u017cyj klawiszy strza\u0142ek)<\/strong> \u2014 wybra\u0142em design<\/code>. Chocia\u017c niestandardowa kategoria prawdopodobnie by\u0142aby lepiej dopasowana.<\/p>\n<\/li>\n- \n
Imi\u0119 i nazwisko autora wtyczki (opcjonalnie). Wielu autor\u00f3w mo\u017ce by\u0107 wymienionych przy u\u017cyciu przecink\u00f3w<\/strong> \u2014 wpisa\u0142em wholesomecode<\/code>.<\/p>\n<\/li>\n- \n
Kr\u00f3tka nazwa licencji wtyczki (opcjonalna)<\/strong> \u2014 nacisn\u0105\u0142em enter, aby zaakceptowa\u0107 GPL v2.0 lub nowsz\u0105.<\/p>\n<\/li>\n- \n
Link do pe\u0142nego tekstu licencji (opcjonalnie)<\/strong> \u2014 nacisn\u0105\u0142em enter, aby wstawi\u0107 adres URL licencji GPL v2.0.<\/p>\n<\/li>\n- \n
Aktualny numer wersji wtyczki<\/strong> \u2014 nacisn\u0105\u0142em enter, aby wstawi\u0107 0.1.0<\/code>.<\/p>\n<\/li>\n<\/ul>\n![\"Tworzenie](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d770fb3.png\")
Pytania dotycz\u0105ce konfiguracji skryptu<\/p>\n
Skrypt zako\u0144czy dzia\u0142anie.<\/p>\n
Co si\u0119 sta\u0142o?<\/h3>\n
Kilka rzeczy dzieje si\u0119 podczas dzia\u0142ania skryptu, s\u0105 to:<\/p>\n
\n- Tworzy folder wtyczki,<\/li>\n
- Generuje wszystkie pliki wtyczek (zobacz przegl\u0105danie wtyczki, aby dowiedzie\u0107 si\u0119, co one robi\u0105<\/a> )<\/li>\n
- Instaluje potrzebne zale\u017cno\u015bci, w tym
@wordpress\/scripts<\/code>pakiet (to nie lada wyzwanie, je\u015bli chodzi o budowanie wtyczki)<\/li>\n- Kompiluje kod<\/li>\n
- Wy\u015bwietla list\u0119 polece\u0144, kt\u00f3rych mo\u017cesz u\u017cy\u0107<\/li>\n<\/ul>\n
![\"Tworzenie](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d865300.png\")
Komendy budowania<\/p>\n
Om\u00f3wimy je bardziej w sekcji eksploracji wtyczek<\/a>.<\/p>\nKorzystanie z wtyczki<\/h2>\n
Zanim b\u0119dziesz m\u00f3g\u0142 korzysta\u0107 z wtyczki, musisz j\u0105 aktywowa\u0107. Mo\u017cesz to zrobi\u0107, wybieraj\u0105c Plugins<\/code>z menu administracyjnego WordPressa, a nast\u0119pnie wybieraj\u0105c activate<\/code>pod nazw\u0105 wtyczki.<\/p>\n![\"Tworzenie](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d958ea6.gif\")
Aktywuj wtyczk\u0119<\/p>\n
Teraz musisz edytowa\u0107 post w WordPressie i wstawi\u0107 wtyczk\u0119 za pomoc\u0105 edytora Gutenberg.<\/p>\n
![\"Tworzenie](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0db497f6.gif\")
Wstawianie bloku do s\u0142upka<\/p>\n
Zauwa\u017c, \u017ce wtyczka nie jest zbyt domy\u015blna, po prostu tworzy blok. Zapewnia jednak struktur\u0119, kt\u00f3rej mo\u017cesz u\u017cy\u0107 do zbudowania w\u0142asnej wtyczki.<\/p>\n
Ogl\u0105danie bloku na interfejsie<\/h3>\n
Domy\u015blnie blok wygl\u0105da tak z przodu. Zauwa\u017c, \u017ce ma nieco inny wygl\u0105d, jest to celowe, aby\u015b m\u00f3g\u0142 zapozna\u0107 si\u0119 z CSS z przodu i z ty\u0142u WordPressa.<\/p>\n
![\"Tworzenie](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0dd10fa2.png\")
Blok na froncie<\/p>\n
Eksploracja wtyczki<\/h2>\n
Ca\u0142y cel tworzenia skryptu blokowego polega na stworzeniu w\u0142asnej wtyczki. Przyjrzyjmy si\u0119 bardziej szczeg\u00f3\u0142owo wygenerowanym plikom:<\/p>\n
![\"Tworzenie](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0de1777f.png\")
Wygenerowane pliki<\/p>\n
wholesome-plugin<\/code><\/strong>\u2014 To jest folder g\u0142\u00f3wny wtyczki, ma on tak\u0105 sam\u0105 nazw\u0119 jak ta, kt\u00f3r\u0105 wpisa\u0142em dla \u201e\u015blimaka” w pytaniach konfiguracyjnych.<\/p>\n**\/build**<\/code>\u2014 To jest folder kompilacji. Zawiera wszystkie zasoby JavaScript i PHP wygenerowane z \/src<\/code>folderu. S\u0105 one umieszczane w kolejce poprzez g\u0142\u00f3wny wholesome-notes.php<\/code>plik programu \u0142aduj\u0105cego.<\/p>\n**\/build\/index.assets.php**<\/code>\u2014 Ten plik PHP jest generowany automatycznie podczas \/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 wholesome-plugin.php<\/code>plik programu \u0142aduj\u0105cego.<\/p>\n**\/build\/index.css**<\/code>\u2014 To jest plik CSS edytora i jest umieszczany w kolejce przez g\u0142\u00f3wny wholesome-plugin.php<\/code>plik \u0142aduj\u0105cy.<\/p>\n**\/build\/index.js**<\/code>\u2014 Jest to g\u0142\u00f3wny skompilowany plik JavaScript, kt\u00f3ry jest umieszczany w kolejce przez g\u0142\u00f3wny wholesome-plugin.php<\/code>plik \u0142aduj\u0105cy.<\/p>\n**\/build\/style-index.css**<\/code>\u2014 To jest frontowy plik CSS, kt\u00f3ry jest umieszczany w kolejce przez g\u0142\u00f3wny wholesome-plugin.php<\/code>plik \u0142aduj\u0105cy.<\/p>\n**\/build\/index.js.map**<\/code>\u2014 Ten plik jest generowany tylko podczas kompilowania zasob\u00f3w do trybu programistycznego (tzn. uruchamiany, npm start<\/code>a nie npm build<\/code>podczas kompilowania zasob\u00f3w. 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\n- \n
**\/node_modules**<\/code>\u2014 Jest to folder, w kt\u00f3rym zainstalowane s\u0105 wszystkie zale\u017cno\u015bci JavaScript dla Twojej wtyczki.<\/p>\n<\/li>\n- \n
**\/src**<\/code>\u2014 To jest folder zawieraj\u0105cy wszystkie nieskompilowane zasoby wtyczki.<\/p>\n<\/li>\n- \n
**\/src\/edit.js**<\/code>\u2014 Jest to funkcja edycji bloku i kontroluje spos\u00f3b wy\u015bwietlania bloku w edytorze bloku, gdy jest on w trybie edycji.<\/p>\n<\/li>\n- \n
**\/src\/editor.scss**<\/code>\u2014 To jest nieskompilowany SCSS dla edytora, zostanie skompilowany do \/build\/index.css<\/code>.<\/p>\n<\/li>\n- \n
**\/src\/index.js**<\/code>\u2014 To jest g\u0142\u00f3wny nieskompilowany plik JavaScript dla bloku edytora WordPress (Gutenberg). Rejestruje blok i zawiera ustawienia domy\u015blne.<\/p>\n<\/li>\n- \n
**\/src\/save.js**<\/code>\u2014 Jest to funkcja zapisywania bloku i kontroluje znaczniki bloku podczas jego zapisywania.<\/p>\n<\/li>\n- \n
**\/src\/style.scss**<\/code>\u2014 To jest nieskompilowany SCSS dla interfejsu, zostanie skompilowany do \/build\/style-index.css<\/code>.<\/p>\n<\/li>\n- \n
**\/.editorconfig**<\/code>\u2014 Ten plik zawiera przydatne ustawienia wst\u0119pne dla IDE (zintegrowanego \u015brodowiska programistycznego), takie jak Visual Studio Code.<\/p>\n<\/li>\n- \n
**\/.gitignore**<\/code>\u2014 Ten plik m\u00f3wi git, aby ignorowa\u0142 okre\u015blone pliki, gdy zatwierdzasz do repozytorium git (takiego jak GitHub).<\/p>\n<\/li>\n- \n
**\/editor.css**<\/code>\u2014 Style w tym pliku s\u0105 wyprowadzane tylko w edytorze, s\u0105 umieszczane w kolejce przez g\u0142\u00f3wny wholesome-notes.php<\/code>plik \u0142aduj\u0105cy.<\/p>\n<\/li>\n- \n
**\/block.json**<\/code>\u2014 Ten plik definiuje wtyczk\u0119, dzi\u0119ki czemu mo\u017ce zosta\u0107 wykryta przez bibliotek\u0119 blok\u00f3w WordPress. Je\u015bli wprowadzisz zmiany we wtyczce, upewnij si\u0119, \u017ce ten plik jest zaktualizowany. W nowszych wersjach skryptu NPM ten plik jest u\u017cywany zamiast \/src\/index.js<\/code>rejestrowania twojego bloku.<\/p>\n<\/li>\n- \n
**\/package.json**<\/code>\u2014 Ten plik zawiera wszystkie zale\u017cno\u015bci npm dla wtyczki oraz polecenia, kt\u00f3re mo\u017cna uruchomi\u0107. Zauwa\u017c, \u017ce wtyczka wykorzystuje wp-scripts<\/code>( @wordpress\/scripts<\/code>) jako swoj\u0105 podstaw\u0119, wi\u0119c pocz\u0105tkowo \u0142adowane zale\u017cno\u015bci dotycz\u0105 tego pakietu.<\/p>\n<\/li>\n- \n
**\/readme.txt**<\/code>\u2014 Ten plik jest plikiem readme repozytorium wtyczek WordPress, kt\u00f3ry jest wymagany, je\u015bli chcesz, aby blok by\u0142 wy\u015bwietlany w repozytorium wtyczek.<\/p>\n<\/li>\n- \n
**\/wholesome-plugin.php**<\/code>\u2014 To jest g\u0142\u00f3wny plik \u0142aduj\u0105cy wtyczki. Jego nazwa zosta\u0142a ustawiona poprzez \u201eslug”, kt\u00f3ry wprowadzili\u015bmy w pocz\u0105tkowym skrypcie instalacyjnym. Umieszcza w kolejce wszystkie zasoby JavaScript potrzebne do wtyczki.<\/p>\n<\/li>\n<\/ul>\nPoznawanie polece\u0144 budowania<\/h3>\n
Zanim b\u0119dziemy mogli uruchomi\u0107 nasze polecenia budowania, musimy upewni\u0107 si\u0119, \u017ce znajdujemy si\u0119 w folderze wtyczek. W tym przyk\u0142adzie uruchomimy cd wholesome-plugin<\/code>terminal, aby zmieni\u0107 katalog na nasz folder wtyczek.<\/p>\nMo\u017cemy wtedy uruchomi\u0107 nast\u0119puj\u0105ce polecenia:<\/p>\n
\n- \n
**npm start**<\/code>\u2014 Rozpoczyna kompilacj\u0119 do rozwoju. Je\u015bli wprowadzisz zmian\u0119 we wtyczce, musisz to zrobi\u0107, aby zmiany si\u0119 pojawi\u0142y (prawdopodobnie b\u0119dziesz r\u00f3wnie\u017c musia\u0142 od\u015bwie\u017cy\u0107 przegl\u0105dark\u0119).<\/p>\n<\/li>\n- \n
**npm run build**<\/code>\u2014 Buduje kod do produkcji. Zr\u00f3b to, je\u015bli tworzysz wydan\u0105 wersj\u0119 wtyczki.<\/p>\n<\/li>\n- \n
**npm run format:js**<\/code>\u2014 Automatycznie formatuje pliki JavaScript, stosuj\u0105c najlepsze praktyki.<\/p>\n<\/li>\n- \n
**npm run lint:css**<\/code>\u2014 Lints (szuka b\u0142\u0119d\u00f3w w) plikach CSS.<\/p>\n<\/li>\n- \n
**npm run lint:js**<\/code>\u2014 Lints (szuka b\u0142\u0119d\u00f3w w) plikach JavaScript.<\/p>\n<\/li>\n- \n
**npm run packages-update**<\/code>\u2014 Aktualizuje pakiety WordPress do najnowszej wersji.<\/p>\n<\/li>\n<\/ul>\nPodczas modyfikowania wtyczki u\u017cyjemy jednego lub wi\u0119cej z nich.<\/p>\n
Modyfikowanie wtyczki<\/h2>\n
Zacznijmy od udost\u0119pnienia naszego bloku do edycji.<\/p>\n
Dodaj atrybuty do\/src\/index.js<\/code><\/h3>\nOtw\u00f3rz \/src\/index.js<\/code>w swoim edytorze i dodaj nast\u0119puj\u0105ce elementy wewn\u0105trz registerBlockType<\/code>funkcji, pod apiVersion<\/code>:<\/p>\nattributes: {\n blockText: {\n default: 'Wholesome Plugin \u2013 hello from the editor!',\n type: 'string',\n },\n},\n<\/code><\/pre>\nTo da nam miejsce do przechowywania danych w naszej wtyczce o nazwie blockText<\/code>dost\u0119pne za po\u015brednictwem attributes<\/code>w\u0142a\u015bciwo\u015bci (prop). Zauwa\u017c, \u017ce nadali\u015bmy mu domy\u015blny oryginalny tekst wygenerowany przez skrypt tworzenia wtyczki.<\/p>\nDodaj tekst sformatowany do\/src\/edit.js<\/code><\/h3>\nOtw\u00f3rz \/src\/edit.js<\/code>w edytorze i zast\u0105p importowanie useBlockProps<\/code>nast\u0119puj\u0105cym:<\/p>\nimport { RichText, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\nUmo\u017cliwi nam to u\u017cycie komponentu RichText w naszej metodzie renderowania edycji.<\/p>\n
Nast\u0119pnie zmie\u0144 ca\u0142\u0105 funkcj\u0119 Edytuj na nast\u0119puj\u0105c\u0105:<\/p>\n
export default function Edit( { attributes, setAttributes }) {\n const { blockText } = attributes;\n return (<p { ...useBlockProps() }>\n <RichText\n className=\"block__text\"\n keepPlaceholderOnFocus\n onChange={ (blockText) => setAttributes( { blockText }) }\n placeholder={ __( 'Block Text', 'wholesome-plugin') }\n tagName=\"span\"\n value={ blockText }\n \/>\n <\/p>\n );\n}\n<\/code><\/pre>\nUstawia to warto\u015b\u0107 RichText<\/code>komponentu na tak\u0105 sam\u0105 jak ta przechowywana w blockText<\/code>atrybucie, a onChange<\/code>w\u0142a\u015bciwo\u015b\u0107 ustawia blockText<\/code>atrybut na to, co kiedykolwiek zosta\u0142o wprowadzone do RichText<\/code>komponentu.<\/p>\nWypisz atrybuty w\/src\/save.js<\/code><\/h3>\nOtw\u00f3rz \/src\/save.js<\/code>w swoim edytorze i zast\u0105p save<\/code>funkcj\u0119 nast\u0119puj\u0105c\u0105:<\/p>\nexport default function save( { attributes }) {\n const { blockText } = attributes;\n return (<p { ...useBlockProps.save() }>\n { blockText }\n <\/p>\n );\n}\n<\/code><\/pre>\nTo po prostu wy\u015bwietla warto\u015b\u0107 blockText<\/code>w akapicie.<\/p>\nKompilacja wtyczki<\/h3>\n
Otw\u00f3rz terminal, upewnij si\u0119, \u017ce jeste\u015b w katalogu g\u0142\u00f3wnym swojej wtyczki i uruchom nast\u0119puj\u0105ce polecenie:<\/p>\n
Skrypt si\u0119 skompiluje. Je\u015bli masz jakie\u015b b\u0142\u0119dy, terminal powinien ci\u0119 poinformowa\u0107 o tym, czym one s\u0105.<\/p>\n
![\"Tworzenie](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0df5e2a4.gif\")
Budowanie wtyczki<\/p>\n
Wstawianie wtyczki<\/h3>\n
Upewnij si\u0119, \u017ce od\u015bwie\u017cy\u0142e\u015b sw\u00f3j post. Poprzednia wersja bloku mo\u017ce by\u0107 teraz zepsuta, jest to w porz\u0105dku, po prostu j\u0105 usu\u0144 i wstaw now\u0105.<\/p>\n
Wstaw blok za pomoc\u0105 symbolu plusa w lewym g\u00f3rnym rogu edytora, a kiedy zostanie wstawiony, kliknij jego tekst. Powiniene\u015b. teraz m\u00f3c edytowa\u0107 tekst.<\/p>\n
![\"Tworzenie](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e151e82.gif\")
Wstawianie edytowalnego bloku<\/p>\n
Przegl\u0105danie wtyczki<\/h3>\n
Zapisz post i wy\u015bwietl go w interfejsie witryny, zmieniony tekst powinien by\u0107 wy\u015bwietlany zamiast oryginalnego tekstu.<\/p>\n
![\"Tworzenie](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e327430.png\")
Edytowalny blok na froncie strony internetowej<\/p>\n
Je\u015bli chcesz, aby Twoje bloki pojawia\u0142y si\u0119 w niestandardowej kategorii blok\u00f3w, po prostu dodaj nast\u0119puj\u0105cy kod do katalogu g\u0142\u00f3wnego wtyczki (w tym przypadku wholesome-plugin.php<\/code>:<\/p>\nfunction wholesomecode_wholesome_plugin_block_categories( $categories) {\n return array_merge(\n $categories,\n [\n [\n 'slug' => 'wholesome-blocks',\n 'title' => __( 'Wholesome Blocks', 'wholesome-boilerplate' ),\n ],\n ]\n );\n}\nadd_action( 'block_categories', 'wholesomecode_wholesome_plugin_block_categories', 10, 2 );\n<\/code><\/pre>\nSpowoduje to zarejestrowanie niestandardowej kategorii blok\u00f3w w twoim wstawiaczu blok\u00f3w.<\/p>\n
Nast\u0119pnie wszystko, co musisz zrobi\u0107, to dostosowa\u0107 category<\/code>argument registerBlockType<\/code>funkcji in \/src\/index.js<\/code>, aby odwo\u0142ywa\u0142 si\u0119 do kategorii bloku i ponownie skompilowa\u0107:<\/p>\n\ncategory: 'wholesome-blocks',\n<\/code><\/pre>\nTeraz, kiedy wstawisz sw\u00f3j blok, znajdziesz go w nowo utworzonej kategorii blok\u00f3w:<\/p>\n
![\"Tworzenie](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e40fe2e.png\")
Niestandardowa kategoria bloku w module wstawiania blok\u00f3w<\/p>\n
\n- Zobacz, jak u\u017cywa\u0107 PHP do renderowania swojego bloku za pomoc\u0105 blok\u00f3w dynamicznych<\/a><\/li>\n
- Sp\u00f3jrz na u\u017cycie meta p\u00f3l postu jako atrybut\u00f3w w swoim bloku<\/a><\/li>\n
- Dodaj blokowy pasek boczny za pomoc\u0105 InspectorControls<\/a><\/li>\n
- Rozszerz swoj\u0105 wtyczk\u0119, dodaj\u0105c dodatkowe punkty wej\u015bcia do pliku webpack.config<\/a><\/li>\n<\/ul>\n