Com adaptar el connector per a Gutenberg: 1a part (API de bloc)

Com adaptar el connector per a Gutenberg: 1a part (API de bloc)

Com adaptar el connector per a Gutenberg: 1a part (API de bloc)
СОДЕРЖАНИЕ
02 июня 2020

"Tinc un complement," et diu, "Com puc preparar-la per Gutenberg?"


La història és senzilla; Gutenberg és la nova experiència d’editor de WordPress, que es fusionarà al nucli de la propera gran publicació. Una gran quantitat de complements que no estan al dia quedarà obsoleta. Això fa que sigui fonamental que adapteu el vostre complement per a Gutenberg abans que no sigui massa tard.

Qui es veu afectat?

Gairebé tots els plugins que té alguna cosa a veure amb l’editor de correus es veurà afectat per Gutenberg. Per exemple, si el vostre complement afegeix un botó a TinyMCE per posar un codi curt a l’editor, és una mala notícia; serà el final.
Adapta el teu connector per a Gutenberg: 1a part (API de bloc)

"He d’adaptar els meus plugins per a Gutenberg?"

Quins plugins necessiteu actualitzar per Gutenberg? Qualsevol complement que funcioni amb:

  • Metaboxes personalitzats
  • Dreceres
  • Botons TinyMCE
  • o qualsevol característica de l’editor

Tot i que alguns complements encara funcionen amb Gutenberg, com un complement que afegeix un metabolisme senzill, per exemple, no serà una experiència tan suau per als vostres usuaris.

Fins i tot els codis drecers continuaran funcionant com fins ara, però serà simplement un node de text senzill a l’editor, mentre que tots els complements de codi curt de Gutenberg seguiran la seva interfície d’interès i us serà més fàcil d’utilitzar..

Així que sí, els usuaris preferiran plugins dissenyats per a l’experiència de Gutenberg. I els que es queden enrere seran substituïts per un complement de competidors.

Només per fer-vos una idea, aquí teniu un exemple de com s’assembla a l’experiència estàndard de l’editor de l’usuari amb un complement propi (a), i, a continuació, com es veu a Gutenberg (b) – amb el connector optimitzat per a això.

(b)Feeds RSS Feedzy: un complement llest per Gutenberg

No tinguis por! Estem aquí per ajudar-vos a preparar els vostres complements per Gutenberg. Hi ha moltes maneres d’integrar el vostre plugin cap a Gutenberg, depenent del funcionament del vostre plugin, que parlarem en aquest article.

Coses que val la pena conèixer abans Gutenberg està escrit a React. I els complements de Gutenberg estan codificats en JavaScript, que també pot ser una transició aproximada per als desenvolupadors que només codifiquen en PHP. Tot i que no haureu de tenir coneixement de React per fer plugins per a Gutenberg, necessitareu una comprensió bàsica de JavaScript. Si heu treballat anteriorment en React i JSX, us serà semblant motiu.

Tot i que no n’hi ha prou documentació oficial de Gutenberg, Al seu dipòsit Github hi ha molta informació valuosa per als desenvolupadors. Si voleu aprendre profundament el desenvolupament de Gutenberg, heu de mantenir els ulls oberts sobre tot el que està passant al dipòsit GitHub de Gutenberg, perquè el projecte es mou ràpidament i les coses canvien cada dia.

Com adaptar el vostre plugin per a Gutenberg

L’API de Gutenberg ens ofereix moltes maneres d’estendre l’editor, com l’API de bloc, l’API de codi curt i molt més. Quina API utilitzar depèn de quin tipus de complement estiguem construint.

Si el vostre complement és un simple complement de codi curt, llavors l’API de bloc es pot utilitzar per fer un bonic bloc per a l’editor. Però si el vostre connector utilitza metabòlics complexos on el bloc no és suficient, podem utilitzar l’API de barra lateral.

A més, utilitzarem una pila moderna d’eines de desenvolupament de JavaScript, com NodeJS, NPM, webpack i ESNext. Us proporcionarem fitxers d’exemple, de manera que no us haureu de preocupar de configurar el vostre entorn de desenvolupament.

