Sådan tilpasser du dit plugin til Gutenberg: Del 1 (Blok API)

Sådan tilpasser du dit plugin til Gutenberg: Del 1 (Blok API)

Sådan tilpasser du dit plugin til Gutenberg: Del 1 (Blok API)
СОДЕРЖАНИЕ
02 июня 2020

"Jeg har et plugin," siger du, "hvordan gør jeg det klar til Gutenberg?"


Historien er ligetil; Gutenberg er den nye editor-oplevelse i WordPress, som vil blive flettet ind i kernen i den næste store udgivelse. En masse plugins, der ikke følger med dette bliver forældet. Dette gør det vigtigt, at du tilpasser dit plugin til Gutenberg, før det er for sent.

Hvem er berørt?

Næsten alle plugins der har noget at gøre med postredaktøren vil blive påvirket af Gutenberg. For eksempel, hvis dit plugin tilføjer en knap i TinyMCE for derefter at placere en shortcode i editoren, dårlige nyheder; det vil være slutningen på det.
Tilpas dit plugin til Gutenberg: Del 1 (Blok API)

"Skal jeg tilpasse mine plugins til Gutenberg?"

Så hvilke plugins skal opdateres til Gutenberg? Eventuelle plugins, der fungerer med:

  • Tilpassede metaboxer
  • kortkoder
  • TinyMCE knapper
  • eller nogen redigeringsfunktion overhovedet

Mens nogle plugins stadig fungerer med Gutenberg, som et plugin, der tilføjer en simpel metabox, for eksempel, vil det ikke være en så glat oplevelse for dine brugere.

Selv kortkoder vil fortsætte med at fungere som før, men det vil bare være almindelig tekstknudepunkt i redigeringsprogrammet, mens alle kortkodeplugins til Gutenberg vil følge dens blokgrænseflade og vil være lettere for brugere at bruge.

Så ja, brugere foretrækker plugins, der er lavet til Gutenberg-oplevelsen. Og dem, der skal forblive, bliver erstattet af en konkurrent-plugin.

Bare for at give dig en idé, her er et eksempel på, hvordan brugerens standard old-editor oplevelse ser ud med et plugin af vores (en), og hvordan det ser ud i Gutenberg (B) – med plugin optimeret til det.

(B)Feedzy RSS Feeds - et plugin Gutenberg-klar

Frygt ej! Vi er her for at hjælpe dig med at gøre dine plug-ins Gutenberg-klar. Der er mange måder at integrere dit plugin i Gutenberg, afhængigt af hvordan dit plugin fungerer, som vi skal diskutere i denne artikel.

Ting, der er værd at vide på forhåndGutenberg er skrevet på React. Og Gutenberg-plugins er kodet i JavaScript, hvilket også kan være en grov overgang for udviklere, der kun koder i PHP. Selvom du ikke behøver at have kendskab til React for at oprette plugins til Gutenberg, har du brug for en vis grundlæggende forståelse af JavaScript. Hvis du tidligere har arbejdet med React og JSX, vil det være lignende grunde for dig.

Mens der ikke er nok officiel dokumentation for Gutenberg, dens Github-arkiv har en masse værdifuld information til udviklere. Hvis du vil lære Gutenberg-udvikling dybt, skal du holde dine øjne åbne for alt, hvad der foregår i Gutenbergs GitHub-lager, fordi projektet bevæger sig virkelig hurtigt, og tingene ændrer sig hver eneste dag.

Sådan tilpasser du din plugin til Gutenberg

Gutenbergs API giver os mange måder at udvide redigeringsprogrammet, som Block API, Shortcode API og mere. Hvilken API, der skal bruges, afhænger af, hvilken type plugin vi bygger.

Hvis dit plugin er et simpelt kortkodeplugin, kan Block API bruges til at lave en smuk blok til redigereren. Men hvis dit plugin bruger komplekse metaboxer, hvor en blok ikke er nok, kan vi bruge Sidebar API.

Vi bruger også en moderne stak af JavaScript-udviklingsværktøjer, såsom NodeJS, NPM, webpack og ESNext. Vi vil give dig eksempler på filer, så du behøver ikke at bekymre dig om at oprette dit udviklingsmiljø.

