Spędził Pan 20 minut na stylowy blok z wezwaniem do działania. Dopracował Pan kolory, odstępy, dopasował tekst. A tydzień później na sąsiedniej stronie znowu lepi Pan ten sam blok od zera. Brzmi znajomo?

Ręczne kopiowanie bloków między stronami WordPress zabiera godziny, których Pan nie ma. Ale Gutenberg dawno rozwiązał ten problem: bloki wielokrotnego użytku (reusable blocks) + eksport do JSON pozwalają przenieść dowolny blok na inną stronę w minutę. Bez wtyczek, bez eksportu całej bazy, bez kombinowania z importem XML.

W tym poradniku analiza krok po kroku: od utworzenia bloku wielokrotnego użytku po import na zewnętrzną stronę. Plus alternatywna wtyczka, która jeszcze bardziej upraszcza cały proces.

💡 Szybki przegląd:

• Tworzy Pan blok w edytorze Gutenberga i konwertuje go na blok wielokrotnego użytku
• Eksportuje go Pan jako plik JSON przez interfejs zarządzania blokami
• Importuje Pan JSON na docelowej stronie WordPress, blok jest gotowy do użycia
• Alternatywnie: wtyczka Blocks Export Import umożliwia eksport dowolnych bloków, nie tylko tych wielokrotnego użytku

Czym są bloki wielokrotnego użytku i do czego służą

Blok wielokrotnego użytku w Gutenbergu to zapisany szablon treści, który tworzy Pan raz, a następnie wstawia do dowolnego wpisu lub strony. Zmienił Pan blok źródłowy, zmiany są automatycznie uwzględniane wszędzie tam, gdzie został użyty.

Typowe scenariusze:

• List z podziękowaniem lub podpis na końcu każdego artykułu
• Baner promocyjny lub formularz subskrypcji
• Blok z kontaktami, informacjami prawnymi lub prawami autorskimi
• Slider obrazów lub galeria powtarzająca się na kilku stronach

Przed Gutenbergiem przechowywałby Pan takie szablony w pliku tekstowym na pulpicie i kopiował przez schowek. Teraz działa to na poziomie rdzenia WordPress i można je przenosić między stronami.

Ważny niuans: jeśli blok został zbudowany w oparciu o zewnętrzną wtyczkę (na przykład bloki z Getwid lub Stackable), ta sama wtyczka musi być zainstalowana na stronie docelowej. W przeciwnym razie blok otworzy się z błędem lub straci część stylów.

1. Tworzymy blok wielokrotnego użytku

Proszę otworzyć edytor Gutenberga przez Wpisy → Dodaj nowy. Proszę kliknąć ikonę „Dodaj blok" (+) na górnym pasku i wybrać odpowiedni typ bloku. W poniższym przykładzie zwykły blok akapitu:

Proszę skonfigurować blok: dodać tekst, linki, kolor tła, odstępy, wszystko, co jest potrzebne do uzyskania finalnego wyglądu. W naszym przykładzie powstał blok listu z podziękowaniem z linkami do mediów społecznościowych i kolorowym tłem:

Oto jak wygląda finalny blok po skonfigurowaniu stylów i tekstu:

Na razie jest to zwykły blok. Aby uczynić go blokiem wielokrotnego użytku, proszę kliknąć ikonę „Opcje dodatkowe" (trzy kropki) na pasku bloku i wybrać „Dodaj do bloków wielokrotnego użytku":

Proszę nadać blokowi nazwę i kliknąć „Zapisz". Gotowe, blok pojawił się w bibliotece bloków wielokrotnego użytku na stronie.

2. Używamy bloku wielokrotnego użytku we wpisach

Zapisany blok można dodać do dowolnego wpisu lub strony za pomocą kilku kliknięć. W edytorze Gutenberga należy kliknąć „Dodaj blok" (+), przejść na kartę „Bloki wielokrotnego użytku" i wybrać odpowiedni:

Po wstawieniu bloku należy kliknąć „Podgląd" lub „Opublikuj" i sprawdzić wynik we frontendzie:

