Bloki Gutenberg i full site editing: wzorce, szablony i theme.json

#Dlaczego bloki zmieniły wszystko w WordPress

WordPress przez ponad piętnaście lat obsługiwał sieć za pomocą pojedynczego pola tekstowego z formatowaniem. To się zmieniło w grudniu 2018 roku, kiedy wersja 5.0 została wydana z edytorem blokowym Gutenberg. Zamiast wklejać surowy HTML lub męczyć się ze shortcode’ami, każdy element treści stał się oddzielnym blokiem: akapit, obraz, galeria, przycisk, tabela. Bloki można przesuwać, duplikować, grupować i stylizować niezależnie.

W 2026 roku edytor blokowy nie jest już opcjonalny. Obsługuje edycję wpisów, budowanie stron, a dzięki full site editing - całej warstwy motywu. Niezależnie od tego, czy jesteś właścicielem strony publikującym artykuły, czy deweloperem realizującym projekty dla klientów, znajomość bloków, wzorców i Site Editor jest kluczową umiejętnością.

Ten przewodnik przeprowadzi Cię przez każdą warstwę ekosystemu blokowego, od panelu wstawiania po budowanie własnego motywu blokowego od podstaw.

#Poznaj panel wstawiania bloków

Panel wstawiania bloków to brama do każdego elementu, który możesz umiescic na stronie. Otworz go, klikając niebieski przycisk + na pasku narzędzi w lewym gornym rogu lub wpisując / w pustym akapicie.

Panel wstawiania grupuje bloki w kategorie:

• Tekst - akapit, nagłówek, lista, cytat, kod, preformatowany, pullquote, wiersz
• Media - obraz, galeria, audio, wideo, okladka, plik
• Projekt - przyciski, kolumny, grupa, wiersz, stos, separator, spacer
• Widgety - shortcode, archiwa, kategorie, najnowsze wpisy, wyszukiwanie, ikony spolecznosciowe
• Motyw - nawigacja, logo strony, tytuł strony, petla zapytań, część szablonu, tytuł wpisu, treść wpisu
• Osadzenia - YouTube, Twitter, Spotify, Vimeo i dziesieki innych przez oEmbed

Każdy blok udostepnia własny pasek narzędzi (formatowanie inline, wyrownanie, link) oraz panel boczny z zaawansowanymi ustawieniami (kotwica HTML, dodatkowe klasy CSS, kolor, typografia). Opanowanie panelu wstawiania sprawia, że rzadko potrzebujesz wtyczki page buildera do standardowych układów.

#Skroty klawiszowe oszczedzajace czas

Produktywna edycja bloków opiera się na skrotach:

• / i nazwa bloku wstawia go natychmiast
• Ctrl+Shift+D (Cmd na macOS) duplikuje wybrany blok
• Ctrl+Alt+T wstawia blok przed biezacym
• Ctrl+Alt+Y wstawia blok za biezacym
• Shift+Alt+Z usuwa wybrany blok
• Ctrl+Shift+K usuwa link z zaznaczonego tekstu

Polacz je z uchwytem do przeciagania na każdym bloku, a możesz przearanzowac złożone układy bez dotykania myszy.

#Tworzenie i zarządzanie zsynchronizowanymi wzorcami (blokami wielokrotnego użytku)

WordPress 6.3 zmienił nazwe “bloków wielokrotnego użytku” na “zsynchronizowane wzorce”, ale koncepcja pozostaje ta sama: zapisz blok lub grupe bloków raz i wstawiaj w dowolnym miejscu na stronie. Gdy edytujesz jedna instancje, wszystkie umiejscowienia się aktualizują.

#Jak utworzyc zsynchronizowany wzorzec

