Registrera ett blockmönster i WordPress Block Editor (Gutenberg)

Blockmönster i WordPress block editor (Gutenberg) är en kraftfull funktion som låter dig skapa varierade layouter med mycket liten ansträngning.

Med hjälp av register_block_patternkan du mycket snabbt skapa ett blockmönster för dig eller dina kunder.

Förutsättningar

• WordPress installation
• Kodredigerare

Skapa ditt blockmönster

Du bygger blockmönster av de block du har registrerat på din sida. Dessa kan vara kärnblock eller valfritt antal tredje part eller anpassade block.

Börja med att använda WordPress-redigeraren för att bygga en blocklayout. Du kan använda inställningarna för att göra detta så komplicerat eller så enkelt som du vill.

I det här exemplet ska vi hålla det enkelt och helt enkelt skapa ett blockmönster som är strukturerat enligt följande:

• Gruppblock
  • Rubrik
  • Paragraf
  • Kolumner
    • Kolumn 1
      • Rubrik
      • Paragraf
    • Kolumn 2
      • Rubrik
      • Paragraf

När du har byggt ditt blockmönster, kopiera helt enkelt koden som har genererats åt dig.

Kopiera blockmönsterkoden

För att göra detta, gå till de tre prickarna uppe till höger i editorn (märkta med Options) och välj ’Code Editor’. Detta kommer att visa HTML bakom blockmönstret du just har skapat.

Kopiera den här koden till ditt urklipp.

Registrera blockmönstret

Klistra in denna blockredigeringskod i din kodredigerare. Om du är osäker på var kan du använda functions.phpditt tema.

Se till att du skickar in den till en variabel genom att placera enstaka citattecken (') runt den inklistrade texten, så här:

$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>
';

Du kan behöva göra lite flykt av karaktärerna, beroende på komplexiteten i ditt blockmönster.

Därefter måste vi överföra detta till register_block_patternfunktionen:

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,
    ],
);

Det är allt, blockmönstret registreras.

Bryta nedregister_block_pattern

• Namnutrymme — (wholesomecode/example-block-pattern) är namnutrymmet för blockmönstret. Se till att detta är unikt för ditt blockmönster. Om vi ​​någonsin behöver avregistrera blockmönstret är det här strängen vi kommer att behöva.
• Kategorier — Det här är blockmönsterkategorin som blockmönstret kommer att dyka upp i när vi infogar vårt blockmönster. Vi kan också lägga till våra egna kategorier.
• Innehåll — Detta är HTML som genererar blockmönstret. Det här exemplet använder variabeln som vi skapade från editorn.
• Beskrivning — En beskrivning av blockmönstret.
• Nyckelord — Nyckelord som kan användas för att söka efter blockmönstret.
• Titel — Titeln på blockmönstret.
• Viewport Width — Viewporten för blockmönstret, som används för förhandsgranskningsområdet.

Infoga blockmönstret

För att infoga blockmönstret, använd helt enkelt plustecknet längst upp till vänster i editorn och välj blockmönster.

Välj kategorin du registrerade ditt mönster i, så ska det visas.

Infoga blockmönstret

Alternativt kan du söka på de nyckelord du registrerat.

För att registrera en blockkategori, använd bara register_block_pattern_categoryfunktionen.

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

Då kan du använda kategorin du just har registrerat i din blockmönsterkod, så här:

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,
    ],
);

Nu när du kommer för att hitta ditt blockmönster, kommer det att finnas i din anpassade kategori:

Anpassad blockmönsterkategori

Nu kan du gruppera alla anpassade blockmönster som du just gjort för din kund på ett ställe.

• Behöver du något mer statiskt? Testa att registrera en blockmall istället
• Behöver du något som gäller barnblock? Testa att registrera en InnerBlocks-mall