Õnneks on WordPressi arendusmeeskonnal mugav npm skript, mille abil saate luua plokiplugina, mis loob stardiploki, et saaksite kiiresti tööle hakata.

Vaikimisi on see WordPressi pistikprogramm, mille see loob, "plokk", kuid see annab meile ka hea lähtepunkti muud tüüpi Gutenbergi pistikprogrammide jaoks.

Eeldused

Sõlm peab olema teie masinasse installitud, et saaksite kasutada npmkäsku (mis tähendab Node Package Manager)
WordPressi installimine
Koodiredaktor
Juurdepääs terminalile

Looge oma pistikprogramm

Kui olete sõlme oma arvutisse installinud, peaks teil olema juurdepääs npmoma terminali käsule.

Avage oma terminal ja veenduge, et olete cdoma WordPressi installi pistikprogrammide kaustas (nt) ’d (Muudetud kataloogi cd wp-content/plugins).

Kui olete seal, käivitage järgmine käsk:

npm init @wordpress/block

See laadib alla kõik, mida skript ehituse alustamiseks vajab. Kui see on lõppenud, esitab skript teile rea küsimusi, mida on vaja pistikprogrammi konfigureerimiseks.

Terminali kasutamine skripti loomise käivitamiseks

Konfiguratsiooni küsimused

Skript esitab järgmised küsimused, siin on minu näidisvastused:

Identifitseerimiseks kasutatav plokk (ka pistikprogrammi ja väljundkausta nimi) — ma tahan, et minu ploki nimi oleks Wholesome Plugin, seega sisestasin wholesome-plugin.
Ploki nime sisemine nimeruum (midagi teie toodete jaoks ainulaadset) – kuna see peaks olema unikaalne kõigi minu sisestatud toodete jaoks wholesomecode, kuna see on minu ettevõtte nimi.
Teie ploki kuvatav pealkiri — sisestasin pistikprogrammi pealkirja Wholesome Plugin.
Teie ploki lühikirjeldus (valikuline) – sisestasin " An example plugin to demonstrate the create-block-script".
Armatuurlaud, mis hõlbustab teie ploki tuvastamist (valikuline) – WordPressi Dashiconsi ressursi kiiresti avamisel valisin selle, admin-pluginskuna sellel on pistikprogrammi ikoon. Ärge unustage seda tehes dashiconi eesliitest välja jätta dashicon-.
Kategooria nimi, mis aitab kasutajatel teie plokki sirvida ja avastada (kasutage nooleklahve) – valisin design. Kuigi kohandatud kategooria sobiks ilmselt paremini.
Pistikprogrammi autori nimi (valikuline). Mitu autorit võib olla loetletud komadega — sisestasin wholesomecode.
Pistikprogrammi litsentsi lühinimi (valikuline) – GPL v2.0 või uuema aktsepteerimiseks vajutasin sisestusklahvi.
Link litsentsi täisteksti juurde (valikuline) – GPL v2.0 litsentsi URL-i sisestamiseks vajutasin sisestusklahvi.
Pistikprogrammi praeguse versiooni number — vajutasin sisestamiseks sisestusklahvi 0.1.0.

Skripti seadistamise küsimused

Seejärel lõpetatakse skripti käitamine.

Mis just juhtus?

Skripti töötamise ajal juhtub mõni asi, näiteks:

See loob pistikprogrammi kausta,
See genereerib kõik pluginafailid (üksikasju nende toimimise kohta vaadake pistikprogrammi uurimisest )
See installib vajalikud sõltuvused, sealhulgas @wordpress/scriptspaketi (see teeb pistikprogrammi loomisel palju raskusi)
See koostab koodi
See väljastab käskude loendi, mida saate kasutada

Ehitage käsud

Uurime neid lähemalt pistikprogrammide uurimise jaotises.

Plugina kasutamine

Enne pistikprogrammi kasutamist peate selle aktiveerima. Seda saate teha, valides PluginsWordPressi administraatori menüüst ja seejärel tehes valiku activatepistikprogrammi nime all.

Aktiveerige pistikprogramm

Nüüd peate redigeerima postitust WordPressis ja sisestama pistikprogrammi Gutenbergi redaktori abil.

Ploki sisestamine postitusse

Pange tähele, et pistikprogramm ei tee palju vaikimisi, vaid loob lihtsalt ploki. Siiski pakub see raamistikku, mida saate oma pistikprogrammi loomiseks kasutada.

