Lärande Gutenberg: Vad är Gutenberg, Ändå?

0
26

Gutenberg är den nya Reagera-driven SPA redigering erfarenhet i WordPress. Oh vänta, en sträng av slagord räknas inte för en gångbar förklaring av programvara? Vi kommer att packa upp sträng av slagord som vi förklara vad Gutenberg är.

Artikel-Serien:

  1. Serien Introduktion
  2. Vad är Gutenberg, Ändå? (Detta Inlägg)
  3. En Primer med skapa-guten-block (Kommer Snart!)
  4. Modern JavaScript-Syntax (Kommer Snart!)
  5. Reagera 101 (Kommer Snart!)
  6. Att sätta upp en Egen webpack (Kommer Snart!)
  7. En Anpassad “Card” – Block (Kommer Snart!)

Först en före-och-efter skärmdump kan köra hem den idé för dig:

På den vänstra, den editor som finns före Gutenberg. På höger, med Gutenberg aktiverad via plugin.

Modeord #1: Redigering Erfarenhet

Gutenberg är en redesign av WordPress WYSIWYG-editor.

Editorn i WordPress har traditionellt varit det enda WYSIWYG-området, (blob av innehåll) som sparar hela innehållet i posten så att den post_content databastabell. Gutenberg ändrar inte detta: det sparar alla inlägg innehållet till post_content tabellen hämtas genom att ringa the_content() i våra PHP-mallar.

Så ja, Gutenberg är bara en redesign av editor…, men det är en parodi att ringa Gutenberg bara en redesign av redaktören! Det är så mycket mer än så!

Gutenberg introducerar ett helt nytt sätt att tänka om innehåll i WordPress. Det är inte bara ger utvecklare en lärares sätt att hantera innehållet i bitar (vi ska faktiskt vara att hänvisa till dem som ett block, som är dess officiella namn), det gör det möjligt för användarna att skapa ett rikt, dynamiskt sidlayouter med WordPress ur lådan. Utan Gutenberg, detta skulle sannolikt kräva en hamstra av tredje part plugins (läs: kortkod kräkas och server stam) som för närvarande är fallet med vad som kommer att vara känd som WordPress “Klassiska” redaktör.

För tillämpningen av denna artikel och vårt lärande, vet detta: Gutenberg inte ändra på hur WordPress funktioner i kärnan. Det är 99% en förändring till redaktören användargränssnitt. Klicka på “Publicera” fortfarande sparar innehållet till post_content—det är bara en mycket större möjlighet att skapa den upplevelse av att skriva och redigera innehåll.

Modeord #2: SPA

Översättning: Gutenberg är en Enda Sida Tillämpning inom WordPress.

På en Enda Sida Ansökan (SPA) i ett program som körs på en enda sida belastning och efterföljande interaktioner som drivs till 100% av JavaScript och Ajax-förfrågningar.

Notera “i WordPress’ en del av ovanstående uttalande—Gutenberg inte (för närvarande) påverkar någon del av WordPress än där man normalt se redaktör. I huvudsak Gutenberg ersätter WYSIWYG, TinyMCE editor med ett SPA.

Detta innebär att skriva innehållet i Gutenberg är snabb och tillfredsställande, och jag önskar att jag kunde säga att min (begränsade) erfarenhet med att utveckla block har varit densamma. För vår resa, SPA-verksamhet innebär att sidan laddas långsamt under utveckling (vi fyller på med en hel del JavaScript), dunkla och frustrerande konsolen fel, och npm moduler för dagar.

Naturligtvis, det är ett glas som halvtomt ser på situationen. Halvfullt glas? Det känns riktigt bra när något fungerar. Den som vinner är få och långt mellan, men hålla på med det!

Modeord #3: Reagera-driven

Översättning: Ja, Gutenberg är byggt i att Reagera. Det är förmodligen inte går att ändra när som helst snart, om någonsin.

Det var några #hotdrama tillbaka i September-oktober 2017, om att välja en ram för WordPress sedan lagt till en patent-satsen att Reagera. Men efter en stor motreaktion från öppen källkod samhällen, inklusive WordPress (som, ahem, befogenheter ~30% av de webbplatser), ändrade tillbaka det.

