{"id":228245,"date":"2022-10-18T16:39:00","date_gmt":"2022-10-18T13:39:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228245"},"modified":"2022-11-09T01:29:04","modified_gmt":"2022-11-08T22:29:04","slug":"laegg-till-startpunkter-till-wordpress-create-block-script","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/laegg-till-startpunkter-till-wordpress-create-block-script\/","title":{"rendered":"L\u00e4gg till startpunkter till WordPress Create Block Script"},"content":{"rendered":"\n<p>N\u00e4r du f\u00f6rst skapar ett block med WordPress skapa blockskript med <code>npm init @wordpress\/block<\/code>det ger dig en ing\u00e5ngspunkt till <code>\/src\/index.js<\/code>, som du kan anv\u00e4nda f\u00f6r att kompilera alla dina blockbaserade tillg\u00e5ngar och stilar.<\/p>\n<p>Ibland vill du l\u00e4gga till andra ing\u00e5ngspunkter, till exempel kanske du vill anv\u00e4nda WordPress Block Editor (Gutenberg) block n\u00e5gon annanstans i redigeraren, till exempel <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">p\u00e5 en inst\u00e4llningssida<\/a> eller i anpassaren.<\/p>\n<p>Den h\u00e4r guiden hj\u00e4lper dig att ut\u00f6ka WordPress Create Block Script <code>webpack.config<\/code>s\u00e5 att du kan l\u00e4gga till dessa ytterligare ing\u00e5ngspunkter.<\/p>\n<h2>F\u00f6ruts\u00e4ttningar<\/h2>\n<ul>\n<li>Var bekant med <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">att skapa plugins f\u00f6r WordPress Gutenberg med skapa blockskript<\/a><\/li>\n<\/ul>\n<h2>Skapa dina filer<\/h2>\n<p>Efter att ha <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">skapat blockskriptguiden<\/a> kommer vi att skapa n\u00e5gra filer i v\u00e5r l\u00f6sning:<\/p>\n<h3>Skapa<code>\/src\/admin.js<\/code><\/h3>\n<p>Den h\u00e4r filen kommer att vara den huvudsakliga ing\u00e5ngspunkten f\u00f6r alla React vi vill l\u00e4gga till p\u00e5 WordPress-administrat\u00f6rssk\u00e4rmen (till exempel om vi vill <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bygga en alternativsida f\u00f6r att styra v\u00e5ra inst\u00e4llningar med Gutenberg Components<\/a>.<\/p>\n<p>Skapa filen <code>\/src\/admin.js<\/code>och klistra in f\u00f6ljande kod:<\/p>\n<pre><code>import { __ } from '@wordpress\/i18n';\nimport api from '@wordpress\/api';\n\nimport '.\/admin.scss';\n<\/code><\/pre>\n<p>Vi g\u00f6r egentligen ingenting i den h\u00e4r filen \u00e4n, det kommer att bli f\u00f6rem\u00e5l f\u00f6r senare guider. Just nu l\u00e4gger vi bara in lite kod s\u00e5 att vi kan testa resultatet.<\/p>\n<p>Den importerar dock <code>\/src\/admin.scss<\/code>filen, som kommer att kompileras f\u00f6r att inneh\u00e5lla all v\u00e5r anpassade CSS f\u00f6r WordPress-administrat\u00f6ren.<\/p>\n<h3>Skapa<code>\/src\/admin.scss<\/code><\/h3>\n<p>Skapa filen <code>\/src\/admin.scss<\/code>och l\u00e4gg till lite test-SCSS:<\/p>\n<pre><code>body {\n  background: pink;\n}\n<\/code><\/pre>\n<p>\u00c5terigen tj\u00e4nar den h\u00e4r koden inte till n\u00e5gonting annat \u00e4n att testa om SCSS kompileras.<\/p>\n<h3>Skapa<code>\/webpack.config.js<\/code><\/h3>\n<p>Skapa en fil i roten av ditt plugin som heter <code>webpack.config.js<\/code>vi kommer att t\u00e4cka vad som ska l\u00e4ggas i den h\u00e4r filen inom kort.<\/p>\n<h2>Redigera PHP-rotfilen f\u00f6r plugin-programmet<\/h2>\n<p>Om du har f\u00f6ljt med den tidigare guiden kommer det pluginet att heta <code>wholesome-plugin.php<\/code>.<\/p>\n<p>I den h\u00e4r filen vill vi registrera skripten f\u00f6r adminomr\u00e5det, som kommer att matas ut av v\u00e5r webbpaketkonfiguration. L\u00e4gg till f\u00f6ljande funktion l\u00e4ngst ner i filen:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_admin_scripts() {\n    $dir = __DIR__;\n\n    $script_asset_path = \"$dir\/build\/admin.asset.php\";\n    if (! file_exists( $script_asset_path)) {\n        throw new Error(\n            'You need to run `npm start` or `npm run build` for the \"wholesomecode\/wholesome-plugin\" block first.'\n        );\n    }\n    $admin_js     = 'build\/admin.js';\n    $script_asset = require( $script_asset_path );\n    wp_register_script(\n        'wholesomecode-wholesome-plugin-admin-editor',\n        plugins_url( $admin_js, __FILE__ ),\n        $script_asset['dependencies'],\n        $script_asset['version']\n    );\n    wp_set_script_translations( 'wholesomecode-wholesome-plugin-block-editor', 'wholesome-plugin' );\n\n    $admin_css = 'build\/admin.css';\n    wp_enqueue_style(\n        'wholesomecode-wholesome-plugin-admin',\n        plugins_url( $admin_css, __FILE__ ),\n        ['wp-components'],\n        filemtime( \"$dir\/$admin_css\") );\n}\nadd_action( 'admin_enqueue_scripts', 'wholesomecode_wholesome_plugin_admin_scripts', 10 );\n<\/code><\/pre>\n<p>Vi har i stort sett kopierat koden fr\u00e5n det tidigare k\u00f6blocket, men gjort den relevant f\u00f6r v\u00e5ra f\u00f6rv\u00e4ntade utdatafiler av <code>\/build\/admin.js<\/code>och <code>\/build\/admin.css<\/code>. Observera att vi ocks\u00e5 laddar den speciellt genererade <code>\/build\/admin.asset.php<\/code>filen, som automatiskt l\u00e4gger till alla WordPress-blockredigerare (Gutenberg) beroenden f\u00f6r v\u00e5rt adminskript.<\/p>\n<h2>Redigera<code>webPack.config<\/code><\/h2>\n<p>I steg 2 skapade vi filen <code>webpack.config.js<\/code>, l\u00e4gg till f\u00f6ljande kod i den h\u00e4r filen:<\/p>\n<pre><code>const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst path = require( 'path' );\n\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        ...defaultConfig.entry,\n        admin: path.resolve( process.cwd(), 'src', 'admin.js' ),\n    }\n};\n<\/code><\/pre>\n<p>Denna kod importerar <code>webpack.config<\/code>fr\u00e5n <code>@wordpress\/scripts<\/code>. Det h\u00e4r \u00e4r koden som k\u00f6rs varje g\u00e5ng du k\u00f6r <code>npm start<\/code>i din l\u00f6sning.<\/p>\n<p>Allt vi g\u00f6r \u00e4r att ta den h\u00e4r konfigurationen och l\u00e4gga till en annan ing\u00e5ngspunkt, med raden <code>admin: path.resolve( process.cwd(), 'src', 'admin.js' ),<\/code>.<\/p>\n<p>Resten av koden s\u00e4ger bara \u00e5t webpack att anv\u00e4nda de inst\u00e4llningar som redan finns p\u00e5 plats (t.ex. <code>...defautConfig<\/code>, <code>...defaultConfig.entry<\/code>).<\/p>\n<h2>Sammanst\u00e4ll koden<\/h2>\n<p>Kompilera du plugin med <code>npm start<\/code>kommandot, och l\u00e5t oss titta p\u00e5 vad som h\u00e4nder:<\/p>\n<p>Kompilera koden med den nya ing\u00e5ngspunkten<\/p>\n<p>Skriptet genererar nu n\u00e5gra nya filer \u00e5t oss:<\/p>\n<ul>\n<li>\n<p><code>\/build\/admin.assets.php<\/code>\u2014 Den h\u00e4r PHP-filen 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 din nya ing\u00e5ngspunkt. Den k\u00f6as via huvudladdarfilen via <code>wholesome-plugin.php<\/code>till\u00e4ggsfunktionen vi har inf\u00f6rt.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.css<\/code>\u2014 Det h\u00e4r \u00e4r administrat\u00f6rs-CSS-filen och k\u00f6as via huvudladdarfilen via <code>wholesome-plugin.php<\/code>den extra funktionen som vi har installerat.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.js<\/code>\u2014 Det h\u00e4r \u00e4r den huvudsakliga kompilerade JavaScript-filen och k\u00f6as via huvudladdarfilen via <code>wholesome-plugin.php<\/code>den extra funktionen vi har installerat.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.css.map<\/code>\u2014 Den h\u00e4r filen genereras bara n\u00e4r du kompilerar tillg\u00e5ngarna f\u00f6r utvecklingsl\u00e4ge (IE du k\u00f6r <code>npm start<\/code>och inte <code>npm build<\/code>n\u00e4r du kompilerar dina tillg\u00e5ngar. Det \u00e4r en anv\u00e4ndbar fil f\u00f6r fels\u00f6kare f\u00f6r att hj\u00e4lpa till att identifiera filnamn och radnummer i CSS om fel uppst\u00e5r.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.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 <code>npm start<\/code>och inte <code>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<\/li>\n<li>\n<p>Titta p\u00e5 att anv\u00e4nda <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">post-metaf\u00e4lt i Gutenberg-block<\/a><\/p>\n<\/li>\n<li>\n<p>Titta p\u00e5 hur du anv\u00e4nder <a href=\"https:\/\/wholesomecode.ltd\/guides\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">alternativ och inst\u00e4llningar i Gutenberg-block<\/a><\/p>\n<\/li>\n<li>\n<p>Titta p\u00e5 att skapa <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">anpassade metaboxar i Gutenberg<\/a><\/p>\n<\/li>\n<li>\n<p>Titta p\u00e5 att bygga en <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">alternativ- och inst\u00e4llningssida med hj\u00e4lp av Gutenberg-komponenter<\/a><\/p>\n<\/li>\n<\/ul>\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>N\u00e4r du f\u00f6rst skapar ett block med WordPress skapa blockskript med npm init @wordpress\/block ger det dig en ing\u00e5ngspunkt till \/src\/index.js, som du kan anv\u00e4nda f\u00f6r att komponera&#8230;<\/p>\n","protected":false},"author":1,"featured_media":221177,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[848,901,755,922,787,724],"tags":[1173],"class_list":["post-228245","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-koda","category-oeppen-kaella","category-oevrig","category-programvara-med-oeppen-kaellkod","category-utvecklaren","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228245","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=228245"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228245\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/221177"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}