Kaip pritaikyti „Gutenberg“ papildinį: 1 dalis (Blokuoti API)

"Aš turiu papildinį," sako tau, "kaip padaryti jį paruoštu Gutenbergui?"


Istorija tiesi; „Gutenberg“ yra naujoji „WordPress“ redaktoriaus patirtis, kuri bus sujungta į pagrindinę kitą didelę versiją. Daugybė įskiepių, kurie to neatsilieka pasensta. Todėl labai svarbu, kad pritaikytumėte savo papildinį „Gutenberg“, kol dar nevėlu.

Kas paveikė?

Beveik visi įskiepiai Gutenbergas turės įtakos tam, kas turi nieko bendra su pašto redaktoriumi. Pvz., Jei jūsų papildinys prideda mygtuką „TinyMCE“, kad tada įdėtų trumpąjį kodą į redaktorių, blogos naujienos; tai bus jo pabaiga.
Pritaikykite „Gutenberg“ papildinį: 1 dalis (blokuoti API)

"Ar man reikia pritaikyti savo papildinius Gutenbergui?"

Taigi, kuriuos papildinius reikia atnaujinti „Gutenberg“? Visi papildiniai, veikiantys su:

  • Individualizuotos meta dėžutės
  • Trumpieji kodai
  • „TinyMCE“ mygtukai
  • ar bet kurią redaktoriaus funkciją

Nors kai kurie papildiniai vis tiek veiks su „Gutenberg“, pvz., Papildinys, pridedantis paprastą meta dėžutę, jūsų vartotojams tai nebus tokia sklandi patirtis..

Net trumpieji kodai veiks kaip anksčiau, tačiau tai bus paprasto teksto mazgas redaktoriuje, o visi „Gutenberg“ trumpųjų kodų papildiniai seka savo bloko UI ir vartotojams bus lengviau jais naudotis..

Taigi taip, vartotojai pirmenybę teiks papildiniams, kurie sukurti atsižvelgiant į „Gutenberg“ patirtį. O tuos, kurie pasiliks, pakeis konkurentų įskiepiai.

Čia pateikiame jums pavyzdį, kaip atrodo įprasta senojo redaktoriaus patirtis naudojant mūsų įskiepį. (a), o kaip tada atrodo Gutenberge (b) – su jam optimizuotu įskiepiu.

(b)„Feedzy“ RSS sklaidos kanalai - „Gutenberg“ paruoštas papildinys

Nebijok! Esame čia, kad padėtume jums paruošti jūsų „Gutenberg“ papildinius. Yra daugybė būdų, kaip integruoti savo papildinį į „Gutenberg“, atsižvelgiant į tai, kaip jis veikia, apie kurį mes kalbėsime šiame straipsnyje.

Dalykai, kuriuos verta žinoti iš ankstoGutenbergas yra parašytas „React“. „Gutenberg“ įskiepiai yra užkoduoti „JavaScript“, o tai taip pat gali būti grubus perėjimas kūrėjams, kurie koduoja tik PHP. Nors jums nereikia turėti žinių apie „React“, kad galėtumėte kurti „Gutenberg“ papildinius, jums reikės šiek tiek pagrindinio „JavaScript“ supratimo. Jei anksčiau dirbote „React“ ir „JSX“, tai jums bus panašus pagrindas.

Nors to nepakanka oficiali Gutenbergo dokumentacija, jos „Github“ saugykla turi daug vertingos informacijos kūrėjams. Jei norite giliai išmokti „Gutenberg“ plėtros, turite atidaryti savo akis į viską, kas vyksta „Gutenberg“ „GitHub“ saugykloje, nes projektas juda tikrai greitai ir viskas keičiasi kiekvieną dieną..

Kaip pritaikyti „Gutenberg“ papildinį

„Gutenberg“ API suteikia daug būdų, kaip išplėsti redaktorių, pvz., Blokuoti API, Trumpųjų kodų API ir dar daugiau. Kurią API naudoti, priklauso nuo to, kokį papildinį mes kuriame.

