Leren Gutenberg: Wat is Gutenberg, Toch?

0
17

Gutenberg is het nieuwe Reageren gedreven SPA-ervaring te bewerken in WordPress. Oh wacht, een reeks van basisbegrippen geldt niet voor een levensvatbare uitleg van de software? We gaan uitpakken dat de reeks van basisbegrippen als we uitleggen wat Gutenberg is.

Serie Artikelen:

  1. Serie Inleiding
  2. Wat is Gutenberg, Toch? (Deze Post)
  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!)

Ten eerste, een voor-en-na een screenshot zou rijden naar huis met het idee voor u:

Aan de linkerkant van de editor als het bestaat pre-Gutenberg. Aan de rechterkant, met Gutenberg ingeschakeld via de plugin.

Buzzword #1: Het Bewerken Van Ervaring

Gutenberg is een redesign van de WordPress WYSIWYG-editor.

De editor in WordPress is van oudsher dat de interne WYSIWYG veld (de blob) dat scheelt de gehele inhoud van de post naar de post_content database tabel. Gutenberg niet verandert dit: het slaat alle content op de post_content tabel om te worden opgehaald door het aanroepen van the_content() in PHP-templates.

Dus ja, Gutenberg is slechts een herontwerp van de editor… maar het is een aanfluiting te noemen Gutenberg slechts een herontwerp van de uitgever! Het is zo veel meer dan dat!

Gutenberg introduceert een geheel nieuwe manier van denken over de inhoud in WordPress. Het geeft niet alleen ontwikkelaars een inheemse manier voor het verwerken van de inhoud in stukjes (we eigenlijk verwijzen naar hen als blokken, dat is de officiële naam), deze maakt het voor eindgebruikers om rijke, dynamische pagina lay-outs met WordPress uit de doos. Zonder Gutenberg, zou dit waarschijnlijk moet een schat van plug-ins van derden (lees: shortcode braaksel en server-soort) als nu het geval is met wat zal bekend worden als de WordPress “Classic” – editor.

Voor de toepassing van dit artikel en onze kennis, weet dit: Gutenberg niet veranderen hoe WordPress functies in de kern. Het is voor 99% een wijziging van de gebruikersinterface van de redacteur. Druk op “Publiceren” toch slaat de inhoud op post_content—er is gewoon veel meer kans om vaartuigen die de gebruiker ervaring van het schrijven en bewerken van content.

Buzzword #2: SPA

Vertaling: Gutenberg is een Enkele Pagina Toepassing binnen WordPress.

In een Enkele Pagina Toepassing (SPA) is een toepassing wordt uitgevoerd op een enkele pagina te laden, en de daarop volgende interacties worden gedreven 100% door JavaScript en Ajax aanvragen.

Let op de “binnen WordPress’ een deel van de boven—en verliesrekening-Gutenberg niet (op dit moment) impact van enig deel van WordPress dan waar je normaal zie de editor. In essentie, Gutenberg vervangt de WYSIWYG, TinyMCE editor met een SPA.

Dit betekent dat het schrijven van de inhoud in de Gutenberg is snel en bevredigend, en ik wou dat ik kon zeggen dat mijn (beperkte) ervaring met het ontwikkelen van blokken is hetzelfde. Voor onze reis, dit SPA-business betekent traag laden van pagina ‘ s tijdens de ontwikkeling (we zijn het laden van een veel JavaScript), obscure en frustrerend console fouten, en npm modules voor de dag.

Natuurlijk, dat is een glas-half-leeg blik op de situatie. Glas half vol is? Het voelt echt goed wanneer iets werkt. De wint zijn weinigen en ver tussen, maar de stok met!

Buzzword #3: Reageren gedreven

Vertaling: Ja, Gutenberg is gebouwd in Reageren. Dat is waarschijnlijk niet van plan om op elk moment snel veranderen, als ooit.

Er was een aantal #hotdrama terug in September-oktober 2017 over het kiezen van een framework voor WordPress omdat toegevoegd een patent clausule op te Reageren. Maar na een ernstige terugslag van open source gemeenschappen, met inbegrip van WordPress (die, ahem, bevoegdheden ~30% van de websites), veranderde het weer.

