Share
De nieuwe WordPress-editor (met codenaam Gutenberg) moet in versie 5.0 verschijnen. Dit is de perfecte tijd om het te begrijpen voordat het in WordPress-kern terechtkomt.
Ik laat je zien hoe je met de blok-API werkt en maak je eigen inhoudsblokken die je kunt gebruiken om je berichten en pagina's uit te breiden.
Er is nog geen exacte datum voor wanneer WordPress 5.0 zal worden uitgebracht, maar het zou nog een tijdje moeten zijn in de komende paar maanden. Tot die tijd is Gutenberg beschikbaar als een zelfstandige plug-in.
Ik raad je aan de nieuwe Gutenberg-editor uit te proberen als je dat nog niet hebt gedaan. Het is heel gemakkelijk om rechtstreeks vanuit je WordPress-beheerder te installeren. Omdat dit echter nog steeds een bètaversie van de nieuwe editor is, is het niet aan te raden deze nog op productiesites te gebruiken. Houd het alleen voor lokale ontwikkelingssites.
Het is ook belangrijk om Gutenberg te hebben geïnstalleerd als je deze zelfstudie wilt volgen. Op die manier kunt u experimenteren met het maken van uw eigen aangepaste blokken. De ontwikkeling van de nieuwe editor is de laatste maanden snel aan het aantrekken, met verschillende releases tot nu toe in 2018. De nieuwste versie van Gutenberg is momenteel 2.7.0 op het moment van schrijven.
Bij elke release worden nieuwe functies toegevoegd en de editorinterface wordt voortdurend verbeterd op basis van gebruikersfeedback. Het begint er veel gelikter uit te zien en aan te voelen dan de vorige versies. Ook zijn er veel bugs verholpen, waardoor de editor veel robuuster is geworden.
Gutenberg biedt een nieuwe manier om post-inhoud te bouwen door middel van "blokken", die op elkaar kunnen worden gestapeld om een complete pagina te vormen. Elk afzonderlijk blok bestaat onafhankelijk van andere blokken en kan bijna alle gewenste markeringen, stijlen en JavaScript bevatten.
In deze zelfstudie bespreken we alles wat u moet weten over de blok-API, zodat u meteen kunt beginnen met het maken van uw eigen aangepaste blokken. Als je eenmaal de grondbeginselen onder de knie hebt, is het maken van complexere blokken eenvoudiger dan je zou denken!
Het Gutenberg-project is groot nieuws voor WordPress om nog een belangrijke reden. Het is bovenop React gebouwd. Dat klopt, voor het eerst in WordPress wordt React opgenomen in de kern! Dit is geweldig nieuws voor ontwikkelaars van thema's en plug-ins, aangezien React eenvoudig aan elke pagina kan worden toegevoegd door gebruik te maken van de React- en ReactDOM-bibliotheken die deel uitmaken van de WordPress-kern.
Al snel kunt u UI-componenten voor al uw WordPress-projecten direct in React maken. Als u voorheen React- en ReactDOMBibliotheken wilde gebruiken, moest u ze handmatig opnemen. Het hebben van hen in kern maakt het veel handiger.
Bedenk eens hoe geweldig het zou zijn om een plugin-optiescherm helemaal in React! Of wat dacht je van coole geavanceerde aanpasserbedieningen? Deze nieuwe tools zullen ontwikkelaars veel vrijheid en flexibiliteit geven om een aantal geweldige interactieve gebruikersinterfaces te creëren.
Ik verwacht dat de ontwikkeling van WordPress de komende jaren erg interessant en ook heel leuk zal zijn!
Het concept van blokken in de nieuwe editor is een echte verandering in de shift van de huidige op TinyMCE gebaseerde editor, dus laten we eens nader bekijken wat een blok is voordat we in de block-API duiken. Beschouw blokken als zwarte dozen, elk met een heleboel markeringen, stijlen en JavaScript, allemaal verpakt in een handige entiteit die een "blok" wordt genoemd.
Wanneer een blok aan de editor wordt toegevoegd, geeft het een voorbeeld weer van hoe het eruit zal zien aan de voorkant. Bijna alle blokken hebben instellingen om hun uiterlijk en / of gedrag verder aan te passen.
Sommige blokken die standaard beschikbaar zijn in de nieuwe editor zijn:
Dit geeft u een idee van het soort inhoud dat u aan de editor kunt toevoegen met blokken die bij de nieuwe editor zijn geleverd. Al deze bloktypen zijn nuttig, maar redelijk eenvoudig, dus verwacht dat er veel plug-ins verschijnen met veel uitgebreidere blokken voor het toevoegen van bijna elk type inhoud dat u maar kunt bedenken.
Je hebt misschien al een aantal inhoudsblokken bedacht die je nodig hebt voor je eigen projecten. Als geen van deze beschikbaar zijn in Gutenberg, zijn ze waarschijnlijk goede kandidaten voor het maken van je eigen aangepaste blok.
Ik raad u aan de code in deze tutorialserie uit te proberen, omdat dit de beste manier is om te leren hoe u uw eigen blokken kunt maken met behulp van de blok-API. Lees in elk geval eerst de tutorial om te begrijpen hoe de block-API werkt, maar kom wel terug en probeer een deel van de code zelf uit en begin met het maken van enkele blokken!
Dit is een serie van een middelmatig tot gevorderd niveau, dus aangenomen wordt dat je niet nieuw bent in de ontwikkeling van WordPress. Om het meeste uit deze serie te halen, moet u op zijn minst een praktische kennis hebben van het volgende:
Als u een van deze onderwerpen op moet schonen, is het wellicht een goed idee om dit te doen voordat u doorgaat. Ik zal concepten toelichten terwijl we meegaan, maar het valt buiten het bestek van de tutorial om elk klein detail uit te leggen.
Het is gebruikelijk om aangepaste blokken te maken in WordPress met behulp van JSX, maar dit is absoluut niet nodig. Als je gewend bent om React-componenten te ontwikkelen in vanilla JavaScript, dan kan dat ook in WordPress. De keuze is geheel aan u. Het grootste deel van de blokcode die je tegenkomt zal echter in JSX worden geschreven (inclusief deze tutorial), dus je zult het gemakkelijker vinden om concepten te begrijpen als je ook JSX gebruikt.
Het Gutenberg-project evolueert nog steeds, dus sommige dingen kunnen aan verandering onderhevig zijn, zelfs tegen de tijd dat je deze tutorial leest. Dit kan wijzigingen in de editorinterface, nieuwe kerncomponenten, enz. Omvatten.
De nieuwe editor is nu echter vrij stabiel en de onlangs toegevoegde functies zoals geneste blokken en verslepen / neerzetten zijn best spannend. Zelfs als sommige van de kleine details van hoe je implementeert blokken kunnen veranderen, het belangrijkste om te onthouden is het algemene concept van blokken en hoe je ze kunt gebruiken om elk type inhoud te maken.
Als je vastloopt, raad ik je aan het officiële Gutenberg-handboek te bekijken, dat wordt bijgewerkt met de nieuwste wijzigingen. Bekijk ook het Gutenberg-project op GitHub om de broncode te inspecteren en eventuele problemen die je tegenkomt te registreren.
Dit zal het project alleen maar helpen sterker te worden naarmate mensen het testen. Dit is nog een goede reden om nu blokken te gaan ontwikkelen, voordat ze officieel deel uitmaken van WordPress!
Als u de code in deze zelfstudie wilt volgen, heeft u het volgende nodig:
Als u nog geen lokale ontwikkelomgeving hebt ingesteld, kunt u zoiets als Lokaal door Flywheel of DesktopServer gebruiken, omdat ze beide gratis versies beschikbaar hebben en meerdere besturingssystemen ondersteunen.
Zorg ervoor dat u de nieuwste versies van WordPress en de Gutenberg-plug-in gebruikt om er zeker van te zijn dat u de nieuwste functies gebruikt. Er zijn ook enkele geweldige code-editors, dus als je er nog geen hebt geïnstalleerd, kijk dan eens naar gratis editors zoals Visual Studio Code of Atom, die meer dan voldoende moeten zijn.
Om gemakkelijk nieuwe blokken te maken, gebruiken we een relatief nieuwe toolkit genaamd create-Guten-block. Hiermee kunt u snel een nieuwe plug-in draaien met alle setup- en startercodes die nodig zijn om blokken te maken. Het is ook een toolkit met nulpuntconfiguratie, dus het werkt direct uit de doos op dezelfde manier als het create-reactie-app toolkit om nieuwe React-apps met minimale inspanning te stealen. Dus als je ooit hebt gebruikt create-reactie-app, je weet wat je kunt verwachten.
Laten we nu eens kijken hoe we deze tool kunnen gebruiken om Gutenberg-blokken te maken. Open een terminalvenster in uw plugin-map (/ Wp-content / plugins /) voor uw lokale ontwikkelingssite en voer het volgende in:
npx create-guten-block mijn-custom-block cd my-custom-block npm start
(Opmerking: npm v5.2 + is vereist om de. Te gebruiken NPX commando.)
Na een paar minuten wordt een nieuwe plug-in aangemaakt in een map met de naam my-maat-block bevat alle bestanden en gereedschappen die nodig zijn om blokken te maken met React! Niet slecht, eh?
De naam van de plug-in in de WordPress-beheerder zal zijn my-custom-block - CGB Gutenberg Block Plugin. Ga je gang en activeer het.
De plug-in maakt een nieuw blok aan dat beschikbaar is voor ons in de Gutenberg-editor. Om ons nieuwe blok te testen, navigeert u naar de berichteditor en klikt u op de gelabelde placeholder-tekst Schrijf je verhaal.
Tik vervolgens op de / toets om een pop-upvenster weer te geven dat we kunnen gebruiken om alle beschikbare blokken te doorzoeken.
Opmerking: er zijn andere manieren om naar een blok te zoeken, maar ik gebruik graag / om het zoekblokvenster vrij snel en gemakkelijk weer te geven. Maar gebruik de methode die u het prettigst vindt.
Open het zoekvak en begin met typen my-maat-block en selecteer mijn-custom-block - CGB Block. Dit toont ons aangepaste blok in het editorvenster.
Op dit moment is het slechts een boilerplate-blok, dat niet echt iets anders doet dan het weergeven van tijdelijke tekst in een gekleurd vak. Het benadrukt echter een interessant aspect van het maken van blokken.
Klik Bekijk bericht om te zien hoe de post eruitziet voor bezoekers van de site.
Zoals u kunt zien, zijn zowel de inhoud als de stijlen van het gerenderde blok verschillend op de voorkant en achterkant. Dit geldt ook voor JavaScript-code, die ook voor de voorkant anders kan zijn.
De reden voor het verschil in rendering is dat je bij het maken van blokken specifiek aparte front-end en back-end renderfuncties moet declareren.
Dat komt omdat veel blokken extra UI-elementen vereisen om in de berichteditor te worden gerenderd om de blokinstellingen te helpen configureren. Omdat dit alleen relevant is voor de berichteditor, is het volledig overbodig bij het renderen van het blok op de voorkant. Daarom geeft u de uitvoer op die aan de voorkant moet worden weergegeven in een afzonderlijke renderfunctie.
Hoewel deze aanpak zinvol is en goed werkt, roept het wel problemen op met betrekking tot codeduplicatie. Als je niet oppast, zou je kunnen eindigen met veel dubbele definities van inhoud.
Waar mogelijk is het een goed idee om de inhoud van de front-end- en back-endweergavefuncties te scheiden om duplicatie te helpen verminderen. We volgen deze aanpak tijdens deze zelfstudiereeks.
In deze tutorial introduceerde ik het concept van wat een blok is en waarom de nieuwe Gutenberg-editor groot nieuws zal worden wanneer het wordt geleverd met WordPress 5.0. Het is een echte verandering in de shift van de huidige op TinyMCE gebaseerde editor.
Om snel blokken te maken, create-Guten-block is een zeer nuttige tool waarmee je een complete plug-in kunt maken met een werkstartblok dat klaar is voor maatwerk.
We hebben het afgemaakt door te zien hoe we ons aangepaste blok in de nieuwe berichteditor gebruiken en we ontdekten dat de weergave aan de voor- en achterkant er heel anders kan uitzien. In Gutenberg hoef je de output helemaal niet te evenaren!
In deel 2 gaan we in op de specifieke kenmerken van de blok-API en hoe u deze kunt gebruiken om uw eigen aangepaste blokken te maken.
Bekijk in de tussentijd een aantal van onze andere berichten over WordPress Gutenberg!
Accentsconagua