Share
Gutenberg is de nieuwe WordPress-editor en iedereen praat erover. Het heeft een volledig nieuwe manier van schrijven van inhoud met WordPress geïntroduceerd. Ontwikkelaars profiteren dus niet alleen van de blok-gemodelleerde lay-out, maar eindgebruikers kunnen er ook dynamische paginalay-outs mee maken.
Het bouwen van aangepaste blokken met Gutenberg kan echter een hele klus zijn voor ontwikkelaars die het in hun projecten willen integreren. Deze tutorial zal een ongelooflijke toolkit bevatten-create-Guten-block-waardoor je Gutenberg-blokken in slechts enkele minuten kunt maken.
Dus laten we beginnen!
Accentsconagua
create-Guten-blockcreate-Guten-block (cgb) is een toolkit voor ontwikkeling van zero-configuration-ontwikkelaars voor het bouwen van WordPress Gutenberg-blokken. Gebouwd door Ahmad Awais - mijn man en een open-source ontwikkelaar-voorstander die regelmatig bijdraagt aan de WordPress Core - de toolkit heeft de moeilijkheid van het maken van Gutenberg-blokken verminderd. Het is zero-config en het maakt blokken zonder lock-in en slechts één afhankelijkheid.
Als u een Gutenberg-blok wilt maken, moet u eerst een WordPress-plug-in maken. Om dit te doen, begint u met het configureren van Webpack, React, ES 6/7/8 / Next, ESLint, Babel, enz., En dan kunt u eindelijk beginnen met het coderen van uw blok. En u moet doorgaan met het bijwerken van uw tooling-configuraties als die ondersteunende pakketten en bibliotheken.
Dit vertraagt de ontwikkeling, dus Ahmad heeft al deze configuratie verborgen in een geoptimaliseerd pakket genaamd CGB-scripts, die je vindt in de root-map van het blok. Dit is de enige afhankelijkheid die ik eerder heb genoemd.
Dus in plaats van alles afzonderlijk en regelmatig bij te werken, is de CGB-scripts Het pakket wordt up-to-date gehouden en op deze manier kunt u het altijd bijwerken zonder uw code te wijzigen. Dat is iets waar ik het meest van hield.
Om een lang verhaal kort te maken…
create-Guten-block is de go-to zero-config van een ontwikkelaar. toolkit voor het bouwen van WordPress Gutenberg-blokken in enkele minuten zonder Webpack, React, Modern JavaScript, ESLint, Babel, etc. te configureren - project GitHub site Laten we nu ingaan op enkele van de meest opvallende kenmerken van het gereedschap.
create-Guten-block biedt een up-to-date dev-omgeving voor het ontwikkelen van een WordPress Gutenberg-plug-in. Het zit vol met functies zoals:
Het onderhoud en de updates van alle bovengenoemde hulpmiddelen worden afgehandeld door één build afhankelijkheid: de CGB-scripts pakket. Dus ondanks het gebruik van Webpack, Babel, ESLint en andere geweldige projecten, kunt u nog steeds genieten van een probleemloze ontwikkelervaring met dit pakket, dat altijd up-to-date blijft.
Tijdens het gebruik van de create-Guten-block toolkit, hoeft u niets te configureren. De meeste dingen die u nodig heeft voor de ontwikkel- en productieomgeving zijn vooraf geconfigureerd.
Een zorg die ontwikkelaars kunnen hebben voordat ze de cgb toolkit is wat te doen als een project wat maatwerk nodig heeft, omdat deze tools vooraf geconfigureerd zijn om op een specifieke manier te werken. Dus het goede nieuws is dat je op elk moment je project kunt "uitwerpen" en aanpassen - maar dan moet je de configuratie zelf onderhouden.
Om uw project uit te werpen, voert u een enkele opdracht uit en worden alle afhankelijkheid van de configuratie en de build rechtstreeks naar uw project verplaatst en kunt u precies beginnen waar u was vertrokken.
Beginnen en werken create-Guten-block toolkit is heel eenvoudig. Gewoon installeren en vervolgens uitvoeren om een Gutenberg-blok-plug-in voor WordPress te maken. Maar daarvoor zijn er enkele vereisten die moeten worden ingesteld. Dus zorg ervoor dat je het volgende hebt:
Volg vervolgens deze eenvoudige stappen:
Je moet hebben node.js en NPM geïnstalleerd. Als ze al zijn geïnstalleerd, gaat u verder met de volgende stap. Download anders Node.js en installeer het. Typ de volgende opdrachten om de installatie te controleren.
node -v # Resultaten in v9.1.0 - zorg ervoor dat Node> = 8 is geïnstalleerd. npm -v # Resultaten naar 5.6.0 - zorg dat npm> = 5.3 is geïnstalleerd.
create-Guten-block Nu installeer je create-Guten-block in uw lokale WordPress /wp.local/wp-content/plugins/ directory. Ook geeft u een naam op voor de plug-in die u wilt maken. Voer de volgende opdracht uit en wacht enige tijd, omdat het enkele minuten kan duren om het te installeren.
npx create-guten-block demo-block
Met deze opdracht wordt een inlegmap gemaakt met de naam demonstratie-block in de huidige map. Het creëert ook de benodigde mappenstructuur en installeert de dev-afhankelijkheden.
Het maakt een mapstructuur zoals deze:
/local.dv/wp-content/plugins/demo-block ├── plugin.php ├── package.json ├── README.md | ├── dist | ├── blocks.build.js | ├── blocks.editor.build.css | └── blocks.style.build.css | └── src ├── blok | ├── block.js | ├── editor.scss | └── style.scss | ├── blocks.js ├── common.scss └── init.php
Nadat u de installatie-instellingen hebt voltooid, opent u uw projectmap en voert u het startscript uit door de volgende opdracht te typen:
cd demo-block npm start
De npm start commando voert je plugin uit in ontwikkelmodus. Er is ook een npm run build opdracht die u helpt uw plug-in in productiemodus uit te voeren. Lees verder om details te vinden over drie verschillende functies die u kunt uitvoeren met de cgb toolkit.
create-Guten-block Wanneer u met dit script werkt, zult u met drie scripts werken die u zullen helpen ontwikkelen, bouwen, en uitwerpen jouw plugin.
npm start ScriptDeze opdracht wordt gebruikt om het Gutenberg-blok te compileren en uit te voeren terwijl u in de ontwikkelingsmodus werkt. Het ook horloges voor eventuele wijzigingen en rapporten terug met fouten in uw code.
npm run build ScriptOm in productiemodus te werken, voert u dit commando uit binnen de dist map. Hier ziet u de buildberichten, fouten en lintwaarschuwingen in de console. Deze opdracht wordt maar één keer uitgevoerd en rapporteert de gzip bestandsgroottes van de geproduceerde code.
npm ren uitwerpen ScriptAls u op enig moment uw plug-in uit wilt werpen create-Guten-block, voer deze opdracht uit. Hiermee kunt u het project aanpassen aan uw vereisten. Het is echter een eenrichtingsproces en kan niet worden teruggedraaid.
Nadat je het hebt gedaan uitwerpened, moet je alle projectafhankelijkheden van je eigen updaten en onderhouden.
create-Guten-block Na een succesvolle installatie en configuratie, kunt u uw WordPress-dashboard openen en naar de plugins sectie. Hier kun je een nieuwe plugin vinden genaamd demoblok - CGB Gutenberg-blokplug-in wordt toegevoegd. Klik op de Activeren knop en je bent klaar om te gaan.
Ga nu naar Berichten> Nieuw toevoegen om de Gutenberg-editor te openen. (Denk eraan dat de plug-in Gutenberg een vereiste is voor de create-Guten-block toolkit.)
Klik op de + pictogram om toegang te krijgen tot alle blokken. Typ in de zoekbalk CGB en je ziet een Gutenberg-blok worden toegevoegd.
Klik erop en voeg een Gutenberg-blok toe in de WordPress-editor, zoals hieronder:
Druk op de Publiceren om te zien hoe deze op de voorkant wordt weergegeven.
Verrast? Dat was ik toen ik me realiseerde dat Ahmad de Gutenberg-blokken anders heeft gestileerd voor het front-end en back-end. Dit kan verder worden gecontroleerd door het src map van uw demonstratie-block plugin in de code-editor.
Hier vindt u twee afzonderlijke bestanden: editor.scss die de CSS voor de back-end behandelt, en style.css (editor.css wordt in de wacht gezet na style.scss, waardoor het een hogere prioriteit heeft). Beide bestanden zijn opgenomen in de hoofdtabel block.js bestand via de importeren commando.
In tegenstelling tot andere starterkits en ketelplaten zijn er veel onderscheidende kenmerken die create-Guten-block namit biedt, en om het samen te vatten, hier is een korte samenvatting van de belangrijkste kenmerken:
CGB-scripts afhankelijkheid create-Guten-block is MIT gelicenseerd en gratis beschikbaar op GitHub.