Met ingang van januari dit jaar (2018) waren er nog fluistert dat een kaderbesluit voor de kern in behandeling is, maar totdat we officieel woord van de machten die er zijn, laten we eens kijken naar de feiten.

  • Gutenberg is in actieve ontwikkeling.
  • Thema ‘ s en plug-ins zijn in actieve ontwikkeling voorbereiden van Gutenberg.
  • Dat alles gebeurt in Reageren.

Ik zet mijn geld op Reageren, en als dat verandert, geweldig! Ik zal moeten Reageren op mijn cv en krijgen op om te leren wat zijn vervanging kan worden.

Belangrijke Bronnen

  1. De GitHub repo — Dit is voornamelijk voor het zoeken in de problemen wanneer ze tijdens de ontwikkeling te zien als ze al zijn ingediend.
  2. Het Gutenberg-Handboek — Dit is waar de officiële Gutenberg documentatie leven.

Let op!

Terwijl het Gutenberg project is ver genoeg met zich mee dat er geen grote infrastructurele veranderingen, we moeten niet vergeten dat Gutenberg is nieuwe software in actieve ontwikkeling en er kan nog vanalles gebeuren. Waarom niet in de frontlinies? Dit is spannende dingen.

De WordPress community is al begonnen met het nemen van de taak van het creëren van tools, tutorials, case studies, cursussen, en door de gemeenschap bijgedragen middelen.

Dat gezegd zijnde, je kunt zoeken op een vraag die nog niet gesteld is. Op een bepaald moment, waarschijnlijk vind je jezelf het lezen van het Boek de bron code voor de documentatie, en kan je de bestaande documentatie van de datum. Je kan het testen van een voorbeeld van een twee weken oude tutorial alleen om het te vinden maakt gebruik van een verouderde API-methode.

Als je iets tegen komt wat je voelt is niet zoals het zou moeten zijn, het onderzoek en het rapport van het probleem op GitHub, vragen over het in de #kern-editor kanaal van de WordPress Slack, of een signaal aan de auteur van het eerder genoemde out-of-date blog post. En als het in de documentatie dat is een probleem, je kunt altijd een probleem zelf op te lossen!

Instellen

Nu, ik zou graag voor u het opzetten van een ontwikkelomgeving, zodat we kunnen doorgaan met deze discussie met meer context. Deze dingen doe:

  1. Het opzetten van een lokale WordPress te installeren, kies je er voor om dat te doen—dit kan een bestaand project of een verse installatie. Gewoon iets dat kan worden gebroken voor demo doeleinden.
  2. Het activeren van een relatief eenvoudig thema. Twintig Zeventien werkt prima. Het enige wat je thema moet hebben is een oproep tot the_content(); in de post en pagina templates, en de meeste out-of-the-box thema ‘ s doen.
  3. Het Installeren Van Gutenberg. U kunt het vinden in de plugin repository. Deze versie is heel ver mee en regelmatig bijgewerkt, zodat we ons geen zorgen hoeven te maken over het werken van een ontwikkeling op te bouwen.
  4. Het activeren van de Gutenberg-plugin en maak een nieuwe post.

Als u nog niet een WordPress site lokaal voor, bekijk deze gids. We raden je aan dat je download iets van MAMP, XAMPP, of een soortgelijke als dit uw eerste keer is.

Laten we Verkennen

Je moet iets een beetje zoals dit:

Een meestal lege plaatsen in Gutenberg. Typen / onthult de blok-kiezer.

Als in de bovenstaande afbeelding, typen a / toont een lijst van blokken. Verwijder de /<code>, en aan de rechterkant zie je een <code>+ die, wanneer erop geklikt wordt, zullen aanleiding geven tot een bijkomende lijst van blokken, ingedeeld per categorie.

Een andere weergave van de blokken, dit keer georganiseerd door de categorie.

Kennisgeving rechts het paneel met tabbladen voor zowel de “Document” en “Block.” Het “Blok” tab is bekend als het blok inspecteur, en geeft ons een mooi gebied voor het blokkeren van specifieke opties, zoals voor het lid blok:

Het blok inspecteur blijkt aanpassingsopties voor een specifiek blok.