Jei jūsų papildinys yra paprastas trumpųjų kodų papildinys, tada „Blokuoti“ API galima naudoti norint padaryti gražų redaktoriaus bloką. Bet jei jūsų papildinys naudoja sudėtingas meta dėžutes, kur neužtenka vien bloko, galime naudoti šoninės juostos API.

Taip pat naudosime šiuolaikišką „JavaScript“ kūrimo įrankių, tokių kaip „NodeJS“, „NPM“, „webpack“ ir „ESNext“, rinkinį. Mes pateiksime jums failų pavyzdžius, todėl jums nereikės rūpintis savo kūrimo aplinkos nustatymu.

Šiame įraše mes apžvelgsime kaip padaryti „Gutenberg“ suderinamą naudojant „Blokuoti“ API. Mes pereisime prie kitų metodų (šoninės juostos API, paskelbimo pulto, būsenos juostos & panašios API), jei reikia, antroje dalyje.

Visus minėtus pavyzdžius galite rasti šią „GitHub“ saugyklą.

Gutenbergo vystymosi aplinka

Kurdami „Gutenberg“, turite nustatyti daugybę įrankių, tokių kaip NPM, „webpack“, „Babel“ ir JSX. Tai užima daug laiko ir pastangų, todėl mes paruošėme jums aplinką.

„Gutenberg Boilerplate“ yra papildinys su minimalia „Gutenberg“ kūrimo sąranka ir pavyzdžiais. Jame yra vienas bloko ir šoninės juostos pavyzdys. Tai galite naudoti norėdami išplėsti savo pasirinktinį bloką.

Gutenbergo katilinė

Galite šakę ar klonuoti Gutenbergo katilinės saugykla tavo / wp-content / papildiniai / ir naudoti ją kaip savo tobulinimo aplinką.

Po to, norėdami pradėti, turite įdiegti „NodeJS“ į savo kompiuterį. Eikite į „Gutenberg Boilerplate“ aplanką ir paleiskite „npm install“

Nuo to laiko jūs turite žinoti tris komandas, kurias naudosite kūrimo proceso metu:

  • npm install – klonuodami projektą įdiekite projekto priklausomybes.
  • npm run dev – Sukurkite kodą kūrimo proceso metu. Jūs turite tai paleisti vieną kartą, ir jis nuolat stebės pokyčius.
  • npm run build – sukompiliuokite kodą optimizuotam statyti, kai bus baigtas kūrimo procesas.

Blokuoti API

Blokai yra pagrindinis „Gutenberg“ elementas, jis yra blokais paremtas redaktorius. Blokuoti API leidžia jums padaryti blokus Gutenbergui. Galite sukurti blokus, kurie gali atkurti pagrindinį HTML, trumpinius kodus, ar net sudaryti dinaminius blokus, kad būtų rodomi, pavyzdžiui, jūsų naujausi įrašai.

Procesas, pagrįstas esamu papildiniu

Mūsų pavyzdyje pasirinksime „Click to Tweet“ trumpąjį kodą į Gutenbergo bloką. Šis trumpųjų kodų spustelėjimas „Tweet“ suteikia „Tweet“ laukelį su jūsų tekstu ir mygtuką, kad galėtumėte perskaityti tą tekstą. Kaip šitas:

Spustelėkite „Tweet“ išdėstymą

Mūsų trumpasis kodas atrodo maždaug taip:

[paspaudimų žinutės tviteris ="Rodomas tekstas" tweetsent ="Tekstas, kuris turi būti įrašytas į tviterį" mygtukas ="„Tweet“" tema ="paspaudimas „tweet“"]

Mūsų trumpąjį kodą sudaro keturi parametrai:

  • „Twitter“: tekstas, rodomas jūsų svetainėje.
  • „tweetsent“: „Twitter“ skirtas tekstas.
  • mygtukas: Tweet mygtuko tekstas.
  • tema: Spustelėkite „tweet“ arba spustelėkite „tweet-alt“ kaip langelio temą.

„Gutenberg“ priedų pritaikymas naudojant „Block API“

Yra du būdai, kaip tai padaryti naudojant „Gutenberg“, arba mes galime pateikti HTML į priekinį paketą, arba mes galime naudoti mūsų „Gutenberg“ bloką, kad pateiktume trumpąjį kodą į „front-end“. Dėl šio straipsnio mes padarysime pastarąjį.