Från och med januari i år (2018) det var fortfarande viskar om att ett rambeslut för core är avvaktande, men tills vi får officiellt ord från de krafter som, låt oss titta på fakta.

  • Gutenberg är under aktiv utveckling.
  • Teman och plugins som är under aktiv utveckling förbereder sig för Gutenberg.
  • Allt som händer i Reagera.

Jag sätter mina pengar på att Reagera, och om att ändras, bra! Jag måste Reagera på mitt cv och komma på att lära sig vad som ersätter det kan vara.

Viktiga Resurser

  1. GitHub-repo — Detta är främst för att söka frågor när de kommer upp under utvecklingen för att se om de har redan lämnats in.
  2. Gutenberg-Handbok — Detta var den officiella Gutenberg dokumentation liv.

Se upp!

När Gutenberg-projektet är tillräckligt långt tillsammans att det inte kommer att bli några större infrastrukturella förändringar, vi måste komma ihåg att Gutenberg är helt ny programvara i aktiv utveckling och vad som helst kan hända. Varför inte vara på den fronten? Det här är spännande saker.

WordPress samfundet har redan börjat ta sig an uppgiften att skapa verktyg, övningar, fallstudier, kurser och gemenskapen bidragit med resurser.

Som sagt, du kan söka en fråga som inte ställts tidigare. Vid en viss punkt, kommer du förmodligen finna dig själv att läsa Gutenberg källkoden för dokumentation, och du kan hitta den befintliga dokumentationen för att vara föråldrad. Du kan testa ut ett exempel från en två-veckors handledning bara att hitta det använder sig av ett föråldrat API-metoden.

Om du inte stöter på något som du känner är inte som det borde vara, forskning och rapportera problemet på GitHub, be om det i #core-editor kanal av WordPress Slack, eller varna författare av ovannämnda out-of-date blogginlägg. Och om det är dokumentationen som är ett problem, kan du alltid fixa det själv!

Att Ställa Upp

Nu skulle jag vilja ha för dig att sätta upp en utvecklingsmiljö så att vi kan fortsätta denna diskussion med fler sammanhang. Göra dessa saker:

  1. Ställ upp en lokal WordPress installation, men du väljer att göra det—detta kan vara ett befintligt projekt eller en ny installation. Bara något som kan vara mycket bruten för demosyfte.
  2. Aktivera ett relativt enkelt tema. Tjugo Sjutton kommer att fungera alldeles utmärkt. Det enda tema måste ha är en uppmaning till the_content(); i sina inlägg och mallar, och de flesta out-of-the-box teman göra.
  3. Installera Gutenberg. Du kan hitta den i plugin slutförvaret. Denna version är ganska långt tillsammans och uppdateras regelbundet, så vi behöver inte oroa dig om att arbeta från en utveckling bygga.
  4. Aktivera Gutenberg-plugin och skapa ett nytt inlägg.

Om du inte kör en WordPress webbplats lokalt innan, kolla in den här guiden. Vi rekommenderar starkt att du laddar ner något som MAMP, XAMPP eller liknande om detta är din första gång.

Låt oss Utforska

Du bör ha något så mycket som detta:

En mestadels tomma inlägg i Gutenberg. Skriver / visar blockets väljare.

Som i ovanstående bild, skriva en / visar en lista av block. Radera /<code> och på rätt bör du se en <code>+ att när du klickar på den, kommer att avslöja en ytterligare notering av block, ordnade efter kategori.

En annan vy av block, denna gång ordnade efter kategori.

Märker panelen på höger med flikar för både “Dokument” och “Blockera.” “Blockera” – fliken är känd som blocket inspektör, och ger oss ett fint område för att blockera specifika val som så, för punkt block:

Blocket inspektör visar anpassningsalternativ för ett visst block.

