En översikt över WordPress Create Block Script

Det officiella WordPress Editor-teamet (Gutenberg) har tillhandahållit ett snyggt litet skript för dig att skapa ett blockplugin med deras @wordpress/create-blocknpm-skript.

Den här artikeln ger en översikt över WordPress Create Block Script, tillsammans med detaljer om vad det producerar.

OBS: Den här artikeln är för en äldre version av Create Block Script

Även om teorin fortfarande kan tillämpas, kanske en del av informationen i den här artikeln inte längre är kompatibel med det senaste skapa blockskriptet. Du kan se vår uppdaterade Skapa Block-skriptguide här.

Kör Skapa blockskript

Den officiella dokumentationen ger dig några olika parametrar att överföra till npm init @wordpress/blockkommandot.

För min installation körde jag den i interaktivt läge genom att utelämna parametrarna. Jag skrev in följande kommando i min terminal (medan jag lades cdin i min wp-content/pluginsmapp):

npm init @wordpress/block

The Script ställde några frågor till mig för att hjälpa mig bygga mitt block.

Jag ville skapa ett startblock för en plugin-idé som jag har (’Sunda anteckningar’) och jag svarade på frågorna enligt följande:

• Blocket som används för identifiering (även namnet på plugin- och utdatamappen): Jag vill att mitt block ska heta Wholesome Notes, så jag skrev in wholesome-notes.

• Det interna namnutrymmet för blocknamnet (något unikt för dina produkter): Eftersom detta borde vara unikt för alla mina produkter som jag skrev in wholesome-code, eftersom detta är mitt företagsnamn. I efterhand skulle detta vara bättre förkortat till wceller wcltd.

• Visningstiteln för ditt block: Jag angav titeln på plugin-programmet, Wholesome Notes.

• En översikt av WordPress Create Block Script Jag var inte 100% säker på vad jag ville skriva här, så jag skrev bara in lite text som jag tänker ändra senare.

• Dashikonen för att göra det lättare att identifiera ditt block (valfritt): Jag valde snabbt att ta fram WordPress Dashicons-resursenadmin-comments eftersom den har en anteckningsstilikon.

• Kategorinamnet för att hjälpa användare att bläddra och upptäcka ditt block (använd piltangenterna): Jag valde layout, även om för att vara ärlig skulle den här typen av block förmodligen behöva en egen kategori. Det är något som jag kan ändra på vid ett senare tillfälle.

Löpningnpm init @wordpress/block

Skriptet gick sedan vidare och installerade alla beroenden som det behövde via npm (vid det här laget installerar det bara wp-scriptsnpm-paketet som ett beroende).

Inspektera utgången

Med kommandona ovan ger WordPress Create Block Script dig följande utdata:

• hälsosamma anteckningar
  • bygga
    • index.asset.php
    • index.js
    • index.js.map
  • node_modules
  • src
    • index.js
  • .editorconfig
  • .gitignore
  • editor.css
  • package.json
  • style.css
  • hälsosamma-anteckningar.php

@wordpress /block output

Följande är en uppdelning av var och en av dessa filer och mappar.

wholesome-notes

Det här är rotmappen för pluginet, den har samma namn som den jag angav för ’snigeln’ i installationsfrågorna.

/build

Det här är byggmappen. Den innehåller alla JavaScript- och PHP-tillgångar som genereras från /srcmappen. Dessa köas via huvudladdningsfilen wholesome-notes.php.

/build/index.assets.php

Denna PHP-fil genereras automatiskt när /srcmappen kompileras. Den innehåller en uppsättning av alla WordPress Editor (Gutenberg) JavaScript-anständigheter som används av ditt plugin. Den köas via huvudladdningsfilen wholesome-notes.php.

/build/index.js

Detta är den huvudsakliga kompilerade JavaScript-filen och köas via huvudladdningsfilen wholesome-notes.php.

/build/index.js.map