Visas kodas pateiktas Sveiki, „Gutenberg“ papildinių saugykla „GitHub“. Galite klonuoti saugyklą, kad pamatytumėte veikiantį papildinį arba modifikuotumėte kodą.

Užšifruokite Gutenbergo scenarijus / stilius

Pirmiausia, mes turime užkoduoti savo scenarijus ir stilius „Gutenberg“ redaktoriui naudodami enqueue_block_assets:

/ **
* Enqueque end ir redaktorius JavaScript ir CSS
* /
funkcija hello_gutenberg_scripts () {
$ blockPath = ‘/dist/block.js’;
$ stylePath = ‘/dist/block.css’;

// Užkoduokite surinktą bloko JS failą
wp_enqueue_script (
„labas-gutenberg-block-js“,
plugins_url („$ blockPath“, __FILE__),
[‘wp-i18n’, ‘wp blokai’, ‘wp redaktorius’, ‘wp komponentai’],
filemtime (plugin_dir_path (__ FILE__). $ blockPath)
);

// Enqueue frontend ir editor blokuoti stilius
wp_enqueue_style (
„labas-gutenberg-block-css“,
plugins_url ($ stylePath, __FILE__),
”,
filemtime (plugin_dir_path (__ FILE__). $ stylePath)
);

}

// Kabliuko scenarijai funkciją į bloko redaktoriaus kabliuką
add_action (‘enqueue_block_assets’, ‘hello_gutenberg_scripts’);

Prie scenarijaus pridėjome keturias priklausomybes, kurias naudosime savo bloke. Pirmiausia sužinokime apie šias priklausomybes:

„wp-i18n“ yra Gutenbergo internacionalizacijos funkcijų, tokių kaip __ (). wp-blokai naudojami „registerBlockType“ funkcijai, kuri registruoja jūsų bloką. Įvairiems mūsų bloko komponentams naudojame scenarijus „wp-editor“ ir „wp-components“.

Suradę jūsų turtą, galime pradėti rašyti savo bloką /src/block.js byla.

Importuojamos priklausomybės

Jei naudojate Gutenberg katilinę, tada jūsų blokas.js failas turėtų turėti pagrindinę bloko struktūrą, kurią galite naudoti kurdami „Gutenberg“ papildinius:

/ **
* Vidinės blokų bibliotekos
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

/ **
* Registracijos blokas
* /
eksportuoti numatytąjį registerBlockType („gutenberg-boilerplate / block“, {
// Blokuoti pavadinimą
pavadinimas: __ (‘Gutenberg Boilerplate’),
// Blokuoti aprašą
aprašymas: __ („Bloko pavyzdys“),
// Blokuoti kategoriją
kategorija: ‘bendras’,
// Blokuoti piktogramą
piktograma: „admin-site“,
// Blokuoti raktinius žodžius
raktiniai žodžiai: [
__ („Katilo plokštė“),
__( ‘Labas pasauli’ ),
__( ‘Pavyzdys’ ),
],
atributai: {
},
// Redagavimo sąsajos apibrėžimas
taisyti: rekvizitai => {
grįžti (

{__ (‘Hello Backend’)}

);
},
// Sąsajos su sąsaja apibrėžimas
išsaugoti: rekvizitai => {
grįžti (

{__ (‘Hello Frontend’)}

);
},
});

Galite paleisti npm run dev ir pradėti kaupti mūsų kodą realiuoju laiku.

Pirmiausia mes importuosime visus komponentus ir bibliotekas, kurių mums reikia blokui viršuje:

/ **
* Blokuoti priklausomybes
* /

importuoti klasių vardus iš „klasių pavadinimų“;

/ **
* Vidinės blokų bibliotekos
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

const {
Turiningas tekstas,
„InspectorControls“,
„BlockControls“,
} = wp.editor;

const {
„PanelBody“,
„TextareaControl“,
„TextControl“,
Dashiconas,
Įrankių juosta,
Mygtukas,
Patarimas,
} = wp.com komponentai;

