Byg til Gutenberg: Sådan adresserer plugin- og temaforfattere overgangen til Gutenberg

Byg til Gutenberg: Sådan adresserer plugin- og temaforfattere overgangen


På WordCamp Europe 2018 lagde Matt Mullenweg en grov køreplan for Gutenberg i de næste flere måneder. I juli kommer der et stort skub for at øge Gutenberg-adoptionen med en 5,0-beta i spillet for august (eller videre; faktisk sandsynligvis ud over). Den forestående integration kan få dig til at undre dig over, hvordan WordPress-udviklere planlægger at bygge til Gutenberg.

Det vil sige, hvad er de forskellige måder, hvorpå udviklere forbereder deres tilbud til Gutenberg? Og gør folk noget nyt og interessant for Gutenberg?

I dette indlæg vil vi give dig nogle ægte, konkrete eksempler på, hvordan plugin- og temaudviklere kan bygge til Gutenberg ved at vise dig, hvad der allerede er derude.

Ved at se på nogle eksempler fra det virkelige liv på, hvordan udviklere bruger blokke og stilarter til at skabe en mere integreret redigeringsoplevelse, håber vi, at du:

  • Forstå, hvordan Gutenberg kan være til gavn for dig som slutbruger.
  • Få nogle ideer til at bygge til Gutenberg til dine egne WordPress-projekter.

Hvis du stadig ikke er sikker på, hvad Gutenberg-redaktøren er, kan du tjekke vores fulde tutorial til Gutenberg-redaktør først.

Seks eksempler på, hvordan eksisterende plugins adresserer overgangen til Gutenberg

Den måde, plugin-forfattere bygger for Gutenberg, afhænger primært af plugin-funktionen.

På den ene side har du plugins, der er fokuseret på at tilføje frontindhold. Dette er hovedsageligt de ting, der tidligere er blevet gjort ved at tilføje en kortkode.

Et godt eksempel er en form-plugin. Stort set hver formularplugin giver dig en separat grænseflade til at opbygge dine formularer og derefter en kortkode til faktisk at integrere disse formularer i frontend.

Disse typer plugins adresserer typisk Gutenberg med en brugerdefineret blok for at gøre det lettere at indsætte indhold. Du vil se flere eksempler i dette afsnit fra:

  • Ninja Forms
  • Give
  • WooCommerce

Derefter har du andre plugins, der hjælper dig med at kontrollere bag kulisserne detaljer. Disse plugins bruger typisk metakasser.

Det mest kendte eksempel ville være noget som Yoast SEO. Du tilføjer ikke indhold, men alle disse metaboksinformationer er vigtige.

Metakasser fungerer nu sammen med Gutenberg, men der er stadig en chance for, at disse plugins ændrer deres funktionalitet for at drage fordel af Gutenberg. Jeg viser dig nogle måder, hvorpå Yoast SEO muligvis løser problemet, samt hvordan vi har valgt at gøre ting med nogle af vores egne plugins.

1. Ninja Forms tilføjer en ny Gutenberg-blok

Ninja Forms er et af de mest populære form plugins i WordPress.org repo. Indtil videre adresserer det Gutenberg ved at tilføje en simpel Ninja Forms blok.

Du indsætter blokken som enhver anden Gutenberg-blok:

hvordan ninja former devs build for Gutenberg

Derefter kan du vælge din formular i rullemenuen:

ninja danner blok

Når du først vælger en formular, vil du se en live preview lige i editoren:

live preview af form

Lige nu er det alt, hvad der er. Men dette er en solid baseline-tilgang, fordi:

  • Det eliminerer behovet for at arbejde direkte med kortkoder
  • Du kan se en direkte forhåndsvisning af dit design, mens du stadig redigerer din side

De næste to plugins vil bygge videre på dette med nogle dybere styling / kontrolmuligheder.

2. Give tilføjer to Gutenberg-blokke med layoutindstillinger

