Twój koszyk jest obecnie pusty!
Tworzenie własnych bloków Gutenberg w React.
Zamów w przedsprzedaży i zaoszczędź nawet 700 zł!
Rewolucja Gutenberga w WordPressie już trwa.
Zdobądź niezbędne umiejętności.
Zwiększ produktywność
Twórz niestandardowe bloki Gutenberga, aby szybciej i efektywniej zarządzać treścią na swojej stronie WordPress.
Lepsza kontrola nad treścią
Zyskaj pełną kontrolę nad wyglądem i funkcjonalnością treści dzięki tworzeniu własnych bloków.
Większa elastyczność
Stwórz niestandardowe bloki do specyficznych zastosowań i dostosuj WordPress do swoich potrzeb.
Lepsza integracja
Zintegruj własne bloki z innymi funkcjami WordPressa dla lepszej wydajności i funkcjonalności.
Zwiększone bezpieczeństwo
Twórz własne bloki, aby zwiększyć bezpieczeństwo i kontrolę nad kodem źródłowym.
Rozwój umiejętności
Naucz się tworzyć bloki Gutenberga i rozwijaj swoje umiejętności programistyczne w nowoczesnych frameworku React.
Program kursu.
Mnóstwo wiedzy w jednym kursie.
Konfiguracja środowiska i omówienie podstawowych plików
Moduł 1
Tworzenie statycznych bloków Gutenberg
Moduł 2
Lekcja 1. Co to są bloki statyczne w WordPressie?
Lekcja 2. Omówienie składni JSX
Lekcja 3. Obsługa natywnych funkcji – cz.1 (Block Supports API)
Lekcja 4. Obsługa natywnych funkcji – cz.2 (Block Supports API)
Lekcja 5. Zagnieżdżanie bloków z wykorzystaniem komponentów
Lekcja 6. Zagnieżdżanie bloków z wykorzystaniem useInnerBlocksProps.
Lekcja 7. Stylowanie bloku
Lekcja 8. Własne atrybuty bloku
Lekcja 9. Sidebar z edycją atrybutów bloku
Tworzenie dynamicznych bloków Gutenberg
Moduł 3
W opracowaniu….
Publikowanie bloków Gutenberg
Moduł 4
W opracowaniu….
FAQs.
Pytania są oznaką zainteresowania.
Dla kogo jest ten kurs?
Kurs jest idealny nie tylko dla web developerów tworzących strony na WordPress’ie, ale także dla programistów, którzy nie mieli wcześniej styczności z WordPressem czy Gutenbergiem i chcą rozwinąć swoje umiejętności.
Co muszę umieć, aby zrozumieć kurs?
Do tworzenia bloków Gutenberga jest niezbędna natomiast znajomość JavaScript. Bloki Gutenberga tworzone są w bibliotece React. W kursie omówimy podstawowe zagadnienia tej biblioteki, ale jeśli znasz React’a to Twoja nauka tworzenia bloków Gutenberga przebiegnie sprawniej i szybciej.
Dodatkowo, aby zrozumieć i wykorzystać wiedzę zawartą w kursie powinieneś znać HTML, CSS/SCSS oraz PHP (na poziomie rozumienia filtrów, haków etc.). Przyda się także podstawowa znajomość języka angielskiego. W kursie będziemy się posługiwać terminami, które przetłumaczone na język polski brzmią co najmniej… dziwacznie, dlatego będziemy ich używać w oryginalnej, angielskiej wersji.
Czy kurs jest aktualny?
Kurs został stworzony na podstawie WordPress’a w wersji 6.6.1. W kolejnych wersjach WordPress’a mogły zostać dodane nowe funkcje, które nie zostały uwzględnione w kursie. Dołożymy jednak wszelkich starań, aby aktualizować wiedzę i informacje zawarte w kursie, więc wykupując dostęp, będziesz mógł aktualizować swoją wiedzę z zakresu tworzenia bloków w Gutenbergu.
Lekcja 1.
Przygotowanie środowiska developerskiego
Konfiguracja środowiska do tworzenia bloków Gutenberga:
- Uruchomienie instancji WordPressa (rekomendacja użycia LocalWP).
Przygotowanie narzędzi:
- Instalacja Node.js i NPM.
- Skorzystanie z paczki @wordpress/create-block do tworzenia bloków.
Utworzenie pierwszego bloku:
- Przejście do katalogu wp-content/plugins w terminalu.
- Uruchomienie komendy npx @wordpress/create-block@latest w celu utworzenia bloku o nazwie „hello-world”.
Weryfikacja działania bloku:
- Aktywacja nowo utworzonej wtyczki w panelu WordPressa.
- Dodanie bloku „Hello World” do strony w edytorze Gutenberg.
Rozpoczęcie pracy nad blokiem:
- Przejście do katalogu bloku i uruchomienie komendy npm start w terminalu w celu monitorowania zmian.
- Sprawdzenie działania bloku na stronie i omówienie różnicy w wyglądzie w edytorze i na froncie.
Lekcja 2.
Omówienie podstawowych plików wtyczki
Przegląd plików utworzonych przez skrypt @wordpress/create-block:
- Omówienie plików wtyczki „hello world” z blokiem Gutenberga, utworzonej w poprzedniej lekcji.
Główny plik PHP wtyczki (hello-world.php):
- Zawiera meta-informacje o wtyczce i rejestruje blok w edytorze Gutenberga za pomocą funkcji register_block_type.
- Plik block.json zawiera definicję bloku.
Katalog build:
- Zawiera wynikowe pliki JavaScript i CSS bloku.
- Zmiany w tym katalogu są automatycznie nadpisywane, więc nie należy w nim edytować plików.
Katalog src:
- Zawiera pliki źródłowe bloku, które są przetwarzane przez skrypt npm start.
Plik block.json:
- Zawiera meta-informacje o bloku, takie jak name, title, category, icon i description.
- Zmiana nazwy (name) w pliku block.json wymaga ponownego dodania bloku w edytorze.
Plik index.js:
- Rejestruje blok po stronie JavaScript za pomocą funkcji registerBlockType.
- Zawiera odwołania do funkcji edit i save, które definiują działanie bloku w edytorze i sposób jego zapisu.
Pliki edit.js i save.js:
- edit.js definiuje zachowanie bloku w edytorze.
- save.js definiuje, co zostanie zapisane do bazy danych i wyświetlone użytkownikom.
Pliki stylów (editor.scss, style.scss):
- Odpowiadają za style CSS bloku w edytorze oraz na stronie.
Plik view.js:
- Uruchamiany tylko dla użytkowników końcowych, którzy wchodzą na stronę z blokiem.
Pliki package.json i package-lock.json:
- Zawierają informacje o zależnościach NPM potrzebnych do działania wtyczki.
Podsumowanie:
- Wyjaśnienie zasad działania plików i skryptów związanych z blokami Gutenberga oraz przygotowanie do dalszych lekcji.