Creació per a Gutenberg: Com s’enfronten els autors de plugins i temes a la transició a Gutenberg

Construeix per a Gutenberg: Com s'enfronten els autors de plugins i temes a la transició


Al WordCamp Europe 2018, Matt Mullenweg va presentar un pla de ruta aproximat per a Gutenberg durant els propers mesos. Al juliol, hi haurà una gran empenta per augmentar l’adopció de Gutenberg, amb una 5.0 beta en joc per a l’agost (o més enllà; en realitat, probablement més enllà). La imminent integració pot ser que us pregunteu com planifiquen els desenvolupadors de WordPress per a Gutenberg.

És a dir, quines són les diverses maneres en què els desenvolupadors preparen les seves ofertes per a Gutenberg? I la gent fa qualsevol cosa nova i interessant per Gutenberg?

En aquesta publicació, us oferirem alguns exemples reals i concrets de com es poden crear els desenvolupadors de complements i temes per a Gutenberg mostrant-vos què hi ha ja.

Analitzant alguns exemples de la vida real de com els desenvolupadors utilitzen blocs i estils per crear una experiència d’edició més integrada, esperem que:

  • Enteneu com us pot beneficiar Gutenberg com a usuari final.
  • Obteniu algunes idees per crear a Gutenberg per als vostres propis projectes de WordPress.

Si encara no esteu segur del que és l’editor de Gutenberg, potser voldreu consultar primer el nostre tutorial complet de l’editor de Gutenberg..

Sis exemples de com els connectors existents estan dirigint el canvi a Gutenberg

La forma en què els autors del connector creen per a Gutenberg depèn principalment de la funció del connector.

D’una banda, teniu plugins centrats a afegir contingut front-end. Es tracta principalment de les coses que anteriorment s’haurien fet afegint un codi curt.

Un bon exemple és un complement de formulari. Gairebé tots els complements del formulari us ofereixen una interfície separada per crear els vostres formularis i un codi curt per incorporar realment aquests formularis al front end.

Aquests tipus de plugins normalment s’adrecen a Gutenberg amb un bloc personalitzat per facilitar la inserció de contingut. Veureu diversos exemples en aquesta secció a:

  • Ninja formes
  • Donar
  • WooCommerce

Aleshores, teniu altres complements que us ajuden a controlar els detalls que no hi ha en la part posterior. Aquests plugins utilitzen normalment caixes meta.

L’exemple més conegut seria com Yoast SEO. No afegiu contingut, però és essencial tota la informació sobre les caixes de meta.

Els quadres meta funcionen ara amb Gutenberg, però encara hi ha la possibilitat que aquests plugins canviïn de funcionalitat per aprofitar Gutenberg. Us mostraré algunes maneres en què Yoast SEO pot tractar el problema, així com com hem escollit fer coses amb alguns dels nostres propis plugins..

1. Ninja Forms afegeix un nou bloc Gutenberg

Ninja formes és un dels complements de formularis més populars al WordPress WordPress. Fins ara, s’adreça a Gutenberg afegint un simple Ninja formes bloc.

Insereixes el bloc com qualsevol altre bloc de Gutenberg:

Com es construeixen les formes ninja per a Gutenberg

A continuació, podeu seleccionar el vostre formulari des del menú desplegable:

blocs de formes ninja

I, un cop seleccionis un formulari, veuràs una visualització prèvia en directe des de l’editor:

Vista prèvia del formulari en directe

Ara mateix, tot això hi ha. Aquest és un enfocament bàsic sòlid perquè:

  • Elimina la necessitat de treballar directament amb dreceres
  • Podeu veure una vista prèvia en directe del vostre disseny mentre continueu editant la vostra pàgina

Els dos següents connectors es basaran en això amb algunes opcions de control / estil més profundes.

2. Dóna afegeix dos blocs de Gutenberg amb opcions de disseny

