Som tur är har WordPress-utvecklingsteamet ett praktiskt npm skript för dig att skapa ett blockplugin som skapar ett startblock så att du snabbt kan komma igång.

Som standard är den typ av WordPress-plugin som detta skapar ett "block", men det ger oss också en bra startpunkt för andra typer av Gutenberg-plugins.

Förutsättningar

Node måste vara installerad på din maskin så att du kan använda npmkommandot (som står för Node Package Manager)
WordPress installation
Kodredigerare
Tillgång till terminalen

Skapa din plugin

Efter att du har installerat nod på din maskin bör du ha tillgång till npmkommandot i din terminal.

Öppna din terminal och se till att du har gått cd(Changed Directory) till plugin-mappen i din WordPress-installation (t.ex. cd wp-content/plugins).

Väl där kör följande kommando:

npm init @wordpress/block

Detta kommer att ladda ner allt skriptet behöver för att starta bygget. När det är klart kommer skriptet att ställa dig en rad frågor som behövs för att konfigurera din plugin.

Använda terminalen för att köra Skapa skript

Konfigurationsfrågor

Skriptet kommer att ställa följande frågor, här är mina exempelsvar:

Blocket som används för identifiering (även namnet på plugin- och utdatamappen) — Jag vill att mitt block ska heta Wholesome Plugin, så jag skrev in wholesome-plugin.
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 wholesomecode, eftersom detta är mitt företagsnamn.
Visningstiteln för ditt block — Jag skrev in titeln på plugin-programmet, Wholesome Plugin.
Den korta beskrivningen för ditt block (valfritt) — Jag skrev in " An example plugin to demonstrate the create-block-script".
Dashikonen för att göra det lättare att identifiera ditt block (valfritt) — Jag valde att snabbt ta fram WordPress Dashicons-resursenadmin-plugins eftersom den har en plugin-ikon. Kom ihåg att utelämna dashicon- från dashicon-prefixet när du gör detta.
Kategorinamnet för att hjälpa användare att bläddra och upptäcka ditt block (använd piltangenterna) — jag valde design. Även om en anpassad kategori förmodligen skulle passa bättre.
Namnet på plugin-författaren (valfritt). Flera författare kan listas med kommatecken — jag skrev in wholesomecode.
Det korta namnet på plugin-licensen (valfritt) — Jag tryckte på enter för att acceptera GPL v2.0 eller senare.
En länk till licensens fullständiga text (valfritt) — Jag tryckte på enter för att infoga GPL v2.0-licensens URL.
Det aktuella versionsnumret för plugin – jag tryckte på enter för att infoga 0.1.0.

Frågor om skriptkonfiguration

Skriptet slutar köras.

Vad hände nyss?

Några saker händer medan skriptet körs, dessa är:

Det skapar mappen för plugin,
Det genererar alla plugin-filer (se utforska plugin-programmet för detaljer om vad dessa gör )
Den installerar de beroenden den behöver, inklusive @wordpress/scriptspaketet (detta gör det tunga lyftet när det gäller att bygga pluginet)
Den kompilerar koden
Den matar ut en lista med kommandon som du kan använda

Bygg kommandon

Vi kommer att utforska dessa mer i avsnittet Utforska plugin-programmet .

Använder plugin

Innan du kan använda plugin-programmet måste du aktivera det. Du kan göra detta genom att välja Pluginsfrån WordPress admin-menyn och sedan välja activateunder namnet på plugin-programmet.

Aktivera insticksprogrammet

Nu måste du redigera ett inlägg i WordPress och infoga plugin-programmet med Gutenberg-redigeraren.

Infoga blocket i ett inlägg

Observera att insticksprogrammet inte gör så mycket som standard, det skapar bara ett block. Det ger dock ett ramverk som du kan använda för att bygga ditt eget plugin.

Visa blocket på fronten

Som standard ser blocket ut så här på fronten. Observera att det har ett lite annorlunda utseende, detta är avsiktligt så att du kan bekanta dig med CSS på framsidan och baksidan av WordPress.

Blocket på fronten

Utforska plugin-programmet

Hela syftet med Create Block Script är att du ska skapa ditt eget plugin. Låt oss utforska filerna som den genererade mer i detalj:

Genererade filer

wholesome-plugin— Det här är rotmappen för plugin-programmet, det har samma namn som det jag angav för ’slug’ 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**— Den här PHP-filen 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-plugin.php.

**/build/index.css**— Det här är editorns CSS-fil och köas via huvudladdningsfilen wholesome-plugin.php.

**/build/index.js**— Detta är den huvudsakliga kompilerade JavaScript-filen och köas via huvudladdarfilen wholesome-plugin.php.

**/build/style-index.css**— Det här är frontend-CSS-filen och köas via huvudladdningsfilen wholesome-plugin.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 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/edit.js**— Detta är blockets redigeringsfunktion och styr hur blocket visas i blockredigeraren när det är i redigeringsläge.
**/src/editor.scss**— Detta är den okompilerade SCSS för redaktören, den kommer att kompileras till /build/index.css.
**/src/index.js**— Detta är den huvudsakliga okompilerade JavaScript-filen för ditt WordPress Editor (Gutenberg) block. Den registrerar blocket och innehåller standardinställningar.
**/src/save.js**— Detta är blockets sparafunktion och styr uppmärkningen av blocket när det sparas.
**/src/style.scss**— Detta är den okompilerade SCSS för frontend, denna kommer att kompileras till /build/style-index.css.
**/.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 köas via huvudladdningsfilen wholesome-notes.php.
**/block.json**— Den här filen definierar plugin-programmet så att det kan upptäckas av WordPress-blockbiblioteket. Om du gör ändringar i plugin-programmet, se till att den här filen uppdateras. I nyare versioner av NPM-skriptet används denna fil istället för /src/index.jsatt registrera ditt block.
**/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.
**/readme.txt**— Den här filen är en readme-fil för WordPress-pluginförråd, som krävs om du vill att blocket ska listas på pluginförrådet.
**/wholesome-plugin.php**— Det här är huvudladdningsfilen för pluginet. 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 byggkommandona

