Leren Gutenberg: Serie Inleiding

0
34

Hey CSS-Oplichters! 👋 Hebben We een speciale lange serie we beginnen aan hier helemaal gewijd aan Gutenberg, een grote verandering in de editor van WordPress. Ik heb uitgenodigd een dynamische duo van auteurs om u deze serie, die zal brengen u op de hoogte blijft van wat Gutenberg is, wat het kan doen voor uw site, en hoe je eigenlijk kunt ontwikkelen.

Wie dit is voor

Deze serie is voor ontwikkelaars die nieuwsgierig zijn over deze nieuwe wereld en wil beginnen te werken. Deze serie is niet noodzakelijk voor site-eigenaren die willen weten hoe het zal invloed hebben op hun site of die zich zorgen maken over het voor welke reden dan ook.

Het is duidelijk, er is veel mogelijk met Gutenberg. Ja, het is streven naar een betere ervaring te bewerken, maar het zal waarschijnlijk ook veranderen hoe mensen denken van wat mogelijk is met WordPress. Met de aangepaste “blokken” die inhoud zal worden gebouwd met een (maak je geen zorgen, we krijgen in dit alles) het is bijna de WordPress-editor wordt een drag-en-drop site builder.

Ik zou adviseren het luisteren naar deze aflevering van ShopTalk om meer te horen over alle mogelijkheden.

Hoe deze serie kwam

Grappig verhaal echt. Het is gewoon zo gebeurde het dat twee auteurs, werk ik met regelmatig werden zowel zelfstandig maken van lange vorm-serie over dit onderwerp op exact dezelfde tijd. Shame on me, want ik wist niet plaats 2 en 2 samen totdat beide van hen aanzienlijke vooruitgang was geboekt. Het zou te gek om los van beide series onafhankelijk, dus in plaats daarvan kregen we allemaal samen en werkte een manier te combineren en herwerken van de serie en een serie die het beste van beide.

Hier zijn we dan!

Voorwaarden

U zult waarschijnlijk het beste doen met deze serie met deze vaardigheden:

  • WordPress ontwikkeling concepten, zoals acties, filters en sjabloon tags
  • Fundamentele (niet diep) JavaScript-kennis bijvoorbeeld het begrijpen van het verschil tussen een object en een array en wat callback-functies zijn.
  • Met behulp van de opdrachtregel om te navigeren in mappen en uitvoeren van het bouwen van taken

Als je hebt geschreven uw eigen npm modules, totaal aangenaam voelen met het schrijven commit berichten in Vim, of u bent een oud-hat op Reageren, dan is deze serie kan beweeg een beetje langzaam voor je.

Voldoen aan uw docenten

Van hier uit, ik ga het doorgeven van deze serie over de auteurs en uw Gutenberg docenten: Lara Schenck en Andy Bell.

Een beetje in de wijk Lara

Hi! Terug in 2015, Matt Mullenweg, de co-creator van WordPress, instrueerde een kamer vol met meer dan duizend WordPress-ontwikkelaars, ondernemers, gebruikers, ontwerpers, en wie weet hoeveel meer live-stream en de na-het-feit-kijkers te “leren JavaScript diep.”

Ik was in die kamer, en ik dacht:

Ik kan dat doen! Ik weet niet waarom, jQuery heeft beviel me prima en ik hou echt van CSS de beste, maar ja, Matt, ik doe dat op mijn lijst van dingen te doen…
—Mij, in 2015

Het ding is, het is heel goed mogelijk om te bouwen, geweldig en robuuste WordPress thema ‘ s zonder het aanraken van een byte van JavaScript. Onnodig te zeggen dat ik niet rond aan het leren van JavaScript diep voor een goed jaar en een half, dus nu ben ik aan het spelen catch up… en ik weet zeker dat ik niet de enige WordPress developer in die boot.

Terug naar het heden. Niet alleen is het vervolg op te nemen via het web in een zeer grote weg, JavaScript—alle informatie gebundeld, destructured, verspreid-operator-ed heerlijkheid heeft zijn weg gemaakt in de innerlijke werking van WordPress via de editor te vernieuwen met de naam Gutenberg.

