{"id":233462,"date":"2023-02-14T12:20:00","date_gmt":"2023-02-14T09:20:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233462"},"modified":"2022-11-10T23:49:49","modified_gmt":"2022-11-10T20:49:49","slug":"jak-tworzyc-niestandardowe-bloki-gutenberga-za-pomoca-zaawansowanych-niestandardowych-pol-pro","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/jak-tworzyc-niestandardowe-bloki-gutenberga-za-pomoca-zaawansowanych-niestandardowych-pol-pro\/","title":{"rendered":"Jak tworzy\u0107 niestandardowe bloki Gutenberga za pomoc\u0105 zaawansowanych niestandardowych p\u00f3l Pro"},"content":{"rendered":"\n

Od wersji 5.8<\/a> Advanced Custom Fields (ACF) Pro mo\u017cesz u\u017cywa\u0107 ACF do tworzenia niestandardowych blok\u00f3w Gutenberga. Wszystko, czego potrzebujesz, to szablony PHP. To bardzo u\u0142atwia programistom, kt\u00f3rzy nie maj\u0105 jeszcze do\u015bwiadczenia w nowoczesnym j\u0119zyku JavaScript wymaganym do tworzenia niestandardowych blok\u00f3w dla Gutenberga z dowolnym typem pola, kt\u00f3ry ma do zaoferowania ACF. Nale\u017cy pami\u0119ta\u0107, \u017ce ta funkcja jest dost\u0119pna tylko w p\u0142atnej wersji (Pro<\/a>) zaawansowanych p\u00f3l niestandardowych. Nie jest dost\u0119pny w darmowej wersji, wi\u0119c musisz kupi\u0107 licencj\u0119.<\/p>\n

Je\u015bli jeste\u015b redaktorem WordPressa lub webmasterem, kt\u00f3ry nie chce zag\u0142\u0119bia\u0107 si\u0119 w kodowanie, ten post jest zdecydowanie dla Ciebie. Je\u015bli jednak chcesz zosta\u0107 tw\u00f3rc\u0105 motyw\u00f3w WordPress lub wtyczek, polecam zrobi\u0107 krok, aby nauczy\u0107 si\u0119 tworzy\u0107 w\u0142asne niestandardowe bloki. Jednak u\u017cycie zaawansowanych p\u00f3l niestandardowych do tworzenia blok\u00f3w mo\u017ce stanowi\u0107 mi\u0142e wprowadzenie do obs\u0142ugi blok\u00f3w niestandardowych w Gutenbergu.<\/p>\n

Utw\u00f3rz blok Gutenberga za pomoc\u0105 ACF<\/h2>\n

Istniej\u0105 w zasadzie trzy proste kroki w tworzeniu niestandardowego bloku Gutenberga z zaawansowanymi polami niestandardowymi. Pierwsza jest \u0142atwa i prawdopodobnie znajoma; konfigurowanie p\u00f3l (ustawie\u0144), kt\u00f3re chcesz mie\u0107 w swoim bloku. Drugim krokiem jest u\u017cycie funkcji ACF do zarejestrowania bloku Gutenberga. Trzecim krokiem jest napisanie szablonu PHP dla bloku. Po prostu piszesz kod HTML i obs\u0142ugujesz ustawienia, tak jak w przypadku p\u00f3l ACF. I to wszystko! (Ok, mo\u017ce jest czwarty krok, stylizacja bloku. Ale nie b\u0119d\u0119 si\u0119 tym zajmowa\u0142 w tym po\u015bcie).<\/p>\n

Stw\u00f3rz swoje ustawienia \/ pola<\/h3>\n

Je\u015bli wcze\u015bniej korzysta\u0142e\u015b z zaawansowanych p\u00f3l niestandardowych, prawdopodobnie wiesz, jak skonfigurowa\u0107 pola. Aby to zrobi\u0107, mo\u017cesz u\u017cy\u0107 interfejsu administratora Advanced Custom Field. Lub je\u015bli chcesz, aby ustawienia blok\u00f3w by\u0142y osadzone we wtyczce lub motywie, napisz ustawienia za pomoc\u0105 PHP. Mam kompletny post referencyjny w jaki spos\u00f3b doda\u0107 ustawienia ACF z PHP<\/a>.<\/p>\n

\"Jak<\/a><\/p>\n

Najwa\u017cniejsz\u0105 rzecz\u0105, kt\u00f3r\u0105 musisz zrobi\u0107 ze swoj\u0105 grup\u0105, jest ustawienie lokalizacji na \u201eZablokuj". Ale poniewa\u017c nie zarejestrowali\u015bmy jeszcze naszego bloku, b\u0119dzie on domy\u015blnie \u201eWszystko”. Zostaw to, zapisz pola i przejd\u017a do rejestracja naszego bloku.<\/p>\n

Zarejestruj blok Gutenberga<\/h3>\n

W kodzie motywu functions.php<\/code>lub wtyczki musisz napisa\u0107 funkcj\u0119 pod\u0142\u0105czon\u0105 do acf\/init<\/code>, i wywo\u0142a\u0107, [acf_register_block](https:\/\/www.advancedcustomfields.com\/resources\/acf_register_block_type\/)()<\/code>aby zarejestrowa\u0107 blok. Poniewa\u017c ta funkcja jest ca\u0142kiem nowa w ACF i zale\u017cy od wtyczki, kt\u00f3ra ma zosta\u0107 aktywowana, zalecam owini\u0119cie kodu w sprawdzenie, aby upewni\u0107 si\u0119, \u017ce motyw lub wtyczka nie spowoduje awarii WordPressa.<\/p>\n

add_action('acf\/init', function() {\n    if (function_exists('acf_register_block')) {\n        acf_register_block([\n            'name' => 'yourblock',\n            'title' => __('Name of your block', 'txtdomain'),\n            'description' => __('Optional description', 'txtdomain'),\n            'category' => 'formatting',\n            'icon' => 'admin-comments',\n            'render_callback' => 'my_acf_block_render_callback',\n        ]);\n    }\n});<\/code><\/pre>\n
Rejestrowanie bloku za pomoc\u0105 ACF jest w rzeczywisto\u015bci podobne do r\u0119cznego rejestrowania niestandardowego bloku Gutenberga. W przypadku ACF musisz poda\u0107 unikaln\u0105, zmodyfikowan\u0105 nazw\u0119, kt\u00f3r\u0105 blokujesz w name<\/code>. Zalecam u\u017cywanie nazwy, kt\u00f3ra nie wymaga wyja\u015bnie\u0144, np cta<\/code>. dla bloku Call to action, author-card<\/code>bloku pokazuj\u0105cego autor\u00f3w lub podobnego. Je\u015bli jeste\u015b troch\u0119 zaznajomiony z Gutenbergiem, mo\u017cesz by\u0107 \u015bwiadomy, \u017ce wszystkie bloki musz\u0105 by\u0107 zarejestrowane z przestrzeni\u0105 nazw, a \/<\/code>, a nast\u0119pnie ich nazw\u0105 \u015blimaka. Na przyk\u0142ad przestrze\u0144 nazw WordPressa to core<\/code>, wi\u0119c na przyk\u0142ad blok akapitu w WordPressie nazywa si\u0119 core\/paragraph<\/code>. W przypadku ACF przestrze\u0144 nazw b\u0119dzie mia\u0142a posta\u0107 acf, wi\u0119c na przyk\u0142ad powy\u017cszy blok zostanie zarejestrowany w obr\u0119bie Gutenberga jako acf\/yourblock<\/code>. Je\u015bli rejestrujesz swoje pola w PHP, jak zobaczysz p\u00f3\u017aniej, musimy o tym pami\u0119ta\u0107.<\/p>\n
W category<\/code>tym miejscu definiujesz kategori\u0119 Gutenberga, w kt\u00f3rej chcesz, aby pojawi\u0142 si\u0119 Tw\u00f3j blok. W tej chwili mo\u017cliwe warto\u015bci to common<\/code>, formatting<\/code>, layout<\/code>, widgets<\/code>, lub embed<\/code>. Je\u015bli tworzysz niestandardowe kategorie Gutenberga, mo\u017cesz je doda\u0107 do tych, je\u015bli chcesz. Je\u015bli chodzi o icon<\/code>podaj dowoln\u0105 nazw\u0119 ikony z WordPress Dashicons<\/a> (bez \u201edashicons-„).<\/p>\n
Aby poinformowa\u0107 ACF, jak wyrenderowa\u0107 ten blok, masz dwie mo\u017cliwo\u015bci: albo podaj nazw\u0119 funkcji do klawisza render_callback<\/code>(jak powy\u017cej), albo podaj nazw\u0119 szablonu w swoim motywie do klawisza render_template<\/code>. Je\u015bli wi\u0119c wolisz odwo\u0142ywa\u0107 si\u0119 bezpo\u015brednio do szablonu, np. template-parts\/block-yourblock.php<\/code>w swoim motywie, po prostu zr\u00f3b to w ten spos\u00f3b i usu\u0144 render_callback<\/code>:<\/p>\n
'render_template' => 'template-parts\/block-yourblock.php',<\/code><\/pre>\n
Po\u0142\u0105cz grup\u0119 terenow\u0105 z zarejestrowanym blokiem<\/h2>\n
Kiedy jeste\u015b zadowolony z kodu rejestracji bloku, czas po\u0142\u0105czy\u0107 blok z ustawieniami, kt\u00f3re wprowadzi\u0142e\u015b wcze\u015bniej. Je\u015bli utworzy\u0142e\u015b pola w admin, po prostu wr\u00f3\u0107 i wybierz sw\u00f3j blok w lokalizacji. A je\u015bli doda\u0142e\u015b grup\u0119 p\u00f3l z PHP, w lokalizacji podaj warto\u015b\u0107 ’ acf\/yourblock<\/code>’ gdzie yourblock<\/code>jest to, co poda\u0142e\u015b jak name<\/code>powy\u017cej.<\/p>\n
Napisz szablon<\/h2>\n
Ostatnim i najfajniejszym krokiem jest napisanie szablonu wyj\u015bcia blokowego!<\/p>\n
Lokalizacja wyniku renderowania bloku zale\u017cy od tego, co zdecydowa\u0142e\u015b si\u0119 u\u017cy\u0107 podczas rejestracji bloku, render_callback<\/code>lub render_template<\/code>.<\/p>\n
Je\u015bli poda\u0142e\u015b nazw\u0119 funkcji render_callback<\/code>, musisz zdefiniowa\u0107 t\u0119 funkcj\u0119 w functions.php<\/code>kodzie motywu lub wtyczki. Otrzymasz cztery parametry do swojej funkcji, jak zobaczysz poni\u017cej:<\/p>\n
function my_acf_block_render_callback($block, $content = '', $is_preview = false, $post_id = 0) {\n    $className = 'your_block';\n    if (!empty($block['className'])) {\n        $className .= ' '. $block['className'];\n    }\n\u00a0\n    \/\/ Example of fetching a field value:\n    $my_text = get_field('my_textfield');\n\u00a0\n    ?><div class=\"<?php echo $className; ?>\">\n        <?php \/\/ echo your output here ?>       \n    <\/div><?php\n}<\/code><\/pre>\n
Pierwszy parametr, $block<\/code>, zawiera pewne informacje z Gutenberga. Na przyk\u0142ad ka\u017cdy blok Gutenberga prawie zawsze b\u0119dzie mia\u0142 className<\/code>, kt\u00f3re nale\u017cy ustawi\u0107 jako klas\u0119 na zewn\u0119trznym opakowaniu. $block['align']<\/code>do wyr\u00f3wnania mo\u017cna r\u00f3wnie\u017c ustawi\u0107 i co\u015b, co r\u00f3wnie\u017c chcesz doda\u0107. Drugi parametr, $content<\/code>, zawsze b\u0119dzie pusty w ACF (zostanie wype\u0142niony, je\u015bli dodasz zagnie\u017cd\u017cone bloki, ale nie jest to mo\u017cliwe w przypadku ACF). Warto\u015b\u0107 logiczna $is_preview<\/code>b\u0119dzie prawdziwa, je\u015bli aktualnie patrzymy na renderowanie bloku w trybie podgl\u0105du w edytorze Gutenberg. I wreszcie $post_id<\/code>post, w kt\u00f3rym ten blok jest dodany.<\/p>\n
Je\u015bli chodzi o pola, pobierasz pola tak jak zwykle, za pomoc\u0105 get_field()<\/code>. Wynik HTML zale\u017cy wy\u0142\u0105cznie od Ciebie i sposobu, w jaki chcesz wyprowadzi\u0107 swoje pola.<\/p>\n
Je\u015bli render_template<\/code>zamiast tego dostarczy\u0142e\u015b plik szablonu, po prostu utw\u00f3rz plik w okre\u015blonej lokalizacji w swoim motywie. Wewn\u0105trz masz dost\u0119p do dok\u0142adnie tych samych zmiennych globalnych, co w funkcji powy\u017cej (na przyk\u0142ad $block<\/code>). Na przyk\u0142ad:<\/p>\n
$className = 'your_block';\nif (!empty($block['className'])) {\n    $className .= ' '. $block['className'];\n}\n\u00a0\n\/\/ Example of fetching a field value:\n$my_text = get_field('my_textfield');\n\u00a0\n?><div class=\"<?php echo $className; ?>\">\n    <?php \/\/ echo your output here ?>       \n<\/div><?php<\/code><\/pre>\n
I to wszystko. Tak proste jest tworzenie w\u0142asnych blok\u00f3w Gutenberga za pomoc\u0105 ACF.<\/p>\n
Wniosek<\/h2>\n
Cho\u0107 by\u0142o to proste, poleganie na wtyczce \u2013 szczeg\u00f3lnie p\u0142atnej \u2013 nie jest dobrym rozwi\u0105zaniem ko\u0144cowym, je\u015bli chcesz tworzy\u0107 motywy lub wtyczki. Pami\u0119taj, \u017ce Twoje bloki przestan\u0105 dzia\u0142a\u0107, je\u015bli przeniesiesz kod motywu do innego WordPressa bez ACF Pro. Lub gdzie ustawienia pola nie zosta\u0142y skonfigurowane (chyba \u017ce osadzi\u0142e\u015b je w swoim kodzie za pomoc\u0105 PHP lub upewnij si\u0119, \u017ce je eksportujesz i importujesz). Jako programista motyw\u00f3w (lub wtyczek), kt\u00f3ry rozpowszechnia kod, nie mo\u017cesz oczekiwa\u0107, \u017ce ka\u017cdy u\u017cytkownik kupi w\u0142asn\u0105 licencj\u0119 ACF Pro, aby Tw\u00f3j motyw dzia\u0142a\u0142! Ale jest to dobre tymczasowe rozwi\u0105zanie dla tych, kt\u00f3rzy nie potrafi\u0105 lub nie musz\u0105 kodowa\u0107.<\/p>\n
Je\u015bli jeste\u015b przekonany, \u017ce musisz zrobi\u0107 krok i nauczy\u0107 si\u0119 JavaScript i Gutenberg, sprawd\u017a moje wprowadzenie do postu Gutenberga<\/a> lub kategori\u0119 Gutenberg<\/a> na tej stronie, aby dowiedzie\u0107 si\u0119 wi\u0119cej.<\/p>\n
\u0179r\u00f3d\u0142o nagrywania:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Ten post wyja\u015bnia, w jaki spos\u00f3b mo\u017cesz u\u017cy\u0107 ACF do tworzenia niestandardowych blok\u00f3w Gutenberga, w kt\u00f3rych wszystko, czego potrzebujesz, to szablony PHP. Nie wymaga JavaScript!<\/p>\n","protected":false},"author":1,"featured_media":224889,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[897,721,721,919,897,919,1110,815,836,836,845,845,866,866,815],"tags":[1169],"class_list":{"0":"post-233462","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-kod","8":"category-deweloper","10":"category-inny","13":"category-n-a","14":"category-wtyczki","15":"category-przewodnik-dla-poczatkujacych","17":"category-samouczki","19":"category-wordpress-7","22":"tag-affiai-pl"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233462","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=233462"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233462\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=233462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=233462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=233462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}