Skapa anpassat Gutenberg-block – Del 1: Konfigurera utvecklingsmiljön

I den första delen av denna handledningsserie om hur man skapar anpassade Gutenberg-block måste vi ställa in vår utvecklingsmiljö. Vi behöver en plats där vi kan skriva vår kod i ES6/ESNext-syntaxer och kompilera den när vi är på språng. Det är möjligt att skriva anpassade Gutenberg-block genom att använda ES5-syntax utan att ställa in Webpack och Babel. Men koden kommer att vara riktigt besvärlig att läsa och skriva. Om du är osäker på varför vi behöver göra allt detta, eller vad skillnaden är, läs mitt inlägg som förklarar detta. Jag kan garantera dig att när du kommer tillbaka kommer du att vara övertygad om att ta detta extra steg för att skriva bättre kod.

Jag antar att du redan har en lokal WordPress som körs på en LAMP-stack eller liknande. Och att du antingen skriver ett tema eller en plugin. När det gäller mig lägger jag min kod i ett tema som jag har utvecklat, awp-starter-theme, som finns i min WordPress-temanapp. Jag vill separera min Gutenberg-utveckling från alla andra temafiler så jag skapar en underkatalog gutenberg-devi min temarotmapp. Det kommer att vara min projektmapp och mappen jag kommer att referera till för resten av handledningsserien.

Jag har redan skrivit en detaljerad guide i hur man ställer in en utvecklingsmiljö för Gutenberg, så jag ska bara snabbt gå igenom stegen här. Om du aldrig har gjort detta förut rekommenderar jag att du läser det länkade inlägget nedan, eftersom det innehåller mer information än vad du hittar här!

Konfigurera projektet med webpack

Använd terminal (iOS terminal eller Windows cmd båda fungerar bra) navigera till din projektmapp, (i mitt fall awp-starter-theme/gutenberg-dev). Vi initierar ett nytt projekt genom att be npm att generera ett package.jsonmed generiskt innehåll.

Skapar package.json

npm init -y

Därefter kommer jag att installera WordPress-skript som kommer att hjälpa oss mycket med konfigurationen med det här kommandot (som lägger till undermappen node_modulesoch package-lock.jsonockså):

npm install --save-dev --save-exact @wordpress/scripts

Öppna package.jsonfilen i din projektmapp i en editor och hitta scriptsegenskapen. Vi ersätter det med två skript från WordPress-paketet vi just installerade:

"scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
},

"Build"-skriptet kommer att kompilera mina filer. Men eftersom det måste köras manuellt varje gång en ändring görs, kommer vi hellre att använda "start"-skriptet medan vi utvecklar. Det kommer sedan att initiera ett "bevakningsläge" där det lyssnar till ändringar som gjorts i någon av dina skriptfiler och kompilerar om dem när du sparar ändringar.

Webpack konfiguration

Nästa steg är att skapa en webpack-konfigurationsfil. Jag gör detta för att jag inte vill använda standardkällan och utdatafilnamn och mappar. Jag vill själv bestämma var mina källfiler finns, och var de kompilerade filerna ska hamna.

Med hjälp av @wordpress/scriptspaketet vi installerade kan vi ärva WordPresss webbpaketkonfiguration och åsidosätta bara de delar vi vill ändra.

Skapa en ny fil med namnet i vår projektmapp webpack.config.jsoch öppna den i en editor. Lägg till detta innehåll:

const defaultConfig = require("@wordpress/scripts/config/webpack.config");
const path = require('path');
module.exports = {
    ...defaultConfig,
    entry: {
        'block-awhitepixel-myfirstblock': './src/block-awhitepixel-myfirstblock.js'
    },
    output: {
        path: path.join(__dirname, '../assets/js'),
        filename: '[name].js'
    }
}

Vad detta gör är att definiera min inmatningsfil (för närvarande bara en) i entryegenskapen, som finns i en undermapp srci min projektmapp, som heter block-awhitepixel-myfirstblock.js. Uppenbarligen namnge dina filer vad du vill, men kom ihåg att ändra både nyckeln och värdet. För i outputegenskapen ber jag webpack att kompilera mina inmatningsfiler med entry-nyckeln som filnamn. I pathegenskapen ber jag att placera alla kompilerade filer ett steg ut ur min projektmapp och in i temats assets/jsmapp. Justera filnamnen och platsen så att de passar ditt projekt. Se min detaljerade guide om du är förvirrad.

Skapa en undermapp src/i projektmappen och det är här vi lägger alla källfiler. (Justera om du ändrade entryplatsen i webpack.config.js). Skapa en fil block-awhitepixel-myfirstblock.jshär och lämna den tom tills vidare.

Det finns ett steg till – och detta gäller för oss som vill använda de senaste funktionerna i ESNext. Den förinställda WordPress Babel-konfigurationen saknar tyvärr detta. Och eftersom jag vill använda funktioner som pilfunktioner måste jag också ställa in Babel.

Ställer in Babel

Först måste vi installera några paket för vår Babel-konfiguration genom att skriva detta kommando:

npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

När det är klart skapar du en ny fil .babelrci vår projektmapp. Det är här vi lägger vår Babel-konfiguration:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        [
            "@babel/plugin-proposal-class-properties"
        ]
    ]
}

Och det är allt för vår utvecklingsmiljö!

Bygg kommandon

Under hela utvecklingen måste du kompilera dina Javascript-filer. I vår har package.jsonvi lagt till två skript för just detta.

När vi vill utveckla i våra Javascript-filer kör vi detta i terminal:

npm run build

Detta kommando kommer att utföra kompilering när du kör detta i terminal. Ge det en chans och du bör se att den genererar filen block-awhitepixel-myfirstblock.js(tillsammans med en eller två andra "tillgångsfiler") i din definierade utdatamapp som du definierade i webpack.config.js. I mitt fall visas det i awp-starter-theme/assets/js/.

Att använda ovanstående kommando fungerar bra, men det blir irriterande att upprepa varje gång du gör ändringar i dina filer. Du föredrar förmodligen att köra det här kommandot istället:

npm run start

Detta kommer att ställa din terminal i "bevakningsläge", upptäcka eventuella ändringar som sparats i dina Javascript-filer och kompilera dem allt eftersom. När dina filer innehåller fel kommer terminalen att slänga ut felmeddelandena. Tryck på CTRL + C för att stoppa bevakningsprocessen.

Som referens ser min projektmapp nu ut som bilden. Jag föredrar att separera alla konfigurationsfiler och särskilt undermappen node_modules/(som innehåller bokstavligen tiotusentals filer) från resten av min temakod. Gör det lättare att sätta upp regler för ignorering – till exempel SCSS-kompilatorer eller git ignore. Vi har redan ställt in webpack-konfigurationen för att kompilera de slutliga filerna direkt till awp-starter-theme/assets/js/tillsammans med andra Javascript-filer för mitt tema.

Vi är nu redo för nästa del där vi börjar med att registrera vårt första anpassade block.