En aquest post, anirem mirant com compatibilitzar el vostre complement Gutenberg mitjançant l’API de bloc. Entrarem en els altres mètodes (API de la barra lateral, tauler de publicació, barra d’estat & API similars) en la segona part, si cal.

Podeu trobar tots els exemples esmentats a aquest dipòsit de GitHub.

Entorn de desenvolupament de Gutenberg

El desenvolupament de Gutenberg requereix que configureu moltes eines, com ara NPM, webpack, Babel i JSX. Es necessita molt temps i esforç, de manera que us hem preparat l’ambient.

Gutenberg Boilerplate és un complement amb exemples mínims de configuració i desenvolupament de Gutenberg. Conté un exemple de bloc i de barra lateral. Podeu utilitzar-ho per ampliar-lo al bloc personalitzat.

Placa de calor de Gutenberg

Es pot forquilla o clonar Dipòsit de caldereria de Gutenberg a la seva / wp-content / plugins / i utilitzeu-lo com a entorn de desenvolupament.

Després d’això, heu d’instal·lar NodeJS a la vostra màquina per començar. Desplaceu-vos a la carpeta Gutenberg Boilerplate i executeu npm install

A partir d’aquest moment, heu de conèixer tres ordres que fareu servir durant el procés de desenvolupament:

  • npm install – Instal·leu les dependències del projecte quan cloneu el projecte.
  • npm run dev: Compila el codi durant el procés de desenvolupament. Heu d’executar-ho una vegada i seguireu vigilant els canvis.
  • npm run build: Codi de compilació per a una creació optimitzada un cop finalitzat el procés de desenvolupament.

API de bloc

Els blocs són l’element fonamental de Gutenberg, essent un editor basat en blocs. Block API permet crear blocs per a Gutenberg. Podeu crear blocs que puguin presentar HTML bàsics, codis directes o, fins i tot, fer blocs dinàmics per mostrar, per exemple, les publicacions més recents.

El procés es basa en un complement existent

En el nostre exemple, adoptarem un codi curt per fer clic a Tweet a un bloc de Gutenberg. Aquest codi curt per fer clic a Tweet proporciona una casella de text amb el text i un botó per tuitejar-lo. Com això:

Feu clic per dissenyar el Tweet

El nostre codi curt sembla una cosa així:

[clicktotweet tweet ="Text a mostrar" tweetsent ="Text a tuitejar" botó ="Tweet" tema ="clic per replicar"]

El nostre codi curt té quatre paràmetres:

  • tweet: text que apareix al vostre lloc.
  • tweetsent: text que va a Twitter.
  • botó: text del botó Tweet.
  • tema: Tema de clic a tweet o de clic a tweet-alt com a tema de la caixa.

Adaptació de plugins per a Gutenberg amb Block API

Hi ha dues maneres d’afrontar-ho amb Gutenberg, o bé podem rendir l’HTML al front-end, o bé podem fer servir el nostre bloc Gutenberg per a fer que el shortcode sigui front-end. Per a aquest article, farem aquest darrer.

Tot el codi està disponible a Hola repositori de complements de Gutenberg a GitHub. Podeu clonar el dipòsit per veure el connector en acció o modificar el codi.

Obtenir scripts / estils per a Gutenberg

Primer, cal que enviem els nostres scripts i estils a l’editor de Gutenberg mitjançant enqueue_block_assets:

/ **
* Executeu el front end i l’editor JavaScript i CSS
* /
function hello_gutenberg_scripts () {
$ blockPath = ‘/dist/block.js’;
$ stylePath = ‘/dist/block.css’;

// Executeu el fitxer JS del bloc agrupat
wp_enqueue_script (
“hola-gutenberg-block-js”,
plugins_url ($ blockPath, __FILE__),
[‘wp-i18n’, ‘blocs wp’, ‘wp-editor’, ‘wp-components’],
filemtime (plugin_dir_path (__ FILE__). $ blockPath)
);

// Obteniu estils de bloqueig de frontend i editor
wp_enqueue_style (
“hola-gutenberg-block-css”,
plugins_url ($ stylePath, __FILE__),
”,
filemtime (plugin_dir_path (__ FILE__). $ stylePath)
);

}