1. Zaznacz jeden lub więcej bloków w edytorze.
2. Otworz pasek narzędzi bloku i kliknij menu z trzema kropkami.
3. Wybierz Utworz wzorzec.
4. Nadaj wzorcowi nazwe i kategorie.
5. Włącz opcje Zsynchronizowany. (Pozostawienie jej wylaczonej tworzy standardówy, niezsynchronizowany wzorzec.)
6. Kliknij Utworz.

Wzorzec pojawia się teraz w panelu wstawiania w zakladce Wzorce oraz w kategorii Zsynchronizowane.

#Praktyczne zastosowania

• Banery z wezwaniem do działania - pojedyncza grupa bloków CTA uzywana na każdej stronie docelowej, aktualizowana raz przy zmianie kampanii.
• Sekcje z referencjami - blok kolumn z cytatami klientów, który pozostaje spojny na stronach uslugowych.
• Informacje prawne - tekst prawny, który musi być identyczny na całej stronie.
• Formularze zapisu do newslettera - blok formularza zsynchronizowany między paskiem bocznym bloga a stopka.

#Zarządzanie wzorcami z panelu administracyjnego

Przejdź do Wygląd > Edytor > Wzorce (lub samodzielnego ekranu Wzorce pod adresem /wp-admin/edit.php?post_type=wp_block), aby przeglądać, edytować, duplikować, eksportować lub usuwać wzorce. Możesz również przekonwertować zsynchronizowany wzorzec na zwykły (niezsynchronizowany), otwierając go i wyłączając status synchronizacji.

#Wzorce blokowe i katalog wzorcow

Podczas gdy zsynchronizowane wzorce to Twoje własne komponenty wielokrotnego użytku, wzorce blokowe to wstepnie zaprojektówane układy, które wstawiasz i swobodnie dostosujesz. WordPress zawiera wbudowane wzorce (sekcje hero, siatki referencji, tabele cenowe, listy funkcji), a tysiace więcej jest dostepnych w oficjalnym katalogu wzorcow na wordpress.org/patterns.

#Uzywanie wzorcow z katalogu

1. Otworz panel wstawiania i kliknij zakladke Wzorce.
2. Przegladaj kategorie lub wyszukuj wedlug słów kluczowych.
3. Kliknij wzorzec, aby wstawic go do edytora.
4. Zmodyfikuj tekst, obrazy, kolory i odstepy, aby dopasowac je do Twojej marki.

Ponieważ wzorce stają się niezależnymi kopiami po wstawieniu, możesz zmienić każdy detal bez wpływu na oryginał.

#Rejestrowanie własnego wzorca blokowego w PHP

Motywy i wtyczki mogą rejestrować wzorce programowo. Oto minimalny przykład w functions.php:

<?php
declare(strict_types=1);

add_action('init', function (): void {
    register_block_pattern(
        'wppoland/hero-with-cta',
        [
            'title'       => __('Hero z CTA', 'wppoland'),
            'description' => __('Sekcja hero na pełna szerokosc z naglowkiem, akapitem i przyciskiem.', 'wppoland'),
            'categories'  => ['featured', 'banner'],
            'keywords'    => ['hero', 'cta', 'banner'],
            'content'     => '
                <!-- wp:cover {"overlayColor":"contrast","isUserOverlayColor":true,"minHeight":500,"align":"full"} -->
                <div class="wp-block-cover alignfull" style="min-height:500px">
                    <span class="wp-block-cover__background has-contrast-background-color"></span>
                    <div class="wp-block-cover__inner-container">
                        <!-- wp:heading {"textAlign":"center","level":1} -->
                        <h1 class="wp-block-heading has-text-align-center">Twój nagłówek tutaj</h1>
                        <!-- /wp:heading -->
                        <!-- wp:paragraph {"align":"center"} -->
                        <p class="has-text-align-center">Tekst wspierajacy, który wyjasnia propozycje wartosci.</p>
                        <!-- /wp:paragraph -->
                        <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
                        <div class="wp-block-buttons">
                            <!-- wp:button -->
                            <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Rozpocznij</a></div>
                            <!-- /wp:button -->
                        </div>
                        <!-- /wp:buttons -->
                    </div>
                </div>
                <!-- /wp:cover -->
            ',
        ]
    );
});