Als je dit leest, ik ben ervan uitgaande dat je hebt op zijn minst gehoord van Gutenberg, maar indien niet, hier is een overzicht van Chris van een paar maanden terug dat moet helpen zich te oriënteren. Ik ga er vanuit dat je voelt wat mix van onwetendheid, intrige, spanning en paniek wanneer het denken over het Gutenberg en wat het betekent voor WordPress, ergo ~30% van de websites. Ik ben hier om u te vertellen van schroot de paniek en de spanning en intrige, want dit is erg spannend voor zowel ontwikkelaars en WordPress zelf.

Ik voorspel dat in de komende jaren, de invoering van Gutenberg zal veroorzaken WordPress te ontgroeien van haar ongelukkige reputatie als een oude, onveilige, ontwikkelaar-onvriendelijk, bloggen motor. Case in point:

Ik denk dat ik ga maken op mijn persoonlijke website een WordPress site weer. Komt de cirkel rond, die na 6 jaar 😊

— Rach Smith 🌈 (@rachsmithtweets) 20 februari 2018

Ik sprong in het hier te zeggen, dat de Gutenberg trok me terug in WordPress omdat de stack is meer vriendelijk voor mij, een front-end developer. Voor, ik zou morrelen door middel van aanpassingen, maar nu zal ik zeer gelukkig roll out aangepaste blokken. Voor mij Gutenberg is meer dan een editor—het is een beweging en dat maakt mensen net als ik heel enthousiast over de toekomst van WordPress.

Weinig ol’ WordPress is een inhaalslag, en brengt het met alle JavaScript goedheid je zou kunnen voorstellen: Gutenberg is een Reageren gedreven SPA-ervaring te bewerken, klaar om te worden uitgebracht in de Core van WordPress later dit jaar, in versie 5.0. Het zal flip de WordPress ecosysteem op zijn kop en hopelijk maken voor een nieuwe generatie van thema ‘ s en plugins aangedreven door blokken—een verschijnsel andere content management systemen hebben omarmd voor bepaalde tijd.

Dit betekent twee dingen voor de ontwikkelaars, zoals ik, die verzuimd om te “leren JavaScript diep” in 2015:

  1. Er is nog tijd.
  2. We hebben nu een zeer specifieke, realistische context voor ons leren.

Dit is geweldig nieuws! Ik spreek voor mezelf, maar ik vind het veel makkelijker om te leren een technologie als ik een specifieke toepassing. Met dat, ik nodigen u uit om samen met mij op reis te gaan “leren Gutenberg diep” en, in plaats van dat, een stevige brok van JavaScript en Reageren.

Dit onderwerp van deze serie is niet origineel. De WordPress gemeenschap heeft reeds gestegen tot de taak van het creëren van uitstekende middelen voor Gutenberg ontwikkeling, en ik adviseer u lezen en kijken zo veel als je kunt! Terwijl deze reeks behandelt een aantal van dezelfde informatie, met het doel hier is om de structuur van de content op een manier waar u, lezer, om een beetje te werken om de antwoorden te krijgen, een beetje zoals klasse of gids met vragen en huiswerk.

Ja, we maken een blok, maar langs de weg zijn we dwalen van het blok-gebouw en leren over het milieu setup, over Api ‘ s, en ander ontwikkeling van concepten en terminologie dat kostte me een tijdje om te begrijpen. Aan het einde van de dag, ik hoop dat ik u helpen zich zekerder voelen experimenteren met code als er niet luchtdicht documentatie of belastingen van Stack Overflow berichten om op terug te vallen.

Een beetje van Andy

De nieuwe, aankomende WordPress editor brengt een schat aan mogelijkheden om content producenten en ontwikkelaars, maar met dat, het brengt een hele nieuwe JavaScript-aangedreven stapel om te leren. Voor sommigen, die de oorzaak van een zorg, dus ik dacht dat ik zou meedoen en proberen te helpen. We gaan om te duiken in een aantal core JavaScript concepten en het bouwen van een aangepaste blok dat het vermogen van een klassiek design patroon—een kaart. Dit design pattern geeft ons veel te denken, zoals een variabele inhoud en de media.

