Gutenbergin lohkokuviot: Kehittäjän ilme

Katsaus WordPress Gutenbergin uusiin lohkomalleihin kehittäjän silmissä. Tutkimme, mitä ne ovat, mihin niitä voidaan käyttää, ja tarkastelemme tarkemmin, kuinka niille kirjoitetaan koodi.

Block kuviot ja niiden käyttö

Lohkomallit otettiin käyttöön WordPress 5.5:ssä (11. elokuuta 2020). Ne ovat uusi ominaisuus lohkonsyöttäjässä, joka helpottaa useiden lohkojen ennalta määritetyn kokoonpanon lisäämistä. Teeman tai laajennuksen kehittäjät voivat määrittää ryhmän lohkoja, niiden sisäkkäisyyden, sisällön ja attribuutit, ja loppukäyttäjät voivat lisätä tämän yksinkertaisella yhden napsautustoiminnolla. Ajatuksena on, että loppukäyttäjien ei enää tarvitse luoda manuaalisesti monimutkaisia ​​asetteluja ja kaikkia mukautettuja asetuksiaan ja sijoittaa niitä oikeisiin säilöihin usein käyttämilleen lohkoille.

Kun lohkokuvio on lisätty editoriin, lohkot eivät tiedä, että ne on lisätty lohkokuvion kautta. Ne lisätään normaaleina lohkoina, joiden avulla käyttäjät voivat säätää sisältöä ja asetuksia. Se on pohjimmiltaan pikakuvake useiden lohkojen kokoonpanon lisäämiseksi.

Idea on hyvä! Kaikki loppukäyttäjät eivät halua luoda suurta sisäkkäisten lohkojen rakennetta editorissa, jotta se näyttää täydelliseltä. Kuitenkin toistaiseksi tämä ominaisuus on enimmäkseen hyödyksi kehittäjille, koska loppukäyttäjät eivät voi luoda omia mallejaan. Käyttäjien omien räätälöityjen lohkojen kohdalla heidän on käytettävä uudelleenkäytettäviä lohkoja. Mutta erityisesti teemakehittäjille lohkokuvioiden avulla he todella näyttävät loppukäyttäjille parhaan lohkokokoonpanon, joka toimii hyvin teemassa.

WordPress on lisännyt uuden teematuen lohkomalleille: 'core-block-patterns'. Core suorittaa versiosta 5.5.0 lähtien automaattisesti a, add_theme_support('core-block-patterns')joten sinun ei tarvitse tehdä tätä teemassasi.

Koska kaikki lohkokuvion toiminnot ovat olemassa vain hyvin uudessa WordPress-versiossa, on hyvä idea tarkistaa niiden olemassaolo ensin, jotta et riko sivustoja vanhemmilla WordPress-versioilla. Kaikissa alla olevissa koodiesimerkeissä olen tehnyt juuri niin.

WordPress 5.5 toimitetaan 9 ennalta määritetyllä lohkokuviolla (katso luettelo alla). Lohkokuviot näytetään kuvioluokissa (ydin lisää 5 luokkaa). Lohkokuvioluokat toimivat kuten viestiluokat; voit laittaa lohkokuvion useisiin luokkiin. Teema- ja laajennuskehittäjät voivat rekisteröidä omia lohkokuvioita ja lohkokuvioluokkia sekä poistaa ytimen rekisteröinnin. Katsotaanpa siis tarkemmin miten!

Lohkokuviot ja lohkokuvioluokat sisältyvät WordPress 5.5:een

WordPress 5.5:ssä toimitetut lohkomallit ovat seuraavat (kunkin mallin nimiavaruus ja slug-tunnus näytetään suluissa):

• Kaksi painiketta (’ core/two-buttons’)
• Kolme painiketta (’ core/three-buttons’)
• Kaksi tekstisaraketta (’ core/text-two-columns’)
• Kaksi saraketta tekstiä ja kuvia (’ core/text-two-columns-with-images’)
• Kolme saraketta tekstiä painikkeilla (’ core/text-three-columns-buttons’)
• Kaksi kuvaa vierekkäin (’ core/two-images’)
• Suuri otsikko, jossa on otsikko (’ core/large-header’)
• Suuri otsikko, jossa on otsikko ja painike (’ core/large-header-button’)
• Lainaus (’ core/quote’)

WordPress 5.5:een lisätyt luokat ovat (niiden slug-tunnukset näkyvät suluissa):

• Painikkeet (’ buttons’)
• Sarakkeet (’ columns’)
• Galleria (’ gallery’)
• Otsikot (" header’ – huomautus ei """ lopussa)
• Teksti (’ text’)

Peruutetaan lohkokuvioiden rekisteröintiä

Voit poistaa lohkokuvioiden rekisteröinnin toiminnolla [unregister_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern)(). Anna vain merkkijono, jossa on lohkokuvio, jonka haluat poistaa parametriksi. Katso ydinlohkokuviot yllä olevasta yleiskatsauksesta. Suorita tämä toiminto toimintoon kytketyn toiminnon sisällä init.

Esimerkki ydinlohkokuvioiden "Kaksi painiketta" ja "Kolme painiketta" rekisteröinnin poistamisesta:

add_action('init', function() {
    if (!function_exists('unregister_block_pattern')) {
        return;
    }
    unregister_block_pattern('core/two-buttons');
    unregister_block_pattern('core/three-buttons');
});

Lohkokuvioiden rekisteröinti

Uuden lohkokuvion rekisteröinti tapahtuu funktiolla [register_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern)(). Se hyväksyy kaksi parametria; ensimmäinen on merkkijono, jolla on yksilöllinen nimi kuviollesi, mukaan lukien nimiavaruus. Toinen on joukko asetuksia lohkokuviollesi.