Ik adviseer om te spelen met uw post voor een paar minuten en het testen van de verschillende soorten blokken. Houd een oogje op die inspecteur zijbalk om te zien wat de aanpassingsmogelijkheden elk blok biedt. Al deze blokken die u nu ziet, zijn opgenomen in een bibliotheek van de kern blokken en kan een referentiepunt voor het maken van aangepaste blokken (die we doen in het volgende deel van deze serie!).

Nadat u hebt gemaakt, een post gevuld met vijf-achtige blokken van verschillende soorten, opslaan en publiceren van de post, neem dan een kijkje in het van de front-end. Leuk!

Nu, laten we iets te gek. Deactiveren Gutenberg van de plug-ins scherm. Ga terug naar het edit-scherm voor die post, en je ziet iets als dit, in de “Klassieke” editor:

Blokken, zoals ze zijn opgeslagen in de database.

Wat zijn al deze opmerkingen? Dat zijn blokken! Ze kaart één op één met de blokken die u hebt gekozen bij het maken van de post.

Onder de motorkap, de blokken zijn stukjes HTML-herkenbaar door hun omgeving HTML-commentaar. In het voorbeeld hierboven ziet u dat er een paar van het blok namen, d.w.z. wp:block-name worden begeleid door JSON, zoals het tweede lid te blokkeren. Toen ik het opgegeven aantal aanpassingen opties in het blok inspecteur, deze waren opgeslagen, samen met de blokidentificatiesymbool zo dat als ik nu opnieuw activeren Gutenberg, mijn instellingen niet verloren; ze zijn opgeslagen rechts naast de block definitie zelf.

Voordat je het opnieuw activeren van de plugin, maar het bekijken van het bericht weer van de front-end. Heb je verliest wat styling? Dat heb ik gedaan.

Ga je gang en activeren van de Gutenberg-plugin, en controleer de editor om te zorgen dat je blokken zijn nog intact. Als gevolg van deze HTML-commentaren, moeten ze worden!

Nu, laten we eens rondneuzen en zie waar deze stijlen komen uit. Toen ik inspecteer mijn lid blok van de front-end, ik zie een paar inline styles—een gevolg van de gekozen opties in het blok inspecteur—evenals een aantal structurele stijlen van wat lijkt op een stijl.css-bestand enqueued door het Gutenberg-plugin (na 5.0 uitgebracht, vergeet niet, dit is alleen maar van WordPress, niet een plugin).

Het inspecteren van de stijlen van de front-end, we zien er stijlen afkomstig van Gutenberg zelf

Probeer nu de inspectie dat het lid blok van de redactie weergeven. U ziet de dezelfde set van inline stijlen en dezelfde blz.heeft-punt selector toegepast op het blok van de redactie weergeven. Interessant!

Dit introduceert het feit dat de blokken hebben een gedeelde stijlen tussen de thema ‘ s front-end en de editor. Pre-Gutenberg, we hadden een thema, of front-end, stijlen, en konden we apart zet in een editor-stijl.css toe te voegen CSS om de WordPress admin omgeving. Nu, echter, onze blokken delen stijlen tussen de front-end en de editor bekijken vrijwel standaard.

Glas half vol perspectief: dit stelt ons in staat om een vaartuig met een inhoud weergeven voor uitgevers die veel dichter staat bij wat ze zullen zien op de front-end. Ze zullen niet langer nodig om druk op de knop Voorbeeld van een dozijn of meer keer te bekijken kleine wijzigingen in de inhoud alvorens het te publiceren.

Glas half leeg perspectief: Dit kan meer werk voor ons als ontwerpers en ontwikkelaars, we hebben nu een editor ervaring te creëren in aanvulling op de front-facing website! En we hebben om erachter te komen welke stijlen worden gedeeld tussen de twee. Echter, ik zou willen betogen dat met een doordacht design en front-end strategie, dit zal niet zo veel van een probleem als je zou denken.

Umm… Waar is JavaScript?

We gaan heeft JavaScript nodig om het maken van een blok in Gutenburg. Dus laten we een blok al! Dat is de focus van de volgende post in deze serie.

Serie Artikelen:

  1. Serie Inleiding
  2. Wat is Gutenberg, Toch? (Deze Post)
  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!)