Læring Gutenberg: Hva er Gutenberg, Likevel?

0
51

Gutenberg er den nye Reagere-drevet SPA redigering erfaring i WordPress. Oh vent, en streng av buzzwords teller ikke for en levedyktig forklaring av programvare? Vi kommer til å pakke ut som streng av buzzwords som vi forklare hva Gutenberg er.

Artikkel-Serien:

  1. – Serien Introduksjon
  2. Hva er Gutenberg, Likevel? (Dette Innlegget)
  3. En Primer med create-guten-blokk (Kommer Snart!)
  4. Moderne JavaScript Syntaks (Kommer Snart!)
  5. Reagerer 101 (Kommer Snart!)
  6. Sette opp en Tilpasset webpack (Kommer Snart!)
  7. En Tilpasset “Kort” Blokk (Kommer Snart!)

Først, en før-og-etter-skjermbildet kan kjøre hjem ideen for deg:

På venstre, redaktøren som det finnes pre-Gutenberg. På høyre, med Gutenberg aktivert via plugin.

Buzzword #1: Redigering Erfaring

Gutenberg er en redesign av WordPress WYSIWYG editor.

Redaktøren i WordPress har tradisjonelt vært at enslige WYSIWYG-feltet (blob av innhold) som lagrer hele innholdet i innlegget til post_content database tabell. Gutenberg ikke endre dette: det sparer alle innlegg innhold til post_content tabellen for å bli hentet ved å ringe the_content() i vårt PHP-maler.

Så ja, Gutenberg ligger bare en redesign av redaktør… men det er en parodi, for å ringe Gutenberg bare en redesign av redaktøren! Det er så mye mer enn det!

Gutenberg introduserer en helt ny måte å tenke om innholdet i WordPress. Det gir ikke bare utviklerne en innfødt måte å håndtere innhold i biter (vi vil faktisk være å henvise til dem som blokker, som er deres offisielle navn), den gjør det mulig for sluttbrukere å lage rike, dynamiske side oppsett med WordPress ut av boksen. Uten Gutenberg, dette ville trolig kreve en rekke tredjeparts programtillegg (les: kortnummer kaster opp og server belastning) som er tilfellet i dag med hva som vil være kjent som WordPress “Klassiske” editor.

For anvendelsen av denne artikkel og vår lære, vite dette: Gutenberg ikke endre hvordan WordPress fungerer på sitt aller kjerne. Det er 99% en endring til “editor’ s brukergrensesnitt. Trykket “Publiser” fortsatt lagrer innhold for å post_content—det er bare et mye mer mulighet til å lage brukeropplevelsen av å skrive og redigere innhold.

Buzzword #2: SPA

Oversettelse: Gutenberg er en Enkelt Side Søknaden innen WordPress.

I en Enkelt Side-Programmet (SPA) et program som kjører på en enkelt side lastes inn, og påfølgende vekselsvirkningene er drevet 100% av JavaScript og Ajax forespørsler.

Merk “i WordPress’ del av ovennevnte uttalelse—Gutenberg ikke (foreløpig) påvirker alle deler av WordPress utover hvor man normalt ville se redaktør. I hovedsak, Gutenberg erstatter WYSIWYG, TinyMCE editor med et SPA.

Dette betyr at det å skrive innholdet i Gutenberg er rask og tilfredsstillende, og jeg skulle ønske jeg kunne si min (begrenset) erfaring med utvikling av blokker har vært den samme. For vår reise, dette SPA-virksomhet betyr treg side lastes inn under utvikling (vi legger mye av JavaScript), skjule og frustrerende konsollen feil, og npm moduler for dager.

Selvfølgelig, det er en glass-halv-tomt se på situasjonen. Glass halv-full? Det føles veldig godt når noe virker. Den som vinner er få og langt mellom, først, men hold deg til det!

Buzzword #3: Reagerer-drevet

Oversettelse: Ja, Gutenberg er bygget i Reagere. Det er sannsynligvis ikke kommer til å endre når som helst snart, om noen gang.

Det var noen #hotdrama tilbake i September-oktober 2017 om å velge et rammeverk for WordPress siden lagt en patent-klausul for å Reagere. Men etter store tilbakeslag fra åpen kildekode-samfunn, inkludert WordPress (som, hm, krefter ~30% av nettsteder), endret det tilbake.