Voordat we een duik nemen in dat we gaan kijken naar de nieuwe JavaScript-stack en de hulpprogramma ‘ s die het ons geeft. We zijn ook gaan om een kijkje te nemen een Reageren component om ons te geven een primer van reactief, JavaScript en JSX.

Met alle kennis en tools hebben we gewerkt aan het eind van deze tutorial serie, we hebben een solide aangepaste kaart blokkeren. Dit kan ook werken als een basis voor veel andere soorten te blokkeren voor het handhaven van de inhoud van de website.

Voordat we graven in, laten we onze machines instellen met de juiste hulpmiddelen om het werk te doen. Omdat we met behulp van de moderne JavaScript stapel, zijn er een aantal browsers die nog geen ondersteuning voor de taal. Omdat van deze gebruiken we een Node JS-gebaseerde tools om het samenstellen van deze code in een meer cross-compatibele vorm.

Voor Knooppunt JS uitgevoerd

Onze opstellingen variëren enorm, dus ik ga om u te wijzen op de officiële Knooppunt JS website, waar vindt u handige installateurs. Er is een echt nuttige pagina die uitlegt hoe kunt u gebruik maken van populaire pakket managers ook hier.

Uw terminal uitgevoerd

We gaan gebruik maken van onze terminals met het uitvoeren van bepaalde opdrachten later in de serie, dus die van jou setup. Ik hou van iTerm, maar dat is alleen voor de Mac dus hier is een aantal middelen voor zowel Mac-als Windows-gebruikers:

  • Mac: U kunt gebruik maken van de standaard terminal is gelegen op Toepassingen > Terminal
  • Windows: U kunt voor de Linux-subsysteem wordt uitgevoerd, gebruikt u de opdrachtprompt of software zoals Hyper

Krijg een lokale WordPress instantie uitgevoerd

Omdat we met behulp van de moderne JavaScript stapel, het is belangrijk om een exemplaar van WordPress draait lokaal op uw computer. Als je dat nog niet gedaan voordat, check out deze gids. Ik raden dat u het downloaden van iets als MAMP, XAMP of vergelijkbaar als dit nieuw is voor u.

Zodra u een lokale instantie uitgevoerd, hebben een thema klaar om mee te spelen want we duiken in een beetje van het thema-code later.

Moderne JavaScript kan ontmoedigend zijn als je niet werkt met het dag-tot-dag, dus samen gaan we te graven om een aantal centrale elementen van de moderne versie van JavaScript: algemeen bekend als ES6.

We zijn dan gaat die kennis en gebruik van het te bouwen Reageren component. Reageren is een zeer populair framework, maar nogmaals, het is heel moeilijk, dus we gaan graven in samen om te proberen en te verminderen. De Gutenberg JavaScript setup lijkt erg op Reageren, dus het is ook een oefening in het vertrouwd raken met component based, reactieve JavaScript-frameworks in het algemeen.

Nadat we hebben gezien dat, ik hoop dat je gaat om het gevoel pretty awesome, dus gaan we dat momentum en duik in de soms gevreesde, webpack, dat is een tool die we gaan gebruiken voor het verwerken van JavaScript en smoosh het samen. We zijn ook gaan om Babel running, die op magische wijze onze ES6 code in beter ondersteund ES5-code.

Op dit punt, ik denk dat je vol vertrouwen op deze stack, dus we gaan vast komen te zitten in de hoofdschotel—we bouwen onze aangepaste kaart blokkeren.

Klinkt goed? Geweldig. Duik in!

Serie Artikelen:

  1. Serie Inleiding (Deze Post)
  2. Wat is Gutenberg, Toch?
  3. Een Primer met create-guten-blok (Coming Soon!)
  4. Moderne JavaScript Syntaxis (Coming Soon!)
  5. Reageren 101 (Coming Soon!)
  6. Het opzetten van een Aangepaste webpack (Coming Soon!)
  7. Een Aangepaste “Kaart” Blok (Coming Soon!)