// Els scripts d’enganxament funcionen a l’editor de blocs
add_action (‘enqueue_block_assets’, ‘hello_gutenberg_scripts’);

Hem afegit quatre dependències al nostre script que utilitzarem al nostre bloc. Aprenguem primer sobre aquestes dependències:

wp-i18n és la versió de Gutenberg de funcions d’internacionalització, com ara __ (). wp-blocks s’utilitza per a la funció registerBlockType que registra el vostre bloc. Utilitzem scripts wp-editor i wp-components per a diversos components del nostre bloc.

Ara que ja hem obtingut els recursos, podem començar a escriure el nostre bloc /src/block.js dossier.

Importació de dependències

Si utilitzeu Gutenberg Boilerplate, aleshores el vostre block.js el fitxer ha de tenir una estructura de bloc bàsica que podeu utilitzar per crear plugins per a Gutenberg:

/ **
* Biblioteques de blocs interns
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

/ **
* Bloc de registre
* /
export default registerBlockType (“gutenberg-boilerplate / block”, {
// Títol del bloc
títol: __ (“Placa de calor de Gutenberg”),
// Descripció del bloc
descripció: __ (“Un bloc d’exemple.”),
// Categoria de bloc
categoria: “comú”,
// Icona de bloc
icona: “lloc d’administració”,
// Bloquejar paraules clau
paraules clau: [
__ (“Placa de caldera”),
__( ‘Hola món’ ),
__ (“Exemple”),
],
atributs: {
},
// Definició de la interfície d’edició
editar: puntals => {
tornar (

{__ (“Hello Backend”)}

);
},
// Definició de la interfície del front-end
guardar: puntals => {
tornar (

{__ (“Hola Frontend”)}

);
},
});

Podeu executar npm run dev per començar a compilar el nostre codi en temps real.

Primer importarem tots els components i biblioteques que necessitem per al bloc a la part superior:

/ **
* Bloquejar dependències
* /

importar noms de classe de “noms de classe”;

/ **
* Biblioteques de blocs interns
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

const {
RichText,
InspectorControls,
BlockControls,
} = wp.editor;

const {
PanelBody,
TextareaControl,
TextControl,
Dashicon,
Barra d’eines,
Botó,
Consell d’informació,
} = wp.components;

Les primeres importacions noms de classe que hem instal·lat amb npm per utilitzar diverses classes del nostre codi, ja que JSX no permet diverses classes d’elements.

Aprendrem sobre altres components que hem importat a mesura que els utilitzem.

Definiu atributs

Ara definirem quatre atributs per al nostre bloc Gutenberg, igual que el nostre codi curt:

atributs: {
tuiteu: {
tipus: ‘cadena’,
},
tweetsent: {
tipus: ‘cadena’,
},
botó: {
tipus: ‘cadena’,
per defecte: __ (‘Tweet’),
},
tema: {
tipus: “booleà”,
per defecte: fals,
},
},

Com podeu veure, tots els atributs són els mateixos que el nostre codi curt. Tots els atributs tenen una clau de tipus, que indica a Gutenberg el seu tipus de dades. Podeu utilitzar cadena, número, booleà & objecte com a tipus acceptats.

Alguns dels atributs també contenen un valor predeterminat. Els atributs també poden tenir altres propietats, com ara la font i els selectors, que no utilitzarem en el nostre exemple, però Més informació sobre ells aquí.

Interfície d’edició

Ara construirem la interfície d’edició del nostre bloc, que serà la pantalla: els usuaris la veuran mentre editen el bloc a Gutenberg.

Per tenir una idea bàsica, primer podem codificar el nostre bloc i crear-lo substituint l’àrea següent del nostre codi:

// Definició de la interfície d’edició
editar: puntals => {
tornar (

{__ (“Hello Backend”)}

);
},

Amb el codi següent:

// Definició de la interfície d’edició
editar: puntals => {
tornar [

Carbasses i pingüins

Tweet

];
},

Això us ha de donar una idea del nostre resultat final. Semblarà així:

Plugins per a Gutenberg