Ploki vaatamine esiküljel

Vaikimisi näeb plokk esiotsas välja selline. Pange tähele, et sellel on pisut erinev välimus, see on tahtlik, et saaksite tutvuda WordPressi esi- ja tagaküljel oleva CSS-iga.

Esiotsas olev plokk

Plugina uurimine

Plokiskripti loomise kogu eesmärk on teil luua oma pistikprogramm. Uurime üksikasjalikumalt selle loodud faile:

Loodud failid

wholesome-plugin— See on pistikprogrammi juurkaust, sellel on sama nimi, mis ma seadistusküsimustes ‘nälkja’ jaoks sisestasin.

**/build**— See on ehituskaust. /srcSee sisaldab kõiki kaustast loodud JavaScripti ja PHP varasid. Need pannakse järjekorda pealaadurifaili kaudu wholesome-notes.php.

**/build/index.assets.php**— See PHP-fail genereeritakse automaatselt /srckausta kompileerimisel. See sisaldab massiivi kõigist WordPressi redigeerija (Gutenberg) JavaScripti sündsustest, mida teie pistikprogramm kasutab. See pannakse järjekorda põhilaadurifaili kaudu wholesome-plugin.php.

**/build/index.css**— See on redaktori CSS-fail ja see asetatakse järjekorda peamise wholesome-plugin.phplaadimisfaili kaudu.

**/build/index.js**— See on peamine kompileeritud JavaScripti fail ja see pannakse järjekorda peamise wholesome-plugin.phplaadimisfaili kaudu.

**/build/style-index.css**— See on esiotsa CSS-fail ja see pannakse järjekorda peamise wholesome-plugin.phplaadimisfaili kaudu.

**/build/index.js.map**— See fail luuakse ainult siis, kui kompileerite varasid arendusrežiimi jaoks (IE käitate, npm startmitte npm buildvarade kompileerimisel. See on kasulik fail JavaScripti siluritele, mis aitab vigade ilmnemisel tuvastada failinimesid ja reanumbreid.

**/node_modules**— See on kaust, kuhu on installitud kõik teie pistikprogrammi JavaScripti sõltuvused.
**/src**— See on kaust, mis sisaldab kõiki teie pistikprogrammi kompileerimata varasid.
**/src/edit.js**— See on ploki redigeerimisfunktsioon ja juhib ploki kuvamist plokiredaktoris, kui see on redigeerimisrežiimis.
**/src/editor.scss**— See on redaktori kompileerimata SCSS, see kompileeritakse /build/index.css.
**/src/index.js**— See on teie WordPressi redaktori (Gutenbergi) ploki peamine kompileerimata JavaScripti fail. See registreerib ploki ja sisaldab vaikesätteid.
**/src/save.js**— See on ploki salvestamise funktsioon ja kontrollib ploki märgistamist selle salvestamisel.
**/src/style.scss**— See on esiotsa kompileerimata SCSS, see kompileeritakse /build/style-index.css.
**/.editorconfig**— See fail sisaldab teie IDE (integreeritud arenduskeskkonna) jaoks kasulikke eelseadeid, näiteks Visual Studio Code.
**/.gitignore**— See fail käsib gitil teatud faile ignoreerida, kui kasutate git-hoidlat (nt GitHub).
**/editor.css**— Selle faili stiilid väljastatakse ainult redaktoris, see lisatakse järjekorda peamise wholesome-notes.phplaadimisfaili kaudu.
**/block.json**— See fail määratleb pistikprogrammi, nii et WordPressi plokiteek saaks selle avastada. Kui muudate pistikprogrammi, veenduge, et see fail oleks värskendatud. NPM-skripti uuemates versioonides kasutatakse seda faili /src/index.jsploki registreerimise asemel.
**/package.json**— See fail sisaldab kõiki pistikprogrammi npm-i sõltuvusi ja käske, mida saate käivitada. Pange tähele, et pistikprogramm kasutab wp-scripts( @wordpress/scripts) baasina, nii et algselt on laaditud sõltuvused selle paketi jaoks.
**/readme.txt**— See fail on WordPressi pistikprogrammide hoidla readme-fail, mis on vajalik, kui soovite, et plokk oleks pistikprogrammide hoidlas loetletud.
**/wholesome-plugin.php**— See on pistikprogrammi peamine laadimisfail. Selle nimi määrati ‘nälkja’ kaudu, mille sisestasime esialgsesse häälestusskripti. See paneb järjekorda kõik pistikprogrammi jaoks vajalikud JavaScripti varad.

Ehituskäskude uurimine

Enne ehituskäskude käivitamist peame veenduma, et oleme pistikprogrammide kaustas. Selles näites töötaksime cd wholesome-pluginterminalis, et muuta kataloog meie pistikprogrammide kaustaks.

Seejärel saame käivitada järgmised käsud:

**npm start**— alustab arendustööde ehitamist. Kui muudate pistikprogrammi, peate muudatuste kuvamiseks seda tegema (tõenäoliselt peate ka oma brauserit värskendama).
**npm run build**— Ehitab tootmise koodi. Tehke seda, kui loote pistikprogrammi väljalaskeversiooni.
**npm run format:js**— Vormindab JavaScripti failid parimate tavade kohaselt automaatselt.
**npm run lint:css**— Lints (otsib vigu) CSS-failidest.
**npm run lint:js**— Lints (otsib vigu) JavaScripti failidest.
**npm run packages-update**– Värskendab WordPressi pakette uusimale versioonile.

Kasutame pistikprogrammi muutmisel ühte või mitut neist.

Plugina muutmine

Alustuseks teeme oma ploki redigeeritavaks.

Lisa atribuudid`/src/index.js`

Avage /src/index.jsoma redaktoris ja lisage registerBlockTypefunktsiooni alla järgmine teave apiVersion:

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

See annab meile koha andmete salvestamiseks meie pistikprogrammis, mida nimetatakse atribuudi (prop) blockTextkaudu juurdepääsetavaks. attributesPange tähele, et oleme andnud sellele pistikprogrammi loomise skripti poolt loodud algteksti vaikeväärtuseks.

Lisage RichText`/src/edit.js`

Avage /src/edit.jsoma redaktoris ja asendage import useBlockPropsjärgmisega:

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

See võimaldab meil kasutada oma redigeerimise renderdusmeetodis RichTexti komponenti.

Seejärel muutke kogu Redigeerimisfunktsioon järgmiseks:

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>
    );
}