Den här filen genereras bara när du kompilerar tillgångarna för utvecklingsläge (IE som du kör npm startoch inte npm run buildnär du kompilerar dina tillgångar. Det är en användbar fil för JavaScript-felsökare för att hjälpa till att identifiera filnamn och radnummer om fel uppstår.

/node_modules

Det här är mappen som alla JavaScript-beroenden för ditt plugin är installerade i.

/src

Det här är mappen som innehåller alla okompilerade tillgångar för din plugin.

/src/index.js

Detta är den huvudsakliga okompilerade JavaScript-filen för ditt WordPress Editor (Gutenberg) block. Den innehåller initialt all logik för blocket.

/.editorconfig

Den här filen innehåller användbara förinställningar för din IDE (Integrated Development Environment), som Visual Studio Code.

/.gitignore

Den här filen säger åt git att ignorera vissa filer när du övergår till ett git-förråd (som GitHub).

/editor.css

Stilarna i den här filen matas endast ut i editorn, den ställs i kö via huvudladdningsfilen wholesome-notes.php.

/package.json

Den här filen innehåller alla npm-beroenden för plugin-programmet och de kommandon som du kan köra. Observera att plugin-programmet använder wp-scripts( @wordpress/scripts) som sin bas, så till en början gäller de beroenden som laddas för det paketet.

/style.css

Stilarna i den här filen matas ut i editorn och på framsidan av webbplatsen ställs de i kö via huvudladdningsfilen wholesome-notes.php.

/wholesome-notes.php

Detta är den huvudsakliga loader-filen för plugin-programmet. Dess namn sattes via ’slug’ som vi skrev in i det initiala installationsskriptet. Det köar alla JavaScript-tillgångar som behövs för plugin-programmet.

Utforska plugin-programmet

Efter att du har skapat ditt plugin, om du aktiverar det och infogar det i redigeraren kommer det att se ut som följande skärmdumpar (frontend och backend).

Skapa blockskript – standardgränssnitt

Skapa blockskript – Standard bakände

Som du kan se ger blocket oss en del grundläggande utdata som vi enkelt kan ändra för att implementera vårt eget block.

Blockera CSS

Som du kan se från skärmdumparna implementerar exempelkoden i editor.cssen röd gräns i editorn, medan exempelstilarna i styles.cssappliceras på både fronten och backend.

Blockera JavaScript

Ingångspunkten för att anpassa det nyskapade blocket är /src/index.jsfilen.

Det finns gott om inline-dokumentation i den här filen, som förklarar varför vissa funktioner importeras, såsom registerBlockTypeför registrering av blocket och __för i18n-textöversättningsstöd.

Skapa Block index.js Inline-kommentarer

Det ger dig också några mycket grundläggande utdata för editoch savefunktioner som skickas in i blockregistreringen.

Obs: I senare versioner av skriptet har dessa extraherats till sina egna filer och inkluderats som moduler i denna fil.

Skapa Block index.js Redigera och spara

Bygga blocket

Enligt skapa block npm-dokumentationen kan du använda flera kommandon i din terminal (från rotmappen för din plugin), för att göra saker som att kontrollera kodkvaliteten eller uppdatera paket.

De viktigaste kommandona du behöver för att bygga blocket kommer att vara npm startatt kompilera din plugin för utveckling och npm run buildatt kompilera den slutliga versionen.

wp-scripts(från @wordpress/scriptsnpm-paketet) är det huvudsakliga beroendet för ditt plugin. Detta beroende abstraherar alla verktyg för ditt block away, så du kan bara fokusera på att bygga JavaScript.

Behind the scenes wp-scriptsanvänder webpackför att kompilera alla dina tillgångar till /build/index.jsfilen.

Du kan läsa mer om wp-scriptsi Block Editor-handboken och du kan ta reda på mer om konfigurationen av webbpaketbyggen i avsnittet ’JavaScript Build Setup’ i handboken.

Utöka konfigurationen av webbpaketet Skapa block

Kodbasen för ditt block kan sträcka sig över flera filer, eller till och med ha ett antal underblock, eller innehålla komplexa stilar. Vid tillfällen som dessa kanske du vill utöka webbpaketet som är inbyggt i wp-scripts.

För mer information, se min artikel om hur du utökar wp-scriptswebbpaketskonfigurationen, eller kolla in avsnittet Paketskript i Block Editor Handbook för vägledning.