Gutenberga Viss, kas jums jāzina par WordPress 'Jaunākais redaktors
Gutenberga ir jauns redaktors WordPress, kas būs pilnīgi nomainiet pašreizējo TinyMCE redaktoru. Tas ir vērienīgs projekts, kas, visticamāk, daudzos veidos mainīs WordPress un ietekmēs gan parastos gala lietotājus, gan izstrādātājus, īpaši tos, kuri ir atkarīgi no redaktora ekrāna, lai strādātu ar WordPress. Lūk, kā tas izskatās.
Gutenberga arī ievieš jaunu paradigmu WordPress sauc “Bloķēt”.
“Bloķēt” ir abstrakts termins, ko izmanto, lai aprakstītu atzīmes vienības kas sastāv no tīmekļa lapas satura vai izkārtojuma. Ideja apvieno koncepcijas par to, kas šodien ir sasniegts ar WordPress īsceļi, pielāgots HTML un iegultā atklāšana vienā saskaņotā API un lietotāju pieredzi.
Projekta izveide
Zinot, ka Gutenberga ir uzcelta uz React, daži izstrādātāji ir noraizējušies par to, ka barjera ir pārāk augsta sākuma līmeņa izstrādātājiem, lai attīstītu Gutenbergu.
React.js iestatīšana varētu būt diezgan laikietilpīga un mulsinoša, ja jūs to tikai sākat. Jums būs nepieciešams vismaz, JSX transformators, Babel, atkarībā no jūsu koda, jums var būt nepieciešami daži Babel spraudņi un Bundler, piemēram, Webpack, Rollup vai Parcel.
par laimi, daži cilvēki WordPress kopienā pastiprinājās un cenšas padarīt Gutenberga attīstību pēc iespējas vieglāku, lai ikviens varētu sekot. Šodien mums ir rīks, kas ģenerēs Gutenberga katlu mēs varam sākt rakstīt kodu uzreiz tā vietā, lai darbotos ar rīkiem un konfigurācijām.
Izveidojiet Guten Block
The izveidot-guten-block
ir Ahmad Awais uzsāktais projekts. Tas ir nulles konfigurācijas rīku komplekts (# 0CJS
), kas ļaus jums izveidot Gutenberga bloku ar dažiem moderniem stieņiem, ieskaitot React, Webpack, ESNext, Babel, ESLint un Sass. Sekojiet norādījumiem, lai sāktu darbu ar Guten Block izveidi.
Izmantojot ES5 (ECMAScript 5)
Izmantojot visus šos rīkus, lai izveidotu vienkāršu “Sveika pasaule” bloks varētu šķist pārāk daudz. Ja jūs vēlaties, lai jūsu kaudzītes būtu liesas, jūs faktiski varat izveidot Gutenberga bloku, izmantojot vienkāršu labo „ECMAScript 5”, kas jums jau varētu būt pazīstams. Ja Jums ir WP-CLI 1.5.0 ir instalēts jūsu datorā, jūs varat vienkārši palaist ...
wp sastatņu bloks[- virsraksts = ] [- dashicon = ] [- kategorija = ] [--theme] [- plugin = ] [- spēkā]
… Uz ģenerē Gutenberga bloku katlu uz jūsu spraudni vai tēmu. Šī pieeja ir saprātīgāka, jo īpaši attiecībā uz esošajiem spraudņiem un tēmām, kuras esat izstrādājis pirms Gutenberga laikmeta.
Tā vietā, lai izveidotu jaunu spraudni, lai pielāgotos Gutenberga blokiem, iespējams, vēlēsities integrēt blokus savos spraudnēs vai tēmās. Un, lai šī apmācība būtu viegli ievērojama ikvienam, mēs izmantosim ECMAScript 5 ar WP-CLI.
Jauna bloka reģistrēšana
Gutenberga pašlaik tiek veidota kā spraudnis, un tā tiks apvienota ar WordPress 5.0, kad komanda uzskata, ka tā ir gatava. Tāpēc pagaidām jums būs jāinstalē no Spraudņu lapa wp-admin
. Kad esat instalējis un aktivizējis to, palaidiet šādu komandu Terminālā vai komandu uzvednē, ja atrodaties Windows datorā.
wp sastatņu bloka sērija --title = "HTML5 Series" - tēma
Šī komanda ģenerēs bloku pašreiz aktīvajai tēmai. Mūsu bloks sastāvēs no šādiem failiem:
. âÂ?¢Â?¢Â? sērija â       à ¢Â?¢Â?¢Â? block.js â       à ¢Â?¢Â?¢Â? editor.css â       à ¢Â?¢Â?¢Â? style.css âÂ?¢Â?¢Â? series.php
Ielādēsim mūsu bloku galveno failu funkcijas.php
no mūsu tēmas:
ja (function_exists ('register_block_type')) nepieciešams get_template_directory (). '/blocks/series.php';
Ievērojiet, ka pievienojam faila iekraušanu ar nosacījumu. Tas nodrošina saderība ar iepriekšējo WordPress versiju, ka mūsu bloks ir ielādēts tikai tad, kad atrodas Gutenberg. Tagad mūsu blokam jābūt pieejamam Gutenberg interfeisā.
Tas izskatās, kad ievietojam bloku.
Gutenberga API
Gutenberga iepazīstina ar diviem API komplektiem, lai reģistrētu jaunu bloku. Ja mēs skatāmies uz series.php
, mēs atradīsim šādu kodu, kas reģistrē mūsu jauno bloku. Tas arī ielādē stilu un JavaScripts priekšpusē un redaktorā.
register_block_type ('twentyseventeen / series', masīvs ('editor_script' => 'series-block-editor', 'editor_style' => 'series-block-editor', 'style' => 'series-block',));
Kā redzams iepriekš, mūsu bloks ir nosaukts twentyseventeen / series
, Bloka nosaukumam jābūt unikālam un nosaukumam, lai izvairītos no sadursmes ar citiem blokiem, ko ieved citi spraudņi.
Turklāt, Gutenberga piedāvā jaunu JavaScript API komplektu, lai mijiedarbotos ar “Bloķēt” saskarne redaktorā. Tā kā API ir diezgan bagātīga, mēs koncentrēsimies uz dažām specifiku, kas, manuprāt, jums jāzina, lai iegūtu vienkāršu, tomēr funkcionējošu Gutenberga bloku.
wp.blocks.registerBlockType
Pirmkārt, mēs izskatīsim wp.blocks.registerBlockType
. Šī funkcija tiek izmantota reģistrēt jaunu “Bloķēt” Gutenberga redaktoram. Tas prasa divus argumentus. Pirmais arguments ir bloka nosaukums, kam jāievēro reģistrētais nosaukums register_block_type
funkcija PHP pusē. Otrais arguments ir Objekts, kas definē bloka īpašības piemēram, nosaukums, kategorija un pāris funkcijas, lai padarītu bloķēšanas interfeisu.
var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', nosaukums: __ ('HTML5 Series'), kategorija: "logrīki", atslēgvārdi: ['html'], rediģēt: funkcija (rekvizīti) , saglabāt: funkcija (rekvizīti) );
wp.element.createElement
Šī funkcija ļauj izveidot elementu “Bloķēt” ieraksta redaktorā. The wp.element.createElement
funkcija būtībā ir reakcijas iegūšana createElement ()
tādējādi tā pieņem to pašu argumentu kopumu. Pirmais arguments ņem vērā elementa veidu, piemēram, punktu, a span
, vai a div
kā parādīts zemāk:
wp.element.createElement ('div');
Mēs varam pārvērst funkciju par mainīgo tāpēc tas ir īsāks. Piemēram:
var el = wp.element.createElement; el ('div');
Ja jūs dod priekšroku jaunajai ES6 sintaksei, jūs varat to darīt arī šādi:
const createElement: el = wp.element; el ('div');
Mēs varam arī pievienot elementa atribūtus piemēram, klasē
nosaukums vai ID
par otro parametru šādi:
var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'));
The div
mums nebūtu jēgas bez satura. Mēs varam pievienojiet saturu trešā parametra argumentam:
var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001'), 'Šis raksts ir daļa no mūsu "HTML5 / CSS3 apmācības sērijas" - veltīta lai palīdzētu jums kļūt par labāku dizaineru un / vai izstrādātāju. Noklikšķiniet šeit, lai redzētu vairāk rakstu no tās pašas sērijas ”);
wp.components
The wp.components
ietveriet Gutenberga komponentu kolekciju, kā norāda nosaukums. Šīs sastāvdaļas tehniski ir React custom komponenti, kas ietver pogu, Popover, Spinner, Tooltip un citu ķekars. Mēs varam atkārtoti izmantot šīs sastāvdaļas savā blokā. Nākamajā piemērā pievienojam pogu.
var Button = wp.components.Button; el (poga, 'class': 'download-button', ►, 'Download');
Atribūti
Atribūti ir veids, kā saglabāt datus mūsu blokā, šie dati varētu būt, piemēram, saturs, krāsas, izlīdzinājumi, URL utt. Mēs varam iegūt atribūtus no īpašībām, kas nodotas rediģēt ()
funkcijas:
rediģēt: funkcija (rekvizīti) var content = props.attributes.seriesContent; atgriezties el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'), saturs);
Lai atjauninātu atribūtus, mēs izmantojam setAttributes ()
funkciju. Parasti mēs mainām saturu noteiktās darbībās, piemēram, kad tiek noklikšķināta uz pogas, tiek ievadīts ievads, ir atlasīta opcija utt. Nākamajā piemērā mēs to izmantojam, lai pievienotu atkāpties mūsu bloka saturs, ja ar mums noticis kaut kas negaidīts seriesContent
Atribūts.
rediģēt: funkcija (rekvizīti) if (type.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: Hello World! Šeit ir rezerves saturs. ' ) var saturs = props.attributes.seriesContent; atgriezties [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'), saturs),];
Bloka saglabāšana
The saglabāt ()
funkcija darbojas līdzīgi kā rediģēt ()
, izņemot to, kas definē mūsu bloka saturu, lai saglabātu ziņu datubāzē. Bloķēšanas satura saglabāšana ir diezgan vienkārša, kā redzams tālāk:
saglabāt: funkcija (rekvizīti) ja (! rekvizīti ||! props.attributes.seriesContent) atpakaļ; var saturs = props.attributes.seriesContent; atgriezties [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'), saturs),];
Ko tālāk?
Gutenberga mainīs WordPress ekosistēmu labākai (vai, iespējams, sliktākai). Tas ļauj izstrādātājiem pieņemt jaunu veidu, kā attīstīt WordPress spraudņus un tēmas. Gutenberga ir tikai sākums. Drīz “Bloķēt” paradigma tiks paplašināta arī citās WordPress jomās, piemēram, iestatījumu API un logrīki.
Uzziniet JavaScript dziļi; tas ir vienīgais veids, kā nokļūt Gutenbergā un palikt atbilstošs nākotnei WordPress nozarē. Ja jūs jau esat iepazinušies ar JavaScript pamatiem, lietojumprogrammām, funkcijām, rīkiem, precēm un ļaunumiem, es tiešām esmu pārliecināts, ka ar Gutenbergu jūs saņemsiet ātrumu.
Kā jau minēts, Gutenberga atklāj daudz API, kas ir pietiekami, lai gandrīz visu darītu jūsu blokā. Jūs varat izvēlēties, vai kodējiet savu bloku ar vienkāršu JavaScript, JavaScript ar ES6 sintaksi, React vai pat Vue.
Idejas un iedvesmas
Esmu izveidojis ļoti (ļoti) vienkāršu Gutenberga bloku, ko var atrast mūsu Github konta krātuvē. Turklāt es esmu arī apkopojis vairākus repozitorijus, no kuriem jūs varat vadīt iedvesmu, veidojot sarežģītāku bloku.
- Gutenblocks - Mathieu Viet bloku kolekcija, kas rakstīta JavaScript ar ES5 sintaksi
- Jetpack Gutenblocks Project - Jetpack kolekcijā iekļauto bloku kolekcija
- Gutenberga ieviešanas piemēru saraksts, tostarp ar Vue.js
Tālāka atsauce
- Gutenberga oficiālā repozitorija
- Gutenberga rokasgrāmata