Pirmasis importas klasių vardai kurią įdiegėme naudodami npm, kad mūsų kode būtų naudojamos kelios klasės, nes JSX neleidžia kelių klasių elementuose.

Sužinosime apie kitus komponentus, kuriuos importavome, kai juos naudojame.

Apibrėžkite atributus

Dabar mes apibrėžsime keturis mūsų „Gutenberg“ bloko atributus, tokius pat kaip mūsų trumpąjį kodą:

atributai: {
tviteris: {
tipas: ‘styga’,
},
tweetsent: {
tipas: ‘styga’,
},
mygtukas: {
tipas: ‘styga’,
numatytasis: __ (‘Tweet’),
},
tema: {
tipas: ‘boolean’,
numatytasis: klaidingas,
},
},

Kaip matote, visi atributai yra tokie patys kaip mūsų trumpasis kodas. Visi atributai turi tipo raktą, kuris nurodo „Gutenberg“ jo duomenų tipą. Galite naudoti eilutę, skaičių, loginę & objektas kaip priimtini tipai.

Kai kuriuose atributuose taip pat yra numatytoji vertė. Atributai taip pat gali turėti kitų ypatybių, tokių kaip šaltinis ir parinkikliai, kurių nenaudosime mūsų pavyzdyje, tačiau galite Sužinokite daugiau apie juos čia.

Redaguoti sąsają

Dabar mes sukursime savo bloko redagavimo sąsają, kuri bus ekranas – vartotojai matys ją redaguodami bloką Gutenberge.

Norėdami gauti pagrindinę idėją, pirmiausia galime kietai užkoduoti savo bloką ir remtis juo pakeisdami šią mūsų kodo sritį:

// Redagavimo sąsajos apibrėžimas
taisyti: rekvizitai => {
grįžti (

{__ (‘Hello Backend’)}

);
},

Turite šį kodą:

// Redagavimo sąsajos apibrėžimas
taisyti: rekvizitai => {
grįžti [

Moliūgai ir pingvinai

„Tweet“

];
},

Tai turėtų suteikti jums mūsų galutinio rezultato idėją. Tai atrodys maždaug taip:

„Gutenberg“ papildiniai

Pirmasis bloko elementas yra tviterio teksto sritis. Mes jį pakeisime redaguojamu teksto lauku, panašiu į Gutenbergo antraštės bloką.

Mes panaudosime Turiningas tekstas komponentas, kurį anksčiau importavome, kad pakeistume sunkiai užkoduotą tekstą.

Mūsų „RichText“ komponentas turi penkis argumentus. formatas yra eilutė, nes mes naudosime savo trumpąjį kodą, norėdami parodyti elementus priekinėje dalyje. Jei savo atribute norėtume naudoti selektorių, tada formatas būtų buvęs masyvas.

„RichText“ turi kai kurias formatavimo parinktis pagal numatytuosius nustatymus, pavyzdžiui, paryškintus ir kursyvus, kuriuos mes išjungėme perėję tuščią masyvą į formatąControls argumentas..

vietos rezervuaras yra vietos žymeklio tekstas, kai lauke nėra teksto, o „onChange“ suaktyvins „onChangeTweet“ funkciją, kai įvyks pakeitimo įvykis.

Galiausiai, vertė bus mūsų lauko vertė, kuri bus paimta iš tweet atributo, kurį mes apibrėžėme anksčiau.

Apibrėžę „RichText“ sritį, turime sukurti „onChangeTweet“ funkciją, kuri suaktyvės, kai reikšmė pasikeis mūsų teksto lauke.