Od WordPress 6.0 można również umieszczac pliki wzorcow w katalogu patterns/ w głównym katalogu motywu. Każdy plik uzywa komentarza naglowkowego do metadanych i zwraca znaczniki blokowe, umożliwiając automatyczna rejestracje bez register_block_pattern().

#Full site editing: jak Site Editor zastępuje Customizer

Full site editing (FSE) to ogólne określenie uzywania bloków do kontrolowania każdej części strony - nie tylko treści wpisów, ale także naglowkow, stopek, paskow bocznych, układów archiwow i stron 404. Funkcja była wdrazana stopniowo w WordPress 5.9 do 6.5 i jest teraz standardowym podejsciem dla motywow blokowych.

#Co zastępuje full site editing

#Dostęp do edytora witryny

Po aktywacji motywu blokowego przejdź do Wygląd > Edytor. Interfejs otwiera się w podglądzie wizualnym. Z lewego paska bocznego możesz przejść do:

• Szablony - index, single, page, archive, 404, search, home i dowolne szablony własne
• Części szablonów - nagłówek, stopka, pasek boczny i części własne
• Wzorce - wszystkie zarejestrowane i utworzone przez użytkownika wzorce
• Style - globalna typografia, kolory, odstepy i nadpisania stylow poszczegolnych bloków
• Nawigacja - zarządzanie menu oparte na bloku nawigacji

Każda zmiana jest podglądana na żywo i zapisywana w bazie danych. Dla deweloperów motywow zmiany mogą być eksportowane jako pliki motywu w celu kontroli wersji.

#Tworzenie własnych szablonów i części szablonów

Szablony definiują strukture typu strony. Części szablonów to wielokrotnego użytku fragmenty (nagłówek, stopka) współdzielone między szablonami.

#Tworzenie szablonu w Site Editor

1. Otwórz Wygląd > Edytor > Szablony.
2. Kliknij Dodaj nowy szablon.
3. Wybierz typ szablonu (strona, pojedynczy wpis, kategoria, autor, własny).
4. Zbuduj układ za pomocą bloków: dodaj część szablonu nagłówka na górze, pętlę zapytań dla wpisów, część szablonu stopki na dole.
5. Zapisz.

#Format znaczników szablonów

