Gutenbergo viskas, ką jums reikia žinoti apie „WordPress“ naujausią redaktorių
Gutenbergas yra naujas „WordPress“ redaktorius pakeisti dabartinį „TinyMCE“ valdomą redaktorių. Tai plataus užmojo projektas, kuris, be abejo, pakeis „WordPress“ daugeliu būdų ir paveiks tiek reguliarius galutinius vartotojus, tiek kūrėjus, ypač tuos, kurie priklauso nuo redaktoriaus ekrano darbui „WordPress“. Štai kaip atrodo.
Gutenbergas taip pat įveda naują „WordPress“ paradigmą “Blokuoti”.
“Blokuoti” yra abstraktus terminas, naudojamas apibūdinti žymėjimo vienetai sudarytos iš tinklalapio turinio ar išdėstymo. Idėja apjungia sąvokas, kurias „WordPress“ šiandien pasiekėme trumpieji kodai, pasirinktinis HTML ir įterpimas į vieną nuoseklų API ir naudotojų patirtį.
Projekto parengimas
Žinant faktą, kad Gutenbergas yra pastatytas ant React, kai kurie kūrėjai nerimauja, kad kliūtis yra per didelė pradinio lygio kūrėjams Gutenbergo vystymui.
React.js nustatymas gali būti gana ilgas ir painus, jei tik pradėsite jį pradėti. Jums reikės bent jau „JSX“ transformatoriaus, „Babel“, priklausomai nuo jūsų kodo, jums gali prireikti kai kurių „Babel“ papildinių ir „Bundler“, pvz., „Webpack“, „Rollup“ arba „Parcel“.
Laimei, kai kurie žmonės „WordPress“ bendruomenėje paspartino ir stengiasi, kad Gutenbergo vystymasis būtų kuo paprastesnis visiems. Šiandien turime įrankį, kuris generuos „Gutenbergo“ katilinę mes galime pradėti rašyti kodą iš karto vietoj to, kad dirbtumėte su įrankiais ir konfigūracijomis.
Sukurkite „Guten Block“
The sukurti-guten-block
yra Ahmad Awais inicijuotas projektas. Tai yra nulinės konfigūracijos įrankių rinkinys (# 0CJS
), kuri leis jums sukurti Gutenbergo bloką su keliais šiuolaikiniais stelažais, įskaitant React, Webpack, ESNext, Babel, ESLint ir Sass. Vadovaukitės instrukcijomis, kad pradėtumėte kurti „Guten Block“.
Naudojant ES5 (ECMAScript 5)
Naudojant visus šiuos įrankius sukurkite paprastą “Labas pasauli” blokas gali atrodyti per daug. Jei norite laikyti savo kaminus, galite iš tikrųjų sukurti „Gutenbergo“ bloką naudodami paprastą „gerą“ „ECMAScript 5“, kurį jau turėtumėte žinoti. Jei turite WP-CLI 1.5.0 įdiegtas jūsų kompiuteryje, galite tiesiog paleisti ...
wp pastolių blokas[- titras = ] [- dashicon = ] [- kategorija = ] [--theme] [- plugin = ] [- jėga]
… Į generuoti „Gutenbergo“ bloką į savo papildinį ar temą. Šis požiūris yra protingesnis, ypač esamiems papildiniams ir temoms, kurias sukūrėte prieš Gutenbergo erą.
Vietoj to, kad būtų sukurtas naujas įskiepis, kad tilptų Gutenbergo blokai, galbūt norėsite integruoti blokus į savo įskiepius ar temas. Ir kad šią pamoką būtų lengva sekti visiems, naudosime ECMAScript 5 su WP-CLI.
Naujo bloko registravimas
„Gutenberg“ šiuo metu yra sukurtas kaip įskiepis ir bus sujungtas su „WordPress 5.0“, kai komanda jaučiasi pasiruošusi. Taigi, šiuo metu jums reikės ją įdiegti iš Įskiepių puslapis wp-admin
. Įdiegę ir suaktyvinę, paleiskite šią komandą terminale arba komandų eilutėje, jei naudojate „Windows“ įrenginį.
wp pastolių blokų serija - title = "HTML5 serija" - tema
Ši komanda generuoja bloką šiuo metu aktyviai temai. Mūsų bloką sudarys šie failai:
. âÂ?¢Â?¢Â? serija â        âÂ?¢Â?¢Â? block.js â        âÂ?¢Â?¢Â? editor.css â        âÂ?¢Â?¢Â? style.css âÂ?¢Â?¢Â? series.php
Įkelkime pagrindinį mūsų blokų failą funkcijos.php
iš mūsų temos:
jei (function_exists ('register_block_type')) reikia get_template_directory (). „/blocks/series.php“;
Atkreipkite dėmesį, kad pridėjome failo įkėlimą su sąlyga. Tai užtikrina suderinamumas su ankstesne „WordPress“ versija, kad mūsų blokas pakrautas tik tada, kai yra „Gutenberg“. Dabar mūsų blokas turėtų būti prieinamas „Gutenberg“ sąsajoje.
Tai, kaip atrodo, kai įterpiame bloką.
Gutenbergo API
„Gutenberg“ pristato du API rinkinius naujam blokui registruoti. Jei pažvelgsime į series.php
, mes surasime šį kodą, kuris registruoja mūsų naują bloką. Taip pat įkelia stilių lentelę ir „JavaScripts“ į priekį ir redaktorių.
register_block_type ('twentyseventeen / series', masyvas ('editor_script' => 'series-block-editor', 'editor_style' => 'series-block-editor', 'style' => 'series-block',));
Kaip matome aukščiau, mūsų blokas yra pavadintas dvidešimt septyni / serija
, Bloko pavadinimas turi būti unikalus ir pavadintas, kad būtų išvengta susidūrimo su kitais blokais, kuriuos pateikia kiti įskiepiai.
Be to, „Gutenberg“ teikia naujų „JavaScript“ API sąsajų su „ “Blokuoti” sąsaja redaktoriuje. Kadangi API yra gana gausu, mes sutelksime dėmesį į kai kurias specifikas, kurios, manau, turėtumėte žinoti, kad gautumėte paprastą, tačiau veikiantį „Gutenberg“ bloką.
wp.blocks.registerBlockType
Pirma, mes ieškosime wp.blocks.registerBlockType
. Ši funkcija naudojama užregistruokite naują “Blokuoti” Gutenbergo redaktoriui. Tam reikia dviejų argumentų. Pirmasis argumentas yra Blokų pavadinimas, kuris turėtų būti pažymėtas register_block_type
funkcija PHP pusėje. Antrasis argumentas yra Objektas, apibrėžiantis Blokavimo ypatybes kaip antraštė, kategorija ir pora funkcijų, skirtų „Block“ sąsajai.
var registerBlockType = wp.blocks.registerBlockType; registerBlockType („twentyseventeen / series“, pavadinimas: __ („HTML5 Series“), kategorija: „valdikliai“, raktiniai žodžiai: ['html'], redaguoti: funkcija (rekvizitai) , išsaugoti: funkcija (rekvizitai) );
wp.element.createElement
Ši funkcija leidžia sukurti elementą “Blokuoti” pašto redaktoriuje. The wp.element.createElement
funkcija iš esmės yra reakcijos ištrauka createElement ()
todėl ji priima tuos pačius argumentus. Pirmasis argumentas apima elemento tipą, pavyzdžiui, pastraipą, a span
, arba a div
kaip parodyta žemiau:
wp.element.createElement („div“);
Mes galime Pakeisti funkciją į kintamąjį todėl trumpesnis rašymas. Pavyzdžiui:
var el = wp.element.createElement; el („div“);
Jei tu pirmenybę teikia naujai ES6 sintaksei, taip pat galite tai padaryti:
const createElement: el = wp.element; el („div“);
Taip pat galime pridėti elemento atributus toks kaip klasė
pavadinimas arba ID
antrojo parametro:
var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'));
The div
mes nesukūrome prasmės be turinio. Mes galime pridėti turinį trečiojo parametro argumentu:
var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001'), 'Šis straipsnis yra mūsų "HTML5 / CSS3 vadovų serijos" dalis - skirta padėti jums tapti geresniu dizaineriu ir (arba) kūrėju. Spauskite čia norėdami pamatyti daugiau tos pačios serijos straipsnių “);
wp.components
The wp.components
jame yra „Gutenbergo“ komponentų rinkinys, kaip rodo pats pavadinimas. Šie komponentai techniškai yra React custom components, kurie apima mygtuką, Popover, Spinner, Tooltip ir kitus krūva. Mes galime pakartotinai naudokite šiuos komponentus į savo bloką. Toliau pateiktame pavyzdyje pridedame mygtuko komponentą.
var Button = wp.components.Button; el (mygtukas, 'class': 'download-button', ►, 'Download');
Atributai
Atributai yra būdas saugoti duomenis mūsų bloke, šie duomenys gali būti tokie, kaip turinys, spalvos, išlyginimai, URL ir tt Mes galime gauti atributus iš „Properties“, perduotų Redaguoti()
funkcija:
redaguoti: funkcija (rekvizitai) var content = props.attributes.seriesContent; grįžti el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'), turinys);
Norėdami atnaujinti atributus, mes naudojame setAttributes ()
funkcija. Paprastai tam tikrą veiksmą pakeisime, pvz., Paspaudus mygtuką, įvestis užpildoma, pasirinkta parinktis ir pan. Toliau pateiktame pavyzdyje mes naudojame jį pridėti atsitraukti mūsų bloko turinys, jei kažkas įvyko netikėtai seriesContent
Atributas.
redaguoti: funkcija (rekvizitai) if (tipai props.attributes.seriesContent === 'neapibrėžta' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: „Hello World! Čia yra atsarginis turinys.“) ) var content = props.attributes.seriesContent; grįžti [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'), turinys),];
Bloko išsaugojimas
The sutaupyti()
funkcija veikia panašiai kaip Redaguoti()
, išskyrus tai, kad jis apibrėžia mūsų „Block“ turinį, kad išsaugotumėte į pašto duomenų bazę. „Block Block“ turinio išsaugojimas yra gana paprastas, kaip matome toliau:
išsaugoti: funkcija (rekvizitai) if (! rekvizitai ||! props.attributes.seriesContent) grįžti; var content = props.attributes.seriesContent; grįžti [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'), turinys),];
Kas toliau?
Gutenbergas pakeis „WordPress“ ekosistemą geresnei (arba galbūt blogiau). Tai leidžia kūrėjams priimti naują „WordPress“ papildinių ir temų kūrimo būdą. Gutenbergas yra tik pradžia. Netrukus bus “Blokuoti” paradigma bus išplėsta į kitas „WordPress“ sritis, pvz., „API“ API ir valdiklius.
Sužinokite „JavaScript“ giliai; tai vienintelis būdas patekti į Gutenbergo ir likti aktualus „WordPress“ pramonės ateičiai. Jei jau esate susipažinę su „JavaScript“ pagrindais, „quirks“, funkcijomis, įrankiais, prekėmis ir „bads“, aš tikrai tikiu, kad gausite greitį su „Gutenberg“.
Kaip minėta, Gutenbergas atskleidžia daugybę API, kad galėtų padaryti beveik viską, kas reikalinga jūsų blokui. Galite pasirinkti, ar norite koduokite savo bloką naudodami seną „JavaScript“, „JavaScript“ su ES6 sintaksė, „React“ arba net „Vue“.
Idėjos ir įkvėpimai
Sukūriau labai (labai) paprastą „Gutenberg“ bloką, kurį galite rasti mūsų „Github“ paskyros saugykloje. Be to, aš taip pat sudėjau daugybę saugyklų, iš kurių galite įkvėpti kuriant sudėtingesnį bloką.
- „Gutenblocks“ - „Mathieu Viet“ blokų rinkinys, parašytas „JavaScript“ su ES5 sintaksė
- „Jetpack Gutenblocks“ projektas - „Jetpack“ komplekto rinkinys
- Gutenbergo įgyvendinimo pavyzdžių sąrašas, įskaitant „Vue.js“
Tolesnė nuoroda
- Gutenbergo oficialus saugykla
- Gutenbergo vadovas