Onneksi WordPress-kehitystiimillä on kätevä npm komentosarja, jolla voit luoda lohkolaajennuksen, joka luo aloituslohkon, jotta pääset nopeasti käyntiin.

Oletuksena tämän luoma WordPress-laajennus on "blokki", mutta se antaa meille myös hyvän aloituskohdan muunlaisille Gutenberg-laajennuksille.

Edellytykset

Node on asennettava koneellesi, jotta voit käyttää npmkomentoa (joka tarkoittaa Node Package Manageria)
WordPressin asennus
Koodieditori
Pääsy terminaaliin

Luo laajennus

Kun olet asentanut solmun koneellesi, sinulla pitäisi olla pääsy npmkomentoon päätteessäsi.

Avaa päätelaite ja varmista, että olet valinnut cd’d (Changed Directory) WordPress-asennuksesi plugins-kansioon (esim cd wp-content/plugins. ).

Kun olet siellä, suorita seuraava komento:

npm init @wordpress/block

Tämä lataa kaiken, mitä komentosarja tarvitsee rakentamisen aloittamiseksi. Kun se on valmis, skripti kysyy sinulta joukon kysymyksiä, joita tarvitaan laajennuksen määrittämiseen.

Päätteen käyttäminen Luo komentosarjan suorittamiseen

Määrityskysymykset

Käsikirjoitus kysyy seuraavat kysymykset, tässä ovat esimerkkivastaukseni:

Tunnistamiseen käytetty lohkoslug (myös laajennuksen ja tuloskansion nimi) — Haluan, että lohkoani kutsutaan nimellä Wholesome Plugin, joten kirjoitin wholesome-plugin.
Lohkon nimen sisäinen nimiavaruus (jotain ainutlaatuista tuotteillesi) – Tämän pitäisi olla yksilöllinen kaikille syöttämilleni tuotteille wholesomecode, koska tämä on yritykseni nimi.
Lohkosi näyttöotsikko — annoin laajennuksen otsikon, Wholesome Plugin.
Lohkosi lyhyt kuvaus (valinnainen) — kirjoitin " An example plugin to demonstrate the create-block-script".
Dashicon, joka helpottaa lohkosi tunnistamista (valinnainen) — Valitsin WordPress Dashicons -resurssinadmin-plugins nopeasti esiin, koska siinä on laajennuskuvake. Muista jättää dashicon- etuliitteestä pois tätä tehdessäsi.
Luokan nimi, joka auttaa käyttäjiä selaamaan ja löytämään lohkosi (käytä nuolinäppäimiä) – valitsin design. Vaikka mukautettu luokka olisi todennäköisesti parempi.
Laajennuksen tekijän nimi (valinnainen). Useita kirjoittajia voidaan luetteloida pilkuilla — kirjoitin wholesomecode.
Laajennuksen lisenssin lyhyt nimi (valinnainen) – Painoin Enter hyväksyäkseni GPL v2.0:n tai uudemman.
Linkki lisenssin koko tekstiin (valinnainen) – Painoin enteriä lisätäkseni GPL v2.0 -lisenssin URL-osoitteen.
Laajennuksen nykyinen versionumero — Painoin enteriä lisätäkseni 0.1.0.

Komentosarjan konfigurointikysymykset

Skripti päättyy sen jälkeen.

Mitä juuri tapahtui?

Muutamia asioita tapahtuu, kun komentosarja on käynnissä, nämä ovat:

Se luo laajennuksen kansion,
Se luo kaikki liitännäistiedostot (katso lisäosien tutkiminen saadaksesi lisätietoja niiden toiminnasta )
Se asentaa tarvitsemansa riippuvuudet, mukaan lukien @wordpress/scriptspaketin (tämä tekee laajennuksen rakentamisesta raskaan)
Se kokoaa koodin
Se tulostaa luettelon komennoista, joita voit käyttää

Rakenna komentoja

Tutkimme näitä lisää laajennuksia käsittelevässä osiossa.

Pluginin käyttäminen

Ennen kuin voit käyttää laajennusta, sinun on aktivoitava se. Voit tehdä tämän valitsemalla PluginsWordPressin järjestelmänvalvojan valikosta ja valitsemalla sitten activatelaajennuksen nimen alta.

Aktivoi Plugin

Nyt sinun on muokattava viestiä WordPressissä ja lisättävä laajennus Gutenberg-editorilla.

Lohkon lisääminen viestiin

Huomaa, että laajennus ei tee paljon oletusarvoa, se vain luo lohkon. Se tarjoaa kuitenkin puitteet, joita voit käyttää oman laajennuksen rakentamiseen.

Lohkon katselu käyttöliittymässä

Oletuksena lohko näyttää tältä etupäässä. Huomaa, että sillä on hieman erilainen ulkoasu, tämä on tarkoituksellista, jotta voit tutustua WordPressin etu- ja takaosan CSS:ään.

Block etupäässä

Pluginin tutkiminen

Luo lohkokomentosarjan koko tarkoitus on, että voit luoda oman laajennuksen. Tutkitaanpa yksityiskohtaisemmin sen luomia tiedostoja:

Luodut tiedostot

wholesome-plugin— Tämä on laajennuksen juurikansio, sillä on sama nimi kuin se, jonka annoin ’slug’:lle asennuskysymyksissä.

**/build**— Tämä on koontikansio. Se sisältää kaikki /srckansiosta luodut JavaScript- ja PHP-resurssit. Nämä asetetaan jonoon päälataustiedoston kautta wholesome-notes.php.

**/build/index.assets.php**— Tämä PHP-tiedosto luodaan automaattisesti, kun /srckansio käännetään. Se sisältää joukon kaikkia laajennuksen käyttämiä WordPress Editorin (Gutenberg) JavaScript-syvyyksiä. Se asetetaan jonoon päälataustiedoston kautta wholesome-plugin.php.

**/build/index.css**— Tämä on editorin CSS-tiedosto, ja se asetetaan jonoon päälataustiedoston kautta wholesome-plugin.php.

**/build/index.js**— Tämä on tärkein käännetty JavaScript-tiedosto, ja se asetetaan jonoon päälataustiedoston kautta wholesome-plugin.php.

**/build/style-index.css**— Tämä on käyttöliittymän CSS-tiedosto, ja se asetetaan jonoon päälataustiedoston kautta wholesome-plugin.php.

**/build/index.js.map**— Tämä tiedosto luodaan vain, kun käännät resursseja kehitystilaa varten (IE käytät, npm startetkä npm buildkun käännät resursseja. Se on hyödyllinen tiedosto JavaScript-virheenkorjaajille, joka auttaa tunnistamaan tiedostojen nimet ja rivinumerot virheiden sattuessa.

**/node_modules**— Tämä on kansio, johon kaikki laajennuksen JavaScript-riippuvuudet on asennettu.
**/src**— Tämä on kansio, joka sisältää kaikki laajennukseesi kääntämättömät resurssit.
**/src/edit.js**— Tämä on lohkon muokkaustoiminto ja ohjaa, kuinka lohko näytetään lohkoeditorissa, kun se on muokkaustilassa.
**/src/editor.scss**— Tämä on kääntämätön SCSS editorille, tämä käännetään osaksi /build/index.css.
**/src/index.js**— Tämä on tärkein kääntämätön JavaScript-tiedosto WordPress Editor (Gutenberg) -lohkollesi. Se rekisteröi lohkon ja sisältää oletusasetukset.
**/src/save.js**— Tämä on lohkon tallennustoiminto ja ohjaa lohkon merkintöjä, kun se tallennetaan.
**/src/style.scss**— Tämä on kääntämätön SCSS käyttöliittymälle, tämä käännetään osaksi /build/style-index.css.
**/.editorconfig**— Tämä tiedosto sisältää hyödyllisiä esiasetuksia IDE:lle (Integrated Development Environment), kuten Visual Studio Code.
**/.gitignore**— Tämä tiedosto käskee gitiä ohittamaan tietyt tiedostot, kun sitoudut git-tietovarastoon (kuten GitHubiin).
**/editor.css**— Tämän tiedoston tyylit tulostetaan vain editorissa, se asetetaan jonoon päälataustiedoston kautta wholesome-notes.php.
**/block.json**— Tämä tiedosto määrittää laajennuksen, jotta WordPressin lohkokirjasto voi löytää sen. Jos teet muutoksia laajennukseen, varmista, että tämä tiedosto on päivitetty. NPM-komentosarjan uudemmissa versioissa tätä tiedostoa käytetään lohkosi /src/index.jsrekisteröinnin sijaan.
**/package.json**— Tämä tiedosto sisältää kaikki laajennuksen npm-riippuvuudet ja komennot, jotka voit suorittaa. Huomaa, että laajennus käyttää wp-scripts( @wordpress/scripts) pohjanaan, joten alun perin ladatut riippuvuudet ovat tälle paketille.
**/readme.txt**— Tämä tiedosto on WordPress-laajennusten arkiston readme-tiedosto, jota tarvitaan, jos haluat, että lohko luetellaan laajennusarkistoon.
**/wholesome-plugin.php**— Tämä on laajennuksen päälataustiedosto. Sen nimi asetettiin "slugin" kautta, jonka syötimme alkuperäiseen asennusohjelmaan. Se asettaa jonoon kaikki laajennuksen tarvitsemat JavaScript-omaisuudet.

Rakennuskomentojen tutkiminen

Ennen kuin voimme suorittaa rakennuskomentojamme, meidän on varmistettava, että olemme laajennuskansiossa. Tässä esimerkissä ajaisimme cd wholesome-pluginterminaalissa vaihtamaan hakemiston laajennuskansioomme.

Voimme sitten suorittaa seuraavat komennot:

**npm start**— Aloittaa rakentamisen kehitystä varten. Jos teet muutoksia laajennukseen, sinun on tehtävä tämä, jotta muutokset tulevat näkyviin (sinun on todennäköisesti myös päivitettävä selaimesi).
**npm run build**— Rakentaa koodin tuotantoa varten. Tee tämä, jos olet luomassa laajennuksen julkaisuversiota.
**npm run format:js**— Alustaa JavaScript-tiedostot automaattisesti parhaiden käytäntöjen mukaisesti.
**npm run lint:css**— Lints (etsii virheitä) CSS-tiedostoja.
**npm run lint:js**— Lints (etsii virheitä) JavaScript-tiedostoja.
**npm run packages-update**– Päivittää WordPress-paketit uusimpaan versioon.

Käytämme yhtä tai useampaa näistä, kun muokkaamme laajennusta.

Pluginin muokkaaminen

Aloitetaan tekemällä lohkostamme muokattavissa.

Lisää attribuutteja kohteeseen`/src/index.js`

Avaa /src/index.jseditorissasi ja lisää seuraava registerBlockTypefunktion sisään kohtaan apiVersion:

attributes: {
  blockText: {
    default: 'Wholesome Plugin – hello from the editor!',
    type: 'string',
  },
},

Tämä antaa meille paikan tallentaa tiedot laajennuksessamme nimeltään blockTextAccessible via attributesproperty (prop). Huomaa, että olemme antaneet sille oletusarvon luontilaajennuksen komentosarjan luomasta alkuperäisestä tekstistä.

Lisää RichText kohteeseen`/src/edit.js`

Avaa /src/edit.jseditorissasi ja korvaa tuonti kohteelle useBlockPropsseuraavalla:

import { RichText, useBlockProps } from '@wordpress/block-editor';

Tämä antaa meille mahdollisuuden käyttää RichText-komponenttia muokkaustavassamme.

Muuta sitten koko muokkaustoiminto seuraavaksi:

export default function Edit( { attributes, setAttributes }) {
    const { blockText } = attributes;
    return (<p { ...useBlockProps() }>
            <RichText
                className="block__text"
                keepPlaceholderOnFocus
                onChange={ (blockText) => setAttributes( { blockText }) }
                placeholder={ __( 'Block Text', 'wholesome-plugin') }
                tagName="span"
                value={ blockText }
            />
        </p>
    );
}

Tämä asettaa komponentin arvon RichTextsamaksi kuin blockTextattribuutissa tallennettu arvo, ja onChangeominaisuus määrittää blockTextattribuutin sen, mikä komponenttiin on koskaan syötetty RichText.

Tulosta attribuutit sisään`/src/save.js`

Avaa /src/save.jseditorissasi ja korvaa savefunktio seuraavalla:

export default function save( { attributes }) {
    const { blockText } = attributes;
    return (<p { ...useBlockProps.save() }>
            { blockText }
        </p>
    );
}

Tämä yksinkertaisesti tulostaa arvon blockTextkappaleeseen.

Pluginin kääntäminen

Avaa pääte, varmista, että olet laajennuksen juurihakemistossa ja suorita seuraava komento:

Käsikirjoitus kootaan. Jos sinulla on virheitä, päätteen pitäisi ilmoittaa sinulle, mitä ne ovat.

Pluginin rakentaminen

Lisäosan lisääminen

Varmista, että olet päivittänyt viestisi. Lohkon edellinen versio voi nyt olla rikki, tämä on hyvä, poista se ja lisää uusi.

Lisää lohko käyttämällä editorin vasemmassa yläkulmassa olevaa plussymbolia, ja kun se on lisätty, napsauta sen tekstiä. Sinun pitäisi. nyt voi muokata tekstiä.

Muokattavan lohkon lisääminen

Pluginin katselu

Tallenna viesti ja katso se verkkosivuston etuosassa, muokkaamasi teksti tulee näkyviin alkuperäisen tekstin sijaan.

Muokattava lohko verkkosivuston etuosassa

Jos haluat lohkosi näkyvän mukautetussa lohkoluokassa, lisää vain seuraava koodi laajennuksen juureen (tässä tapauksessa wholesome-plugin.php:

function wholesomecode_wholesome_plugin_block_categories( $categories) {
    return array_merge(
        $categories,
        [
            [
                'slug'  => 'wholesome-blocks',
                'title' => __( 'Wholesome Blocks', 'wholesome-boilerplate' ),
            ],
        ]
    );
}
add_action( 'block_categories', 'wholesomecode_wholesome_plugin_block_categories', 10, 2 );

Tämä rekisteröi mukautetun lohkoluokan lohkon lisäyslaitteeseen.

Sitten sinun tarvitsee vain säätää funktion categoryargumentti viittaamaan lohkoluokkaasi ja kääntää uudelleen:registerBlockType``/src/index.js


category: 'wholesome-blocks',

Nyt kun tulet lisäämään lohkoasi, löydät sen juuri luomastasi lohkoluokasta:

Mukautettu lohkoluokka Block Inserterissa

Tutustu PHP:n käyttämiseen lohkon renderöimiseen dynaamisilla lohkoilla
Tarkastele post-metakenttien käyttöä lohkosi attribuutteina
Lisää lohkosivupalkki InspectorControlsilla
Laajenna laajennusta lisäämällä uusia tulopisteitä webpack.config-tiedostoon

: wholesomecode.ltd