npm<\/code> skript f\u00f6r dig att skapa ett blockplugin<\/a> som skapar ett startblock s\u00e5 att du snabbt kan komma ig\u00e5ng.<\/p>\nSom standard \u00e4r den typ av WordPress-plugin som detta skapar ett "block", men det ger oss ocks\u00e5 en bra startpunkt f\u00f6r andra typer av Gutenberg-plugins.<\/p>\n
F\u00f6ruts\u00e4ttningar<\/h2>\n\n- Node m\u00e5ste vara installerad p\u00e5 din maskin<\/a> s\u00e5 att du kan anv\u00e4nda
npm<\/code>kommandot (som st\u00e5r f\u00f6r Node Package Manager)<\/li>\n- WordPress installation<\/li>\n
- Kodredigerare<\/li>\n
- Tillg\u00e5ng till terminalen<\/li>\n<\/ul>\n
Skapa din plugin<\/h2>\n
Efter att du har installerat nod p\u00e5 din maskin b\u00f6r du ha tillg\u00e5ng till npm<\/code>kommandot i din terminal.<\/p>\n\u00d6ppna din terminal och se till att du har g\u00e5tt cd<\/code>(Changed Directory) till plugin-mappen i din WordPress-installation (t.ex. cd wp-content\/plugins<\/code>).<\/p>\nV\u00e4l d\u00e4r k\u00f6r f\u00f6ljande kommando:<\/p>\n
npm init @wordpress\/block\n<\/code><\/pre>\nDetta kommer att ladda ner allt skriptet beh\u00f6ver f\u00f6r att starta bygget. N\u00e4r det \u00e4r klart kommer skriptet att st\u00e4lla dig en rad fr\u00e5gor som beh\u00f6vs f\u00f6r att konfigurera din plugin.<\/p>\n
Anv\u00e4nda terminalen f\u00f6r att k\u00f6ra Skapa skript<\/p>\n
Konfigurationsfr\u00e5gor<\/h3>\n
Skriptet kommer att st\u00e4lla f\u00f6ljande fr\u00e5gor, h\u00e4r \u00e4r mina exempelsvar:<\/p>\n
\n- \n
Blocket som anv\u00e4nds f\u00f6r identifiering (\u00e4ven namnet p\u00e5 plugin- och utdatamappen)<\/strong> \u2014 Jag vill att mitt block ska heta Wholesome Plugin<\/code>, s\u00e5 jag skrev in wholesome-plugin<\/code>.<\/p>\n<\/li>\n- \n
Det interna namnutrymmet f\u00f6r blocknamnet (n\u00e5got unikt f\u00f6r dina produkter)<\/strong> \u2014 Eftersom detta borde vara unikt f\u00f6r alla mina produkter som jag skrev in wholesomecode<\/code>, eftersom detta \u00e4r mitt f\u00f6retagsnamn.<\/p>\n<\/li>\n- \n
Visningstiteln f\u00f6r ditt block<\/strong> \u2014 Jag skrev in titeln p\u00e5 plugin-programmet, Wholesome Plugin<\/code>.<\/p>\n<\/li>\n- \n
Den korta beskrivningen f\u00f6r ditt block (valfritt)<\/strong> \u2014 Jag skrev in " An example plugin to demonstrate the create-block-script<\/code>".<\/p>\n<\/li>\n- \n
Dashikonen f\u00f6r att g\u00f6ra det l\u00e4ttare att identifiera ditt block (valfritt)<\/strong> \u2014 Jag valde att snabbt ta fram WordPress Dashicons-resursen<\/a>admin-plugins<\/code> eftersom den har en plugin-ikon. Kom ih\u00e5g att utel\u00e4mna dashicon- fr\u00e5n dashicon-prefixet n\u00e4r du g\u00f6r detta.<\/p>\n<\/li>\n- \n
Kategorinamnet f\u00f6r att hj\u00e4lpa anv\u00e4ndare att bl\u00e4ddra och uppt\u00e4cka ditt block (anv\u00e4nd piltangenterna)<\/strong> \u2014 jag valde design<\/code>. \u00c4ven om en anpassad kategori f\u00f6rmodligen skulle passa b\u00e4ttre.<\/p>\n<\/li>\n- \n
Namnet p\u00e5 plugin-f\u00f6rfattaren (valfritt). Flera f\u00f6rfattare kan listas med kommatecken<\/strong> \u2014 jag skrev in wholesomecode<\/code>.<\/p>\n<\/li>\n- \n
Det korta namnet p\u00e5 plugin-licensen (valfritt)<\/strong> \u2014 Jag tryckte p\u00e5 enter f\u00f6r att acceptera GPL v2.0 eller senare.<\/p>\n<\/li>\n- \n
En l\u00e4nk till licensens fullst\u00e4ndiga text (valfritt)<\/strong> \u2014 Jag tryckte p\u00e5 enter f\u00f6r att infoga GPL v2.0-licensens URL.<\/p>\n<\/li>\n- \n
Det aktuella versionsnumret f\u00f6r plugin<\/strong> – jag tryckte p\u00e5 enter f\u00f6r att infoga 0.1.0<\/code>.<\/p>\n<\/li>\n<\/ul>\n![\"Skapa](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d770fb3.png\")
Fr\u00e5gor om skriptkonfiguration<\/p>\n
Skriptet slutar k\u00f6ras.<\/p>\n
Vad h\u00e4nde nyss?<\/h3>\n
N\u00e5gra saker h\u00e4nder medan skriptet k\u00f6rs, dessa \u00e4r:<\/p>\n
\n- Det skapar mappen f\u00f6r plugin,<\/li>\n
- Det genererar alla plugin-filer (se utforska plugin-programmet f\u00f6r detaljer om vad dessa g\u00f6r<\/a> )<\/li>\n
- Den installerar de beroenden den beh\u00f6ver, inklusive
@wordpress\/scripts<\/code>paketet (detta g\u00f6r det tunga lyftet n\u00e4r det g\u00e4ller att bygga pluginet)<\/li>\n- Den kompilerar koden<\/li>\n
- Den matar ut en lista med kommandon som du kan anv\u00e4nda<\/li>\n<\/ul>\n
![\"Skapa](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d865300.png\")
Bygg kommandon<\/p>\n
Vi kommer att utforska dessa mer i avsnittet Utforska plugin-programmet .<\/a><\/p>\nAnv\u00e4nder plugin<\/h2>\n
Innan du kan anv\u00e4nda plugin-programmet m\u00e5ste du aktivera det. Du kan g\u00f6ra detta genom att v\u00e4lja Plugins<\/code>fr\u00e5n WordPress admin-menyn och sedan v\u00e4lja activate<\/code>under namnet p\u00e5 plugin-programmet.<\/p>\n![\"Skapa](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d958ea6.gif\")
Aktivera insticksprogrammet<\/p>\n
Nu m\u00e5ste du redigera ett inl\u00e4gg i WordPress och infoga plugin-programmet med Gutenberg-redigeraren.<\/p>\n
![\"Skapa](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0db497f6.gif\")
Infoga blocket i ett inl\u00e4gg<\/p>\n
Observera att insticksprogrammet inte g\u00f6r s\u00e5 mycket som standard, det skapar bara ett block. Det ger dock ett ramverk som du kan anv\u00e4nda f\u00f6r att bygga ditt eget plugin.<\/p>\n
Visa blocket p\u00e5 fronten<\/h3>\n
Som standard ser blocket ut s\u00e5 h\u00e4r p\u00e5 fronten. Observera att det har ett lite annorlunda utseende, detta \u00e4r avsiktligt s\u00e5 att du kan bekanta dig med CSS p\u00e5 framsidan och baksidan av WordPress.<\/p>\n
![\"Skapa](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0dd10fa2.png\")
Blocket p\u00e5 fronten<\/p>\n
Utforska plugin-programmet<\/h2>\n
Hela syftet med Create Block Script \u00e4r att du ska skapa ditt eget plugin. L\u00e5t oss utforska filerna som den genererade mer i detalj:<\/p>\n
![\"Skapa](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0de1777f.png\")
Genererade filer<\/p>\n
wholesome-plugin<\/code><\/strong>\u2014 Det h\u00e4r \u00e4r rotmappen f\u00f6r plugin-programmet, det har samma namn som det jag angav f\u00f6r ’slug’ i installationsfr\u00e5gorna.<\/p>\n**\/build**<\/code>\u2014 Det h\u00e4r \u00e4r byggmappen. Den inneh\u00e5ller alla JavaScript- och PHP-tillg\u00e5ngar som genereras fr\u00e5n \/src<\/code>mappen. Dessa k\u00f6as via huvudladdningsfilen wholesome-notes.php<\/code>.<\/p>\n**\/build\/index.assets.php**<\/code>\u2014 Den h\u00e4r PHP-filen genereras automatiskt n\u00e4r \/src<\/code>mappen kompileras. Den inneh\u00e5ller en upps\u00e4ttning av alla WordPress Editor (Gutenberg) JavaScript-anst\u00e4ndigheter som anv\u00e4nds av ditt plugin. Den k\u00f6as via huvudladdningsfilen wholesome-plugin.php<\/code>.<\/p>\n**\/build\/index.css**<\/code>\u2014 Det h\u00e4r \u00e4r editorns CSS-fil och k\u00f6as via huvudladdningsfilen wholesome-plugin.php<\/code>.<\/p>\n**\/build\/index.js**<\/code>\u2014 Detta \u00e4r den huvudsakliga kompilerade JavaScript-filen och k\u00f6as via huvudladdarfilen wholesome-plugin.php<\/code>.<\/p>\n**\/build\/style-index.css**<\/code>\u2014 Det h\u00e4r \u00e4r frontend-CSS-filen och k\u00f6as via huvudladdningsfilen wholesome-plugin.php<\/code>.<\/p>\n**\/build\/index.js.map**<\/code>\u2014 Den h\u00e4r filen genereras bara n\u00e4r du kompilerar tillg\u00e5ngarna f\u00f6r utvecklingsl\u00e4ge (IE som du k\u00f6r npm start<\/code>och inte npm build<\/code>n\u00e4r du kompilerar dina tillg\u00e5ngar. Det \u00e4r en anv\u00e4ndbar fil f\u00f6r JavaScript-fels\u00f6kare f\u00f6r att hj\u00e4lpa till att identifiera filnamn och radnummer om fel uppst\u00e5r.<\/p>\n\n- \n
**\/node_modules**<\/code>\u2014 Det h\u00e4r \u00e4r mappen som alla JavaScript-beroenden f\u00f6r ditt plugin \u00e4r installerade i.<\/p>\n<\/li>\n- \n
**\/src**<\/code>\u2014 Det h\u00e4r \u00e4r mappen som inneh\u00e5ller alla okompilerade tillg\u00e5ngar f\u00f6r din plugin.<\/p>\n<\/li>\n- \n
**\/src\/edit.js**<\/code>\u2014 Detta \u00e4r blockets redigeringsfunktion och styr hur blocket visas i blockredigeraren n\u00e4r det \u00e4r i redigeringsl\u00e4ge.<\/p>\n<\/li>\n- \n
**\/src\/editor.scss**<\/code>\u2014 Detta \u00e4r den okompilerade SCSS f\u00f6r redakt\u00f6ren, den kommer att kompileras till \/build\/index.css<\/code>.<\/p>\n<\/li>\n- \n
**\/src\/index.js**<\/code>\u2014 Detta \u00e4r den huvudsakliga okompilerade JavaScript-filen f\u00f6r ditt WordPress Editor (Gutenberg) block. Den registrerar blocket och inneh\u00e5ller standardinst\u00e4llningar.<\/p>\n<\/li>\n- \n
**\/src\/save.js**<\/code>\u2014 Detta \u00e4r blockets sparafunktion och styr uppm\u00e4rkningen av blocket n\u00e4r det sparas.<\/p>\n<\/li>\n- \n
**\/src\/style.scss**<\/code>\u2014 Detta \u00e4r den okompilerade SCSS f\u00f6r frontend, denna kommer att kompileras till \/build\/style-index.css<\/code>.<\/p>\n<\/li>\n- \n
**\/.editorconfig**<\/code>\u2014 Den h\u00e4r filen inneh\u00e5ller anv\u00e4ndbara f\u00f6rinst\u00e4llningar f\u00f6r din IDE (Integrated Development Environment), som Visual Studio Code.<\/p>\n<\/li>\n- \n
**\/.gitignore**<\/code>\u2014 Den h\u00e4r filen s\u00e4ger \u00e5t git att ignorera vissa filer n\u00e4r du \u00f6verg\u00e5r till ett git-f\u00f6rr\u00e5d (som GitHub).<\/p>\n<\/li>\n- \n
**\/editor.css**<\/code>\u2014 Stilarna i den h\u00e4r filen matas endast ut i editorn, den k\u00f6as via huvudladdningsfilen wholesome-notes.php<\/code>.<\/p>\n<\/li>\n- \n
**\/block.json**<\/code>\u2014 Den h\u00e4r filen definierar plugin-programmet s\u00e5 att det kan uppt\u00e4ckas av WordPress-blockbiblioteket. Om du g\u00f6r \u00e4ndringar i plugin-programmet, se till att den h\u00e4r filen uppdateras. I nyare versioner av NPM-skriptet anv\u00e4nds denna fil ist\u00e4llet f\u00f6r \/src\/index.js<\/code>att registrera ditt block.<\/p>\n<\/li>\n- \n
**\/package.json**<\/code>\u2014 Den h\u00e4r filen inneh\u00e5ller alla npm-beroenden f\u00f6r plugin-programmet och de kommandon som du kan k\u00f6ra. Observera att plugin-programmet anv\u00e4nder wp-scripts<\/code>( @wordpress\/scripts<\/code>) som sin bas, s\u00e5 till en b\u00f6rjan g\u00e4ller de beroenden som laddas f\u00f6r det paketet.<\/p>\n<\/li>\n- \n
**\/readme.txt**<\/code>\u2014 Den h\u00e4r filen \u00e4r en readme-fil f\u00f6r WordPress-pluginf\u00f6rr\u00e5d, som kr\u00e4vs om du vill att blocket ska listas p\u00e5 pluginf\u00f6rr\u00e5det.<\/p>\n<\/li>\n- \n
**\/wholesome-plugin.php**<\/code>\u2014 Det h\u00e4r \u00e4r huvudladdningsfilen f\u00f6r pluginet. Dess namn sattes via ’slug’ som vi skrev in i det initiala installationsskriptet. Det k\u00f6ar alla JavaScript-tillg\u00e5ngar som beh\u00f6vs f\u00f6r plugin-programmet.<\/p>\n<\/li>\n<\/ul>\nUtforska byggkommandona<\/h3>\n
Innan vi kan k\u00f6ra v\u00e5ra byggkommandon m\u00e5ste vi se till att vi \u00e4r i plugin-mappen. I det h\u00e4r exemplet skulle vi k\u00f6ra cd wholesome-plugin<\/code>i terminalen f\u00f6r att byta katalog till v\u00e5r plugin-mapp.<\/p>\nVi kan sedan k\u00f6ra f\u00f6ljande kommandon:<\/p>\n
\n- \n
**npm start**<\/code>\u2014 Startar bygget f\u00f6r utveckling. Om du g\u00f6r en \u00e4ndring i plugin-programmet m\u00e5ste du g\u00f6ra detta f\u00f6r att \u00e4ndringarna ska visas (du kommer sannolikt att beh\u00f6va uppdatera din webbl\u00e4sare ocks\u00e5).<\/p>\n<\/li>\n- \n
**npm run build**<\/code>\u2014 Bygger koden f\u00f6r produktion. G\u00f6r detta om du skapar en releaseversion av plugin-programmet.<\/p>\n<\/li>\n- \n
**npm run format:js**<\/code>\u2014 Automatiskt formaterar JavaScript-filerna med hj\u00e4lp av b\u00e4sta praxis.<\/p>\n<\/li>\n- \n
**npm run lint:css**<\/code>\u2014 Lints (letar efter fel i) CSS-filer.<\/p>\n<\/li>\n- \n
**npm run lint:js**<\/code>\u2014 Lints (letar efter fel i) JavaScript-filer.<\/p>\n<\/li>\n- \n
**npm run packages-update**<\/code>\u2014 Uppdaterar WordPress-paket till den senaste versionen.<\/p>\n<\/li>\n<\/ul>\nVi kommer att anv\u00e4nda en eller flera av dessa n\u00e4r vi \u00e4ndrar insticksprogrammet.<\/p>\n
\u00c4ndra plugin<\/h2>\n
L\u00e5t oss b\u00f6rja med att g\u00f6ra v\u00e5rt block redigerbart.<\/p>\n
L\u00e4gg till attribut till\/src\/index.js<\/code><\/h3>\n\u00d6ppna upp \/src\/index.js<\/code>i din editor och l\u00e4gg till f\u00f6ljande i registerBlockType<\/code>funktionen, under apiVersion<\/code>:<\/p>\nattributes: {\n blockText: {\n default: 'Wholesome Plugin \u2013 hello from the editor!',\n type: 'string',\n },\n},\n<\/code><\/pre>\nDetta kommer att ge oss en plats att lagra data i v\u00e5r plugin som kallas blockText<\/code>tillg\u00e4nglig via attributes<\/code>egendomen (prop). Observera att vi har gett den en standard f\u00f6r originaltexten som genereras av skapa plugin-skriptet.<\/p>\nL\u00e4gg till RichText till\/src\/edit.js<\/code><\/h3>\n\u00d6ppna upp \/src\/edit.js<\/code>i din editor och ers\u00e4tt importen f\u00f6r useBlockProps<\/code>med f\u00f6ljande:<\/p>\nimport { RichText, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\nDetta l\u00e5ter oss anv\u00e4nda RichText-komponenten i v\u00e5r redigeringsmetod.<\/p>\n
\u00c4ndra sedan hela redigeringsfunktionen till f\u00f6ljande:<\/p>\n
export default function Edit( { attributes, setAttributes }) {\n const { blockText } = attributes;\n return (<p { ...useBlockProps() }>\n <RichText\n className=\"block__text\"\n keepPlaceholderOnFocus\n onChange={ (blockText) => setAttributes( { blockText }) }\n placeholder={ __( 'Block Text', 'wholesome-plugin') }\n tagName=\"span\"\n value={ blockText }\n \/>\n <\/p>\n );\n}\n<\/code><\/pre>\nDetta st\u00e4ller in v\u00e4rdet p\u00e5 RichText<\/code>komponenten till att vara detsamma som det som lagras i blockText<\/code>attributet, och onChange<\/code>egenskapen st\u00e4ller in blockText<\/code>attributet till vad som n\u00e5gonsin har skrivits in i RichText<\/code>komponenten.<\/p>\nMata in attributen\/src\/save.js<\/code><\/h3>\n\u00d6ppna upp \/src\/save.js<\/code>i din editor och ers\u00e4tt save<\/code>funktionen med f\u00f6ljande:<\/p>\nexport default function save( { attributes }) {\n const { blockText } = attributes;\n return (<p { ...useBlockProps.save() }>\n { blockText }\n <\/p>\n );\n}\n<\/code><\/pre>\nDetta matar helt enkelt ut v\u00e4rdet av blockText<\/code>i stycket.<\/p>\nKompilera plugin<\/h3>\n
\u00d6ppna terminalen, se till att du \u00e4r i rotkatalogen f\u00f6r ditt plugin och k\u00f6r f\u00f6ljande kommando:<\/p>\n
Skriptet kommer att kompileras. Om du har n\u00e5gra fel b\u00f6r terminalen g\u00f6ra dig medveten om vad de \u00e4r.<\/p>\n
![\"Skapa](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0df5e2a4.gif\")
Bygger plugin<\/p>\n
S\u00e4tter in plugin<\/h3>\n
Se till att du har uppdaterat ditt inl\u00e4gg. Den tidigare versionen av blocket kan nu vara trasig, det h\u00e4r \u00e4r bra, ta bara bort det och s\u00e4tt in ett nytt.<\/p>\n
Infoga blocket med hj\u00e4lp av plustecknet uppe till v\u00e4nster i editorn, och n\u00e4r det \u00e4r infogat klicka p\u00e5 dess text. Du borde. nu kunna redigera texten.<\/p>\n
![\"Skapa](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e151e82.gif\")
Infogar det redigerbara blocket<\/p>\n
Visa plugin<\/h3>\n
Spara inl\u00e4gget och se det p\u00e5 framsidan av webbplatsen, texten du \u00e4ndrade ska visas ist\u00e4llet f\u00f6r originaltexten.<\/p>\n
![\"Skapa](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e327430.png\")
Redigerbart block p\u00e5 webbsidans frontend<\/p>\n
Om du vill att dina block ska visas i en anpassad blockkategori, l\u00e4gg bara till f\u00f6ljande kod till roten av ditt plugin (i det h\u00e4r fallet wholesome-plugin.php<\/code>:<\/p>\nfunction wholesomecode_wholesome_plugin_block_categories( $categories) {\n return array_merge(\n $categories,\n [\n [\n 'slug' => 'wholesome-blocks',\n 'title' => __( 'Wholesome Blocks', 'wholesome-boilerplate' ),\n ],\n ]\n );\n}\nadd_action( 'block_categories', 'wholesomecode_wholesome_plugin_block_categories', 10, 2 );\n<\/code><\/pre>\nDetta kommer att registrera en anpassad blockkategori i din blockinfogare.<\/p>\n
Allt du beh\u00f6ver g\u00f6ra \u00e4r att justera category<\/code>argumentet f\u00f6r registerBlockType<\/code>funktionen \/src\/index.js<\/code>f\u00f6r att referera till din blockkategori och kompilera om:<\/p>\n\ncategory: 'wholesome-blocks',\n<\/code><\/pre>\nN\u00e4r du nu kommer att infoga ditt block hittar du det i din nyskapade blockkategori:<\/p>\n
![\"Skapa](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e40fe2e.png\")
Custom Block Category i Block Inserter<\/p>\n
\n- Ta en titt p\u00e5 att anv\u00e4nda PHP f\u00f6r att rendera ditt block med dynamiska block<\/a><\/li>\n
- Titta p\u00e5 att anv\u00e4nda postmetaf\u00e4lt som attribut i ditt block<\/a><\/li>\n
- L\u00e4gg till en blockad sidof\u00e4lt med InspectorControls<\/a><\/li>\n
- Ut\u00f6ka ditt plugin genom att l\u00e4gga till ytterligare ing\u00e5ngspunkter till filen webpack.config<\/a><\/li>\n<\/ul>\n