Pod spodem każdy szablon to plik HTML że znacznikami blokowymi. Oto uproszczony templates/single.html:

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-featured-image /-->
    <!-- wp:post-content /-->
    <!-- wp:post-terms {"term":"category"} /-->
    <!-- wp:post-terms {"term":"post_tag"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

Części szablonów znajdują się w katalogu parts/. Plik parts/header.html może wyglądać tak:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","justifyContent":"space-between"}} -->
<header class="wp-block-group">
    <!-- wp:site-title /-->
    <!-- wp:navigation /-->
</header>
<!-- /wp:group -->

Ta struktura eliminuje tagi szablonów PHP (get_header(), the_title(), the_content()) na rzecz deklaratywnych znaczników blokowych. Rezultatem jest motyw, który projektanci i redaktorzy treści mogą modyfikować bezpośrednio w Site Editor.

#Podstawy konfiguracji theme.json

theme.json to pojedynczy plik konfiguracyjny, który kontroluje, co edytor udostepnia i jak wyglada front-end. Znajduje się w katalogu głównym motywu blokowego.

#Minimalny przykład theme.json

{
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#1e40af", "name": "Primary" },
        { "slug": "secondary", "color": "#9333ea", "name": "Secondary" },
        { "slug": "base", "color": "#ffffff", "name": "Base" },
        { "slug": "contrast", "color": "#1a1a1a", "name": "Contrast" }
      ],
      "gradients": [],
      "defaultPalette": false,
      "defaultGradients": false
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "slug": "body",
          "name": "Body"
        },
        {
          "fontFamily": "'Space Grotesk', sans-serif",
          "slug": "heading",
          "name": "Heading"
        }
      ],
      "fontSizes": [
        { "slug": "small", "size": "0.875rem", "name": "Small" },
        { "slug": "medium", "size": "1rem", "name": "Medium" },
        { "slug": "large", "size": "1.5rem", "name": "Large" },
        { "slug": "x-large", "size": "2.25rem", "name": "Extra Large" }
      ]
    },
    "spacing": {
      "units": ["rem", "vh", "vw", "%"],
      "spacingSizes": [
        { "slug": "10", "size": "0.5rem", "name": "Tiny" },
        { "slug": "20", "size": "1rem", "name": "Small" },
        { "slug": "30", "size": "1.5rem", "name": "Medium" },
        { "slug": "40", "size": "2.5rem", "name": "Large" },
        { "slug": "50", "size": "4rem", "name": "Extra Large" }
      ]
    },
    "layout": {
      "contentSize": "720px",
      "wideSize": "1200px"
    },
    "appearanceTools": true
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--base)",
      "text": "var(--wp--preset--color--contrast)"
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--body)",
      "fontSize": "var(--wp--preset--font-size--medium)",
      "lineHeight": "1.6"
    },
    "elements": {
      "heading": {
        "typography": {
          "fontFamily": "var(--wp--preset--font-family--heading)",
          "fontWeight": "700"
        }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--primary)"
        }
      }
    },
    "blocks": {
      "core/button": {
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--base)"
        },
        "border": {
          "radius": "4px"
        }
      }
    }
  }
}

#Omowienie kluczowych sekcji

• version - zawsze uzywaj 3 dla WordPress 6.6 i nowszych.
• settings - definiuje, jakie kontrolki pojawiają się w edytorze: palety kolorów, rodziny czcionek, rozmiary czcionek, presety odstępów, szerokości układu i przełączniki funkcji.
• styles - stosuje domyslne wartości CSS do korzenia, elementow (naglowki, linki, przyciski, podpisy) i poszczegolnych bloków.
• appearanceTools - skrot włączajacy kontrolki obramowania, odstępów, typografii i wymiarow w panelu bocznym.

Silnik konwertuje theme.json na właściwości niestandardowe CSS (takie jak --wp--preset--color--primary), które kaskadowo przepływają przez cala stronę. Oznacza to, że jeden plik zarzadza tokenami projektówymi zarowno dla edytora, jak i front-endu.

#Najlepsze wtyczki blokowe dla WordPress w 2026

Podstawowy edytor pokrywa większość potrzeb, ale wtyczki blokowe firm trzecich wyw pełniają luki zaawansowanymi układami, kontrolkami projektówymi i specjalistycznymi blokami.

#Spectra (dawniej Ultimate Addons for Gutenberg)

Stworzona przez Brainstorm Force (zespół stojący za wtyczką Starter Templates), Spectra dodaje ponad 30 bloków: liczniki czasu, oceny gwiazdkowe, listy ikon, cenniki, modale, zakładki i w pełni funkcjonalny blok formularzy. Zawiera blok kontenera z trybami układu flex i grid, co czyni go odpowiednim do złożonych projektów stron bez tradycyjnego page buildera. Ceny są ustalane indywidualnie w zależności od poziomu funkcji.

#GenerateBlocks

Stworzony przez zespół GeneratePress, GenerateBlocks przyjmuje minimalistyczne podejście: cztery podstawowe bloki (kontener, nagłówek, przyciski, obraz), które polegają na elastycznych ustawieniach zamiast dziesiatek bloków jednorazowego użytku. Rezultatem jest lekki wynik z minimalnym CSS. Zaawansowani użytkownicy doceniają integracje z petla zapytań i system dynamicznych danych, który pobiera meta wpisów, pola niestandardowe i dane taksonomii do układów blokowych.