// Redagavimo sąsajos apibrėžimas
taisyti: rekvizitai => {
const onChangeTweet = reikšmė => {
props.setAttributes ({tweet: value});
};
grįžti [
…likęs kodas

Mes perduodame „RichText“ lauko vertę „onChangeTweet“ funkcijai, kuri naudoja props.setAttributes funkcija atnaujinti tviterio atributo vertę.

Pamatysite „Gutenberg“ galią dabar, kai naudosite savo bloką.

„RichField“ Gutenberge

Argi ne nuostabu?

Blokų inspektorius

Kurdami „Gutenberg“ papildinius, jums nereikės kiekvieną kartą išradinėti rato, kad pasirinktumėte papildinių parinkčių skydelius. „Gutenberg“ suteikia mums supaprastintą būdą, leidžiantį pritaikyti blokus, ir užtikrina, kad kiekvienas vartotojas turėtų nuolatinę patirtį naudodamas integruotus vartotojo sąsajos modelius..

Panašiai kaip „RichText“ komponentą, „InspectorControls“ komponentas prideda šoninę juostą, kai pasirenkamas blokas. Kažkas panašaus į tai:

Gutenbergo inspektoriaus kontrolė

Mes taip pat naudosime „TextareaControl“ ir „TextControl“, norėdami pridėti teksto juostą ir teksto įvesties lauką į savo inspektoriaus sritį.

Prie jūsų grąžinimo pareiškimo pridėsime šį kodą:

!! rekvizitai.išrinktas && (

),

props.isPasirinkti patikrinimai, kad įsitikintumėte, jog inspektorius pasirodo tik pasirinkus bloką.

„TextareaControl“ ir „TextControl“ komponentai, panašiai kaip „RichText“, turi reikšmę ir „onChange“ metodą.

Taip pat turime pakeisti jūsų bloko ekrano kodą, kad būtų galima pritaikyti naujus pakeitimus. Mūsų atveju mums reikia tik pridėti mygtuko tekstą prie savo bloko, nes „Tweet“ tekstas bus pridėtas prie nuorodos, todėl mums jo nereikia rodyti mūsų pagrindinėje programoje.

Pradiniame mūsų kodo hipersaitą galite pakeisti tokiu:


{props.attributes.button}

Kaip minėta anksčiau, mes pašaliname hipersaitą iš savo kodo, nes mums jo nereikia rodyti užpakalinėje programoje. Tai leis mūsų blokui atrodyti taip:

Gutenbergas Spustelėkite Tweet inspektoriaus valdiklius

Blokų inspektorius gali būti efektyvus jūsų bloko įrankis. Jei jūsų papildinyje yra išplėstinės parinktys, kurios yra pernelyg sudėtingos redaktoriaus sričiai, tuomet galite jas įdėti į inspektoriaus sritį.

Mes papildysime paskutinę parinktį prie savo bloko, kad baigtume „JavaScript“ dalį kitame skyriuje.

Blokuoti įrankių juostą

Blokuoti įrankių juostą yra dar vienas iš anksto sukurtas vartotojo sąsajos komponentas, kurį galime naudoti norėdami pridėti daugiau parinkčių prie savo bloko. Pasirinkus, jis pasirodys virš jūsų bloko. Pavyzdys:

„Gutenberg Block“ įrankių juosta

Geriausia, jei blokavimo įrankių juostoje turėtų būti pagrindiniai jūsų bloko valdikliai, o inspektorius priglobtų antrinius valdiklius. Tačiau tai diskutuotina ir priklauso nuo jūsų bloko.

Mes naudosime „Blokuoti įrankių juostos“ sritį, kad galėtume valdyti alternatyvų stiliaus valdymą.

Panašiai kaip „Blokuoti inspektorių“, norėdami pridėti blokavimo įrankių juostą prie savo bloko, į savo grąžinimo pareiškimą turime pridėti šį kodą:

!! rekvizitai.išrinktas && (

),

Norėdami pridėti įrankių juostą prie savo bloko, naudojame „BlockControls“ ir įrankių juostos komponentus. Panašiai kaip „Blokuoti inspektorių“, „props.isSelected“ įsitikina, kad įrankių juosta pasirodys tik tada, kai sutelksime dėmesį į savo bloką..

Valdymui taip pat naudojame „Tooltip“ ir „Button“ komponentus. Įrankio patarimo komponentas apvyniotas mygtuko komponentu, kad įsitikintumėte, jog užvedus pelės žymiklį ant valdiklio yra patarimas, kad suteiktumėte daugiau konteksto.

Mygtuko komponentas naudoja klasių pavadinimų modulį, kurį anksčiau importavome straipsnyje. Mes naudojome klasių pavadinimų funkciją, kad galėtume valdyti tris klases. Trečioji klasė, aktyvi, rodoma tik tada, kai tikroji mūsų temos atributo vertė.

„OnChange“ funkcija perjungia temos atributą į teisingą / klaidingą. Galų gale „Dashicon“ komponentai naudojami mūsų valdymo piktogramai atvaizduoti.

Taip pat turėsime pakeisti savo bloko kodą, kad jis veiktų su pakeitimais. Turime pakeisti šią eilutę:

Su:

Mes tikriname, ar temos atributas yra teisingas, ar klaidingas, ir atitinkamai priskiriame klasę mūsų blokui.

Dabar jūsų blokas turėtų atrodyti taip:

Spustelėkite „Tweet“ įrankių juostą

Mes baigėme „JavaScript“ pusėje esančią mūsų „Gutenberg“ bloko dalį. Galite rasti visą failo kodą čia.

Dabar mes užbaigsime bloką tvarkydami serverio pusės išvestį.

Serverio pusės perteikimas

„Gutenberg“ leidžia naudoti serverio atvaizdavimą, kad būtų rodomi blokai jų priekinėje dalyje. Šis serverio atvaizdavimas leidžia mums sukurti trumpųjų kodų blokus.

Pirmiausia atliksime išsaugojimo metodą, kuris grąžins nulį, pakeisdami jį tokiu kodu:

// Sąsajos su sąsaja apibrėžimas
sutaupyti() {
// Pateikimas PHP
grąžinti negaliojantį;
},

Norėdami užregistruoti savo bloko tipą PHP, mes naudosime funkciją register_block_type PHP:

if (function_exists (‘register_block_type’)) {
// Kabliuko serverio perteikimas renderio atšaukimui
register_block_type (
„labas, gutenbergas / paspaudimas, kad tviteris“, [
‘render_callback’ => „hello_gutenberg_block_callback“,
‘atributai’ => masyvas (
‘tweet’ => masyvas (
‘tipas’ => ‘styga’,
),
‘tweetsent’ => masyvas (
‘tipas’ => ‘styga’,
),
‘mygtukas’ => masyvas (
‘tipas’ => ‘styga’,
‘numatytasis’ => „Tweet“,
),
‘tema’ => masyvas (
‘tipas’ => ‘boolean’,
‘numatytasis’ => melagingas,
),
),
]
);
}

Mūsų funkcija „register_block_type“. Pirmiausia perduodame savo bloko pavadinimą kartu su daugybe argumentų.

Pirmasis argumentas yra funkcija render_callback, kuri iškviečia mūsų hello_gutenberg_block_callback funkciją serverio perteikimui.

Po atšaukimo, atributus perduodame kaip masyvą, panašų į failą „block.js“, kurį naudojame atgavimo atgalinio ryšio funkcijoje..

Mūsų grąžinimo atgalinio ryšio funkcija atrodo taip:

funkcija hello_gutenberg_block_callback ($ attr) {
ekstraktas ($ attr);
if (isset ($ tweet)) {
$ tema = ($ tema === tiesa? ‘spustelėkite „tweet-alt”:’ spustelėkite „tweet”);
$ shortcode_string = ‘[„clicktotweet tweet =“"% s" tweetsent ="% s" mygtukas ="% s" tema ="% s"] ‘;
grąžinti „sprintf“ ($ shortcode_string, $ tweet, $ tweetsent, $ mygtukas, $ tema);
}
}

Mes ištraukiame visus atributus ir grąžiname juos per trumpąjį kodą. Tai yra viskas, ko reikia norint pritaikyti trumpųjų kodų papildinius „Gutenberg“.

Visą šiame straipsnyje naudojamą kodą galite rasti šiame labas-Gutenbergas saugykla.

Kitoje dalyje apžvelgsime kitus būdus, kaip pritaikyti esamus „Gutenberg“ papildinius, įskaitant „Sidebar“ API.

Jei turite klausimų, kaip pritaikyti „Gutenberg“ papildinį, paprašykite jų komentaruose!

Nepamirškite prisijungti prie avarijos kurso, kaip pagreitinti jūsų „WordPress“ svetainę. Taikydami keletą paprastų pataisų galite sumažinti įkrovimo laiką net 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