En Gutenberg-tutorial til nybegynderudviklere: Opret dit første blokplugin

Gutenberg Tutorial for begyndere


Hvis du overvejer at udvikle noget til WordPress i 2020, er ignorering af Gutenberg simpelthen ikke en mulighed. Plugins og temaer skal alle samarbejde med Gutenberg pænt og levere en brugeroplevelse, der er konsistent gennem alt, hvad en bruger kan se i WordPress-instrumentbrættet. Og især da Gutenberg er en integreret del af WordPress nu – blot benævnt blokeditor.

Når det er sagt, er det ikke så ligetil at komme i gang med Gutenberg. Mens du for et par år siden kunne skrive et WordPress-plugin af høj kvalitet ved hjælp af intet andet end Notepad, er processen blevet meget hårdere nu.

Gutenberg bruger teknologier som WordPress REST API, JavaScript og React. Således var nye krav til plugins og temaer nødvendige for at arbejde med Gutenberg.

Den gode nyhed er, at vi vil tale om alt det i dag! Dette indlæg fungerer som en Gutenberg-tutorial for begyndere, der søger at oprette et plugin til Gutenberg for første gang.

Vi fokuserer primært på de forskellige aspekter af oprettelse af et plugin til Gutenberg – opsætning af udviklingsmiljøet, oprettelse af et grundlæggende plugin og nogle nuancer af at arbejde med blokke.

1. Indstil dit Gutenberg-udviklingsmiljø

For at starte med Gutenberg-udvikling har du brug for noget grundlæggende kendskab til JavaScript og React. Her er en tutorial på JavaScript til en WordPress-udvikler. Yderligere kan yderligere pakker i Gutenberg muligvis bruge en NodeJS-pakkeadministrator, npm.

Du kan installere den nyeste stabile version af NodeJS på Windows eller MacOS ved hjælp af installationsprogrammet på det officielle sted. Hvis du har en Linux-server, kan du enten kompilere kildekoden eller bruge den tilsvarende pakkeadministrator (som apt og yum). For eksempel, hvis du bruger Ubuntu, skal du køre følgende kommandoer på terminalen.

sudo apt opdatering
sudo apt install nodejs npm

Når installationen er vellykket, kan du køre følgende kommando for at verificere NodeJS-versionen.

nodejs – version

Når du har krydset i afkrydsningsfelterne, er det en god ide at indstille dit test WordPress-websted med en forekomst af det aktuelle Gutenberg-plugin (det uafhængige plugin) eller endda udviklingsversionen af ​​det – du kan få det fra GitHub.

⚠️ Bemærk; mens Gutenberg nu er indbygget i WordPress, er denne version ikke den seneste. Udviklingen på Gutenberg sker stadig temmelig separat, og alt det, der er nyt, inkluderes først i Gutenberg-standalone-pluginet. Den faktiske Gutenberg-version i kernen modtager endnu ikke nogen større opdatering siden dens optagelse i WordPress 5.0. Du vil altid arbejde med den seneste version af Gutenberg, da det giver dig en bedre chance for fremtidssikring af dit arbejde og sørge for, at din oprettelse er i overensstemmelse med alt, hvad der kommer til WordPress-kernen senere.

På en anden note, hvis du agter at bidrage til kernen Gutenberg-plugin, har depotet medvirkende retningslinjer om, hvordan du opretter dit lokale miljø og indstiller ændringer til gennemgang.

�� Endelig, hvis du ønsker at tilpasse dine eksisterende plugins til Gutenberg, her er en detaljeret tutorial om, hvordan du opnår dette: del 1 og del 2.

For at komme i gang med et skabelon-plugin-bibliotek, der allerede er klar til at samarbejde med Gutenberg, kan du overveje at bruge Gutenberg-kedelpladepluginet. En sådan løsning hjælper dig med den grundlæggende filstruktur, så du kan fokusere på indholdet af plugin. For at bruge kedelpladen skal du downloade og installere plugin herfra (zip). Installation og aktivering af kedelplade-pluginet aktiverer prøveblokkene, som vi vil undersøge i denne tutorial. Du kan finde koden for hver blok i dens respektive bibliotek i kedelpladsens plugin-placering.

2. Indledende konfiguration

Bare for at minde dig introducerer Gutenberg konceptet med blokke, som er en erstatning for det standard TinyMCE editor lærred. I nogle tilfælde kan blokke også erstatte kortkoder og andre yderligere indholdselementer, som plugins bruges til at føje til WordPress-indhold på forskellige måder.

Hvis du er interesseret i at bygge for Gutenberg, er den mest almindelige tilgang at oprette et plugin, der opretter nye blokke og gør dem tilgængelige for brugeren. Dette er nøjagtigt, hvad vi skal gøre i denne Gutenberg-tutorial.

De følgende afsnit beskriver processen fra start til slut.

Det specifikke plugin, vi skal bygge, udskriver en besked med en bestemt baggrund, der kan tilpasses. Bare et eksempel, men du kan tage de principper, der er præsenteret her, og anvende dem på dit eget, mere komplekse plugin.

Det grundlæggende ved opbygning af et sådant plugin skal være kendt. Du starter med at oprette et nyt bibliotek i plugins-biblioteket til WordPress. I det placerer vi fire filer:

  • index.php – Denne fil indeholder metadata om den nye Gutenberg-blok.
  • block.js – Denne JavaScript-fil registrerer den tilpassede Gutenberg-blok.
  • editor.css – Denne fil indeholder stilarter til editoren.
  • style.css – Denne fil indeholder typografierne til den forreste ende af blokken.

De første to filer på listen tager sig af at registrere blokken, og de næste to filer definerer de visuelle stilarter for elementerne i blokken.

3. Registrering af blokken

I dette trin med at registrere en blok til Gutenberg vil vi bredt dække to ting:

  • registrering af metadata for plugin med PHP-motoren i WordPress,
  • registrering af blokken med den reaktionsramme, som Gutenberg kører på.

Filen index.php indeholder enqueue-aktiverne i blokken og redigereren.

  • Registrer først de brugerdefinerede funktioner gennem add_action.
  • Definér derefter de funktioner, der viser stien til JavaScript- og CSS-filer for blokken og editoren ved hjælp af funktionerne wp_enqueue_style og wp_enqueue_script.

Lad os sammenfatte dette gennem PHP-koden herunder:

add_action (‘enqueue_block_editor_assets’, ‘gb_block_01_basic_editor_assets’);

funktion gb_block_01_basic_editor_assets () {
// Scripts.
wp_enqueue_script (
‘Gb-blok-01-grundlæggende’,
plugins_url (‘block.js’, __FILE__),
array (‘wp-blocks’, ‘wp-i18n’, ‘wp-element’),
filemtime (plugin_dir_path (__FILE__). ‘block.js’)
);

// Stilarter.
wp_enqueue_style (
‘Gb-blok-01-basic-editor’,
plugins_url (‘editor.css’, __FILE__),
array (‘wp-edit-blocks’),
filemtime (plugin_dir_path (__FILE__). ‘editor.css’)
);
}

Dette definerer ressourcerne til baseditoren. Til blokken er det kun CSS-filen, der defineres gennem wp_enqueue_style-funktionen.

Block.js-filen beskriver egenskaberne for blokken i Gutenberg-editoren. Vi definerer følgende attributter og egenskaber:

  • title – Blokens titel
  • ikon – Et ikon, der skal vises for blokken; Du kan vælge et hvilket som helst ikon fra denne samling af dashikoner
  • kategori – Gruppen, som blokken tilhører. Eksempler på grupper af blokke er "almindelige," "formatering," "indlejre."
  • rediger – En JavaScript-funktion, der returnerer et DOM-element. Vi bruger wp.element.createElement-funktionen til at oprette et brugerdefineret afsnit DOM-element, p, med tilpasset tekst skrevet deri. Gutenberg påkalder denne egenskab, når en bruger klikker på blokken fra redaktøren.

(funktion () {
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType (‘gb / basic-01’, {
titel: __ (‘GB Basic’, ‘GB’),
ikon: ‘skjold-alt’,
kategori: ‘fælles’,

rediger: funktion (rekvisitter) {
return wp.element.createElement (
‘P’,
{className: props.className},
‘Hej Verden! – fra redaktøren (01 Basic Block). ‘
);
},

});
}) ();

Tilsvarende kan du oprette en gemt egenskab, der påberåbes, når blokken vælges fra frontenden.

I koden ovenfor definerede vi klassens navn på p-elementet med props.className, som vil oprette et klassens navn, der starter med wp-blok, efterfulgt af navnet på blokken. I det næste afsnit i denne Gutenberg-tutorial definerer vi typografierne for denne klasse.

4. Tilpasning af blokken

Som omtalt i det foregående afsnit er det næste trin i denne tutorial at definere egenskaberne for blokelementerne. Lad os definere en baggrundsfarve, en tekstfarve og en ramme.

.wp-block-gb-basic-01 {
farve: # 000;
baggrund: mistyrose;
kant: 0,2rem solid rød;
}

I stedet for CSS-filer kan du også tilføje SCSS-filer og kompilere dem med Node. Yderligere er her en tutorial om styling af Gutenberg-elementer fra CSS Tricks.

Resultater af din første Gutenberg-tutorial

Vi er endelig klar til at teste den blok, vi har oprettet. Hvis Gutenberg-pluginet er aktiveret, skal du gå over til + og kontroller, om den nye blok vises der.

ny Gutenberg-blok

Hvis du derefter klikker på blokken, vil du bemærke, at beskeden ovenfra ses med en baggrundsfarve og en ramme fra CSS-filen:

blok i handling

Konklusion

Vi kommer til slutningen af ​​din første Gutenberg-tutorial. Jeg håber, at dette har været nyttigt. Det, vi har bygget her, er ikke superkompleks, men det skal give dig en idé om de grundlæggende strukturer, når du arbejder med Gutenberg, og hvordan du planlægger dit næste plugin.

Først diskuterede vi trinnene til at oprette Gutenberg-udviklingsmiljøet. Derefter introducerede vi en kedelplade-plugin til hjælp med videreudvikling. Derefter skiftede fokus for diskussionen til forskellige trin i registrering og styling af en ny blok.

Jeg håber, at denne Gutenberg-tutorial har hjulpet dig med at oprette dit allerførste Gutenberg-plugin!

Hvis du har spørgsmål, skal du skyde væk i kommentarerne herunder.

Glem ikke at deltage i vores nedbrudskursus om at fremskynde dit WordPress-sted. Med nogle enkle rettelser kan du reducere din indlæsningstid med endda 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map