Fra januar dette året (2018) var det fortsatt hvisker at et rammevedtak for core er til behandling, men inntil vi får offisiell ord fra de makter det, la oss se på fakta.

  • Gutenberg er i aktiv utvikling.
  • Temaer og plugins er i aktiv utvikling forberede for Gutenberg.
  • Alt som skjer i å Reagere.

Jeg setter pengene mine på å Reagere, og hvis det endringer, flott! Jeg må Reagere på min cv og få på læring uansett erstatning kan være.

Viktige Ressurser

  1. Den GitHub repo — Dette er i hovedsak for å søke etter problemer når de kommer opp under utviklingen for å se om de har allerede blitt arkivert.
  2. Den Gutenberg Håndbok — Dette er hvor den offisielle Gutenberg dokumentasjon liv.

Pass opp!

Mens Gutenberg-prosjektet er langt nok sammen med at det ikke vil være noen store infrastrukturelle endringer, må vi huske at Gutenberg er helt ny programvare i aktiv utvikling, og alt kan skje. Hvorfor ikke være med på den fronten? Dette er spennende ting.

WordPress samfunnet har allerede begynt å ta opp i oppgaven med å lage verktøy, tutorials, case-studier, kurs og samfunnet bidratt med ressurser.

Som blir sagt, kan du søke et spørsmål som ikke har blitt stilt før. På et tidspunkt, vil du sannsynligvis finne deg selv å lese Gutenberg kildekoden for dokumentasjon, og du kan finne den eksisterende dokumentasjonen til å være gått ut på dato. Du kan teste ut et eksempel fra en to-ukers gamle opplæringen bare å finne den bruker en utdatert API-metoden.

Hvis du kommer over noe du føler er ikke som det skal være, forskning og rapportere problemet på GitHub, be om det i #core-redaktør kanal av WordPress Slakk, eller varsel forfatteren av disse ut-av-dato blogginnlegg. Og hvis det er dokumentasjon som er et problem, kan du alltids fikse det selv!

Sette Opp

Nå, jeg ønsker for deg å sette opp et utviklingsmiljø, slik at vi kan fortsette denne diskusjonen med mer kontekst. Gjør disse tingene:

  1. Sette opp en lokal installere WordPress, men du velger å gjøre det—dette kan være et eksisterende prosjekt, eller en fersk installasjon. Bare noe som kan være svært ødelagt for demo formål.
  2. Aktivere en relativt enkel tema. Tjue Sytten vil fungere helt fint. Det eneste temaet er behov for å ha en samtale for å the_content(); i sitt innlegg og side maler, og de fleste ut-av-det-box temaer gjøre.
  3. Installere Gutenberg. Du kan finne det i plugin depotet. Denne versjonen er ganske langt, og oppdateres jevnlig, så vi trenger ikke å bekymre deg om å arbeide fra en utvikling bygge.
  4. Aktivere Gutenberg-plugin og lage et nytt innlegg.

Hvis du ikke har kjørt en WordPress-site lokalt før, sjekk ut denne guiden. Vi anbefaler sterkt at du laster ned noe som MAMP, XAMPP, eller lignende, dersom dette er din første gang.

La oss Utforske

Du bør ha noe mye som dette:

En stort sett blanke innlegg i Gutenberg. Skriver / viser block-velgeren.

Som i bildet ovenfor, å skrive en / avslører en liste av blokker. Slette /<code> og på høyre burde du se en <code>+ som, når den klikkes, vil du se en ekstra oppføring av blokker, organisert etter kategori.

En annen oppfatning av blokker, denne gang organisert etter kategori.

Varsel panelet på høyre side med knapper for både “Dokument” og “Blokker.” “Blokk” – kategorien er kjent som blokker-inspektør, og gir oss et fint område for blokkering av bestemte valg som så, for avsnitt blokk:

Blokker-inspektøren avslører tilpasningsmuligheter for en bestemt blokk.