Blok działa we wszystkich typach wpisów obsługujących edytor Gutenberga: postach, stronach, niestandardowych typach treści. Tworzy się go raz, a używa wszędzie.

3. Eksportujemy blok do JSON

Gdy blok jest gotowy i przetestowany, można go wyeksportować w celu przeniesienia na inną stronę. W edytorze Gutenberga należy kliknąć ikonę „Więcej narzędzi i opcji" (trzy kropki w prawym górnym rogu) i wybrać „Zarządzaj wszystkimi blokami wielokrotnego użytku":

Otworzy się ekran z listą wszystkich bloków wielokrotnego użytku na stronie. Na razie jest tu tylko jeden, list z podziękowaniem. W miarę tworzenia nowych bloków lista będzie się powiększać:

Należy najechać kursorem na nazwę bloku, pojawi się odnośnik „Eksportuj jako JSON". Należy go kliknąć:

Przeglądarka pobierze plik z rozszerzeniem .json. Należy zapisać go w wygodnym folderze na komputerze:

Wewnątrz JSON znajduje się pełna struktura bloku: znaczniki HTML, style, atrybuty, bloki zagnieżdżone. To samodzielny plik, gotowy do importu na dowolnej stronie WordPress z aktywnym Gutenbergiem.

4. Importujemy blok na inną stronę

Na docelowej stronie WordPress należy otworzyć edytor Gutenberga (Wpisy → Dodaj nowy). Ponownie kliknąć „Więcej narzędzi i opcji" i wybrać „Zarządzaj wszystkimi blokami wielokrotnego użytku":

Na ekranie bloków należy kliknąć przycisk „Importuj z JSON", wybrać wcześniej pobrany plik i kliknąć „Importuj":

Gotowe. Zaimportowany blok pojawił się na liście i jest od razu dostępny do wstawiania we wpisach:

Od tego momentu bloku można używać na drugiej stronie tak samo, jak na pierwszej. W razie potrzeby procedurę powtarza się dla dowolnej liczby bloków, nie ma ograniczeń.

Alternatywny sposób: wtyczka Blocks Export Import

Ręczna metoda z konwersją na blok wielokrotnego użytku sprawdza się w większości scenariuszy, ma jednak ograniczenie: eksportować można tylko bloki wielokrotnego użytku. Zwykły blok, który właśnie się utworzyło, trzeba najpierw przekonwertować, a dopiero potem wyeksportować.

Wtyczka Blocks Export Import od zespołu ThemeIsle znosi to ograniczenie. Dodaje przycisk eksportu bezpośrednio w menu każdego bloku, bez pośredniej konwersji.

Proszę zainstalować i aktywować wtyczkę, następnie otworzyć edytor Gutenberga i utworzyć blok. W menu „Opcje dodatkowe" pojawi się nowa pozycja, „Export JSON":

Na komputer zostanie pobrany plik JSON z pełną strukturą bloku. Aby zaimportować go na innej stronie, proszę kliknąć „Dodaj blok" (+), przejść do zakładki „Widżety" i wybrać „Importuj bloki z JSON":

Następnie proszę kliknąć „Wybierz plik", wskazać plik JSON na komputerze i kliknąć „Prześlij":

Metoda wtyczkowa ma pewien niuans: zaimportowane za jej pomocą bloki nie są zapisywane w bibliotece bloków wielokrotnego użytku danej witryny. Istnieją one wyłącznie jako plik JSON na Pana/Pani komputerze. Metoda ręczna (sekcje 1-4) przeciwnie, umieszcza blok w bazie danych WordPress i pozostaje on dostępny przez standardowy interfejs zarządzania blokami.

Wybór metody zależy od scenariusza: do jednorazowego przeniesienia między własnymi witrynami proszę sięgnąć po wtyczkę, to szybsze rozwiązanie; do stałej pracy z biblioteką bloków na kilku platformach warto opanować natywny eksport przez bloki wielokrotnego użytku.

Wideo: eksport i import bloków Gutenberga w praktyce