Innan vi kan köra våra byggkommandon måste vi se till att vi är i plugin-mappen. I det här exemplet skulle vi köra cd wholesome-plugini terminalen för att byta katalog till vår plugin-mapp.

Vi kan sedan köra följande kommandon:

**npm start**— Startar bygget för utveckling. Om du gör en ändring i plugin-programmet måste du göra detta för att ändringarna ska visas (du kommer sannolikt att behöva uppdatera din webbläsare också).
**npm run build**— Bygger koden för produktion. Gör detta om du skapar en releaseversion av plugin-programmet.
**npm run format:js**— Automatiskt formaterar JavaScript-filerna med hjälp av bästa praxis.
**npm run lint:css**— Lints (letar efter fel i) CSS-filer.
**npm run lint:js**— Lints (letar efter fel i) JavaScript-filer.
**npm run packages-update**— Uppdaterar WordPress-paket till den senaste versionen.

Vi kommer att använda en eller flera av dessa när vi ändrar insticksprogrammet.

Ändra plugin

Låt oss börja med att göra vårt block redigerbart.

Lägg till attribut till`/src/index.js`

Öppna upp /src/index.jsi din editor och lägg till följande i registerBlockTypefunktionen, under apiVersion:

attributes: {
  blockText: {
    default: 'Wholesome Plugin – hello from the editor!',
    type: 'string',
  },
},

Detta kommer att ge oss en plats att lagra data i vår plugin som kallas blockTexttillgänglig via attributesegendomen (prop). Observera att vi har gett den en standard för originaltexten som genereras av skapa plugin-skriptet.

Lägg till RichText till`/src/edit.js`

Öppna upp /src/edit.jsi din editor och ersätt importen för useBlockPropsmed följande:

import { RichText, useBlockProps } from '@wordpress/block-editor';

Detta låter oss använda RichText-komponenten i vår redigeringsmetod.

Ändra sedan hela redigeringsfunktionen till följande:

export default function Edit( { attributes, setAttributes }) {
    const { blockText } = attributes;
    return (<p { ...useBlockProps() }>
            <RichText
                className="block__text"
                keepPlaceholderOnFocus
                onChange={ (blockText) => setAttributes( { blockText }) }
                placeholder={ __( 'Block Text', 'wholesome-plugin') }
                tagName="span"
                value={ blockText }
            />
        </p>
    );
}

Detta ställer in värdet på RichTextkomponenten till att vara detsamma som det som lagras i blockTextattributet, och onChangeegenskapen ställer in blockTextattributet till vad som någonsin har skrivits in i RichTextkomponenten.

Mata in attributen`/src/save.js`

Öppna upp /src/save.jsi din editor och ersätt savefunktionen med följande:

export default function save( { attributes }) {
    const { blockText } = attributes;
    return (<p { ...useBlockProps.save() }>
            { blockText }
        </p>
    );
}

Detta matar helt enkelt ut värdet av blockTexti stycket.

Kompilera plugin

Öppna terminalen, se till att du är i rotkatalogen för ditt plugin och kör följande kommando:

Skriptet kommer att kompileras. Om du har några fel bör terminalen göra dig medveten om vad de är.

Bygger plugin

Sätter in plugin

Se till att du har uppdaterat ditt inlägg. Den tidigare versionen av blocket kan nu vara trasig, det här är bra, ta bara bort det och sätt in ett nytt.

Infoga blocket med hjälp av plustecknet uppe till vänster i editorn, och när det är infogat klicka på dess text. Du borde. nu kunna redigera texten.

Infogar det redigerbara blocket

Visa plugin

Spara inlägget och se det på framsidan av webbplatsen, texten du ändrade ska visas istället för originaltexten.

Redigerbart block på webbsidans frontend

Om du vill att dina block ska visas i en anpassad blockkategori, lägg bara till följande kod till roten av ditt plugin (i det här fallet wholesome-plugin.php:

function wholesomecode_wholesome_plugin_block_categories( $categories) {
    return array_merge(
        $categories,
        [
            [
                'slug'  => 'wholesome-blocks',
                'title' => __( 'Wholesome Blocks', 'wholesome-boilerplate' ),
            ],
        ]
    );
}
add_action( 'block_categories', 'wholesomecode_wholesome_plugin_block_categories', 10, 2 );

Detta kommer att registrera en anpassad blockkategori i din blockinfogare.

Allt du behöver göra är att justera categoryargumentet för registerBlockTypefunktionen /src/index.jsför att referera till din blockkategori och kompilera om:


category: 'wholesome-blocks',

När du nu kommer att infoga ditt block hittar du det i din nyskapade blockkategori:

Custom Block Category i Block Inserter

Ta en titt på att använda PHP för att rendera ditt block med dynamiska block
Titta på att använda postmetafält som attribut i ditt block
Lägg till en blockad sidofält med InspectorControls
Utöka ditt plugin genom att lägga till ytterligare ingångspunkter till filen webpack.config

Inspelningskälla: wholesomecode.ltd