Jeg anbefaler å spille rundt med innlegget ditt for noen flere minutter, og teste ut forskjellige typer blokker. Holde et øye på at inspector-sidestolpen for å se hva tilpasningsmuligheter hver blokk har. Alle disse blokkene du ser nå, er inkludert i et bibliotek av core blokker og kan være et referansepunkt for å lage tilpassede blokker (som vi vil gjøre i den neste delen av denne serien!).

Når du har laget et innlegg befolket med fem-ish blokker av varierende slag, lagre og publisere innlegget, så ta en titt på det fra den fronten. Hyggelig!

Nå, la oss gjøre noe crazy. Deaktivere Gutenberg fra Plugins skjermen. Gå tilbake til redigeringsvinduet for det innlegget, og du skal se noe som dette, i det “Klassiske” redaktør:

Blokker, som de er lagret i databasen.

Hva er alle disse kommentarene? De er blokker! De map – en til en med de blokkene du valgte når du oppretter innlegg.

Under panseret, blokker er biter av HTML-identifiserbar med deres omkringliggende HTML-kommentarer. I eksempelet ovenfor, vil du legge merke til noen få av blokken navn, dvs. wp:blokk-navnet er ledsaget av JSON, for eksempel andre ledd blokk. Når jeg er angitt noen alternativer for tilpasning i blokk inspektør, disse ble lagret sammen med blokker-id slik som nå, når jeg reaktivere Gutenberg, mine innstillinger vil ikke være tapt; de er lagret rett ved siden av blokk definisjon i seg selv.

Før du aktivere plugin, men vise innlegg på nytt fra den fronten. Har du mistet noen styling? Jeg gjorde.

Gå videre og reaktivere Gutenberg-plugin, og dobbel sjekk editor for å sørge for at blokkene er fortsatt intakt. På grunn av disse HTML-kommentarer, de skal være!

Nå, la oss rote rundt og se hvor disse stilene kommer fra. Når jeg inspisere min avsnitt kvartal fra fronten, ser jeg et par innebygde stiler—et resultat av alternativene som er valgt i blokk inspector—samt noen strukturelle stiler fra hva som synes å være en stil.css-filen enqueued av Gutenberg-plugin (etter 5.0 er utgitt, husk, dette vil bare være fra WordPress, ikke en plugin).

Inspeksjon av stiler fra fronten, ser vi at det er stiler som kommer fra Gutenberg seg selv

Nå prøver du å inspisere som ledd kvartal fra redigeringsvisningen. Du skal se det samme sett av innebygde stiler og samme side.har-avsnitt selector brukes til kvartal fra redigeringsvisningen. Interessant!

Dette introduserer det faktum at blokker kan ha delte stiler mellom temaet ‘ s front-end og redaktør. Pre-Gutenberg, hadde vi tema, eller front-end, stiler, og vi kunne separat enqueue en editor-stil.css for å legge til CSS til WordPress admin området. Nå, derimot, vår blokker dele stiler mellom front-end og redaktør vise ganske mye av som standard.

Glass half-og full perspektiv: dette gir oss muligheten til å lage et innhold visning for utgivere som er mye nærmere til hva de vil se på den fronten. De vil ikke lenger trenger å treffe knappen Forhåndsvisning et dusin eller flere ganger for å vise små innhold endringer før publisering.

Glass halv tomme perspektiv: Dette kan skape mer arbeid for oss—som designere og utviklere, som vi nå har en editor erfaring til å lage i tillegg til front-mot nettstedet! Og vi må finne ut hvilke maler som skal deles mellom de to. Jeg vil imidlertid argumentere for at med et gjennomtenkt design og front end strategi, vil dette ikke være så mye av et problem som man skulle tro.

Umm… Hvor er JavaScript?

Vi kommer til å trenge JavaScript for å lage en blokk i Gutenburg. Så la oss lage en blokk som allerede! Det er det som er fokus for de neste innlegg i denne serien.

Artikkel-Serien:

  1. – Serien Introduksjon
  2. Hva er Gutenberg, Likevel? (Dette Innlegget)
  3. En Primer med create-guten-blokk (Kommer Snart!)
  4. Moderne JavaScript Syntaks (Kommer Snart!)
  5. Reagerer 101 (Kommer Snart!)
  6. Sette opp en Tilpasset webpack (Kommer Snart!)
  7. En Tilpasset “Kort” Blokk (Kommer Snart!)