Jag rekommenderar att spela runt med ditt inlägg för några minuter och testa de olika typer av block. Håll ett öga på att inspektören sidofältet för att se vad som alternativ för anpassning varje block erbjuder. Alla dessa block som du kan se nu ingår i ett bibliotek av core block och kan vara en referenspunkt för att skapa egna kvarter (vilket vi kommer att göra i nästa del av denna serie!).

Efter att du har skapat ett inlägg befolkade med fem-ish block av olika slag, spara och publicera inlägget, så ta en titt på det från den främre änden. Trevligt!

Nu, låt oss göra något galet. Inaktivera Gutenberg från Plugins skärmen. Gå tillbaka till redigeringsskärmen för det inlägget, och du bör se någonting som liknar det här, i “Classic” – redaktör:

Block, eftersom de sparas i databasen.

Vad är alla dessa kommentarer? De är block! De gör en till en med de block som du valde när du skapade inlägget.

Under huven, block är bitar av HTML identifierbara genom sin omgivande HTML-kommentarer. I exemplet ovan, du kommer att märka några av blocket namn, dvs wp:blockera-namn åtföljs av JSON, såsom andra stycket block. När jag angett någon alternativ för anpassning i blocket inspektör, dessa lagras tillsammans med blocket identifierare så att nu, när jag återaktivera Gutenberg, mina inställningar kommer inte att gå förlorade; de är sparade rätt vid sidan av blocket själva definitionen.

Innan du aktiverar plugin, men läser inlägget igen från den främre änden. Har du förlorar lite styling? Det gjorde jag.

Gå vidare och aktivera Gutenberg plugin, och dubbelkolla editor för att se till att ditt block är fortfarande intakt. Eftersom dessa HTML-kommentarer, de ska vara!

Nu, låt oss rota runt och se var dessa stilar kommer från. När jag inspektera min punkt kvarter från fronten, ser jag ett par inline styles—ett resultat av alternativ som valts i block inspektör samt vissa strukturella stilar från vad som verkar vara en stil.css-fil i kö genom att Gutenberg-plugin (efter 5.0 släpps, kom ihåg att detta kommer att vara precis från WordPress, inte en plugin).

Inspektera stilar från fronten, som vi ser det finns stilar som kommer från Gutenberg själv

Prova nu att inspektera att punkt kvarter från redigeringsvyn. Du skulle se samma uppsättning av inline styles och samma p.har-punkt väljare tillämpas på blocket från redigeringsvyn. Intressant!

Detta inför det faktum att blocken kan ha delade stilar mellan tema är front-end och redaktör. Före Gutenberg, vi hade tema, eller front-end, stilar, och vi kunde separat köa en redaktör stil.css för att lägga till CSS till WordPress admin område. Nu, dock, våra kvarter dela stilar mellan front-end och redaktör visa ganska mycket standard.

Glaset är halvfullt-perspektiv: detta tillåter oss att skapa ett innehåll visa för utgivare som är mycket närmare vad de kommer att se på den fronten. De kommer inte längre behöver trycka på knappen Förhandsgranska ett dussin eller flera gånger för att visa små förändringar i innehållet innan publicering.

Halvtomt perspektiv: Detta kan skapa mer arbete för oss som designers och utvecklare, att vi nu har en redigerare erfarenhet för att skapa utöver framsidan hemsida! Och vi har att räkna ut vilka stilar är delat mellan de två. Men jag skulle vilja hävda att med en väl genomtänkt design och front end-strategi, detta kommer inte att vara så mycket av en fråga som du tror.

Umm… Var är JavaScript?

Vi kommer att behöva JavaScript för att skapa ett block i Gutenburg. Så låt oss göra ett block redan! Det är fokus för nästa inlägg i denna serie.

Artikel-Serien:

  1. Serien Introduktion
  2. Vad är Gutenberg, Ändå? (Detta Inlägg)
  3. En Primer med skapa-guten-block (Kommer Snart!)
  4. Modern JavaScript-Syntax (Kommer Snart!)
  5. Reagera 101 (Kommer Snart!)
  6. Att sätta upp en Egen webpack (Kommer Snart!)
  7. En Anpassad “Card” – Block (Kommer Snart!)