#Stackable

Stackable oferuje ponad 40 bloków z biblioteka wizualna zawierająca ponad 200 gotowych układów. Jego wyróżniająca cecha jest zunifikowany system projektówy, w którym globalna typografia, palety kolorów i skale odstępów automatycznie propagują do każdego bloku Stackable. Darmowa wersja pokrywa większość zastosowan, a wersja premium dodaje dynamiczna treść, warunkowe wyświetlanie i efekty ruchu.

#Kadence Blocks

Kadence Blocks zapewnia system układu wierszy/kolumn, zaawansowany blok nagłówka, boxy informacyjne, listy ikon, spis treści i blok formularzy. Biblioteka projektówa zawiera wzorce calych stron i sekcji. Kadence szczególnie dobrze współpracuje z motywem Kadence, wspoldzielac system tokenow projektówych. Ceny wersji pro są ustalane indywidualnie i zaleza od liczby stron.

#Wybor odpowiedniej wtyczki

Wybierz GenerateBlocks dla projektów wymagających wydajności, Spectra lub Stackable dla stron z wymagającym designem, a Kadence Blocks gdy potrzebujesz silnego kreatora formularzy obok narzędzi układu.

#Budowa prostego motywu blokowego od podstaw

Laczac wszystko powyzsze, przedstawiamy krok po kroku instrukcje tworzenia minimalnego motywu blokowego.

#Krok 1: struktura katalogów

my-block-theme/
  style.css
  theme.json
  functions.php
  templates/
    index.html
    single.html
    page.html
    404.html
  parts/
    header.html
    footer.html
  patterns/
    hero-banner.php

#Krok 2: nagłówek style.css

/*
Theme Name: My Block Theme
Theme URI: https://wppoland.com
Author: wppoland.com
Author URI: https://wppoland.com
Description: Minimalny motyw blokowy do nauki full site editing.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-block-theme
*/

Dodatkowy CSS nie jest tu potrzebny. Cale stylowanie przepływają przez theme.json i system globalnych stylow.

#Krok 3: theme.json

Uzyj przykladu z wczesniejszej sekcji. Dostosuj palete kolorów i typografie do swojej marki.

#Krok 4: szablony