Vihje: Lohkomallin määrittäminen edellyttää raaka-HTML-sisältöä lohkomäärityksiä varten. En suosittele tämän kirjoittamista manuaalisesti, koska se aiheuttaa helposti virheellisiä estoristiriitoja. Mene sen sijaan editoriin ja aseta lohkot haluamallasi tavalla kuvioosi. Napsauta sitten "pistevalikkoa" vanhemmuuden lohkon työkalupalkissa ja napsauta "Kopioi". Tämän jälkeen voit palata koodieditoriin ja liittää (Ctrl+V). Tämä antaa sinulle kopioimasi kokoonpanon raaka-HTML-koodin. Käytä koodieditorin toimintoa korvataksesi kaikki rivinvaihdot nja varmista, että käytät lainausmerkkejä oikein.

Lohkomallisi ominaisuudet ovat seuraavat (toinen argumenttitaulukko):

• title(pakollinen): lohkokuvion näytettävä nimi
• **content**(pakollinen): Lohkon määrityksen RAW HTML
• description: Kuvaus lohkokuviollesi. On visuaalisesti piilotettu
• categories: Joukko luokkia, joihin tämä lohkokuvio lisätään. Jos et anna tätä ominaisuutta, lohko sijoitetaan Luokittelematon lohkokuvioluokkaan.
• keywords: joukko avainsanoja, jotka voivat auttaa käyttäjiä löytämään mallisi haun aikana
• viewportWidth: Anna lisäyslaitteeseen lohkokuvion leveyden kokonaisluku. Vaikuttaa vain lisäyssovelluksen esikatseluun.

Tässä on esimerkki lohkokuvion rekisteröinnistä, joka koostuu täysleveästä Kansilohkosta, jolla on taustaväri, joka sisältää keskelle tasatun Otsikkolohkon tietyllä tekstivärillä ja keskelle tasatun kappaleen tietyllä tekstivärillä:

add_action('init', function() {
    if (!function_exists('register_block_pattern')) {
        return;
    }
    register_block_pattern('awp/standard-cta-section', [
        'title' => __('Standard CTA Section', 'awp'),
        'keywords' => ['cta'],
        'categories' => ['header'],
        'viewportWidth' => 1000,
        'content' => "<!-- wp:cover {"customOverlayColor":"#dadee2","align":"full"} -->n<div class="wp-block-cover alignfull has-background-dim" style="background-color:#dadee2"><div class="wp-block-cover__inner-container"><!-- wp:heading {"align":"center","level":1,"style":{"color":{"text":"#414446"}}} -->n<h1 class="has-text-align-center has-text-color" style="color:#414446">Section title</h1>n<!-- /wp:heading -->nn<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#414446"}}} -->n<p class="has-text-align-center has-text-color" style="color:#414446">Write your text here.</p>n<!-- /wp:paragraph --></div></div>n<!-- /wp:cover -->",
    ]);
});

Lohkokuvioiden luokkien rekisteröinti

Kehittäjät voivat myös rekisteröidä mukautettuja lohkokuvioluokkia. Tämä tehdään funktiolla [register_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern_category)(). Se hyväksyy kaksi parametria; ensin luokan slug merkkijono ja toiseksi joukko ominaisuuksia. Tällä hetkellä vain yksi ominaisuus on tuettu toisessa argumentissa; labelluokan luettavalle nimelle.

Alla on esimerkki mukautetun lohkomalliluokan rekisteröinnistä:

add_action('init', function() {
    if (!function_exists('register_block_pattern_category')) {
        return;
    }
    register_block_pattern_category('awp-patterns', ['label' => __('AWhitePixel Block Patterns', 'awp')]);
});

Tällä voit lisätä ’awp-patterns’ categoriesargumenttiin ’ ’ register_block_pattern(). Muista, että jos kategoriaan ei ole rekisteröity lohkokuvioita, luokkaa ei näytetä lohkon lisäyksessä. Sinun on lisättävä tähän luokkaan vähintään yksi lohkokuvio, jotta se tulee näkyviin.

Poistetaan lohkokuvioiden luokkien rekisteröinti

Lopuksi on toiminto [unregister_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern_category)()lohkokuvioluokan rekisteröinnin poistamiseksi. Anna luokka Slug parametriksi. Katso yllä olevasta lohkokuvioluokkien yleiskatsauksesta ydinluokkia ja niiden osia.

Älä unohda, että lohkokuvioluokat, joille ei ole määritetty lohkokuvioita, eivät näy lohkon lisäyksessä. Joten jos poistat kaikki luokkaan määritetyt estomallit, itse luokka ei ole enää näkyvissä, eikä sinun välttämättä tarvitse poistaa luokan rekisteröintiä. Kaikki estomallit, jotka on määritetty vain poistettavalle luokkalle, siirretään Luokittelematon-luokkaan.

Tässä on esimerkki ydinlohkokuviokategorian painikkeiden rekisteröinnin poistamisesta:

add_action('init', function() {
    if (!function_exists('unregister_block_pattern_category')) {
        return;
    }
    unregister_block_pattern_category('buttons');
});

Johtopäätös

WordPress Gutenbergin uusi lohkokuvioominaisuus on ehdottomasti askel lähempänä lohkoeditorin toimivuutta sivujen rakentajana. Huonona puolena on mielestäni se, että loppukäyttäjät eivät voi luoda omia mallejaan. Mutta se on hyvä toiminto teeman kehittäjille, koska sen avulla loppukäyttäjät voivat helposti määrittää lohkokokoonpanoja ja asetteluja, jotka toimivat hyvin teemassa. Tämä on aivan uusi ominaisuus, ja sitä todennäköisesti kehitetään ja parannetaan lähitulevaisuudessa! En malta odottaa!