{"id":233514,"date":"2023-02-16T13:49:00","date_gmt":"2023-02-16T10:49:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233514"},"modified":"2022-11-11T00:06:12","modified_gmt":"2022-11-10T21:06:12","slug":"skapa-anpassat-gutenberg-block-del-1-konfigurera-utvecklingsmiljoen","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/skapa-anpassat-gutenberg-block-del-1-konfigurera-utvecklingsmiljoen\/","title":{"rendered":"Skapa anpassat Gutenberg-block – Del 1: Konfigurera utvecklingsmilj\u00f6n"},"content":{"rendered":"\n

I den f\u00f6rsta delen av denna handledningsserie om hur man skapar anpassade Gutenberg-block m\u00e5ste vi st\u00e4lla in v\u00e5r utvecklingsmilj\u00f6. Vi beh\u00f6ver en plats d\u00e4r vi kan skriva v\u00e5r kod i ES6\/ESNext-syntaxer och kompilera den n\u00e4r vi \u00e4r p\u00e5 spr\u00e5ng. Det \u00e4r m\u00f6jligt att skriva anpassade Gutenberg-block genom att anv\u00e4nda ES5-syntax utan att st\u00e4lla in Webpack och Babel. Men koden kommer att vara riktigt besv\u00e4rlig att l\u00e4sa och skriva. Om du \u00e4r os\u00e4ker p\u00e5 varf\u00f6r vi beh\u00f6ver g\u00f6ra allt detta, eller vad skillnaden \u00e4r, l\u00e4s mitt inl\u00e4gg som f\u00f6rklarar detta<\/a>. Jag kan garantera dig att n\u00e4r du kommer tillbaka kommer du att vara \u00f6vertygad om att ta detta extra steg f\u00f6r att skriva b\u00e4ttre kod.<\/p>\n

Jag antar att du redan har en lokal WordPress som k\u00f6rs p\u00e5 en LAMP-stack eller liknande. Och att du antingen skriver ett tema eller en plugin. N\u00e4r det g\u00e4ller mig l\u00e4gger jag min kod i ett tema som jag har utvecklat, awp-starter-theme<\/code>, som finns i min WordPress-temanapp. Jag vill separera min Gutenberg-utveckling fr\u00e5n alla andra temafiler s\u00e5 jag skapar en underkatalog gutenberg-dev<\/code>i min temarotmapp. Det kommer att vara min projektmapp och mappen jag kommer att referera till f\u00f6r resten av handledningsserien.<\/p>\n

Jag har redan skrivit en detaljerad guide i hur man st\u00e4ller in en utvecklingsmilj\u00f6 f\u00f6r Gutenberg, s\u00e5 jag ska bara snabbt g\u00e5 igenom stegen h\u00e4r. Om du aldrig har gjort detta f\u00f6rut rekommenderar jag att du l\u00e4ser det l\u00e4nkade inl\u00e4gget nedan, eftersom det inneh\u00e5ller mer information \u00e4n vad du hittar h\u00e4r!<\/p>\n

Konfigurera projektet med webpack<\/h2>\n

Anv\u00e4nd terminal (iOS terminal eller Windows cmd b\u00e5da fungerar bra) navigera till din projektmapp, (i mitt fall awp-starter-theme\/gutenberg-dev<\/code>). Vi initierar ett nytt projekt genom att be npm att generera ett package.json<\/code>med generiskt inneh\u00e5ll.<\/p>\n

Skapar package.json<\/h3>\n
npm init -y<\/code><\/pre>\n
D\u00e4refter kommer jag att installera WordPress-skript som kommer att hj\u00e4lpa oss mycket med konfigurationen med det h\u00e4r kommandot (som l\u00e4gger till undermappen node_modules<\/code>och package-lock.json<\/code>ocks\u00e5):<\/p>\n
npm install --save-dev --save-exact @wordpress\/scripts<\/code><\/pre>\n
\u00d6ppna package.json<\/code>filen i din projektmapp i en editor och hitta scripts<\/code>egenskapen. Vi ers\u00e4tter det med tv\u00e5 skript fr\u00e5n WordPress-paketet vi just installerade:<\/p>\n
\"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\"\n},<\/code><\/pre>\n
"Build"-skriptet kommer att kompilera mina filer. Men eftersom det m\u00e5ste k\u00f6ras manuellt varje g\u00e5ng en \u00e4ndring g\u00f6rs, kommer vi hellre att anv\u00e4nda "start"-skriptet medan vi utvecklar. Det kommer sedan att initiera ett "bevakningsl\u00e4ge" d\u00e4r det lyssnar till \u00e4ndringar som gjorts i n\u00e5gon av dina skriptfiler och kompilerar om dem n\u00e4r du sparar \u00e4ndringar.<\/p>\n
Webpack konfiguration<\/h3>\n
N\u00e4sta steg \u00e4r att skapa en webpack-konfigurationsfil. Jag g\u00f6r detta f\u00f6r att jag inte vill anv\u00e4nda standardk\u00e4llan och utdatafilnamn och mappar. Jag vill sj\u00e4lv best\u00e4mma var mina k\u00e4llfiler finns, och var de kompilerade filerna ska hamna.<\/p>\n
Med hj\u00e4lp av @wordpress\/scripts<\/code>paketet vi installerade kan vi \u00e4rva WordPresss webbpaketkonfiguration och \u00e5sidos\u00e4tta bara de delar vi vill \u00e4ndra.<\/p>\n
Skapa en ny fil med namnet i v\u00e5r projektmapp webpack.config.js<\/code>och \u00f6ppna den i en editor. L\u00e4gg till detta inneh\u00e5ll:<\/p>\n
const defaultConfig = require(\"@wordpress\/scripts\/config\/webpack.config\");\nconst path = require('path');\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        'block-awhitepixel-myfirstblock': '.\/src\/block-awhitepixel-myfirstblock.js'\n    },\n    output: {\n        path: path.join(__dirname, '..\/assets\/js'),\n        filename: '[name].js'\n    }\n}<\/code><\/pre>\n
Vad detta g\u00f6r \u00e4r att definiera min inmatningsfil (f\u00f6r n\u00e4rvarande bara en) i entry<\/code>egenskapen, som finns i en undermapp src<\/code>i min projektmapp, som heter block-awhitepixel-myfirstblock.js<\/code>. Uppenbarligen namnge dina filer vad du vill, men kom ih\u00e5g att \u00e4ndra b\u00e5de nyckeln och v\u00e4rdet. F\u00f6r i output<\/code>egenskapen ber jag webpack att kompilera mina inmatningsfiler med entry-nyckeln som filnamn. I path<\/code>egenskapen ber jag att placera alla kompilerade filer ett steg ut ur min projektmapp och in i temats assets\/js<\/code>mapp. Justera filnamnen och platsen s\u00e5 att de passar ditt projekt. Se min detaljerade guide<\/a> om du \u00e4r f\u00f6rvirrad.<\/p>\n
Skapa en undermapp src\/<\/code>i projektmappen och det \u00e4r h\u00e4r vi l\u00e4gger alla k\u00e4llfiler. (Justera om du \u00e4ndrade entry<\/code>platsen i webpack.config.js<\/code>). Skapa en fil block-awhitepixel-myfirstblock.js<\/code>h\u00e4r och l\u00e4mna den tom tills vidare.<\/p>\n
Det finns ett steg till \u2013 och detta g\u00e4ller f\u00f6r oss som vill anv\u00e4nda de senaste funktionerna i ESNext. Den f\u00f6rinst\u00e4llda WordPress Babel-konfigurationen saknar tyv\u00e4rr detta. Och eftersom jag vill anv\u00e4nda funktioner som pilfunktioner m\u00e5ste jag ocks\u00e5 st\u00e4lla in Babel.<\/p>\n
St\u00e4ller in Babel<\/h2>\n
F\u00f6rst m\u00e5ste vi installera n\u00e5gra paket f\u00f6r v\u00e5r Babel-konfiguration genom att skriva detta kommando:<\/p>\n
npm install --save-dev @babel\/preset-env @babel\/preset-react @babel\/plugin-proposal-class-properties<\/code><\/pre>\n
N\u00e4r det \u00e4r klart skapar du en ny fil .babelrc<\/code>i v\u00e5r projektmapp. Det \u00e4r h\u00e4r vi l\u00e4gger v\u00e5r Babel-konfiguration:<\/p>\n
{\n    \"presets\": [\"@babel\/preset-env\", \"@babel\/preset-react\"],\n    \"plugins\": [\n        [\n            \"@babel\/plugin-proposal-class-properties\"\n        ]\n    ]\n}<\/code><\/pre>\n
Och det \u00e4r allt f\u00f6r v\u00e5r utvecklingsmilj\u00f6!<\/p>\n
Bygg kommandon<\/h2>\n
Under hela utvecklingen m\u00e5ste du kompilera dina Javascript-filer. I v\u00e5r har package.json<\/code>vi lagt till tv\u00e5 skript f\u00f6r just detta.<\/p>\n
N\u00e4r vi vill utveckla i v\u00e5ra Javascript-filer k\u00f6r vi detta i terminal:<\/p>\n
npm run build<\/code><\/pre>\n
Detta kommando kommer att utf\u00f6ra kompilering n\u00e4r du k\u00f6r detta i terminal. Ge det en chans och du b\u00f6r se att den genererar filen block-awhitepixel-myfirstblock.js<\/code>(tillsammans med en eller tv\u00e5 andra "tillg\u00e5ngsfiler") i din definierade utdatamapp som du definierade i webpack.config.js<\/code>. I mitt fall visas det i awp-starter-theme\/assets\/js\/<\/code>.<\/p>\n
Att anv\u00e4nda ovanst\u00e5ende kommando fungerar bra, men det blir irriterande att upprepa varje g\u00e5ng du g\u00f6r \u00e4ndringar i dina filer. Du f\u00f6redrar f\u00f6rmodligen att k\u00f6ra det h\u00e4r kommandot ist\u00e4llet:<\/p>\n
npm run start<\/code><\/pre>\n
Detta kommer att st\u00e4lla din terminal i "bevakningsl\u00e4ge", uppt\u00e4cka eventuella \u00e4ndringar som sparats i dina Javascript-filer och kompilera dem allt eftersom. N\u00e4r dina filer inneh\u00e5ller fel kommer terminalen att sl\u00e4nga ut felmeddelandena. Tryck p\u00e5 CTRL + C f\u00f6r att stoppa bevakningsprocessen.<\/p>\n
\"Skapa<\/a><\/p>\n
Som referens ser min projektmapp nu ut som bilden. Jag f\u00f6redrar att separera alla konfigurationsfiler och s\u00e4rskilt undermappen node_modules\/<\/code>(som inneh\u00e5ller bokstavligen tiotusentals filer) fr\u00e5n resten av min temakod. G\u00f6r det l\u00e4ttare att s\u00e4tta upp regler f\u00f6r ignorering \u2013 till exempel SCSS-kompilatorer eller git ignore. Vi har redan st\u00e4llt in webpack-konfigurationen f\u00f6r att kompilera de slutliga filerna direkt till awp-starter-theme\/assets\/js\/<\/code>tillsammans med andra Javascript-filer f\u00f6r mitt tema.<\/p>\n
Vi \u00e4r nu redo f\u00f6r n\u00e4sta del<\/a> d\u00e4r vi b\u00f6rjar med att registrera v\u00e5rt f\u00f6rsta anpassade block.<\/p>\n
Inspelningsk\u00e4lla:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Den f\u00f6rsta delen av denna handledningsserie om hur man skapar anpassade WordPress Gutenberg-block l\u00e4r vi oss hur man st\u00e4ller in v\u00e5r utvecklingsmilj\u00f6.<\/p>\n","protected":false},"author":1,"featured_media":152983,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[901,942,942,848,901,1110,818,818,848,868,868],"tags":[1173],"class_list":{"0":"post-233514","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-koda","8":"category-gutenberg-9","10":"category-handledningar","12":"category-n-a","13":"category-plugins-3","16":"category-wordpress-9","18":"tag-affiai-sv"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=233514"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233514\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/152983"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}