templates/index.html (szablon zastepczy):

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:query {"queryId":1,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","inherit":true}} -->
    <div class="wp-block-query">
        <!-- wp:post-template -->
            <!-- wp:post-title {"isLink":true} /-->
            <!-- wp:post-excerpt /-->
            <!-- wp:post-date /-->
        <!-- /wp:post-template -->
        <!-- wp:query-pagination -->
            <!-- wp:query-pagination-previous /-->
            <!-- wp:query-pagination-numbers /-->
            <!-- wp:query-pagination-next /-->
        <!-- /wp:query-pagination -->
    </div>
    <!-- /wp:query -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

templates/404.html:

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:heading {"level":1} -->
    <h1 class="wp-block-heading">Strona nie znaleziona</h1>
    <!-- /wp:heading -->
    <!-- wp:paragraph -->
    <p>Strona, której szukasz, nie istnieje. Sprobuj wyszukac lub wroc na strone główna.</p>
    <!-- /wp:paragraph -->
    <!-- wp:search {"label":"Szukaj","buttonText":"Szukaj"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

#Krok 5: części szablonów

parts/header.html:

<!-- wp:group {"tagName":"header","style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"layout":{"type":"constrained"}} -->
<header class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20)">
    <!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
    <div class="wp-block-group">
        <!-- wp:site-title /-->
        <!-- wp:navigation {"layout":{"type":"flex"}} /-->
    </div>
    <!-- /wp:group -->
</header>
<!-- /wp:group -->

parts/footer.html:

<!-- wp:group {"tagName":"footer","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"backgroundColor":"contrast","textColor":"base","layout":{"type":"constrained"}} -->
<footer class="wp-block-group has-base-color has-contrast-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
    <!-- wp:paragraph {"align":"center","fontSize":"small"} -->
    <p class="has-text-align-center has-small-font-size">Zbudowane z WordPress i blokami.</p>
    <!-- /wp:paragraph -->
</footer>
<!-- /wp:group -->

#Krok 6: automatycznie rejestrowany wzorzec

patterns/hero-banner.php:

<?php
/**
 * Title: Baner hero
 * Slug: my-block-theme/hero-banner
 * Categories: featured, banner
 * Keywords: hero, cta, landing
 */
?>

<!-- wp:cover {"overlayColor":"primary","isUserOverlayColor":true,"minHeight":480,"align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:480px">
    <span class="wp-block-cover__background has-primary-background-color"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"textAlign":"center","level":1,"textColor":"base"} -->
        <h1 class="wp-block-heading has-text-align-center has-base-color has-text-color">Witaj w My Block Theme</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"base"} -->
        <p class="has-text-align-center has-base-color has-text-color">Lekki motyw WordPress oparty na blokach.</p>
        <!-- /wp:paragraph -->
        <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
        <div class="wp-block-buttons">
            <!-- wp:button {"backgroundColor":"base","textColor":"primary"} -->
            <div class="wp-block-button"><a class="wp-block-button__link has-primary-color has-base-background-color has-text-color has-background wp-element-button">Dowiedz się więcej</a></div>
            <!-- /wp:button -->
        </div>
        <!-- /wp:buttons -->
    </div>
</div>
<!-- /wp:cover -->

#Krok 7: functions.php (opcjonalne ulepszenia)

<?php
declare(strict_types=1);

add_action('after_setup_theme', function (): void {
    add_theme_support('wp-block-styles');
    add_theme_support('editor-styles');
    add_editor_style('style.css');
});

add_action('wp_enqueue_scripts', function (): void {
    wp_enqueue_style(
        'my-block-theme-style',
        get_stylesheet_uri(),
        [],
        wp_get_theme()->get('Version')
    );
});

Wgraj folder do wp-content/themes/, aktywuj go i otwórz Wygląd > Edytor. Masz teraz w pełni funkcjonalny motyw blokowy, w którym każdy szablon, wzorzec i styl można edytować z poziomu przeglądarki.

#Zaawansowane wskazowki dla rozwoju opartego na blokach

#Blokuj bloki, aby zapobiec przypadkowym edycjom

Podczas budowania szablonów dla klientów zablokuj bloki, aby ograniczyć ich przesuwanie i usuwanie:

<!-- wp:group {"lock":{"move":true,"remove":true}} -->
<div class="wp-block-group">
    <!-- wp:paragraph -->
    <p>Ten blok nie może być przesuwany ani usuwany przez redaktorow.</p>
    <!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

Treść wewnatrz zablokowanych bloków pozostaje edytowalna, ale integralność strukturalna zostaje zachowana.

#Uzywaj wariacji bloków dla spojności

Rejestruj wariacje bloków, aby zapewnić wstepnie skonfigurowane instancje bloków podstawowych. Na przykład wariacja “czlonek zespołu” bloku media-and-text:

<?php
add_action('enqueue_block_editor_assets', function (): void {
    wp_add_inline_script(
        'wp-blocks',
        "wp.blocks.registerBlockVariation('core/media-text', {
            name: 'team-member',
            title: 'Team Member',
            attributes: {
                mediaPosition: 'left',
                verticalAlignment: 'center',
            },
            scope: ['inserter'],
        });"
    );
});

Wariacje pojawiają się jako oddzielne bloki w panelu wstawiania, wspoldzielac kod bloku nadrzednego.

#Wykorzystaj pakiet create-block

Dla własnych bloków wykraczajacych poza to, co oferują wzorce i wariacje, uzyj oficjalnego narzędzia scaffoldingowego @wordpress/create-block:

