Zarejestruj wzór bloku w edytorze bloków WordPress (Gutenberg)

Wzory bloków w edytorze bloków WordPress (Gutenberg) to potężna funkcja, która pozwala tworzyć różnorodne układy przy niewielkim wysiłku.

Za jego pomocą register_block_patternmożesz bardzo szybko stworzyć wzór blokowy dla siebie lub swoich klientów.

Warunki wstępne

• Instalacja WordPress
• Edytor kodu

Stwórz swój wzór blokowy

Budujesz wzorce blokowe z bloków, które zarejestrowałeś w swojej witrynie. Mogą to być bloki podstawowe lub dowolna liczba bloków innych firm lub bloków niestandardowych.

Zacznij od użycia edytora WordPress do zbudowania układu blokowego. Możesz użyć ustawień, aby uczynić to tak złożonym lub tak prostym, jak chcesz.

W tym przykładzie zachowamy prostotę i po prostu utworzymy wzór blokowy, który jest następującymi strukturami:

• Blok grupowy
  • Nagłówek
  • Ustęp
  • Kolumny
    • Kolumna 1
      • Nagłówek
      • Ustęp
    • Kolumna 2
      • Nagłówek
      • Ustęp

Po zbudowaniu wzorca blokowego po prostu skopiuj kod, który został dla Ciebie wygenerowany.

Skopiuj kod wzoru blokowego

Aby to zrobić, przejdź do trzech kropek w prawym górnym rogu edytora (oznaczonych jako Opcje) i wybierz „Edytor kodu". Spowoduje to wyświetlenie kodu HTML za utworzonym wzorcem blokowym.

Skopiuj ten kod do schowka.

Zarejestruj wzór blokowy

Wklej ten kod edytora bloku do edytora kodu. Jeśli nie masz pewności, gdzie, możesz użyć functions.phpswojego motywu.

Upewnij się, że przekazujesz go do zmiennej, umieszczając pojedyncze cudzysłowy (') wokół wklejonego tekstu, na przykład:

$block_pattern_content = '
<div class="wp-block-group"><div class="wp-block-group__inner-container">
<h2>Example Block Pattern</h2>

<p>Lorem ipsum dolor sit amet labore cras venenatis.</p>

<div class="wp-block-columns">
<div class="wp-block-column">
<h3>Sub Heading 1</h3>

<p>Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.</p>
</div>

<div class="wp-block-column">
<h3>Sub Heading 2</h3>

<p>Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.</p>
</div>
</div>
</div></div>
';

Może być konieczne wykonanie ucieczki znaków, w zależności od złożoności wzoru bloku.

Następnie musimy przekazać to do register_block_patternfunkcji:

register_block_pattern(
    'wholesomecode/example-block-pattern',
    [
        'categories'    => [
            'text',
        ],
        'content'       => $block_pattern_content,
        'description'   => 'An example block pattern',
        'keywords'      => 'example',
        'title'         => 'Example Block Pattern',
        'viewportWidth' => 800,
    ],
);

To wszystko, wzór blokowy jest zarejestrowany.

Załamanieregister_block_pattern

• Przestrzeń nazw — (wholesomecode/example-block-pattern) to przestrzeń nazw wzorca blokowego. Upewnij się, że jest to unikalne dla twojego wzoru blokowego. Jeśli kiedykolwiek będziemy musieli wyrejestrować wzór blokowy, to jest to ciąg, którego będziemy potrzebować.
• Kategorie — jest to kategoria wzorców blokowych, w której pojawi się wzorzec blokowy, gdy wstawimy nasz wzorzec blokowy. Możemy również dodawać własne kategorie.
• Treść — To jest kod HTML, który generuje wzór blokowy. W tym przykładzie użyto zmiennej, którą utworzyliśmy z edytora.
• Opis — opis wzoru blokowego.
• Słowa kluczowe — słowa kluczowe, których można użyć do wyszukania wzorca blokowego.
• Tytuł — Tytuł wzoru blokowego.
• Szerokość rzutni — rzutnia wzoru bloku używana w obszarze podglądu.

Wstaw wzór blokowy

Aby wstawić wzór blokowy, po prostu użyj znaku plus w lewym górnym rogu edytora i wybierz wzór blokowy.

Wybierz kategorię, w której zarejestrowałeś swój wzór, i powinien się pojawić.

Wstawianie wzoru blokowego

Alternatywnie możesz wyszukiwać według zarejestrowanych słów kluczowych.

Aby zarejestrować kategorię bloku, wystarczy użyć register_block_pattern_categoryfunkcji.

register_block_pattern_category(
    'my-client',
    [
        'label' => esc_html__( 'My Client Patterns', 'wholesome-plugin' ),
    ]
);

Następnie możesz użyć kategorii, którą właśnie zarejestrowałeś w swoim kodzie wzoru blokowego, na przykład:

register_block_pattern(
    'wholesomecode/example-block-pattern',
    [
        'categories'    => [
            'my-client',
        ],
        'content'       => $block_pattern_content,
        'description'   => 'An example block pattern',
        'keywords'      => 'example',
        'title'         => 'Example Block Pattern',
        'viewportWidth' => 800,
    ],
);

Teraz, gdy znajdziesz swój wzór blokowy, będzie on znajdować się w Twojej niestandardowej kategorii:

Kategoria niestandardowego wzoru bloku

Teraz możesz zgrupować w jednym miejscu wszystkie niestandardowe wzory bloków, które właśnie stworzyłeś dla swojego klienta.

• Potrzebujesz czegoś bardziej statycznego? Spróbuj zamiast tego zarejestrować szablon blokowy
• Potrzebujesz czegoś, co dotyczy bloków podrzędnych? Spróbuj zarejestrować szablon InnerBlocks