{"id":228078,"date":"2022-10-14T10:44:00","date_gmt":"2022-10-14T07:44:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228078"},"modified":"2022-11-09T00:36:01","modified_gmt":"2022-11-08T21:36:01","slug":"en-oeversikt-oever-wordpress-create-block-script","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/en-oeversikt-oever-wordpress-create-block-script\/","title":{"rendered":"En \u00f6versikt \u00f6ver WordPress Create Block Script"},"content":{"rendered":"\n<p>Det officiella WordPress Editor-teamet (Gutenberg) har tillhandah\u00e5llit <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ett snyggt litet skript f\u00f6r dig att skapa ett blockplugin<\/a> med deras <code>@wordpress\/create-block<\/code>npm-skript.<\/p>\n<p>Den h\u00e4r artikeln ger en \u00f6versikt \u00f6ver WordPress Create Block Script, tillsammans med detaljer om vad det producerar.<\/p>\n<p><strong>OBS: Den h\u00e4r artikeln \u00e4r f\u00f6r en \u00e4ldre version av Create Block Script<\/strong><\/p>\n<p>\u00c4ven om teorin fortfarande kan till\u00e4mpas, kanske en del av informationen i den h\u00e4r artikeln inte l\u00e4ngre \u00e4r kompatibel med det senaste skapa blockskriptet. Du kan <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">se v\u00e5r uppdaterade Skapa Block-skriptguide h\u00e4r<\/a>.<\/p>\n<h2>K\u00f6r Skapa blockskript<\/h2>\n<p>Den officiella dokumentationen ger dig n\u00e5gra olika parametrar att \u00f6verf\u00f6ra till <code>npm init @wordpress\/block<\/code>kommandot.<\/p>\n<p>F\u00f6r min installation k\u00f6rde jag den i interaktivt l\u00e4ge genom att utel\u00e4mna parametrarna. Jag skrev in f\u00f6ljande kommando i min terminal (medan jag lades <code>cd<\/code>in i min <code>wp-content\/plugins<\/code>mapp):<\/p>\n<pre><code>npm init @wordpress\/block\n<\/code><\/pre>\n<p>The Script st\u00e4llde n\u00e5gra fr\u00e5gor till mig f\u00f6r att hj\u00e4lpa mig bygga mitt block.<\/p>\n<p>Jag ville skapa ett startblock f\u00f6r en plugin-id\u00e9 som jag har (&#8217;Sunda anteckningar&#8217;) och jag svarade p\u00e5 fr\u00e5gorna enligt f\u00f6ljande:<\/p>\n<ul>\n<li>\n<p><strong>Blocket som anv\u00e4nds f\u00f6r identifiering (\u00e4ven namnet p\u00e5 plugin- och utdatamappen):<\/strong> Jag vill att mitt block ska heta <code>Wholesome Notes<\/code>, s\u00e5 jag skrev in <code>wholesome-notes<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>Det interna namnutrymmet f\u00f6r blocknamnet (n\u00e5got unikt f\u00f6r dina produkter):<\/strong> Eftersom detta borde vara unikt f\u00f6r alla mina produkter som jag skrev in <code>wholesome-code<\/code>, eftersom detta \u00e4r mitt f\u00f6retagsnamn. I efterhand skulle detta vara b\u00e4ttre f\u00f6rkortat till <code>wc<\/code>eller <code>wcltd<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>Visningstiteln f\u00f6r ditt block:<\/strong> Jag angav titeln p\u00e5 plugin-programmet, <code>Wholesome Notes<\/code>.<\/p>\n<\/li>\n<li>\n<p>En \u00f6versikt av WordPress Create Block Script Jag var inte 100% s\u00e4ker p\u00e5 vad jag ville skriva h\u00e4r, s\u00e5 jag skrev bara in lite text som jag t\u00e4nker \u00e4ndra senare.<\/p>\n<\/li>\n<li>\n<p><strong>Dashikonen f\u00f6r att g\u00f6ra det l\u00e4ttare att identifiera ditt block (valfritt):<\/strong> Jag valde snabbt att ta fram <a href=\"https:\/\/developer.wordpress.org\/resource\/dashicons\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Dashicons-resursen<\/a><code>admin-comments<\/code> eftersom den har en anteckningsstilikon.<\/p>\n<\/li>\n<li>\n<p><strong>Kategorinamnet f\u00f6r att hj\u00e4lpa anv\u00e4ndare att bl\u00e4ddra och uppt\u00e4cka ditt block (anv\u00e4nd piltangenterna):<\/strong> Jag valde <code>layout<\/code>, \u00e4ven om f\u00f6r att vara \u00e4rlig skulle den h\u00e4r typen av block f\u00f6rmodligen beh\u00f6va en egen kategori. Det \u00e4r n\u00e5got som jag kan \u00e4ndra p\u00e5 vid ett senare tillf\u00e4lle.<\/p>\n<\/li>\n<\/ul>\n<p>L\u00f6pning<code>npm init @wordpress\/block<\/code><\/p>\n<p>Skriptet gick sedan vidare och installerade alla beroenden som det beh\u00f6vde via npm (vid det h\u00e4r laget installerar det bara <code>wp-scripts<\/code>npm-paketet som ett beroende).<\/p>\n<h2>Inspektera utg\u00e5ngen<\/h2>\n<p>Med kommandona ovan ger WordPress Create Block Script dig f\u00f6ljande utdata:<\/p>\n<ul>\n<li>h\u00e4lsosamma anteckningar\n<ul>\n<li>bygga\n<ul>\n<li>index.asset.php<\/li>\n<li>index.js<\/li>\n<li>index.js.map<\/li>\n<\/ul>\n<\/li>\n<li>node_modules<\/li>\n<li>src\n<ul>\n<li>index.js<\/li>\n<\/ul>\n<\/li>\n<li>.editorconfig<\/li>\n<li>.gitignore<\/li>\n<li>editor.css<\/li>\n<li>package.json<\/li>\n<li>style.css<\/li>\n<li>h\u00e4lsosamma-anteckningar.php<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e80786cc626.png\" alt=\"En \u00f6versikt \u00f6ver WordPress Create Block Script\" \/><a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/block output<\/p>\n<p>F\u00f6ljande \u00e4r en uppdelning av var och en av dessa filer och mappar.<\/p>\n<p><code>wholesome-notes<\/code><\/p>\n<p>Det h\u00e4r \u00e4r rotmappen f\u00f6r pluginet, den har samma namn som den jag angav f\u00f6r &#8217;snigeln&#8217; i installationsfr\u00e5gorna.<\/p>\n<p><code>\/build<\/code><\/p>\n<p>Det h\u00e4r \u00e4r byggmappen. Den inneh\u00e5ller alla JavaScript- och PHP-tillg\u00e5ngar som genereras fr\u00e5n <code>\/src<\/code>mappen. Dessa k\u00f6as via huvudladdningsfilen <code>wholesome-notes.php<\/code>.<\/p>\n<p><code>\/build\/index.assets.php<\/code><\/p>\n<p>Denna PHP-fil genereras automatiskt n\u00e4r <code>\/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 <code>wholesome-notes.php<\/code>.<\/p>\n<p><code>\/build\/index.js<\/code><\/p>\n<p>Detta \u00e4r den huvudsakliga kompilerade JavaScript-filen och k\u00f6as via huvudladdningsfilen <code>wholesome-notes.php<\/code>.<\/p>\n<p><code>\/build\/index.js.map<\/code><\/p>\n<p>Den h\u00e4r filen genereras bara n\u00e4r du kompilerar tillg\u00e5ngarna f\u00f6r utvecklingsl\u00e4ge (IE som du k\u00f6r <code>npm start<\/code>och inte <code>npm run 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<p><code>\/node_modules<\/code><\/p>\n<p>Det h\u00e4r \u00e4r mappen som alla JavaScript-beroenden f\u00f6r ditt plugin \u00e4r installerade i.<\/p>\n<p><code>\/src<\/code><\/p>\n<p>Det h\u00e4r \u00e4r mappen som inneh\u00e5ller alla okompilerade tillg\u00e5ngar f\u00f6r din plugin.<\/p>\n<p><code>\/src\/index.js<\/code><\/p>\n<p>Detta \u00e4r den huvudsakliga okompilerade JavaScript-filen f\u00f6r ditt WordPress Editor (Gutenberg) block. Den inneh\u00e5ller initialt all logik f\u00f6r blocket.<\/p>\n<p><code>\/.editorconfig<\/code><\/p>\n<p>Den h\u00e4r filen inneh\u00e5ller anv\u00e4ndbara f\u00f6rinst\u00e4llningar f\u00f6r din IDE (Integrated Development Environment), som Visual Studio Code.<\/p>\n<p><code>\/.gitignore<\/code><\/p>\n<p>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<p><code>\/editor.css<\/code><\/p>\n<p>Stilarna i den h\u00e4r filen matas endast ut i editorn, den st\u00e4lls i k\u00f6 via huvudladdningsfilen <code>wholesome-notes.php<\/code>.<\/p>\n<p><code>\/package.json<\/code><\/p>\n<p>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 <code>wp-scripts<\/code>( <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<p><code>\/style.css<\/code><\/p>\n<p>Stilarna i den h\u00e4r filen matas ut i editorn och p\u00e5 framsidan av webbplatsen st\u00e4lls de i k\u00f6 via huvudladdningsfilen <code>wholesome-notes.php<\/code>.<\/p>\n<p><code>\/wholesome-notes.php<\/code><\/p>\n<p>Detta \u00e4r den huvudsakliga loader-filen f\u00f6r plugin-programmet. Dess namn sattes via &#8217;slug&#8217; som vi skrev in i det initiala installationsskriptet. Det k\u00f6ar alla JavaScript-tillg\u00e5ngar som beh\u00f6vs f\u00f6r plugin-programmet.<\/p>\n<h2>Utforska plugin-programmet<\/h2>\n<p>Efter att du har skapat ditt plugin, om du aktiverar det och infogar det i redigeraren kommer det att se ut som f\u00f6ljande sk\u00e4rmdumpar (frontend och backend).<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e807884c3f2.png\" alt=\"En \u00f6versikt \u00f6ver WordPress Create Block Script\" \/>Skapa blockskript \u2013 standardgr\u00e4nssnitt<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e807893d3d5.png\" alt=\"En \u00f6versikt \u00f6ver WordPress Create Block Script\" \/>Skapa blockskript \u2013 Standard bak\u00e4nde<\/p>\n<p>Som du kan se ger blocket oss en del grundl\u00e4ggande utdata som vi enkelt kan \u00e4ndra f\u00f6r att implementera v\u00e5rt eget block.<\/p>\n<h3>Blockera CSS<\/h3>\n<p>Som du kan se fr\u00e5n sk\u00e4rmdumparna implementerar exempelkoden i <code>editor.css<\/code>en r\u00f6d gr\u00e4ns i editorn, medan exempelstilarna i <code>styles.css<\/code>appliceras p\u00e5 b\u00e5de fronten och backend.<\/p>\n<h3>Blockera JavaScript<\/h3>\n<p>Ing\u00e5ngspunkten f\u00f6r att anpassa det nyskapade blocket \u00e4r <code>\/src\/index.js<\/code>filen.<\/p>\n<p>Det finns gott om inline-dokumentation i den h\u00e4r filen, som f\u00f6rklarar varf\u00f6r vissa funktioner importeras, s\u00e5som <code>registerBlockType<\/code>f\u00f6r registrering av blocket och <code>__<\/code>f\u00f6r i18n-text\u00f6vers\u00e4ttningsst\u00f6d.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e8078a4b117.png\" alt=\"En \u00f6versikt \u00f6ver WordPress Create Block Script\" \/>Skapa Block index.js Inline-kommentarer<\/p>\n<p>Det ger dig ocks\u00e5 n\u00e5gra mycket grundl\u00e4ggande utdata f\u00f6r <code>edit<\/code>och <code>save<\/code>funktioner som skickas in i blockregistreringen.<\/p>\n<p><strong>Obs:<\/strong> I senare versioner av skriptet har dessa extraherats till sina egna filer och inkluderats som moduler i denna fil.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e8078b6b4b9.png\" alt=\"En \u00f6versikt \u00f6ver WordPress Create Block Script\" \/>Skapa Block index.js Redigera och spara<\/p>\n<h2>Bygga blocket<\/h2>\n<p>Enligt <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">skapa block npm-dokumentationen<\/a> kan du anv\u00e4nda flera kommandon i din terminal (fr\u00e5n rotmappen f\u00f6r din plugin), f\u00f6r att g\u00f6ra saker som att kontrollera kodkvaliteten eller uppdatera paket.<\/p>\n<p>De viktigaste kommandona du beh\u00f6ver f\u00f6r att bygga blocket kommer att vara <code>npm start<\/code>att kompilera din plugin f\u00f6r utveckling och <code>npm run build<\/code>att kompilera den slutliga versionen.<\/p>\n<p><code>wp-scripts<\/code>(fr\u00e5n <code>@wordpress\/scripts<\/code>npm-paketet) \u00e4r det huvudsakliga beroendet f\u00f6r ditt plugin. Detta beroende abstraherar alla verktyg f\u00f6r ditt block away, s\u00e5 du kan bara fokusera p\u00e5 att bygga JavaScript.<\/p>\n<p>Behind the scenes <code>wp-scripts<\/code>anv\u00e4nder <code>webpack<\/code>f\u00f6r att kompilera alla dina tillg\u00e5ngar till <code>\/build\/index.js<\/code>filen.<\/p>\n<p>Du kan l\u00e4sa mer om <code>wp-scripts<\/code>i <a href=\"https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-scripts\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Block Editor-handboken<\/a> och du kan ta reda p\u00e5 mer om konfigurationen av webbpaketbyggen i avsnittet <a href=\"https:\/\/developer.wordpress.org\/block-editor\/tutorials\/javascript\/js-build-setup\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">&#8217;JavaScript Build Setup&#8217; i handboken.<\/a><\/p>\n<h3>Ut\u00f6ka konfigurationen av webbpaketet Skapa block<\/h3>\n<p>Kodbasen f\u00f6r ditt block kan str\u00e4cka sig \u00f6ver flera filer, eller till och med ha ett antal underblock, eller inneh\u00e5lla komplexa stilar. Vid tillf\u00e4llen som dessa kanske du vill ut\u00f6ka webbpaketet som \u00e4r inbyggt i <code>wp-scripts<\/code>.<\/p>\n<p>F\u00f6r mer information, se min artikel om hur du <a href=\"https:\/\/wholesomecode.ltd\/articles\/extending-the-wordpress-create-block-script-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ut\u00f6kar <code>wp-scripts<\/code>webbpaketskonfigurationen<\/a>, eller kolla in <a href=\"https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-scripts\/#provide-your-own-webpack-config\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">avsnittet Paketskript i Block Editor Handbook<\/a> f\u00f6r v\u00e4gledning.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Det officiella WordPress Editor-teamet (Gutenberg) har tillhandah\u00e5llit ett snyggt litet skript s\u00e5 att du kan skapa ett blockplugin med deras @wordpress\/create-block npm-skript.Denna artikel ger&#8230;<\/p>\n","protected":false},"author":1,"featured_media":224138,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[848,901,724,868],"tags":[1173],"class_list":["post-228078","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-koda","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228078","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=228078"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228078\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/224138"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}