npx @wordpress/create-block my-custom-block --variant dynamic

Generuje to wtyczke z narzędziami budowania (webpack, Babel, ESLint), funkcja edit oparta na React i render_callback w PHP do dynamicznego renderowania po stronie serwera. Jest to zalecana ścieżka dla każdego bloku, który musi pobierac dane, wykonywać zapytania lub wyświetlać dynamiczna treść.

#Czeste błędy i jak ich unikac

Mieszanie klasycznych i blokowych szablonów. Motyw jest albo motywem blokowym, albo klasycznym. Umieszczenie index.php obok templates/index.html tworzy nieprzewidywalne zachowanie awaryjne. Zdecyduj się na jedno podejście na motyw.

Nadpisywanie theme.json za pomocą inline CSS. Style inline omijają kaskade globalnych stylow i psuja kontrolki stylow Site Editor. Zawsze uzywaj presetow theme.json i właściwości niestandardowych CSS.

Ignorowanie katalogu patterns. Wielu deweloperów nadal rejestruje wzorce wyłącznie przez PHP. Katalog patterns/ z nagłówkami plikow jest prostszy, nie wymaga rejestracji hookow i oddziela znaczniki wzorcow od logiki.

Zapominanie o testowaniu z różnymi rolami użytkowników. Redaktorzy i Autorzy widzą przefiltrowana wersję edytora blokowego. Edycja szablonów, globalne style i niektóre bloki mogą być ukryte w zależności od uprawnień. Zawsze weryfikuj doświadczenie edycji dla każdej roli, która będzie z niego korzystac.

Brak eksportowania zmian z Site Editor. Modyfikacje dokonane w przegladarce są przechowywane w bazie danych. Jeśli wdrozysz motyw ponownie bez eksportowania tych zmian do plikow, znikna. Uzyj funkcji eksportu Site Editor lub polecenia wp theme export WP-CLI, aby zsynchronizowac zmiany z kontrola wersji.

#Przyszlość bloków w WordPress

Projekt Gutenberg jest podzielony na cztery fazy: latwiejsza edycja (wydana), personalizacja (obecna, FSE), współpraca (w toku) i wielojęzyczność (planowana). Faza 3, współpraca w czasie rzeczywistym, wprowadźi jednoczesna edycje w stylu Google Docs do edytora blokowego. Faza 4 ma na celu uczynienie WordPress natywnie wielojęzycznym bez wtyczek.

Motywy blokowe są już domyslne dla nowych instalacji WordPress. Klasyczne motywy pozostają wspierane, ale nowe API i narzędzia projektówe koncentrują się na paradygmacie blokowym. Inwestowanie w umiejetności oparte na blokach już teraz przygotowuje Twój zespół na każde większe wydanie WordPress do 2028 roku i dalej.

#Jak wppoland.com podchodzi do rozwoju blokowego

W wppoland.com każdy projekt klienta budujemy w oparciu o architekture blokowa. Nasz proces pracy zaczyna się od tokenow projektówych w theme.json, przechodzi do własnych wzorcow blokowych dla powtarzajacych się sekcji i konczy na zablokowanych szablonach, które daja redaktorom treści swobode bez ryzyka naruszenia struktury.

Dla projektów wymagających bloków wykraczajacych poza to, co oferuje rdzen i istniejace wtyczki, tworzymy własne bloki za pomocą zestawu narzędzi @wordpress/create-block, z renderowaniem po stronie serwera dla dynamicznej treści i pełna integracja z globalnymi stylami Site Editor.

Jeśli potrzebujesz własnego motywu blokowego, migracji z klasycznego motywu do full site editing lub dedykowanego rozwoju bloków dla Twojego procesu publikacji treści, skontaktuj się z zespolem wppoland.com. Dostarczamy rozwiązania blokowe dostosowane do Twoich wymogow redakcyjnych i biznesowych, z cenami ustalanymo indywidualnie w zależności od zakresu projektu.