I dette indlæg ser vi på hvordan du gør dit plugin Gutenberg-kompatibelt ved hjælp af Block API. Vi kommer nærmere på de andre metoder (Sidebar API, Publicér panel, statuslinje) & lignende API’er) i del to om nødvendigt.

Du kan finde alle de nævnte eksempler i dette GitHub-lager.

Gutenberg udviklingsmiljø

Udvikling af Gutenberg kræver, at du opsætter en masse værktøjer, såsom NPM, webpack, Babel og JSX. Det tager meget tid og kræfter, så vi har forberedt miljøet for dig.

Gutenberg Boilerplate er et plugin med minimalt Gutenberg-udviklingsopsætning og eksempler. Det indeholder et blok- og sidefelteksempel. Du kan bruge dette til at udvide til din brugerdefinerede blok.

Gutenberg Kedelplade

Du kan gaffel eller klone Gutenberg kedelplade til din / Wp-content / plugins / og brug det som dit udviklingsmiljø.

Derefter skal du installere NodeJS på din maskine for at komme i gang. Naviger til mappen Gutenberg Boilerplate, og kør installationen npm

Fra dette tidspunkt skal du kende tre kommandoer, som du bruger under udviklingsprocessen:

  • npm installation – Installer projektafhængigheder, når du kloner projektet.
  • npm run dev – Kompilér kode under udviklingsprocessen. Du skal køre dette en gang, og det vil holde øje med ændringerne.
  • npm run build – Kompilér kode til en optimeret build, når udviklingsprocessen er færdig.

Bloker API

Blokke er det grundlæggende element i Gutenberg, det er en blokbaseret redaktør. Block API giver dig mulighed for at lave blokke til Gutenberg. Du kan oprette blokke, der kan gengive grundlæggende HTML, kortkoder eller endda lave dynamiske blokke til f.eks. At vise dine seneste indlæg.

Processen er baseret på et eksisterende plugin

I vores eksempel vedtager vi en Click to Tweet-kortkode til en Gutenberg-blok. Dette klik for at Tweet-kode giver en Tweet-boks med din tekst og en knap til at tweet den tekst. Sådan her:

Klik for at Tweet Layout

Vores kortkode ligner sådan:

[clicktotweet tweet ="Tekst, der skal vises" tweetsent ="Tekst, der skal tweetes" knap ="tweet" tema ="klik for at tweet"]

Vores kortkode har fire parametre:

  • tweet: Tekst, der vises på dit websted.
  • tweetsent: Tekst, der går til Twitter.
  • knap: Tweet knap tekst.
  • tema: Enten klik-for-tweet eller klik-til-tweet-alt som boks-tema.

Tilpasning af plugins til Gutenberg med Block API

Der er to måder at gøre det på med Gutenberg, enten kan vi gengive HTML til frontend, eller vi kan bruge vores Gutenberg-blok til at gengive kortkoden til frontend. For denne artikel gør vi sidstnævnte.

Al koden er tilgængelig i Hej Gutenberg plugin repository på GitHub. Du kan klone depotet for at se plugin i handling eller for at ændre koden.

Foretrukne manuskripter / stilarter til Gutenberg

Først skal vi fortælle vores manuskripter og stilarter til Gutenberg-editor ved hjælp af enqueue_block_assets:

/ **
* Indstil frontend og editor JavaScript og CSS
* /
funktion hello_gutenberg_scripts () {
$ blockPath = ‘/dist/block.js’;
$ stylePath = ‘/dist/block.css’;

// Anvend den bundtede JS-fil
wp_enqueue_script (
‘Hej-Gutenberg-blok-js’,
plugins_url ($ blockPath, __FILE__),
[‘wp-i18n’, ‘wp-blocks’, ‘wp-editor’, ‘wp-komponenter’],
filemtime (plugin_dir_path (__ FILE__). $ blockPath)
);

// Indstil frontend- og redigeringsblokformater
wp_enqueue_style (
‘Hej-Gutenberg-blok-css’,
plugins_url ($ stylePath, __FILE__),
”,
filemtime (plugin_dir_path (__ FILE__). $ stylePath)
);

}

// Hook-scripts fungerer i blokredigerings-krogen
add_action (‘enqueue_block_assets’, ‘hello_gutenberg_scripts’);

Vi har tilføjet fire afhængigheder til vores script, som vi bruger i vores blok. Lad os først lære om disse afhængigheder:

wp-i18n er Gutenbergs version af internationaliseringsfunktioner, f.eks __ (). wp-blocks bruges til funktionen registerBlockType, der registrerer din blok. Vi bruger wp-editor og wp-component-scripts til forskellige komponenter i vores blok.

Nu, hvor vi har overdraget dine aktiver, kan vi begynde at skrive vores blok /src/block.js fil.

Import af afhængigheder

Hvis du bruger Gutenberg Kedelplade, så din block.js fil skal have en grundlæggende blokstruktur, som du kan bruge til at oprette plugins til Gutenberg:

/ **
* Interne blokbiblioteker
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

/ **
* Registrer blok
* /
eksporter standardregisterBlockType (‘gutenberg-kedelplade / blok’, {
// Blokeringstitel
titel: __ (‘Gutenberg Boilerplate’),
// Blokbeskrivelse
beskrivelse: __ (‘En eksempelblok.’),
// Bloker kategori
kategori: ‘fælles’,
// Blokikon
ikon: ‘admin-site’,
// Bloker nøgleord
nøgleord: [
__ (‘Kedelplade’),
__( ‘Hej Verden’ ),
__ (‘Eksempel’),
],
egenskaber: {
},
// Definition af redigeringsgrænsefladen
rediger: rekvisitter => {
Vend tilbage (

{__ (‘Hej Backend’)}

);
},
// Definition af front-end interface
Gem: rekvisitter => {
Vend tilbage (

{__ (‘Hello Frontend’)}

);
},
});

Du kan køre npm run dev for at starte kompilering af vores kode i realtid.

Først importerer vi alle komponenter og biblioteker, som vi har brug for til blokken øverst:

/ **
* Bloker afhængigheder
* /

import klasserne fra ‘klasserne’;

/ **
* Interne blokbiblioteker
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

const {
Rig tekst,
InspectorControls,
BlockControls,
} = wp.editor;

const {
PanelBody,
TextareaControl,
TextControl,
Dashicon,
Toolbar,
Knap,
tooltip,
} = wp.components;

Den første import classnames som vi installerede ved hjælp af npm til at bruge flere klasser i vores kode, da JSX ikke tillader flere klasser i elementer.

Vi lærer om andre komponenter, som vi har importeret, når vi bruger dem.

Definer attributter

Nu definerer vi fire attributter for vores Gutenberg-blok, samme som vores kortkode:

egenskaber: {
tweet: {
type: ‘streng’,
},
tweetsent: {
type: ‘streng’,
},
knap: {
type: ‘streng’,
standard: __ (‘Tweet’),
},
tema: {
type: ‘boolsk’,
standard: falsk,
},
},

Som du kan se, er alle attributterne de samme som vores kortkode. Alle attributter har en type nøgle, der fortæller Gutenberg sin datatype. Du kan bruge streng, nummer, boolsk & objekt som accepterede typer.

Nogle af attributterne indeholder også en standardværdi. Attributter kan også have andre egenskaber, såsom kilde og vælgere, som vi ikke bruger i vores eksempel, men du kan lære mere om dem her.

Rediger interface

Nu bygger vi redigeringsgrænsefladen for vores blok, som vil være displayet – brugere vil se det, mens de redigerer blokken i Gutenberg.

For at få en grundlæggende idé kan vi først hardkode vores blok og bygge videre på den ved at udskifte følgende område i vores kode:

// Definition af redigeringsgrænsefladen
rediger: rekvisitter => {
Vend tilbage (

{__ (‘Hej Backend’)}

);
},

Med følgende kode:

// Definition af redigeringsgrænsefladen
rediger: rekvisitter => {
Vend tilbage [

Græskar og pingviner

tweet

];
},

Dette skulle give dig en idé om vores slutresultat. Det ser sådan ud:

Plugins til Gutenberg

Det første element i blokken er tweet-tekstområdet. Vi erstatter det med et redigerbart tekstfelt, der ligner Gutenbergs overskriftsblok.

Vi bruger Rig tekst komponent, som vi tidligere importerede for at erstatte vores hårdkodede tekst.

Vores RichText-komponent har fem argumenter. format er en streng, da vi vil bruge vores kortkode til at vise elementerne i front-end. Hvis vi ville bruge en vælger i vores attribut, ville formatet have været en matrix.

RichText har som standard nogle formateringsindstillinger, som fed og kursiv, som vi har deaktiveret ved at videregive en tom matrix i formateringskontrol-argumentet.

pladsholder er pladsholderteksten, når der ikke er nogen tekst i feltet, og onChange udløser onChangeTweet-funktion, når en ændringshændelse finder sted.

Endelig vil værdien være værdien af ​​vores felt, der tages fra tweet-attribut, som vi definerede tidligere.

Når vi først har defineret vores RichText-område, er vi nødt til at bygge videre påChangeTweet-funktion, der udløses, når værdien ændres i vores tekstfelt.

// Definition af redigeringsgrænsefladen
rediger: rekvisitter => {
const onChangeTweet = value => {
props.setAttributter ({tweet: value});
};
Vend tilbage [
…resten af ​​koden

Vi overfører værdien af ​​RichText-feltet til onChangeTweet-funktionen, der bruger props.setAttributes funktion til at opdatere værdien af ​​tweet-attribut.

Du vil se Gutenbergs magt nu, når du bruger din blok.

RichField i Gutenberg

Er det ikke fantastisk??

Blok inspektør

Når du bygger plugins til Gutenberg, behøver du ikke at opfinde hjulet hver gang for at oprette optionpaneler til dine plugins. Gutenberg giver os en forenklet måde at tillade bloktilpasning og sikrer, at enhver bruger har en ensartet oplevelse med indbyggede UI-mønstre.

På lignende måde som RichText-komponenten tilføjer InspectorControls-komponent en sidebjælke, når blokken er valgt. Noget lignende:

Gutenberg inspektør kontrol

Vi bruger også TextareaControl og TextControl til at tilføje et tekstområde og tekstindtastningsfelt til vores Inspector-område.

Vi tilføjer følgende kode til din returerklæring:

!! props.isSelected && (

),

props.isValgte kontroller for at sikre, at inspektøren kun vises, når blokken er valgt.

TextareaControl og TextControl komponenter, på lignende måde som RichText, har en værdi og onChange-metode.

Vi er også nødt til at ændre koden på din blokvisning for at rumme nye ændringer. I vores tilfælde behøver vi kun at tilføje knaptekst til vores blok, da Tweet-tekst tilføjes til linket, så vi behøver ikke at vise den i vores backend.

Du kan erstatte hyperlink i vores oprindelige kode med følgende:


{props.attribut.button}

Som nævnt tidligere fjerner vi hyperlink fra vores kode, fordi vi ikke behøver at vise det i backend. Dette får vores blok til at se sådan ud:

Gutenberg Klik for at tweet Inspektorkontroller

Block Inspector kan være et potent værktøj til din blok. Hvis dit plugin har avancerede indstillinger, der er for komplicerede til redigeringsområdet, kan du placere dem i inspektørområdet.

Vi tilføjer en sidste mulighed til vores blok for at afslutte JavaScript-delen i det næste afsnit.

Bloker værktøjslinje

Block Toolbar er en anden forudbygget brugergrænseflade, som vi kan bruge til at tilføje flere indstillinger til vores blok. Det vises over din blok, når du vælger den. Eksempel:

Gutenberg Block Toolbar

Ideelt set skal Block Toolbar indeholde de primære kontroller af din blok, med Inspector, der er vært for de sekundære kontroller. Det kan imidlertid diskuteres og afhænger af din blok.

Vi bruger området Block Toolbar til at være vært for vores alternative stilkontrol.

På lignende måde som Block Inspector, er vi nødt til at tilføje følgende kode til vores return statement for at tilføje Block Toolbar til vores block:

!! props.isSelected && (

),

Vi bruger BlockControls og Toolbar-komponenter til at tilføje en værktøjslinje til vores blok. Ligesom med Block Inspector sørger props.isSelected for, at vores værktøjslinje kun vises, når vi sætter fokus på vores blok.

Vi bruger også værktøjstip- og knapkomponenter til vores kontrol. Værktøjstipkomponent er pakket rundt om knapkomponenten for at sikre dig, at der er en værktøjstip, når du holder musepekeren over kontrollen for at give dig mere kontekst.

Knapkomponent bruger modulerne til klassebesøg, som vi importerede tidligere i artiklen. Vi brugte klassens navne-funktion til at give tre klasser til vores kontrol. Den tredje klasse, er-aktiv, vises kun, når vores værdi for temaattribut er sand.

Dens onChange-funktion skifter temaattributten til sand / falsk. I sidste ende bruges Dashicon-komponenter til at vise et ikon til vores kontrol.

Vi bliver også nødt til at ændre vores blokkode for at den kan fungere med ændringerne. Vi er nødt til at erstatte følgende linje:

Med:

Vi kontrollerer, om temaattributten er sand eller falsk, og tildeler en klasse til vores blok i overensstemmelse hermed.

Nu skal din blok se sådan ud:

Klik for at Tweet værktøjslinje

Vi er færdige med JavaScript-siden af ​​vores Gutenberg-blok. Du kan finde hele kildekoden til filen her.

Nu afslutter vi vores blok ved at håndtere serversiden output.

Rendering på serversiden

Gutenberg giver dig mulighed for at bruge server-rendering til at vise dine blokke i front-end. Den rendering på serversiden gør det muligt for os at oprette blokke til kortkoder.

Først foretager vi vores gemme-metode til at returnere nul ved at erstatte den med følgende kode:

// Definition af front-end interface
Gemme() {
// Rendering i PHP
returnere null;
},

Vi vil bruge register_block_type PHP-funktion til at registrere vores bloktype i PHP:

if (function_exists (‘register_block_type’)) {
// Hook-server-gengivelse til gengivelse af tilbagekald
register_block_type (
‘hej-gutenberg / klik-til-tweet’, [
‘render_callback’ => ‘Hello_gutenberg_block_callback’,
‘attributter’ => array (
‘tweet’ => array (
‘type’ => ‘snor’,
),
‘tweetsent’ => array (
‘type’ => ‘snor’,
),
‘knap’ => array (
‘Type’ => ‘snor’,
‘default’ => ‘Tweet’,
),
‘tema’ => array (
‘Type’ => ‘Boolean’,
‘default’ => falsk,
),
),
]
);
}

Vores register_block_type-funktion. Vi overfører først vores bloknavn til det sammen med en række argumenter.

Det første argument er render_callback-funktionen, der opfordrer til vores hello_gutenberg_block_callback-funktion til rendering på serversiden.

Efter vores render callback overfører vi attributter som en matrix, der ligner block.js-fil, som vi bruger i vores render callback-funktion.

Vores render callback-funktion ser sådan ud:

funktion hello_gutenberg_block_callback ($ attr) {
ekstrakt ($ attr);
if (isset ($ tweet)) {
$ tema = ($ tema === sandt? ‘click-to-tweet-alt’: ‘click-to-tweet’);
$ shortcode_string = ‘[clicktotweet tweet ="% s" tweetsent ="% s" knap ="% s" tema ="% s"] ‘;
returnere sprintf ($ shortcode_string, $ tweet, $ tweetsent, $ button, $ theme);
}
}

Vi udtrækker alle attributter og returnerer dem derefter i vores kortkode. Det er alt, hvad det kræver for at tilpasse dine shortcode plugins til Gutenberg.

Du kan finde alle koder, der bruges i denne artikel i denne hej-Gutenberg opbevaringssted.

I den næste del vil vi se på andre måder at tilpasse eksisterende plugins til Gutenberg, inklusive Sidebar API.

Hvis du har spørgsmål til, hvordan du tilpasser dit plugin til Gutenberg, så spørg dem i kommentarerne!

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
    Это интересно
    Adblock
    detector