{"id":233368,"date":"2023-02-12T17:33:00","date_gmt":"2023-02-12T14:33:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233368"},"modified":"2022-11-10T20:43:25","modified_gmt":"2022-11-10T17:43:25","slug":"wzory-blokowe-gutenberga-wyglad-programisty","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/wzory-blokowe-gutenberga-wyglad-programisty\/","title":{"rendered":"Wzory blokowe Gutenberga: wygl\u0105d programisty"},"content":{"rendered":"\n<p>Spojrzenie na nowe wzorce blokowe WordPressa Gutenberga oczami programisty. Przyjrzymy si\u0119, czym one s\u0105, do czego mog\u0105 by\u0107 u\u017cywane i dok\u0142adniej przyjrzymy si\u0119, jak napisa\u0107 dla nich kod.<\/p>\n<h2>Wzory blokowe i ich zastosowanie<\/h2>\n<p>Wzorce blokowe zosta\u0142y wprowadzone w WordPress 5.5 (11 sierpnia 2020 r.). S\u0105 one now\u0105 funkcj\u0105 w programie do wstawiania blok\u00f3w, kt\u00f3ra u\u0142atwia wstawianie predefiniowanej konfiguracji wielu blok\u00f3w. Tw\u00f3rcy motyw\u00f3w lub wtyczek mog\u0105 zdefiniowa\u0107 grup\u0119 blok\u00f3w, spos\u00f3b ich zagnie\u017cd\u017cenia, ich zawarto\u015b\u0107 i atrybuty, a u\u017cytkownicy ko\u0144cowi mog\u0105 to wstawi\u0107 za pomoc\u0105 prostej operacji jednym klikni\u0119ciem. Chodzi o to, aby u\u017cytkownicy ko\u0144cowi nie musieli ju\u017c r\u0119cznie budowa\u0107 z\u0142o\u017conych uk\u0142ad\u00f3w i wszystkich ich niestandardowych ustawie\u0144 oraz zagnie\u017cd\u017ca\u0107 ich w odpowiednich kontenerach dla blok\u00f3w, z kt\u00f3rych cz\u0119sto korzystaj\u0105.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153813-61e5135f8834f.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153813-61e5135f8834f.png\" alt=\"Wzory blokowe Gutenberga: wygl\u0105d programisty\" ><\/a><\/p>\n<p>Po dodaniu wzoru blokowego do edytora bloki nie wiedz\u0105, \u017ce zosta\u0142y dodane za pomoc\u0105 wzoru blokowego. S\u0105 dodawane jako zwyk\u0142e bloki, dzi\u0119ki czemu u\u017cytkownicy mog\u0105 modyfikowa\u0107 ich zawarto\u015b\u0107 i ustawienia. Jest to w zasadzie skr\u00f3t dodawania konfiguracji wielu blok\u00f3w.<\/p>\n<p>Pomys\u0142 jest dobry! Nie wszyscy u\u017cytkownicy ko\u0144cowi czuj\u0105 si\u0119 komfortowo tworz\u0105c du\u017c\u0105 struktur\u0119 zagnie\u017cd\u017conych blok\u00f3w w edytorze, aby wygl\u0105da\u0142a idealnie. Jednak jak dot\u0105d ta funkcja jest g\u0142\u00f3wnie korzy\u015bci\u0105 dla programist\u00f3w, poniewa\u017c u\u017cytkownicy ko\u0144cowi nie mog\u0105 tworzy\u0107 w\u0142asnych wzorc\u00f3w. W przypadku w\u0142asnych niestandardowych blok\u00f3w u\u017cytkownik\u00f3w musz\u0105 si\u0119 trzyma\u0107, u\u017cywaj\u0105c blok\u00f3w wielokrotnego u\u017cytku. Ale szczeg\u00f3lnie dla tw\u00f3rc\u00f3w motyw\u00f3w wzorce blokowe pozwalaj\u0105 im naprawd\u0119 pokaza\u0107 u\u017cytkownikom ko\u0144cowym najlepsz\u0105 konfiguracj\u0119 blok\u00f3w, kt\u00f3ra dobrze dzia\u0142a w motywie.<\/p>\n<p>WordPress doda\u0142 now\u0105 obs\u0142ug\u0119 motyw\u00f3w dla wzorc\u00f3w blokowych: <code>'core-block-patterns'<\/code>. Core b\u0119dzie od 5.5.0 automatycznie uruchamia\u0142, <code>add_theme_support('core-block-patterns')<\/code>wi\u0119c nie musisz tego robi\u0107 w swoim motywie.<\/p>\n<p>Poniewa\u017c wszystkie funkcje wzorc\u00f3w blokowych istniej\u0105 tylko w bardzo nowej wersji WordPressa, dobrze jest najpierw sprawdzi\u0107, czy istniej\u0105, aby nie niszczy\u0107 witryn ze starszymi wersjami WordPressa. We wszystkich poni\u017cszych przyk\u0142adach kodu w\u0142a\u015bnie to zrobi\u0142em.<\/p>\n<p>WordPress 5.5 jest dostarczany z 9 predefiniowanymi wzorami blok\u00f3w (patrz lista poni\u017cej). Wzory blok\u00f3w s\u0105 wy\u015bwietlane w kategoriach wzor\u00f3w (podstawa dodaje 5 kategorii). Kategorie wzorc\u00f3w blokowych dzia\u0142aj\u0105 jak kategorie post\u00f3w; mo\u017cesz umie\u015bci\u0107 wz\u00f3r blokowy w wielu kategoriach. Tw\u00f3rcy motyw\u00f3w i wtyczek mog\u0105 rejestrowa\u0107 w\u0142asne wzorce blokowe i kategorie wzorc\u00f3w blokowych, a tak\u017ce wyrejestrowywa\u0107 te z rdzenia. Przyjrzyjmy si\u0119 wi\u0119c bli\u017cej, jak!<\/p>\n<h2>Wzory blokowe i kategorie wzor\u00f3w blokowych zawarte w WordPress 5.5<\/h2>\n<p>Wzorce blokowe dostarczane w WordPress 5.5 s\u0105 nast\u0119puj\u0105ce (przestrze\u0144 nazw i identyfikator slug dla ka\u017cdego wzorca s\u0105 wy\u015bwietlane w nawiasie):<\/p>\n<ul>\n<li>Dwa przyciski (&#8217; <code>core\/two-buttons<\/code>&#8217;)<\/li>\n<li>Trzy przyciski (&#8217; <code>core\/three-buttons<\/code>&#8217;)<\/li>\n<li>Dwie kolumny tekstu (&#8217; <code>core\/text-two-columns<\/code>&#8217;)<\/li>\n<li>Dwie kolumny tekstu z obrazami (&#8217; <code>core\/text-two-columns-with-images<\/code>&#8217;)<\/li>\n<li>Trzy kolumny tekstu z przyciskami (&#8217; <code>core\/text-three-columns-buttons<\/code>&#8217;)<\/li>\n<li>Dwa obrazy obok siebie (&#8217; <code>core\/two-images<\/code>&#8217;)<\/li>\n<li>Du\u017cy nag\u0142\u00f3wek z nag\u0142\u00f3wkiem (&#8217; <code>core\/large-header<\/code>&#8217;)<\/li>\n<li>Du\u017cy nag\u0142\u00f3wek z nag\u0142\u00f3wkiem i przyciskiem (&#8217; <code>core\/large-header-button<\/code>&#8217;)<\/li>\n<li>Cytat (&#8217; <code>core\/quote<\/code>&#8217;)<\/li>\n<\/ul>\n<p>Kategorie dodane w WordPress 5.5 to (ich identyfikatory \u015blimak\u00f3w s\u0105 wy\u015bwietlane w nawiasie):<\/p>\n<ul>\n<li>Przyciski (&#8217; <code>buttons<\/code>&#8217;)<\/li>\n<li>Kolumny (&#8217; <code>columns<\/code>&#8217;)<\/li>\n<li>Galeria (&#8217; <code>gallery<\/code>&#8217;)<\/li>\n<li>Nag\u0142\u00f3wki (&#8217; <code>header<\/code>&#8217; \u2013 uwaga bez 's&#8217; na ko\u0144cu)<\/li>\n<li>Tekst (&#8217; <code>text<\/code>&#8217;)<\/li>\n<\/ul>\n<h2>Wyrejestrowywanie wzorc\u00f3w blokowych<\/h2>\n<p>Mo\u017cesz wyrejestrowa\u0107 wzory blok\u00f3w za pomoc\u0105 funkcji <code>[unregister_block_pattern](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#unregister_block_pattern)()<\/code>. Po prostu podaj ci\u0105g ze wzorem bloku, kt\u00f3ry chcesz usun\u0105\u0107 jako parametr. Zapoznaj si\u0119 z powy\u017cszym przegl\u0105dem, aby zapozna\u0107 si\u0119 z wzorami blok\u00f3w rdzenia. Uruchom t\u0119 funkcj\u0119 wewn\u0105trz funkcji podpi\u0119tej do <code>init<\/code>akcji.<\/p>\n<p>Przyk\u0142ad wyrejestrowania wzorc\u00f3w blok\u00f3w rdzenia \u201eDwa przyciski&quot; i \u201eTrzy przyciski&#8221;:<\/p>\n<pre><code>add_action('init', function() {\n    if (!function_exists('unregister_block_pattern')) {\n        return;\n    }\n    unregister_block_pattern('core\/two-buttons');\n    unregister_block_pattern('core\/three-buttons');\n});<\/code><\/pre>\n<h2>Rejestrowanie wzor\u00f3w blokowych<\/h2>\n<p>Rejestracja nowego wzorca blokowego odbywa si\u0119 za pomoc\u0105 funkcji <code>[register_block_pattern](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#register_block_pattern)()<\/code>. Przyjmuje dwa parametry; pierwszy jest ci\u0105giem unikalnej nazwy dla twojego wzorca, w tym przestrzeni nazw. Drugi to zestaw ustawie\u0144 dla twojego wzoru blokowego.<\/p>\n<p><strong>Wskaz\u00f3wka<\/strong>: Definiowanie wzorca blokowego wymaga dostarczenia nieprzetworzonej tre\u015bci HTML dla konfiguracji bloku. Nie polecam r\u0119cznego wpisywania tego, poniewa\u017c \u0142atwo spowoduje to nieprawid\u0142owe konflikty blok\u00f3w. Zamiast tego przejd\u017a do edytora i skonfiguruj bloki tak, jak chcesz, aby by\u0142y w swoim wzorze. Nast\u0119pnie kliknij \u201emenu z kropkami&#8221; na pasku narz\u0119dzi bloku rodzicielskiego i kliknij \u201eKopiuj&#8221;. Nast\u0119pnie mo\u017cesz wr\u00f3ci\u0107 do edytora kodu i wklei\u0107 (Ctrl+V). Daje to surowy kod HTML skopiowanej konfiguracji. Skorzystaj z funkcji edytora kodu, aby zast\u0105pi\u0107 wszystkie znaki nowej linii <code>n<\/code>i upewnij si\u0119, \u017ce poprawnie pomini\u0119to cudzys\u0142owy.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153813-61e513609a439.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153813-61e513609a439.png\" alt=\"Wzory blokowe Gutenberga: wygl\u0105d programisty\" ><\/a><\/p>\n<p>W\u0142a\u015bciwo\u015bci wzorca bloku s\u0105 nast\u0119puj\u0105ce (druga tablica argument\u00f3w):<\/p>\n<ul>\n<li><strong><code>title<\/code><\/strong>(wymagane): Wy\u015bwietlana nazwa wzoru bloku<\/li>\n<li><code>**content**<\/code>(wymagane): RAW HTML konfiguracji bloku<\/li>\n<li><strong><code>description<\/code><\/strong>: opis wzoru blokowego. Jest wizualnie ukryty<\/li>\n<li><strong><code>categories<\/code><\/strong>: Tablica kategorii, do kt\u00f3rych ma zosta\u0107 dodany ten wz\u00f3r bloku. Je\u015bli nie podasz tej w\u0142a\u015bciwo\u015bci, blok zostanie umieszczony w kategorii wzoru bloku \u201eBez kategorii&#8221;.<\/li>\n<li><strong><code>keywords<\/code><\/strong>: tablica s\u0142\u00f3w kluczowych, kt\u00f3re mog\u0105 pom\u00f3c u\u017cytkownikom znale\u017a\u0107 Tw\u00f3j wz\u00f3r podczas wyszukiwania<\/li>\n<li><strong><code>viewportWidth<\/code><\/strong>: Podaj liczb\u0119 ca\u0142kowit\u0105 okre\u015blaj\u0105c\u0105 szeroko\u015b\u0107 wzoru bloku w inserterze. Wp\u0142ywa tylko na podgl\u0105d w inserterze.<\/li>\n<\/ul>\n<p>Oto przyk\u0142ad rejestrowania wzorca blokowego sk\u0142adaj\u0105cego si\u0119 z bloku ok\u0142adki o pe\u0142nej szeroko\u015bci, kt\u00f3ry ma kolor t\u0142a, kt\u00f3ry zawiera wyr\u00f3wnany do \u015brodka blok nag\u0142\u00f3wka z okre\u015blonym kolorem tekstu oraz wyr\u00f3wnany do \u015brodka akapit o okre\u015blonym kolorze tekstu:<\/p>\n<pre><code>add_action('init', function() {\n    if (!function_exists('register_block_pattern')) {\n        return;\n    }\n    register_block_pattern('awp\/standard-cta-section', [\n        'title' =&gt; __('Standard CTA Section', 'awp'),\n        'keywords' =&gt; ['cta'],\n        'categories' =&gt; ['header'],\n        'viewportWidth' =&gt; 1000,\n        'content' =&gt; \"&lt;!-- wp:cover {\"customOverlayColor\":\"#dadee2\",\"align\":\"full\"} --&gt;n&lt;div class=\"wp-block-cover alignfull has-background-dim\" style=\"background-color:#dadee2\"&gt;&lt;div class=\"wp-block-cover__inner-container\"&gt;&lt;!-- wp:heading {\"align\":\"center\",\"level\":1,\"style\":{\"color\":{\"text\":\"#414446\"}}} --&gt;n&lt;h1 class=\"has-text-align-center has-text-color\" style=\"color:#414446\"&gt;Section title&lt;\/h1&gt;n&lt;!-- \/wp:heading --&gt;nn&lt;!-- wp:paragraph {\"align\":\"center\",\"style\":{\"color\":{\"text\":\"#414446\"}}} --&gt;n&lt;p class=\"has-text-align-center has-text-color\" style=\"color:#414446\"&gt;Write your text here.&lt;\/p&gt;n&lt;!-- \/wp:paragraph --&gt;&lt;\/div&gt;&lt;\/div&gt;n&lt;!-- \/wp:cover --&gt;\",\n    ]);\n});<\/code><\/pre>\n<h2>Rejestrowanie kategorii wzor\u00f3w blokowych<\/h2>\n<p>Deweloperzy mog\u0105 r\u00f3wnie\u017c rejestrowa\u0107 niestandardowe kategorie wzor\u00f3w blok\u00f3w. Odbywa si\u0119 to za pomoc\u0105 funkcji <code>[register_block_pattern_category](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#register_block_pattern_category)()<\/code>. Przyjmuje dwa parametry; po pierwsze ci\u0105g kategorii slug, a po drugie tablic\u0119 w\u0142a\u015bciwo\u015bci. W tej chwili tylko jedna w\u0142a\u015bciwo\u015b\u0107 jest obs\u0142ugiwana w drugim argumencie; <code>label<\/code>dla czytelnej nazwy kategorii.<\/p>\n<p>Poni\u017cej znajduje si\u0119 przyk\u0142ad rejestracji kategorii niestandardowych wzor\u00f3w blokowych:<\/p>\n<pre><code>add_action('init', function() {\n    if (!function_exists('register_block_pattern_category')) {\n        return;\n    }\n    register_block_pattern_category('awp-patterns', ['label' =&gt; __('AWhitePixel Block Patterns', 'awp')]);\n});<\/code><\/pre>\n<p>Dzi\u0119ki temu mo\u017cesz doda\u0107 'wp-patterns&#8217; do <code>categories<\/code>argumentu &#8217; &#8217; to <code>register_block_pattern()<\/code>. Nale\u017cy pami\u0119ta\u0107, \u017ce je\u015bli kategoria nie ma zarejestrowanych wzorc\u00f3w blok\u00f3w, kategoria nie zostanie wy\u015bwietlona w module wstawiaj\u0105cym bloki. Aby si\u0119 pojawi\u0142, musisz doda\u0107 co najmniej jeden wz\u00f3r blokowy w tej kategorii.<\/p>\n<h2>Wyrejestrowanie kategorii wzor\u00f3w blokowych<\/h2>\n<p>Wreszcie istnieje funkcja <code>[unregister_block_pattern_category](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#unregister_block_pattern_category)()<\/code>wyrejestrowania kategorii wzorc\u00f3w blokowych. Podaj informacj\u0119 o kategorii jako parametr. Zapoznaj si\u0119 z powy\u017cszym przegl\u0105dem kategorii wzorc\u00f3w blokowych, aby zapozna\u0107 si\u0119 z kategoriami podstawowymi i ich informacjami o pracy.<\/p>\n<p>Nie zapominaj, \u017ce kategorie wzorc\u00f3w blok\u00f3w bez przypisanych do nich wzorc\u00f3w blok\u00f3w nie b\u0119d\u0105 widoczne w module wstawiaj\u0105cym bloki. Je\u015bli wi\u0119c wyrejestrujesz wszystkie wzorce blok\u00f3w przypisane do kategorii, sama kategoria nie b\u0119dzie ju\u017c widoczna i niekoniecznie musisz wyrejestrowa\u0107 kategori\u0119. Wszelkie wzory blok\u00f3w, kt\u00f3re s\u0105 przypisane tylko do usuwanej kategorii, zostan\u0105 przeniesione do kategorii \u201eBez kategorii&#8221;.<\/p>\n<p>Oto przyk\u0142ad wyrejestrowania \u201eprzycisk\u00f3w&#8221; kategorii wzorc\u00f3w bloku podstawowego:<\/p>\n<pre><code>add_action('init', function() {\n    if (!function_exists('unregister_block_pattern_category')) {\n        return;\n    }\n    unregister_block_pattern_category('buttons');\n});<\/code><\/pre>\n<h2>Wniosek<\/h2>\n<p>Nowa funkcja wzorc\u00f3w blokowych w WordPress Gutenberg jest zdecydowanie o krok bli\u017cej do tego, aby edytor blok\u00f3w dzia\u0142a\u0142 bardziej jako kreator stron. Moim zdaniem minusem jest to, \u017ce u\u017cytkownicy ko\u0144cowi nie mog\u0105 tworzy\u0107 w\u0142asnych wzor\u00f3w. Jest to jednak dobra funkcja dla tw\u00f3rc\u00f3w motyw\u00f3w, poniewa\u017c umo\u017cliwia u\u017cytkownikom ko\u0144cowym \u0142atwe konfigurowanie konfiguracji blok\u00f3w i uk\u0142ad\u00f3w, kt\u00f3re dobrze dzia\u0142aj\u0105 w motywie. Jest to zupe\u0142nie nowa funkcja, kt\u00f3ra prawdopodobnie b\u0119dzie ewoluowa\u0107 i by\u0107 ulepszana w najbli\u017cszej przysz\u0142o\u015bci! Ja na przyk\u0142ad nie mog\u0119 si\u0119 doczeka\u0107!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Spojrzenie programisty na wzorce blokowe WordPressa Gutenberga. Czym s\u0105, do czego mog\u0105 by\u0107 u\u017cywane i g\u0142\u0119bsze spojrzenie na to, jak napisa\u0107 dla nich kod.<\/p>\n","protected":false},"author":1,"featured_media":223885,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[897,721,721,940,940,897,1110,805,805,815,845,845,866,866,815],"tags":[1169],"class_list":["post-233368","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kod","category-deweloper","category-gutenberg-7","category-n-a","category-php-7","category-wtyczki","category-samouczki","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233368","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=233368"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233368\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/223885"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=233368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=233368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=233368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}