See seab RichTextkomponendi väärtuseks sama, mis blockTextatribuudis salvestatud, ja atribuut onChangemäärab blockTextatribuudi väärtuseks, mis on kunagi komponendisse sisestatud RichText.

Väljutage atribuudid`/src/save.js`

Avage /src/save.jsoma redaktoris ja asendage savefunktsioon järgmisega:

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

See lihtsalt väljastab blockTextlõiku väärtuse.

Plugina kompileerimine

Avage terminal, veenduge, et olete oma pistikprogrammi juurkataloogis ja käivitage järgmine käsk:

Skript kompileeritakse. Kui teil on vigu, peaks terminal teid teavitama, mis need on.

Plugina ehitamine

Plugina sisestamine

Veenduge, et oleksite oma postitust värskendanud. Ploki eelmine versioon võib nüüd olla katki, see on hea, lihtsalt kustutage see ja sisestage uus.

Sisestage plokk, kasutades redaktori vasakpoolses ülanurgas olevat plussmärki, ja kui see on sisestatud, klõpsake selle tekstil. Sa peaksid. nüüd saate teksti redigeerida.

Redigeeritava ploki sisestamine

Plugina vaatamine

Salvestage postitus ja vaadake seda veebisaidi esiosas, algse teksti asemel tuleks kuvada teie muudetud tekst.

Redigeeritav plokk veebisaidi esiosas

Kui soovite, et teie plokid kuvataks kohandatud plokkide kategoorias, lisage lihtsalt järgmine kood oma pistikprogrammi juure (antud juhul 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 );

See registreerib teie ploki sisestajas kohandatud plokikategooria.

Seejärel peate lihtsalt kohandama funktsiooni categoryargumenti, et viidata teie ploki kategooriale ja kompileerida uuesti:registerBlockType``/src/index.js


category: 'wholesome-blocks',

Nüüd, kui asute oma plokki sisestama, leiate selle oma äsja loodud ploki kategooriast:

Kohandatud ploki kategooria ploki sisestajas

Heitke pilk PHP-le ploki renderdamiseks dünaamiliste plokkidega
Vaadake postituse metaväljade kasutamist oma plokis atribuutidena
Lisage InspectorControlsiga ploki külgriba
Laiendage oma pistikprogrammi, lisades faili webpack.config täiendavaid sisestuspunkte

: wholesomecode.ltd