El primer element del bloc és l’àrea de text de tuit. El substituirem per un camp de text editable, similar al bloc d’encapçalament de Gutenberg.

Utilitzarem RichText component que havíem importat anteriorment per substituir el nostre text codificat.

El nostre component RichText té cinc arguments. el format és una cadena, ja que utilitzarem el nostre codi curt per mostrar els elements del front-end. Si volguéssim utilitzar un selector en el nostre atribut, el format hauria estat una matriu.

RichText té de manera predeterminada algunes opcions de format, com en negreta i cursiva, que hem desactivat passant una matriu buida en l’argument formattingControls..

placeholder és el text del marcador de lloc quan no hi ha cap text al camp i onChange activarà la funció onChangeTweet quan es produeixi un esdeveniment de canvi..

Finalment, el valor serà el valor del nostre camp, que es prendrà de l’atribut de tweet que hem definit anteriorment.

Un cop definida la nostra àrea RichText, hem de crear la funció onChangeTweet que es desencadenarà quan es canvien el valor al nostre camp de text.

// Definició de la interfície d’edició
editar: puntals => {
const onChangeTweet = valor => {
props.setAttributes ({tweet: valor});
};
tornar [
…resta del codi

Passem el valor del camp RichText a la funció onChangeTweet, que utilitza props.setAttributes funció per actualitzar el valor de l’atribut de tweet.

Veureu el poder de Gutenberg ara quan utilitzeu el vostre bloc.

RichField a Gutenberg

No és impressionant?

Inspector de bloc

Quan creeu plugins per a Gutenberg, no cal reinventar la roda cada vegada per fer panells d’opcions per als vostres complements. Gutenberg ens proporciona una manera simplificada de permetre la personalització de blocs i assegura que cada usuari tingui una experiència consistent amb els patrons d’interès d’interès.

Igualment al component RichText, el component InspectorControls afegeix una barra lateral quan el bloc està seleccionat. Alguna cosa com això:

Controls de l’inspector Gutenberg

També utilitzarem TextareaControl i TextControl per afegir un camp de text i d’entrada de text a la nostra àrea d’Inspector..

Afegirem el codi següent a la declaració de devolució:

!! props.isSelected && (

),

props.isSelected controls per assegurar-se que l’Inspector només apareix quan està seleccionat el bloc.

Els components TextareaControl i TextControl, de manera similar a RichText, tenen un valor i un mètode onChange.

També hem de canviar el codi de la pantalla de blocs per tenir lloc als nous canvis. En el nostre cas, només haurem d’afegir Text Text al nostre bloc ja que el text de Tweet s’afegirà a l’enllaç, de manera que no caldrà mostrar-lo al nostre backend.

Podeu substituir l’hiperenllaç al nostre codi inicial per el següent:


{props.attributes.button}

Com s’ha esmentat abans, suprimim l’hiperenllaç del nostre codi perquè no cal que ho mostrem en el fons. Això farà que el nostre bloc sembli així:

Gutenberg Feu clic per tuitejar els controls dels inspectors

Block Inspector pot ser una eina potent per al vostre bloc. Si el vostre plugin té opcions avançades massa complicades per a l’àrea d’editor, podeu posar-les a l’àrea d’Inspector.

Afegirem una última opció al nostre bloc per acabar la part de JavaScript a la següent secció.

Barra d’eines del bloc

La barra d’eines de bloc és un altre component d’UI preconstruït que podem utilitzar per afegir més opcions al nostre bloc. Apareixerà a sobre del bloc quan el seleccioneu. Exemple:

Barra d’eines del bloc de Gutenberg

L’ideal seria que la barra d’eines del bloc inclogui els controls principals del vostre bloc, i Inspector acolliria els controls secundaris. Tot i això, això és discutible i depèn del vostre bloc.

Utilitzarem l’àrea de la barra d’eines de bloc per allotjar el nostre control d’estil alternatiu.

De forma similar a Block Inspector, hem d’afegir el codi següent a la declaració de devolució per afegir la barra d’eines del bloc al nostre bloc:

!! props.isSelected && (

),

Utilitzem components BlockControls i Barra d’eines per afegir una barra d’eines al nostre bloc. Similar a Block Inspector, props.isSelected s’assegura que la nostra barra d’eines només apareix quan posem el focus en el nostre bloc.

També utilitzem components d’informació i botons per al nostre control. El component de funció d’informació s’embolica al component del botó per assegurar-vos que hi hagi una informació sobre el control del pas per proporcionar-vos més context..

El component del botó utilitza el mòdul de noms de classe que hem importat anteriorment a l’article. Hem utilitzat la funció de nom de classe per donar tres classes al nostre control. La tercera classe, està activa, només apareix quan el valor de l’atribut del nostre tema és cert.

La seva funció onChange commuta l’atribut tema a true / false. Al final, els components de Dashicon s’utilitzen per mostrar una icona per al nostre control.

També haurem de canviar el codi de bloc perquè funcioni amb els canvis. Hem de substituir la següent línia:

Amb:

Estem comprovant si l’atribut del tema és cert o fals i assignem una classe al nostre bloc en conseqüència.

Ara el bloc hauria d’assemblar una cosa així:

Feu clic a barra d’eines

Hem finalitzat la part de JavaScript del nostre bloc de Gutenberg. Podeu trobar el codi font complet del fitxer aquí.

Ara finalitzarem el nostre bloc gestionant la sortida del servidor.

Representació del costat del servidor

Gutenberg us permet utilitzar la representació del costat del servidor per mostrar els vostres blocs al front-end. Aquesta representació del costat del servidor ens permet crear blocs de dreceres.

Primer, farem que el nostre mètode d’estalvi torni nul substituint-lo pel següent codi:

// Definició de la interfície del front-end
guardar () {
// Representació en PHP
retornar nul;
},

Utilitzarem la funció PHP register_block_type per registrar el nostre tipus de bloc a PHP:

if (function_exists (‘register_block_type’)) {
// Recuperació del costat del servidor en forma de devolució de trucades
register_block_type (
“hola-gutenberg / clic per tuitejar”, [
‘render_callback’ => “hola_gutenberg_block_callback”,
‘atributs’ => matriu (
‘tweet’ => matriu (
‘tipus’ => ‘cadena’,
),
‘tweetsent’ => matriu (
‘tipus’ => ‘cadena’,
),
‘botó’ => matriu (
‘tipus’ => ‘cadena’,
‘predeterminat’ => “Tweet”,
),
‘tema’ => matriu (
‘tipus’ => ‘booleà’,
‘predeterminat’ => fals,
),
),
]
);
}

La nostra funció register_block_type. Primer passem el nostre nom de bloc, juntament amb una sèrie d’arguments.

El primer argument és la funció render_callback, que crida a la nostra funció hello_gutenberg_block_callback per a la representació del costat del servidor..

Després del nostre devolució de devolució, passem atributs com a matriu, similars al fitxer block.js, que fem servir a la nostra funció de devolució de devolució.

La nostra funció de devolució de devolució sembla aquesta:

function hello_gutenberg_block_callback ($ attr) {
extracte ($ attr);
if (isset ($ tweet)) {
$ theme = ($ theme === true? ‘clic-a-tweet-alt’: ‘clic a tweet’);
$ shortcode_string = ‘[tweet clicktotweet ="% s" tweetsent ="% s" botó ="% s" tema ="% s"] ‘;
retornar sprintf ($ shortcode_string, $ tweet, $ tweetsent, $ botó, $ tema);
}
}

Extreurem tots els atributs i després els tornem dins del nostre codi curt. Tot el que cal per adaptar els vostres complements de codi curt per a Gutenberg.

Aquí podeu trobar tot el codi utilitzat en aquest article hola-gutenberg dipòsit.

A la propera part, analitzarem altres maneres d’adaptar els plugins existents per a Gutenberg, inclosa l’API de la barra lateral.

Si teniu dubtes sobre com adaptar el vostre plugin per a Gutenberg, pregunteu-los als comentaris!

No oblideu unir-se al nostre curs d’accidents per agilitzar el vostre lloc de WordPress. Amb algunes solucions senzilles, podeu reduir fins i tot un 50-80% del temps de càrrega:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector