{"id":233859,"date":"2023-02-23T17:59:00","date_gmt":"2023-02-23T14:59:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233859"},"modified":"2023-02-23T18:00:57","modified_gmt":"2023-02-23T15:00:57","slug":"samouczek-utworz-suwak-jako-dynamiczny-blok-gutenberga","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/samouczek-utworz-suwak-jako-dynamiczny-blok-gutenberga\/","title":{"rendered":"Samouczek: Utw\u00f3rz suwak jako dynamiczny blok Gutenberga"},"content":{"rendered":"\n

W tym samouczku om\u00f3wimy spos\u00f3b tworzenia dynamicznego bloku WordPress Gutenberg. Efektem ko\u0144cowym jest suwak pokazuj\u0105cy polecany obraz z wybranych post\u00f3w kategorii. Kod obejmuje u\u017cycie komponentu wy\u017cszego rz\u0119du (withSelect<\/code>) do pobrania wszystkich kategorii w edytorze blok\u00f3w.<\/p>\n

Co zrobimy<\/h2>\n

Blok wyrenderuje prosty suwak za pomoc\u0105 skryptu jQuery Cycle2<\/a>. Ale mo\u017cesz u\u017cy\u0107 dowolnego innego skryptu suwaka. Blok wy\u015bwietli wewn\u0105trz edytora list\u0119 wszystkich kategorii, pozwalaj\u0105c u\u017cytkownikowi wybra\u0107 jedn\u0105 kategori\u0119. Wy\u015bwietlaj\u0105c blok w interfejsie, b\u0119dzie on dynamicznie pobiera\u0142 posty z wybranej kategorii i wy\u015bwietla\u0142 ich polecane obrazy jako slajdy. Ten samouczek b\u0119dzie do\u015b\u0107 prosty, umo\u017cliwiaj\u0105c rozwijanie i dostosowywanie suwaka w dowolny spos\u00f3b.<\/p>\n

Zdecydowa\u0142em si\u0119 nie renderowa\u0107 pokazu slajd\u00f3w w edytorze. Zwykle upewnij si\u0119, \u017ce renderowanie w edytorze i interfejsie jest takie samo. Ale w przypadku slidera lubi\u0119 zachowa\u0107 prostot\u0119, aby nie zasypywa\u0107 u\u017cytkownika ci\u0105g\u0142ymi animacjami w edytorze.<\/p>\n

Blok b\u0119dzie mia\u0142 tylko dwa ustawienia; wyb\u00f3r kategorii i liczby slajd\u00f3w (post\u00f3w). Polecam doda\u0107 wi\u0119cej ustawie\u0144, takich jak pr\u0119dko\u015b\u0107 przesuwania, ustawienia wy\u015bwietlania pigu\u0142ek, strza\u0142ek, tekstu i inne typowe ustawienia suwaka. Samo dodanie tych ustawie\u0144 powinno by\u0107 do\u015b\u0107 proste.<\/p>\n

Ca\u0142y kod jest napisany w Javascript ES6 \/ ES2015+. Pami\u0119taj, \u017ce ten kod wymaga Babel do przekszta\u0142cenia i zbudowania ostatecznych plik\u00f3w JavaScript. Sprawd\u017a poni\u017cszy przewodnik, je\u015bli nie wiesz jak.<\/p>\n

Skonfiguruj pliki<\/h2>\n

W tym przyk\u0142adzie tworzymy blok wewn\u0105trz motywu. W folderze motywu mam podfolder ’ gutenberg\/<\/code>’, w kt\u00f3rym umie\u015bci\u0142em m\u00f3j package.json<\/code>i webpack-config.js<\/code>. Wewn\u0105trz podfolderu \u201e src\/<\/code>" w tym folderze umieszczam wszystkie moje pliki kompilacji. Konfiguracja mojego pakietu webpack jest skonfigurowana tak, aby umieszcza\u0107 pliki kompilacji w moim podfolderze motywu \u201e assets\/js\/<\/code>„.<\/p>\n

Utw\u00f3rz nowy pusty plik \u017ar\u00f3d\u0142owy w theme-folder\/gutenberg\/src\/block-slider.js<\/code>i skonfiguruj pakiet Webpack, aby utworzy\u0107 plik kompilacji w programie theme-folder\/assets\/js\/block-slider.js<\/code>. Mo\u017cesz dowolnie zmienia\u0107 lokalizacje i\/lub nazwy plik\u00f3w, pami\u0119taj tylko o dostosowaniu poni\u017cszego kodu.<\/p>\n

Musimy r\u00f3wnie\u017c pobra\u0107 niezb\u0119dny skrypt slidera. Mo\u017cesz pobra\u0107 Cycle2 pod tym linkiem<\/a> lub u\u017cy\u0107 dowolnego innego skryptu slajd\u00f3w i dostosowa\u0107 poni\u017cszy kod. Umieszczam jquery.cycle2.min.js<\/code>plik w folderze mojego folderu motywu \/assets\/js\/<\/code>.<\/p>\n

Przygotuj\u0119 te\u017c ma\u0142y plik CSS, kt\u00f3ry b\u0119dzie \u0142adowany tylko w edytorze. Mamy tylko ma\u0142y kawa\u0142ek stylizacji, aby wyb\u00f3r kategorii by\u0142 optymalny. Tworz\u0119 pusty plik editor-block-slider.css<\/code>i umieszczam go w theme-folder\/assets\/css\/<\/code>.<\/p>\n

Na koniec przechodzimy do pliku PHP, kt\u00f3ry jest za\u0142adowany w motywie. Dla uproszczenia robi\u0119 cz\u0119\u015b\u0107 PHP w temacie functions.php<\/code>.<\/p>\n

Zarejestruj blok Gutenberga w PHP<\/h2>\n

Wszystkie bloki Gutenberga musz\u0105 by\u0107 zarejestrowane w [register_block_type](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/)()<\/code>. Wol\u0119 wywo\u0142ywa\u0107 go wewn\u0105trz funkcji podpi\u0119tej do init<\/code>. Pierwszym parametrem jest nazwa Twojego bloku wraz z przestrzeni\u0105 nazw. Postanowi\u0142em nazwa\u0107 m\u00f3j skrypt suwaka awp\/slider<\/code>(dostosuj, jak chcesz). Drugi argument to tablica argument\u00f3w.<\/p>\n

W ramach tej samej funkcji zarejestruj\u0119 skrypt budowania [wp_register_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_script\/)()<\/code>i zarejestruj\u0119 plik CSS edytora za pomoc\u0105 [wp_register_style](https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_style\/)()<\/code>. Oba te uchwyty zostan\u0105 dodane jako argumenty odpowiednio do \u201e editor_script<\/code>” i \u201e editor_style<\/code>„. Je\u015bli chodzi o zale\u017cno\u015bci, doda\u0142em kilka najbardziej podstawowych pakiet\u00f3w dla skryptu, aby upewni\u0107 si\u0119, \u017ce nasz skrypt blokowy jest \u0142adowany we w\u0142a\u015bciwej kolejno\u015bci. Je\u015bli chodzi o styl edytora, u\u017cycie \u201e wp-edit-blocks<\/code>” jest dobr\u0105 zale\u017cno\u015bci\u0105, aby unikn\u0105\u0107 nadpisania styl\u00f3w.<\/p>\n

I wreszcie, poniewa\u017c jest to blok dynamiczny, musimy r\u00f3wnie\u017c doda\u0107 render_callback<\/code>argument \u201e „, wskazuj\u0105cy na funkcj\u0119 odpowiedzialn\u0105 za renderowanie bloku w interfejsie u\u017cytkownika.<\/p>\n

add_action('init', function() {\n    wp_register_script(\n        'awp-block-slider-js', \n        get_template_directory_uri(). '\/assets\/js\/block-slider.js', \n        ['wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-data']\n    );\n    wp_register_style(\n        'awp-block-slider-style', \n        get_template_directory_uri(). '\/assets\/css\/editor-block-slider.css', \n        ['wp-edit-blocks']\n    );\n\u00a0\n    register_block_type('awp\/slider', [\n        'editor_script' => 'awp-block-slider-js',\n        'editor_style' => 'awp-block-slider-style',\n        'render_callback' => 'awp_gutenberg_slider_render',\n    ]);\n});<\/code><\/pre>\n
Na koniec definiujemy funkcj\u0119 render. Do funkcji zwrotnej otrzymujemy dwa parametry; tablic\u0119 atrybut\u00f3w z bloku i zawarto\u015b\u0107 wewn\u0119trzn\u0105 (nieu\u017cywan\u0105 w tym bloku). Po prostu zwr\u00f3c\u0119 jaki\u015b fikcyjny ci\u0105g. Wr\u00f3cimy i rozwiniemy funkcj\u0119 renderowania p\u00f3\u017aniej. Pami\u0119taj, aby zwr\u00f3ci\u0107 ci\u0105g, a nie echo.<\/p>\n
function awp_gutenberg_slider_render($attributes, $content) {\n    return 'Slider render comes here.';\n}<\/code><\/pre>\n
Powr\u00f3cimy do funkcji renderowania PHP na samym ko\u0144cu tego samouczka. Teraz nadszed\u0142 czas, aby przej\u015b\u0107 do JavaScript!<\/p>\n
Zarejestruj niestandardowy blok Gutenberga w JavaScript<\/h2>\n
Otw\u00f3rzmy nasz block-slider.js<\/code>plik \u017ar\u00f3d\u0142owy. W tym momencie uruchomi\u0119 skrypt (npm run start<\/code>), aby przekszta\u0142ci\u0107 wszystko, co robimy w tym pliku, w plik kompilacji. Musimy zarejestrowa\u0107 blok za pomoc\u0105 [registerBlockType](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-registration\/)()<\/code>. Sprawd\u017a link, aby zobaczy\u0107 wszystkie mo\u017cliwe argumenty.<\/p>\n
Jak zdecydowali\u015bmy w register_block_type()<\/code>PHP, nasz blok nazywa si\u0119 awp\/slider<\/code>. Chcemy r\u00f3wnie\u017c doda\u0107 do bloku dwa atrybuty, jak wspomniano wcze\u015bniej: jeden dla wybranego identyfikatora terminu i jeden dla liczby slajd\u00f3w.<\/p>\n
Lubi\u0119 te\u017c dodawa\u0107 funkcjonalno\u015b\u0107 wyr\u00f3wnania blok\u00f3w. Zostanie on dodany automatycznie poprzez dodanie znaku ’ align<\/code>’ do supports<\/code>obiektu. Je\u015bli chcesz wszystkie wyr\u00f3wnania blok\u00f3w, mo\u017cesz po prostu ustawi\u0107 align<\/code>na true. Jednak suwak wyr\u00f3wnany do lewej lub do prawej nie ma wi\u0119kszego sensu, wi\u0119c zdefiniuj\u0119 okre\u015blone typy wyr\u00f3wnywania blok\u00f3w, kt\u00f3re obs\u0142uguje ten blok: \u201eWyr\u00f3wnaj do \u015brodka” (’ center<\/code>’), \u201eSzeroka szeroko\u015b\u0107” (’ wide<\/code>’) i \u201e Pe\u0142na szeroko\u015b\u0107” (’ full<\/code>’). Ponadto, aby zdefiniowa\u0107 domy\u015blne wyr\u00f3wnanie i udost\u0119pni\u0107 je z poziomu PHP, dodaj\u0119 ’ align<\/code>’ jako atrybut do naszego bloku.<\/p>\n
Ustawiam edit<\/code>argument bloku na osobny komponent, kt\u00f3ry nast\u0119pnie stworzymy. I na koniec save<\/code>funkcja po prostu zwraca null<\/code>, poniewa\u017c jest to blok dynamiczny.<\/p>\n
const { __ } = wp.i18n;\nconst { registerBlockType } = wp.blocks;\n\u00a0\nregisterBlockType('awp\/slider', {\n    title: __('AWP Slider', 'awp'),\n    icon: 'slides',\n    category: 'common',\n    supports: {\n        align: ['center', 'wide', 'full']\n    },\n    attributes: {\n        align: {\n            type: 'string',\n            default: 'center'\n        },\n        termId: {\n            type: 'number',\n            default: 0\n        },\n        numSlides: {\n            type: 'number',\n            default: 3\n        },\n    },\n    edit: BlockEdit,\n    save:() => { return null; }\n});<\/code><\/pre>\n
Musimy zdefiniowa\u0107 komponent dla edit<\/code>w\u0142a\u015bciwo\u015bci. Przed kodem rejestracyjnym definiuj\u0119 komponent funkcyjny, BlockEdit<\/code>kt\u00f3ry po prostu renderuje a div<\/code>i a Placeholder<\/code>z jakim\u015b fikcyjnym tekstem.<\/p>\n
const { __ } = wp.i18n;\nconst { registerBlockType } = wp.blocks;\nconst { Placeholder } = wp.components;\nconst BlockEdit = (props) => {\n    return(\n        <div className={props.className}>\n            <Placeholder\n                label={__('Slider Category', 'awp')}\n            >\n                Select category comes here.\n            <\/Placeholder>\n        <\/div>\n    );\n}\n\u00a0\nregisterBlockType('awp\/slider', {\n    ...<\/code><\/pre>\n
[Placeholder](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/placeholder)<\/code>to fajny komponent do renderowania obszaru dla ustawie\u0144 \u2013 i niekoniecznie do rzeczywistego renderowania bloku. Wewn\u0105trz Placeholder<\/code>komponentu renderujemy list\u0119 termin\u00f3w do wyboru.<\/p>\n
W tym momencie nasz blok powinien by\u0107 dost\u0119pny w WordPress Gutenberg! Stw\u00f3rzmy nowy post, dodajmy nowy blok i znajd\u017amy nasz blok w kategorii Wsp\u00f3lne. Tak obecnie wygl\u0105da nasz blok:<\/p>\n
\"Samouczek:<\/a>\"Samouczek:<\/a><\/p>\n
Dodawanie ustawie\u0144 inspektora<\/h2>\n
Dodajmy kilka ustawie\u0144 do Inspektora (prawy pasek boczny edytora). Jak wspomniano, nasz blok ma tylko jedno ustawienie; liczba slajd\u00f3w. W tym miejscu zalecam dodanie wi\u0119kszej liczby ustawie\u0144 do bloku suwaka. Pami\u0119taj, aby zarejestrowa\u0107 atrybuty dla ka\u017cdego dodanego ustawienia.<\/p>\n
Aby doda\u0107 co\u015b do Inspektora u\u017cywamy komponentu [InspectorControls](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/block-editor\/src\/components\/inspector-controls)<\/code>( ). wp.blockEditor<\/code>Wewn\u0105trz renderujemy [PanelBody](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/panel#panelbody)<\/code>( wp.components<\/code>) w celu dodania nowej sekcji zwijanej. Nast\u0119pnie po prostu renderujemy [RangeControl](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/range-control)<\/code>( wp.components<\/code>), aby utworzy\u0107 ustawienie wej\u015bciowe i wybra\u0107 liczb\u0119 slajd\u00f3w. Ustawiamy minimum na 1 a maksimum na 10. \u0141\u0105czymy zdarzenie value<\/code>i onChange<\/code>z atrybutem numSlides<\/code>.<\/p>\n
const { __ } = wp.i18n;\nconst { registerBlockType } = wp.blocks;\nconst { InspectorControls } = wp.blockEditor;\nconst { Placeholder, PanelBody, RangeControl } = wp.components;\n\u00a0\nconst BlockEdit = (props) => {\n    const { attributes, setAttributes } = props;\n\u00a0\n    return(\n        <div className={props.className}>\n            <InspectorControls>\n                <PanelBody\n                    title={__('Slider Settings', 'awp')}\n                    initialOpen={true}\n                >\n                    <RangeControl\n                        label={__('Number of slides', 'awp')}\n                        value={attributes.numSlides}\n                        onChange={(val) => setAttributes({ numSlides: val })}\n                        min={1}\n                        max={10}\n                    \/>\n                <\/PanelBody>\n            <\/InspectorControls>\n            <Placeholder\n                ...<\/code><\/pre>\n
Dzi\u0119ki powy\u017cszemu kodowi powinni\u015bmy teraz otrzyma\u0107 fajn\u0105 sekcj\u0119 z suwakiem zakresu do ustawiania liczby slajd\u00f3w.<\/p>\n
\"Samouczek:<\/a><\/p>\n
Ponownie polecam zabaw\u0119 w dodawanie kolejnych ustawie\u0144 do suwaka. Nast\u0119pnym krokiem jest stworzenie elementu do renderowania listy kategorii do wyboru.<\/p>\n
Tworzenie komponentu wyboru kategorii<\/h2>\n
Aby nasz kod by\u0142 uporz\u0105dkowany i wielokrotnego u\u017cytku, utw\u00f3rzmy komponent selektora kategorii w osobnym pliku. Wewn\u0105trz folderu build tworz\u0119 nowy plik awp-category-picker.js<\/code>.<\/p>\n
Wewn\u0105trz tego pliku definiujemy komponent, kt\u00f3ry b\u0119dzie przechodzi\u0142 przez wszystkie kategorie obecnie w WordPressie i renderuje je w jaki\u015b spos\u00f3b. Aby uzyska\u0107 kategorie, musimy umie\u015bci\u0107 go w tak zwanym komponencie wy\u017cszego rz\u0119du, kt\u00f3ry za po\u015brednictwem rekwizyt\u00f3w dostarczy naszemu komponentowi to, czego potrzebujemy. W tym celu u\u017cyjemy [withSelect](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withSelect)<\/code>. Wewn\u0105trz withSelect<\/code>mo\u017cemy z\u0142o\u017cy\u0107 pro\u015bb\u0119 o pobranie wszystkich kategorii w WordPress za pomoc\u0105 selektora sklepu [select](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#select)()<\/code>. Mo\u017cemy u\u017cy\u0107:<\/p>\n
select('core').getEntityRecords('taxonomy', '<category_slug>', <args>)<\/code><\/pre>\n
aby pobra\u0107 wszystkie terminy w ramach dostarczonej informacji o taksonomii. Je\u015bli nie znasz komponent\u00f3w i selektor\u00f3w wy\u017cszego rz\u0119du w WordPress Gutenberg, mam post, kt\u00f3ry wyja\u015bnia t\u0119 koncepcj\u0119 bardziej szczeg\u00f3\u0142owo: Utw\u00f3rz niestandardowy blok Gutenberga \u2013 cz\u0119\u015b\u0107 10: Pobieranie post\u00f3w i komponent\u00f3w wy\u017cszego rz\u0119du<\/a>.<\/p>\n
Poniewa\u017c musimy wyeksportowa\u0107 komponent z tego pliku, w zestawieniu umieszczamy kombinacj\u0119 withSelect<\/code>i nasz zdefiniowany komponent export default<\/code>. Nasz CategorySelect<\/code>komponent po prostu zwraca div z jakim\u015b fikcyjnym tekstem, dzi\u0119ki czemu mo\u017cemy zobaczy\u0107, \u017ce to dzia\u0142a. withSelect<\/code>Powinna zawiera\u0107 podpor\u0119 ’ ’ terms<\/code>do CategorySelect<\/code>. Doda\u0142em a console.log()<\/code>na tym rekwizycie, wi\u0119c wida\u0107, \u017ce dzia\u0142a.<\/p>\n
const { withSelect } = wp.data;\n\u00a0\nconst CategorySelect = (props) => {\n    console.log(props.terms);\n\u00a0\n    return(\n        <div>This is category select<\/div>\n    );\n}\n\u00a0\nexport default withSelect((select, props) => {\n    return {\n        terms: select('core').getEntityRecords('taxonomy', 'category', {per_page: -1})\n    }\n})(CategorySelect);<\/code><\/pre>\n
Ostatni\u0105 rzecz\u0105, kt\u00f3r\u0105 musimy zrobi\u0107, to zaimportowa\u0107 i u\u017cy\u0107 tego komponentu selektora kategorii w naszym bloku niestandardowym.<\/p>\n
Wracaj\u0105c block-slider.js<\/code>, najpierw musimy zaimportowa\u0107 komponent na g\u00f3rze pliku. A wewn\u0105trz naszego Placeholder<\/code>komponentu po prostu renderujemy komponent.<\/p>\n
const { Placeholder, PanelBody, RangeControl } = wp.components;\n\u00a0\nimport CategorySelect from '.\/awp-category-picker';\n\u00a0\nconst BlockEdit = (props) => {\n        ...\n            <Placeholder\n                label={__('Slider Category', 'awp')}\n            >\n                <CategorySelect \n                \/>\n            <\/Placeholder>\n        ...<\/code><\/pre>\n
Z powy\u017cszym kodem tw\u00f3j blok powinien teraz renderowa\u0107 div z CategorySelect<\/code>komponentu. Je\u015bli otworzysz konsol\u0119 w przegl\u0105darce, powiniene\u015b r\u00f3wnie\u017c zobaczy\u0107 niekt\u00f3re logi. Pami\u0119taj, \u017ce withSelect<\/code>jest to zapytanie asynchroniczne, co oznacza, \u017ce \u200b\u200bmo\u017ce renderowa\u0107 wiele razy. Po raz pierwszy warunki prop to null<\/code>. Ale ostatnie dzienniki powinny ko\u0144czy\u0107 si\u0119 tablic\u0105 termin\u00f3w kategorii.<\/p>\n
\u015awietny! Kontynuujmy prac\u0119 z naszym CategorySelect<\/code>komponentem i sprawmy, aby faktycznie renderowa\u0142 list\u0119 termin\u00f3w, umo\u017cliwiaj\u0105c u\u017cytkownikowi wybranie jednego!<\/p>\n
Renderowanie listy termin\u00f3w do wyboru<\/h3>\n
Istnieje wiele sposob\u00f3w renderowania listy wybor\u00f3w, na kt\u00f3rej u\u017cytkownik mo\u017ce wybra\u0107 jeden element. Je\u015bli chcesz czego\u015b naprawd\u0119 prostego, mo\u017cesz wyrenderowa\u0107 standardowe menu wyboru ([SelectControl](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/select-control)<\/code>). To zale\u017cy wy\u0142\u0105cznie od Ciebie. Zdecydowa\u0142em si\u0119 na czystsze i przyjemniejsze podej\u015bcie, u\u017cywaj\u0105c [MenuGroup](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/menu-group)<\/code>( wp.components<\/code>) i [MenuItem](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/menu-item)<\/code>( wp.components<\/code>).<\/p>\n
Wewn\u0105trz MenuGroup<\/code>komponentu musimy przej\u015b\u0107 przez props.terms<\/code>tablic\u0119, a dla ka\u017cdego elementu chcemy wy\u015bwietli\u0107 MenuItem<\/code>komponent renderuj\u0105cy nazw\u0119 terminu. I oczywi\u015bcie chcemy to renderowa\u0107 tylko wtedy, gdy props.terms<\/code>faktycznie co\u015b zawiera (\u017c\u0105danie asynchroniczne, pami\u0119tasz?).<\/p>\n
const { withSelect } = wp.data;\nconst { MenuGroup, MenuItem } = wp.components;\n\u00a0\nconst CategorySelect = (props) => {\n    const { terms } = props;\n    return(\n        <MenuGroup\n            className=\"awp-categoryselect\"\n        >\n            {terms && (terms.map((item) => (<MenuItem\n                        role=\"menuitemradio\"\n                    >\n                        {item.name}\n                    <\/MenuItem>\n                ))\n            )}\n        <\/MenuGroup>\n    );\n}\n\u00a0\nexport default withSelect((select, props) => {\n    ...<\/code><\/pre>\n
Komponentowi nada\u0142em MenuGroup<\/code>klas\u0119 niestandardow\u0105, poniewa\u017c b\u0119dziemy musieli ukierunkowa\u0107 to za pomoc\u0105 CSS. Ustawi\u0142em rekwizyt role<\/code>na MenuItem<\/code>\u201e menuitemradio<\/code>„, aby mie\u0107 pewno\u015b\u0107, \u017ce w danym momencie mo\u017cna wybra\u0107 tylko jeden. Domy\u015blnie dzia\u0142aj\u0105 one jako pola wyboru, dzi\u0119ki czemu mo\u017cna wybra\u0107 wiele element\u00f3w.<\/p>\n
Dzi\u0119ki powy\u017cszemu kodowi nasz blok powinien teraz (po kr\u00f3tkiej sekundzie) wyrenderowa\u0107 \u0142adn\u0105 list\u0119 wszystkich kategorii w twojej instancji WordPressa.<\/p>\n
Mo\u017cesz zauwa\u017cy\u0107, \u017ce nasz blok rozszerzy si\u0119, obejmuj\u0105c wszystkie kategorie. Je\u015bli jeste\u015bmy w instancji WordPressa z wieloma kategoriami, szybko staje si\u0119 to problemem. Chcemy si\u0119 upewni\u0107, \u017ce selektor jest kontenerem o maksymalnej wysoko\u015bci, kt\u00f3ry otrzyma pionowy pasek przewijania, je\u015bli istnieje wiele kategorii. Tutaj wkracza nasz plik CSS.<\/p>\n
W naszym editor-block-slider.css<\/code>pliku dodaj:<\/p>\n
.awp-categoryselect div {\n    max-height: 200px;\n    overflow: hidden scroll;\n    border: 1px solid #b3bcc0;\n}<\/code><\/pre>\n
Ten CSS kieruje si\u0119 do div<\/code>wn\u0119trza naszego MenuGroup<\/code>i zapewnia, \u017ce \u200b\u200bnigdy nie przekroczy 200 pikseli. Je\u015bli zawarto\u015b\u0107 strony MenuGroup<\/code>powi\u0119kszy si\u0119 (wi\u0119cej kategorii), poka\u017ce si\u0119 pionowy pasek przewijania. To jest absolutne minimum CSS dla naszego bloku, ale oczywi\u015bcie mo\u017cesz doda\u0107 wi\u0119cej CSS, je\u015bli chcesz.<\/p>\n
Ostatni\u0105 rzecz\u0105, kt\u00f3r\u0105 musimy poprawi\u0107 w naszym selektorze kategorii, jest funkcjonalno\u015b\u0107 wy\u015bwietlania aktualnie wybranego elementu i umo\u017cliwienie u\u017cytkownikowi wybrania terminu z listy. W tym celu musimy przekaza\u0107 kilka props do tego komponentu z naszego bloku.<\/p>\n
W block-slider.js<\/code>tym celu musimy przekaza\u0107 aktualnie wybrany termin (warto\u015b\u0107 atrybutu termId<\/code>) oraz funkcj\u0119 aktualizuj\u0105c\u0105 wybrany termin (setAttributes<\/code>) jako rekwizyty do naszego komponentu selektora kategorii.<\/p>\n
...\n\u00a0\nconst BlockEdit = (props) => {\n    const { attributes, setAttributes } = props;\n\u00a0\n    const selectTerm = (termId) => {\n        setAttributes({ termId: termId });\n    }\n\u00a0\n    return(\n        ...\n            <Placeholder\n                label={__('Slider Category', 'awp')}\n            >\n                <CategorySelect \n                    selectedTermId={attributes.termId}\n                    selectTerm={selectTerm}\n                \/>\n            <\/Placeholder>\n        ...<\/code><\/pre>\n
W powy\u017cszym kodzie w wierszu #6<\/code>definiujemy funkcj\u0119, kt\u00f3ra po prostu aktualizuje atrybut termId<\/code>. T\u0119 nazw\u0119 funkcji przekazujemy jako prop do CategorySelect<\/code>at line #17<\/code>. W linii #16<\/code>przekazujemy aktualn\u0105 warto\u015b\u0107 termId<\/code>. Dzi\u0119ki temu mo\u017cemy zaktualizowa\u0107 nasz CategorySelect<\/code>komponent, aby odzwierciedla\u0142 wybran\u0105 pozycj\u0119 i pozwoli\u0107 u\u017cytkownikowi na rzeczywisty wyb\u00f3r terminu.<\/p>\n
Wracaj\u0105c awp-category-picker.js<\/code>, dodajemy nowe rekwizyty do MenuItem<\/code>. Zwracamy true<\/code>lub false<\/code>dla w\u0142a\u015bciwo\u015bci, isSelected<\/code>czy bie\u017c\u0105cy identyfikator terminu jest taki sam, jak aktualnie wybrany. selectTerm<\/code>Funkcj\u0119 inicjujemy w onClick<\/code>zdarzeniu, przekazuj\u0105c termin ID. Aby zaznaczona pozycja by\u0142a wizualna, warunkowo dodajemy ikon\u0119 przed ka\u017cd\u0105 pozycj\u0105.<\/p>\n
...\nconst CategorySelect = (props) => {\n    const { terms, selectedTermId, selectTerm } = props;\n\u00a0\n    return(\n        <MenuGroup\n            className=\"awp-categoryselect\"\n        >\n            {terms && (terms.map((item) => (<MenuItem\n                        role=\"menuitemradio\"\n                        isSelected={item.id == selectedTermId}\n                        icon={item.id == selectedTermId? 'yes': 'no-alt'}\n                        onClick={() => selectTerm(item.id)}\n                    >\n                        {item.name}\n                    <\/MenuItem>\n                ))\n            )}\n        ...<\/code><\/pre>\n
Dzi\u0119ki temu nasz selektor kategorii powinien wygl\u0105da\u0107 tak:<\/p>\n
\"Samouczek:<\/a><\/p>\n
Lista powinna wyra\u017anie oznacza\u0107 wybrany termin ikon\u0105 wyboru, a zamiast tego mo\u017cna klikn\u0105\u0107 dowolny termin, aby wybra\u0107 ten termin.<\/p>\n
To by\u0142o wszystko dla edytora i cz\u0119\u015bci JavaScript! Teraz pozostaje tylko renderowanie frontendu, kt\u00f3re zrobimy w PHP.<\/p>\n
Renderuj blok dynamiczny w PHP<\/h2>\n
Zanim zag\u0142\u0119bimy si\u0119 w funkcj\u0119 render, najpierw zajmijmy si\u0119 kilkoma rzeczami.<\/p>\n
Najpierw musimy umie\u015bci\u0107 w kolejce skrypt cycle2 w interfejsie u\u017cytkownika, aby nasz kod suwaka faktycznie zamieni\u0142 si\u0119 w suwak. Robimy to za pomoc\u0105 prostej funkcji pod\u0142\u0105czonej do wp_enqueue_scripts<\/code>. Dostosuj poni\u017csze, je\u015bli wybra\u0142e\u015b inny skrypt suwaka.<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    wp_enqueue_script(\n        'cycle2-slider-js', \n        get_template_directory_uri(). '\/assets\/js\/jquery.cycle2.min.js', \n        ['jquery'], \n        '', \n        true\n    );\n});<\/code><\/pre>\n
Po drugie chcemy wr\u00f3ci\u0107 do register_block_type()<\/code>wywo\u0142ania funkcji. Kiedy zajmujemy si\u0119 blokami dynamicznymi, zdecydowanie powinni\u015bmy doda\u0107 nowy argument; attributes<\/code>. W tym argumencie definiujemy wszystkie atrybuty, kt\u00f3re zdefiniowali\u015bmy registerBlockType<\/code>w JavaScript, w tym ich warto\u015bci domy\u015blne. Je\u015bli tego nie zrobimy, nie wszystkie atrybuty b\u0119d\u0105 dost\u0119pne w naszym wywo\u0142aniu zwrotnym renderowania. Je\u015bli atrybut pozosta\u0142 niezmieniony w edytorze blok\u00f3w, atrybut i jego warto\u015b\u0107 nie b\u0119d\u0105 dost\u0119pne w tablicy atrybut\u00f3w w PHP. Dlatego zalecam, aby zawsze zwraca\u0107 uwag\u0119 na dodanie attributes<\/code>tablicy do register_block_type()<\/code>funkcji PHP podczas pracy z blokami dynamicznymi. Dla naszego bloku wygl\u0105da\u0142oby to tak:<\/p>\n
register_block_type('awp\/slider', [\n    'editor_script' => 'awp-block-slider-js',\n    'editor_style' => 'awp-block-slider-style',\n    'render_callback' => 'awp_gutenberg_slider_render',\n    'attributes' => [\n        'align' => ['type' => 'string', 'default' => 'center'],\n        'termId' => ['type' => 'number', 'default' => 0],\n        'numSlides' => ['type' => 'number', 'default' => 3]\n    ]\n]);<\/code><\/pre>\n
Teraz wracamy do naszej funkcji renderowania wywo\u0142a\u0144 zwrotnych awp_gutenberg_slider_render()<\/code>. Wynik zale\u017cy wy\u0142\u0105cznie od Ciebie, zw\u0142aszcza je\u015bli zdecydujesz si\u0119 u\u017cy\u0107 innego skryptu suwaka. Poni\u017cej znajduje si\u0119 prosty przyk\u0142ad.<\/p>\n
G\u0142\u00f3wn\u0105 ide\u0105 jest sprawdzenie, czy dany termin zosta\u0142 wybrany ($attributes['termId']<\/code>). Je\u015bli jest wype\u0142niony tworzymy a [WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)()<\/code>z argumentami dotycz\u0105cymi liczby post\u00f3w ($attributes['numSlides']<\/code>) oraz wybranego identyfikatora kategorii. Nast\u0119pnie nale\u017cy wygenerowa\u0107 odpowiedni kod HTML do pracy cycle2, zap\u0119tli\u0107 posty i wy\u015bwietli\u0107 ich obrazki jako slajdy.<\/p>\n
function awp_gutenberg_slider_render($attributes, $content) {\n    if (empty($attributes['termId'])) {\n        return '';\n    }\n\u00a0\n    $postQuery = new WP_Query([\n        'posts_per_page' => $attributes['numSlides'],\n        'cat' => $attributes['termId']\n    ]);\n\u00a0\n    if ($postQuery->have_posts()) {\n        $output = '<div class=\"wp-block-awp-slider align'. $attributes['align']. '\">';\n        $output .= '<div class=\"cycle-slideshow\" data-cycle-timeout=4000>';\n        while ($postQuery->have_posts()) {\n            $postQuery->the_post();\n\u00a0\n            if (has_post_thumbnail()) {\n                $img_url = get_the_post_thumbnail_url(get_the_ID(), 'loop-thumbnail');\n                $output .= '<img src=\"'. $img_url. '\" \/>';\n            }\n        }\n        wp_reset_postdata();\n        $output .= '<\/div>';\n        $output .= '<\/div>';\n\u00a0\n        return $output;\n\u00a0\n    } else {\n        return '';\n    }\n}<\/code><\/pre>\n
Zwr\u00f3\u0107 uwag\u0119, jak doda\u0107 odpowiedni\u0105 klas\u0119 wyr\u00f3wnania bloku w linii #12<\/code>. Wynikiem powinien by\u0107 suwak prezentowanych obraz\u00f3w. Pami\u0119taj, \u017ce jest to podstawowy przyk\u0142ad, kt\u00f3ry ma pewne wady. Na przyk\u0142ad pobieramy ostatnie trzy posty z wybranej kategorii. Ale zak\u0142adaj\u0105c, \u017ce jeden z nich nie ma polecanego obrazu, suwak wy\u015bwietli tylko dwa posty.<\/p>\n
Wa\u017cn\u0105 rzecz\u0105 do zapami\u0119tania jest zwracanie ci\u0105gu i nie powtarzanie go. Zalecam r\u00f3wnie\u017c u\u017cywanie w swoim motywie pewnego rodzaju funkcji szablon\u00f3w do renderowania dynamicznych blok\u00f3w, takich jak te. Mo\u017ce szybko sta\u0107 si\u0119 nieuporz\u0105dkowanym naprawianiem i budowaniem kodu HTML jako ci\u0105gu.<\/p>\n
Ostatnie s\u0142owa<\/h2>\n
Ten samouczek pokaza\u0142, jak utworzy\u0107 niestandardowy dynamiczny blok WordPress Gutenberg, w kt\u00f3rym renderujesz zawarto\u015b\u0107 frontendu w PHP. Zobaczy\u0142e\u015b te\u017c, jak u\u017cywa\u0107 komponentu wy\u017cszego rz\u0119du withSelect<\/code>do tworzenia zapyta\u0144 o wszystkie terminy kategorii i metody wy\u015bwietlania listy, kt\u00f3r\u0105 mo\u017cna wybra\u0107.<\/p>\n
Ca\u0142y powy\u017cszy kod jest napisany tak prosto, jak to tylko mo\u017cliwe. Doda\u0142em tylko absolutne minimum ustawie\u0144. Suwak dzia\u0142a, ale zwykle chcesz wi\u0119cej \u2013 na przyk\u0142ad tworzenie link\u00f3w do slajd\u00f3w, wy\u015bwietlanie tytu\u0142\u00f3w z post\u00f3w, strza\u0142ek suwaka lub opcji dostosowania pr\u0119dko\u015bci lub innych ustawie\u0144 suwaka. Chodzi o to, aby pokaza\u0107 Ci podstawy i u\u0142atwi\u0107 Ci rozbudow\u0119, rozbudow\u0119 i zmian\u0119 w celu dopasowania do potrzeb Twojego projektu.<\/p>\n
\u0179r\u00f3d\u0142o nagrywania:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Samouczek dotycz\u0105cy tworzenia dynamicznego bloku WordPress Gutenberg za pomoc\u0105 funkcji withSelect i renderowania PHP. Efektem ko\u0144cowym jest suwak.<\/p>\n","protected":false},"author":1,"featured_media":151907,"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,815,845,845,866,866,815],"tags":[1169],"class_list":{"0":"post-233859","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-gutenberg-7","13":"category-n-a","14":"category-wtyczki","15":"category-samouczki","17":"category-wordpress-7","20":"tag-affiai-pl"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233859","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=233859"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233859\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/151907"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=233859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=233859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=233859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}