Proszę obejrzeć krótki samouczek wideo, który pokazuje pełny cykl, od utworzenia bloku wielokrotnego użytku po import na innej stronie WordPress:

⁉️🤔 Często zadawane pytania

Czy można wyeksportować kilka bloków jako jeden plik?

Tak. Zaznacz kilka bloków w edytorze (przytrzymaj Shift i kliknij każdy z nich), zgrupuj je w jeden przez „Dodaj do bloków wielokrotnego użytku" i wyeksportuj powstałą grupę jako pojedynczy plik JSON. Wtyczka Blocks Export Import również obsługuje eksport wielu bloków: zaznacz bloki i wybierz Export JSON, wszystkie zaznaczone bloki trafią do jednego pliku.

Co zrobić, jeśli zaimportowany blok wyświetla się nieprawidłowo?

Są trzy prawdopodobne przyczyny. Pierwsza: na docelowej stronie nie jest zainstalowana wtyczka, na której blokach oparto importowaną treść (Getwid, Stackable, Kadence Blocks i podobne). Zainstaluj wtyczkę i powtórz import. Druga: szablony stron znacznie różnią się pod względem CSS, blok może odziedziczyć obce czcionki lub odstępy. Popraw to w ustawieniach bloku lub dodaj własny CSS. Trzecia: plik JSON został uszkodzony podczas przesyłania, pobierz go i zaimportuj ponownie.

Jak odróżnić zwykły blok od bloku wielokrotnego użytku w edytorze?

Blok wielokrotnego użytku w edytorze Gutenberga wyróżnia się fioletową ramką i ma ikonę ponownego wykorzystania (dwie zapętlone strzałki) na pasku narzędzi. Zwykły blok ma niebieską ramkę bez specjalnych ikon. Po najechaniu kursorem na blok wielokrotnego użytku pojawia się jego nazwa.

Czy style szablonu są zachowywane podczas eksportu bloku?

Częściowo. Do pliku JSON trafia znacznik inline oraz atrybuty bloku (kolor tła, rozmiar tekstu, gradienty, wszystko, co ustawiono w opcjach Gutenberga). Style zdefiniowane w pliku style.css aktywnego szablonu nie są dołączane do JSON: są one powiązane z szablonem, a nie z blokiem. Dlatego na innej stronie z innym szablonem blok może wyglądać inaczej. W przypadku bloków, gdzie design ma krytyczne znaczenie, kluczowe style należy definiować w ustawieniach samego bloku, a nie przez CSS szablonu.

Czy istnieje ograniczenie rozmiaru eksportowanego pliku JSON?

Formalnie nie, ale bardzo duże bloki z dziesiątkami zagnieżdżonych elementów mogą dać plik JSON o wielkości kilku megabajtów. Podczas importu takiego pliku zadziała ograniczenie upload_max_filesize w konfiguracji PHP serwera (domyślnie 2 MB). Jeśli JSON przekracza ten limit, należy zwiększyć dyrektywę w php.ini lub podzielić blok na kilka mniejszych.

Kiedy eksport ręczny wygrywa z wtyczką

Metoda ręczna z użyciem bloków wielokrotnego użytku jest wbudowana w rdzeń WordPressa. Nie zależy od aktualizacji zewnętrznych komponentów, nie dodaje zbędnego kodu do strony i przechowuje bloki w bazie danych, są one widoczne w standardowym interfejsie zarządzania.

Wtyczka Blocks Export Import wygrywa pod względem szybkości, gdy trzeba szybko pobrać blok i od razu go przenieść, bez zapisywania w bibliotece. Jeśli jednak systematycznie pracuje Pan/Pani z zestawem typowych bloków na kilku stronach, warto opanować natywny eksport przez bloki wielokrotnego użytku. Biblioteka bloków dostępna z poziomu każdego wpisu z czasem rekompensuje dodatkowe kliknięcie potrzebne do konwersji.

Proszę wypróbować obie metody na testowej parze stron i wybrać tę, która lepiej wpisuje się w Pana/Pani proces pracy. Dziesięć minut konfiguracji dziś oszczędza dziesiątki godzin w ciągu roku.