Donar és un complement de donació popular amb un equip de desenvolupament que ha estat molt proactiu en la integració de Donar amb l’editor de Gutenberg (si us agrada el tema d’aquesta publicació, gaudireu de la sèrie #PlayingWithBlocks a la Donar bloc, on l’equip del grup detalla els seus plans per construir a Gutenberg).

Give és una de les experiències més senzilles de Gutenberg que he provat. No només podeu introduir formularis de donació mitjançant dos blocs de Give, també podeu fer-los servir mitjançant la interfície de Gutenberg.

Els dos blocs us proporcionen:

  • Un únic formulari de donació
  • Una quadrícula de formes de donació

blocs de Gutenberg

Igual que Ninja Forms, obteniu una vista prèvia en directe del vostre formulari. Però també obtens Bloc opcions d’edició que us permeten:

  • Trieu el format
  • Activa / desactiva l’objectiu de donació
  • Trieu on situar el contingut

opcions de disseny de blocs

I, si navegueu pel formulari, obtindreu un enllaç directe per editar aquest formulari:

edició de blocs

Així doncs, hi ha una ullada a com els blocs poden anar una mica més en profunditat que la implementació actual de Ninja Forms. Però WooCommerce fa un pas més …

3. WooCommerce afegeix un bloc de productes amb control de columnes

Si bé WooCommerce probablement afegirà més integracions de Gutenberg a mesura que WordPress 5.0 s’acosti més (algunes són idees per afegir productes aquí), l’equip ja ha submergit els dits dels peus a Gutenberg amb l’oficial WooCommerce Gutenberg Products Block complement.

Sí, ara mateix, aquest és un complement independent. Però un cop l’instal·leu, podreu inserir els productes WooCommerce existents com a bloc al contingut de Gutenberg.

Quan afegeixi el menú Productes podeu escollir quins productes voleu mostrar:

bloc de comerç de gutenberg

A continuació, podeu utilitzar les opcions d’edició de blocs per canviar la disposició:

canviant la disposició del comerç de comerç a gutenberg

Em fa molta il·lusió, perquè és un bon exemple de com Gutenberg la fa més accessible per a l’estil / configuració de contingut no estàndard.

4. Beaver Builder afegeix un "Converteix a Beaver Builder" opció

S’ha parlat molt de com es dirigiran els constructors de pàgines a Gutenberg. Encara no hi ha molt concret, però Beaver Builder ha afegit una funció a Beaver Builder 2.1 que permet convertir un disseny de Gutenberg a Beaver Builder:

constructor de castors Gutenberg

Ara mateix, el procés de conversió no és perfecte. Però la idea de poder-se moure entre Gutenberg i un creador de pàgines és intrigant si la conversió fos transparent.

5. Les caixes meta encara han de funcionar. SEO és un bon exemple

No crec que Yoast SEO hagi publicat cap canvi per abordar Gutenberg, per la qual cosa ara és més un exemple de com funcionen les caixes meta meta existents amb Gutenberg (si no heu seguit de prop Gutenberg; ara té suport de meta-box, encara que ho sigui més per a una compatibilitat endarrerida que una solució a llarg termini).

Com podeu veure, la principal caixa de meta de SEO de Yoast surt a través de Gutenberg sense dilluns:

gutenberg yoast seo meta box

Però et falten les puntuacions d’anàlisi de SEO i de contingut que solien anar a la barra lateral.

Llavors, com podria Yast construir a Gutenberg que s’ho solucioni? A continuació, es mostren algunes maquetes per a possibles maneres amb què Yoast pot integrar la seva anàlisi en la interfície de Gutenberg:

Maqueta BAvis de seo
Maqueta Canàlisi de continguts de seo seo

6. Com dirigim les caselles meta a la revisió del producte WP

El nostre Complement de revisió del producte WP és un d’aquests complements que utilitza una caixa de meta per controlar la sortida del front-end (un quadre de revisió en aquest cas).

Aquí es mostra com treballem per integrar la revisió del producte WP a l’editor de Gutenberg:

wp revisió de productes gutenberg

Quan els usuaris indiquin que la publicació és una revisió amb una barra lateral, podran configurar tot el que hi ha sobre el quadre de revisió a partir de les opcions anteriors:

wp revisió pro gutenberg toggle

Desenvolupadors: aquí teniu un gran recurs per preparar el vostre complement per Gutenberg

Si sou un desenvolupador de complements real, us podeu preguntar com heu de crear Gutenberg per al vostre complement específic. Bé … no puc dir-ho. Però us puc apuntar a aquest fantàstic post del nostre Hardeep Asrani. Hardeep ofereix alguns consells per a preparar el vostre complement per a Gutenberg.

Els desenvolupadors poden crear també Gutenberg amb nous plugins

Els desenvolupadors no es concentren només a compatibilitzar els complements existents amb Gutenberg, sinó que també planifiquen la creació de Gutenberg amb nous plugins..

El nou Gutenberg bloqueja la cobertura

D’una banda, teniu un munt de complements generals que només afegeixen nous tipus de blocs de contingut. S’ofereix a Gutenberg una sensació més creada per als creadors de pàgines. Podeu trobar blocs per a:

  • Taules de preus
  • Testimonis
  • Membres de l’equip
  • Etc.

Per exemple, aquí teniu un bloc de preus de la llista Apilable: complement de Gutenberg Blocks final. Mireu com de detallades són les opcions d’edició de blocs:

nous blocs de gutenberg

Ja hi ha un munt d’aquests complements a WordPress.org. Però, més enllà del complement esmentat Apilable, altres ofertes populars semblen ser:

També hi ha una oferta trucada CoBlocks que es comercialitza com a "Blocs de Gutenberg per als venedors de continguts".

Crec que aquest enfocament nínxol és especialment interessant. Potser en el futur veurem conjunts de blocs especials de Gutenberg per a:

El Bloc de revisió de llibres El complement és un altre mini exemple de com el nínxol de blocs de Gutenberg es pot convertir en una cosa.

Un exemple de com funcionen els camps personalitzats amb Gutenberg

Camps personalitzats de Gutenberg és un altre complement interessant que sembla que obté certa tracció.

Facilita la configuració de camps o grups de camp personalitzats associats a un tipus de publicació personalitzat particular:

camps personalitzats per editor gutenberg

Aleshores, quan aneu a l’editor de Gutenberg, aquests camps personalitzats s’omplen de forma prèvia com a blocs:

exemple de camp personalitzat de gutenberg

Molta gent s’ha preguntat com funcionaran els camps personalitzats amb Gutenberg; aquest és un exemple prometedor que ja està en estat salvatge. Tu pots Obteniu més informació aquí.

Tres exemples de com aborden els desenvolupadors de temes la transició cap a Gutenberg

Acabeu de veure alguns exemples de com es poden crear els desenvolupadors de complements per a Gutenberg, però, els temes?

Sembla que els desenvolupadors de temes segueixen dues vies principals per abordar la transició:

  • Confeccionar temes preparats per Gutenberg afegint estil per a blocs i suportant opcions de disseny de Gutenberg
  • Utilitzant blocs de Gutenberg per crear contingut de tema

Aquests són alguns exemples per pintar el quadre …

1. Afegint estils personalitzats a l’editor de Gutenberg

Una cosa real que veiem que fan els desenvolupadors és afegir estils de tema a la interfície Gutenberg de fons. Això obre les portes per crear una experiència realment WYSIWYG, tot i que Spencer de BigBox WooCommerce detalla alguns problemes amb l’estil de blocs de tercers.

Per exemple, mireu com el tema Ohana de ThemeShaper reestructura completament tot el contingut de Gutenberg, inclòs el títol de la publicació:

estils de tauler de gutenberg

Si el voleu veure en acció, descarregueu el tema Ohana de GitHub. I ThemeShaper també explica com van aconseguir aquest efecte en aquesta publicació del bloc.

2. Afegint noves opcions d’alineació d’amplada completa

Un altre retoc de compatibilitat del tema que veureu és l’afegit Ampli alineament suport. Essencialment, això us permet fer que alguns blocs siguin d’ample complet. L’exemple més comú seria inserir una imatge a amplada completa.

Un cop més, podeu veure-ho en efecte amb el tema d’Ohana:

disseny ampli de gutenberg

Perquè aquesta alineació funcioni, els autors del tema han de declarar explícitament el suport.

3. Construir contingut de demostració de temes amb blocs (p. Ex. El tema del bloc

Finalment, aquest plantejament de Themes orgànics és força fantàstic:

El tema del bloc El contingut de demostració es construeix completament amb blocs de Gutenberg.

Això és, sens dubte, que continuarem creixent, com va dir explícitament Matt al full de ruta de Gutenberg que al juliol inclouria explorar "expandint Gutenberg més enllà de la publicació a la personalització del lloc."

Més enllà del tema de bloc, Array Themes també té un Tema dels blocs atòmics específicament dissenyat per integrar-se amb el connector Atomic Blocks esmentat anteriorment.

Desenvolupadors: us mostrem com preparar el tema per a Gutenberg

Si ets un desenvolupador de temes, es pregunta com compatibilitzar el tema existent amb Gutenberg, Bill Erickson té un gran guia als punts alts. I la Suport de temàtica secció del manual de Gutenberg és un altre bon recurs.

Sens dubte hi haurà coses més interessants

A partir del mostreig anterior, espero que entengueu millor com desenvolupen els desenvolupadors de plugins i temes per a Gutenberg.

A títol personal, sé que escriure aquesta publicació m’ha emocionat molt més amb les possibilitats amb Gutenberg.

Al front del complement, utilitzar blocs per substituir totes les coses que abans s’havien fet amb codis drecers és una millora important per a la usabilitat, especialment per a usuaris casuals.

I també és emocionant la manera com els desenvolupadors de temes puguin aportar estils propis i incorporar blocs, sobretot quan Gutenberg s’estén més en la personalització del lloc.

Ja us heu trobat amb qualsevol exemple excel·lent d’autors de plugins o temes que trobin maneres interessants de construir per a Gutenberg? Feu-nos-ho saber 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
    Like this post? Please share to your friends:
    Adblock
    detector
    map