Give er et populært donationsplugin med et udviklingshold, der har været meget proaktivt med hensyn til at integrere Give med Gutenberg-editoren (hvis du kan lide emnet for dette indlæg, vil du nyde #PlayingWithBlocks-serien på Giv blog, hvor Give-teamet specificerer deres planer om at bygge for Gutenberg).

Give har en af ​​de mest strømlinede Gutenberg-oplevelser, som jeg har prøvet. Ikke kun kan du indtaste Giv donationsformularer via Givs to blokke, du kan også style dem ved hjælp af Gutenberg-grænsefladen.

Giv’s to blokke lader dig integrere:

  • En enkelt donationsform
  • Et gitter af donationsformer

givewp gutenberg blokke

Ligesom Ninja Forms får du en live preview af din form. Men du får også Blok redigeringsmuligheder, der lader dig:

  • Vælg format
  • Aktivér / deaktiver donationsmålet
  • Vælg, hvor indholdet skal placeres

blokerer layoutindstillinger

Og hvis du holder musepekeren over din formular, får du et direkte link til at redigere denne formular:

blokering

Så der er et kig på, hvordan blokke kan gå lidt dybere end Ninja Forms ‘nuværende implementering. Men WooCommerce går et skridt videre …

3. WooCommerce tilføjer en produktblok med søjlekontrol

Mens WooCommerce sandsynligvis vil tilføje flere Gutenberg-integrationer, efterhånden som WordPress 5.0 bevæger sig nærmere (nogle ideer til, hvordan man tilføjer produkter her), har holdet allerede dyppet tæerne i Gutenberg med embedsmanden WooCommerce Gutenberg Products Block plugin.

Ja – lige nu er dette et separat plugin. Men når du først har installeret det, er du i stand til at indsætte eksisterende WooCommerce-produkter som en blok i dit Gutenberg-indhold.

Når du tilføjer Produkter blokere, kan du vælge hvilke produkter, der skal vises:

gutenberg woocommerce blok

Derefter kan du bruge blokredigeringsindstillingerne til at ændre layoutet:

ændre woocommerce layout i Gutenberg

Denne bliver mig ret ophidset, fordi det er et godt eksempel på, hvordan Gutenberg gør det mere tilgængeligt for stil / konfigurering af ikke-standardindhold.

4. Beaver Builder tilføjer en "Konverter til Beaver Builder" mulighed

Der har været meget snak om, hvordan sidebygere vil adressere Gutenberg. Der er ikke meget konkret endnu, men Beaver Builder har tilføjet en funktion i Beaver Builder 2.1, der giver dig mulighed for at konvertere et Gutenberg-layout til Beaver Builder:

Beaver Builder Gutenberg

Lige nu er konverteringsprocessen ikke perfekt. Men ideen om at være i stand til at flytte mellem Gutenberg og en sidebygger er spændende, hvis konverteringen var problemfri.

5. Metakasser skal stadig fungere – Yoast SEO er et godt eksempel

Jeg tror ikke, at Yoast SEO har frigivet nogen ændringer for at adressere Gutenberg endnu, så lige nu er dette mere et eksempel på, hvordan eksisterende metakasser fungerer med Gutenberg (hvis du ikke har fulgt Gutenberg tæt – det har metaboks-support nu, selvom det er mere for bagudkompatibilitet end en langsigtet løsning).

Som du kan se, kommer Yoast SEO-metakassen igennem uskadet med Gutenberg:

gutenberg yoast seo metakasse

Men du mangler scoringerne til SEO og indholdsanalyse, der plejede at gå i sidebjælken.

Så hvordan kan Yoast bygge for Gutenberg for at tackle det? Her er nogle mockups for mulige måder, hvorpå Yoast kan integrere sin analyse i selve Gutenberg-interface:

Mockup Byoast seo advarsel
Mockup Cyoast seo-indholdsanalyse

6. Hvordan vi adresserer metakasser i WP Product Review

Vores WP Product Review-plugin er et af disse plugins, der bruger en metakasse til at kontrollere output på frontend (en gennemgangsboks i dette tilfælde).

Sådan arbejder vi med at integrere WP Product Review i Gutenberg-editoren:

wp produktanmeldelse gutenberg

Når brugere angiver, at indlægget er en anmeldelse med en sidepanel til at skifte, vil de være i stand til at konfigurere alt om deres gennemgangsfelt fra ovenstående indstillinger:

wp review pro gutenberg toggle

Udviklere – her er en stor ressource til at få dit plugin klar til Gutenberg

Hvis du er en egentlig plugin-udvikler, kan du undre dig over, hvordan du skal bygge til Gutenberg til dit specifikke plugin. Nå, det kan jeg ikke fortælle dig. Men jeg kan henvise dig til dette fantastiske indlæg af vores egen Hardeep Asrani. Hardeep lægger nogle handlingsfulde tip til at forberede din plugin til Gutenberg.

Udviklere kan også bygge til Gutenberg med nye plugins

Udviklere er ikke kun fokuseret på at gøre eksisterende plugins kompatible med Gutenberg, de planlægger også at bygge til Gutenberg med nye plugins.

Ny Gutenberg blokerer i massevis

På den ene side har du en overflod af generelle plugins, der bare tilføjer nye typer indholdsblokke. Disse giver Gutenberg mere en sidebyggerfølelse. Du kan finde blokke til:

  • Prissætningstabeller
  • Udtalelser
  • Holdkammerater
  • etc.

For eksempel er her en prisfastsættelse tabel blok fra Stabelbar – Ultimate Gutenberg Blocks-plugin. Se på, hvor detaljerede indstillinger for blokredigering er:

nye gutenberg blokke

Der er allerede en masse af disse plugins på WordPress.org. Men ud over det nævnte Stackable-plugin, synes andre populære tilbud at være:

Der kaldes også et tilbud co-blokke som markedsfører sig selv som "Gutenberg-blokke til indholdsmarkedsførere".

Jeg synes, denne niche-tilgang er især interessant. Måske i fremtiden vil vi se specielle Gutenberg-bloksæt til:

Det Boganmeldelsesblok plugin er et andet minieksempel på, hvordan niche Gutenberg-blokke kan blive en ting.

Et eksempel på, hvordan brugerdefinerede felter kan arbejde med Gutenberg

Gutenberg brugerdefinerede felter er et andet interessant plugin, der ser ud til at få noget trækkraft.

Det gør det nemt at konfigurere brugerdefinerede felter eller feltgrupper, der er knyttet til en bestemt tilpasset posttype:

gutenberg redaktør brugerdefinerede felter

Når du derefter går til Gutenberg-editoren, udfyldes disse brugerdefinerede felter som blokke:

gutenberg brugerdefineret felteksempel

Mange mennesker har spekuleret på, hvordan brugerdefinerede felter vil fungere med Gutenberg – dette er et lovende eksempel, der allerede er ude i naturen. Du kan lære mere om det her.

Tre eksempler på, hvordan temaudviklere adresserer overgangen til Gutenberg

Du så lige nogle eksempler på, hvordan plugin-udviklere kan bygge til Gutenberg, men hvad med temaer?

Temaudviklere ser ud til at følge to vigtigste veje for at tackle overgangen:

  • At lave temaer Gutenberg-klar ved at tilføje styling til blokke og understøtte Gutenberg layoutindstillinger
  • Brug af Gutenberg-blokke til at opbygge temaindhold

Her er nogle eksempler på at male billedet …

1. Tilføjelse af tilpassede stilarter til Gutenberg-editoren

En virkelig pæn ting, vi ser udviklere gøre, er at tilføje temastilarter til den faktiske back-end Gutenberg-interface. Dette åbner dørene for at skabe en virkelig WYSIWYG-oplevelse, skønt Spencer fra BigBox WooCommerce beskriver nogle problemer med styling af tredjepartsblokke.

Se for eksempel, hvordan ThemeShaper’s Ohana-tema fuldstændigt genskaber alt Gutenberg-indholdet, inklusive posttitel:

gutenberg i instrumentbrættet

Hvis du vil se det i aktion, download Ohana-temaet fra GitHub. Og ThemeShaper forklarer også, hvordan de opnåede denne effekt i dette blogindlæg.

2. Tilføjelse af nye justeringsmuligheder i fuld bredde

En anden sej tema til kompatibilitet, du vil se, er tilføjelsen af Bred justering support. I det væsentlige giver dette dig mulighed for at lave visse blokke i fuld bredde. Det mest almindelige eksempel ville være at indsætte et billede i fuld bredde.

Igen kan du se dette i kraft med Ohana-temaet:

gutenberg bredt layout

For at denne tilpasning kan fungere, er temaforfattere nødt til eksplicit at erklære støtte.

3. Bygge tema-demoindhold med blokke – f.eks. Blokertemaet

Endelig er denne tilgang fra organiske temaer temmelig cool:

Blokertemaet demoindhold er bygget helt med Gutenberg-blokke.

Dette er noget, vi utvivlsomt vil fortsætte med at se vokse, som Matt udtrykkeligt sagde i Gutenberg-køreplanen, at juli ville omfatte udforskning "udvide Gutenberg ud over stillingen til tilpasning af websteder."

Ud over The Block-temaet har Array-temaer også en Atomiske blokke tema der er specifikt designet til at integrere med Atomic Blocks-pluginet nævnt ovenfor.

Udviklere – sådan gør du dit tema klar til Gutenberg

Hvis du er en temaudvikler, der spørger dig selv, hvordan du gør dit eksisterende tema kompatibelt med Gutenberg, Bill Erickson har en god guide til højdepunkterne. Og Temastøtte sektion af Gutenberg-håndbogen er en anden god ressource.

Der vil bestemt komme flere seje ting der kommer

Fra prøven ovenfor håber jeg, at du har en bedre forståelse af, hvordan plugin- og temaudviklere planlægger at bygge til Gutenberg.

Personligt ved jeg, at det at skrive dette indlæg har gjort mig især mere begejstret over mulighederne med Gutenberg.

På plugin-fronten er brug af blokke til at erstatte alle de ting, der tidligere var blevet gjort med kortkoder, en stor forbedring af brugervenligheden, især for afslappede brugere.

Og den måde, som temaudviklere kan bringe deres egne stilarter på og integrere blokke, er også spændende – især da Gutenberg udvider mere til tilpasning af websteder.

Nu over til dig – har du snublet over nogle gode eksempler på, at plugin eller temaforfatter finder interessante måder at bygge for Gutenberg? Fortæl os det i kommentarerne!

Glem ikke at deltage i vores nedbrudskursus om at fremskynde dit WordPress-sted. Med nogle enkle rettelser kan du reducere din indlæsningstid med endda 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