{"id":233447,"date":"2023-02-15T17:18:00","date_gmt":"2023-02-15T14:18:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233447"},"modified":"2022-11-10T23:45:01","modified_gmt":"2022-11-10T20:45:01","slug":"skapa-anpassat-gutenberg-block-del-8-oeversaettningsstoed","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/skapa-anpassat-gutenberg-block-del-8-oeversaettningsstoed\/","title":{"rendered":"Skapa anpassat Gutenberg-block – Del 8: \u00d6vers\u00e4ttningsst\u00f6d"},"content":{"rendered":"\n

I den h\u00e4r delen kommer vi att fokusera p\u00e5 hur man \u00f6vers\u00e4tter texterna och v\u00e4rderingarna i v\u00e5rt anpassade Gutenberg-block. Vi anv\u00e4nder WP-CLI f\u00f6r att generera n\u00f6dv\u00e4ndiga filer s\u00e5 att Gutenberg kan ladda v\u00e5ra \u00f6vers\u00e4ttningar n\u00e4r du byter WordPress-spr\u00e5k.<\/p>\n

Innan du g\u00e5r vidare med detta m\u00e5ste du ha WP CLI<\/a> (kommandoradsgr\u00e4nssnitt f\u00f6r WordPress) installerat. Om du inte har det, f\u00f6lj bara guiden p\u00e5 WordPress Handbook for CLI<\/a>.<\/p>\n

F\u00f6r att kortfattat f\u00f6rklara hur man \u00f6vers\u00e4tter f\u00f6r Javascript (Gutenberg)-skript: WordPress kr\u00e4ver .mo<\/code>filer f\u00f6r \u00f6vers\u00e4ttning av PHP-filer, men f\u00f6r Javascript kr\u00e4ver WordPress en .json<\/code>fil. Varje Javascript-fil beh\u00f6ver en JSON-fil f\u00f6r \u00f6vers\u00e4ttning. JSON b\u00f6r ha ett specifikt format (WP CLI genererar det \u00e5t oss) med v\u00e5ra \u00f6versatta str\u00e4ngar. Vi beh\u00f6ver en JSON-fil per spr\u00e5k vi vill \u00f6vers\u00e4tta till.<\/p>\n

S\u00e5 vad vi beh\u00f6ver g\u00f6ra \u00e4r att f\u00f6rst l\u00e4gga till gettext-funktionerna (__()<\/code>, _e()<\/code>etc.) i v\u00e5ra Javascript-filer och generera en PO-fil som vanligt f\u00f6r v\u00e5rt tema eller plugin. Eftersom vi har packat in texterna i v\u00e5ra skriptfiler med t.ex. __()<\/code>b\u00f6r PO-filen kunna inkludera dem. Sedan g\u00f6r vi \u00f6vers\u00e4ttningen som vanligt i v\u00e5r PO-fil. Och s\u00e5 anv\u00e4nder vi slutligen WP CLI f\u00f6r att extrahera de n\u00f6dv\u00e4ndiga str\u00e4ngarna fr\u00e5n PO-filen och generera JSON-filer f\u00f6r alla v\u00e5ra Javascript-filer.<\/p>\n

T\u00e4nk p\u00e5 att dina tema- eller plugin- .po<\/code>\/ .mo<\/code>-filer aldrig kommer att ha en effekt p\u00e5 dina Javascript-filer \u2013 \u00e4ven om de inneh\u00e5ller \u00f6versatta str\u00e4ngar fr\u00e5n v\u00e5ra Javascript-filer.<\/p>\n

Implementera \u00f6vers\u00e4ttning i Javascript<\/h2>\n

Det f\u00f6rsta steget \u00e4r att l\u00e4gga alla texter i v\u00e5r Javascript-fil i \u00f6vers\u00e4ttningsfunktioner. Om du har hanterat \u00f6vers\u00e4ttning f\u00f6r WordPress i PHP \u00e4r du f\u00f6rmodligen mycket bekant med funktionerna __()<\/code>, _e()<\/code>, esc_html__()<\/code>och s\u00e5 vidare. WordPress har ett paket wp.i18n<\/code>som inneh\u00e5ller dessa funktioner, som fungerar precis som i PHP.<\/p>\n

Som med PHP m\u00e5ste du tillhandah\u00e5lla en textdom\u00e4ndom\u00e4n (namn\/handtag). Det kan vara vad du vill, men h\u00e5ll det kort eftersom du f\u00f6rmodligen kommer att beh\u00f6va skriva ut det v\u00e4ldigt ofta. F\u00f6r mitt tema har jag st\u00e4llt in min textdom\u00e4n med dom\u00e4nen awhitepixel<\/code>. S\u00e5 inom PHP kommer jag att g\u00f6ra __('My string', 'awhitepixel')<\/code>f\u00f6r att \u00f6vers\u00e4tta str\u00e4ngar, och det kommer att vara exakt samma sak i Javascript-filer.<\/p>\n

L\u00e5t oss b\u00f6rja redigera v\u00e5r Javascript-fil. F\u00f6rst m\u00e5ste vi destrukturera __<\/code>och _e<\/code>fungera fr\u00e5n wp.i18n<\/code>paketet. P\u00e5 grund av Reacts natur kommer du troligen mest eller kanske bara att anv\u00e4nda __<\/code>funktionen.<\/p>\n

const { __, _e } = wp.i18n;<\/code><\/pre>\n
Och sedan g\u00e4ller det att hitta alla v\u00e5ra h\u00e5rdkodade texter i Javascript-filen och uppdatera dem. T\u00e4nk p\u00e5 att funktionerna __<\/code>och _e<\/code>kr\u00e4ver Javascript-kontext. Det betyder att n\u00e4r vi skriver str\u00e4ngar som till exempel objektegenskapsv\u00e4rden anv\u00e4nder vi __()<\/code>direkt, men som v\u00e4rden f\u00f6r t.ex. rekvisita m\u00e5ste vi linda in allt { }<\/code>f\u00f6r att indikera att detta \u00e4r Javascript-kod.<\/p>\n
Till exempel kommer v\u00e5rt registerBlockType<\/code>med st\u00f6d f\u00f6r \u00f6vers\u00e4ttning att se ut s\u00e5 h\u00e4r:<\/p>\n
registerBlockType('awp\/firstblock', {\n    title: __('My first block', 'awhitepixel'), \n    category: 'common',\n    icon: 'smiley',\n    description: __('Learning in progress', 'awhitepixel'),\n    keywords: [__('example', 'awhitepixel'), __('test', 'awhitepixel')],\n    attributes: {\n        ...<\/code><\/pre>\n
Och vad g\u00e4ller rekvisita, dvs i InspectorControls<\/code>:<\/p>\n
<InspectorControls>\n    <PanelBody\n        title={__(\"Most awesome settings ever\", 'awhitepixel')}\n        initialOpen={true}\n    >\n    ...\n        <ToggleControl\n            label={__(\"Toggle me\", 'awhitepixel')}\n            checked={attributes.toggle}\n            onChange={(newval) => setAttributes({ toggle: newval })}\n        \/>\n        ...<\/code><\/pre>\n
Sl\u00e5 in alla texter du vill st\u00f6dja \u00f6vers\u00e4ttning f\u00f6r i __()<\/code>och _e()<\/code>. Om du har f\u00f6ljt den h\u00e4r handledningen steg f\u00f6r steg, borde du inte ha n\u00e5gra fall d\u00e4r du beh\u00f6ver anv\u00e4nda _e()<\/code>. N\u00e4r du \u00e4r klar, kompilera om Javascript, s\u00e5 g\u00e5r vi bort fr\u00e5n Javascript.<\/p>\n
St\u00e4lla in po- och\/eller pot-filer<\/h2>\n
Det h\u00e4r steget varierar lite beroende p\u00e5 vad du redan har gjort och st\u00e4llt in f\u00f6r ditt tema eller plugin. Du kanske skriver dina Gutenberg-skript i ett nytt och tomt plugin som inte har st\u00e4llts in f\u00f6r PHP-\u00f6vers\u00e4ttning, eller i ett tema som redan har en textdom\u00e4n registrerad. Du kanske har PO (och MO)-filer redo, eller s\u00e5 har du bara en POT-fil. Jag ska g\u00f6ra mitt b\u00e4sta f\u00f6r att t\u00e4cka alla baser.<\/p>\n
Mitt tema eller plugin har redan en po(t)-fil<\/h3>\n
Om du redan har en PO- eller POT-fil i ditt projekt, har du med st\u00f6rsta sannolikhet \u00e4ven PHP-funktionen load_theme_textdomain()<\/code>, load_child_theme_textdomain()<\/code>eller load_plugin_textdomain()<\/code>n\u00e5gonstans i din kod. Se till att den registrerade dom\u00e4nen \u00e4r densamma som du har anv\u00e4nt i dina Javascript-filer.<\/p>\n
Allt du beh\u00f6ver g\u00f6ra \u00e4r att ladda PO-filen f\u00f6r spr\u00e5ket du vill \u00f6vers\u00e4tta (eller generera en fr\u00e5n POT-filen) i till exempel PoEdit<\/a>. Klicka p\u00e5 "Uppdatera fr\u00e5n kod" (eller liknande i andra program) s\u00e5 att programmet kan skanna alla projektfiler (inklusive v\u00e5ra nyligen uppdaterade Javascript-filer) och uppdatera poolen av str\u00e4ngar f\u00f6r \u00f6vers\u00e4ttning. Str\u00e4ngarna i v\u00e5r Javascript-fil b\u00f6r visas. du beh\u00f6ver bara \u00f6vers\u00e4tta dem som vanligt och spara.<\/p>\n
PS: Om du inte kan klicka p\u00e5 "Uppdatera fr\u00e5n kod" eller skanna om filerna, har PO-filen f\u00f6rmodligen inte st\u00e4llts in korrekt. Leta efter tips i n\u00e4sta avsnitt.<\/p>\n
Jag har inga \u00f6vers\u00e4ttningsfiler<\/h3>\n
Om ditt tema eller projekt inte har st\u00e4llts in med \u00f6vers\u00e4ttning m\u00e5ste du antingen generera en POT-fil med WP-CLI eller skapa en PO-fil manuellt.<\/p>\n
Jag har en grundlig guide i hur man skapar en PO-fil i min Temahandledning f\u00f6r nyb\u00f6rjare \u2013 del 8<\/a>. Inl\u00e4gget beskriver hur du kan skapa filen och st\u00e4lla in den korrekt f\u00f6r att s\u00f6ka i dina temafiler, och nyckelorden att s\u00f6ka efter (__<\/code>, _e<\/code>, etc.).<\/p>\n
Om du hellre vill skapa en POT-fil kan du anv\u00e4nda kommandot wp i18n make-pot<\/a> i WP-CLI, och sedan skapa en PO-fil av den med t.ex. PoEdit. T\u00e4nk p\u00e5 att du m\u00e5ste \u00e5terskapa POT-filen (och sedan PO-filen) varje g\u00e5ng du uppdaterar n\u00e5gra str\u00e4ngar i din kod.<\/p>\n
Slutresultat<\/h3>\n
Vad du i slut\u00e4ndan beh\u00f6ver \u00e4r en PO-fil som har hittat dina Javascript-str\u00e4ngar d\u00e4r dessa har \u00f6versatts. Jag rekommenderar att du placerar dina \u00f6vers\u00e4ttningsfiler i en separat mapp i ditt tema eller plugin. N\u00e4r vi b\u00f6rjar generera JSON-filer kommer vi att f\u00e5 en hel del filer f\u00f6r \u00f6vers\u00e4ttning och det kommer att vara trevligt att ha dem alla samlade i sin egen mapp.<\/p>\n
Som en referenspunkt placerar jag alla \u00f6vers\u00e4ttningsfiler i min theme\/assets\/lang\/<\/code>. Jag har lagt till en norsk \u00f6vers\u00e4ttning f\u00f6r mitt tema, som heter nb_NO.po<\/code>, som inneh\u00e5ller de \u00f6versatta str\u00e4ngarna fr\u00e5n v\u00e5r anpassade block Javascript-fil.<\/p>\n
Genererar JSON-filer fr\u00e5n po-filen<\/h2>\n
N\u00e4sta steg \u00e4r att anv\u00e4nda WP-CLI f\u00f6r att generera JSON-filer fr\u00e5n v\u00e5r po-fil. F\u00f6r att g\u00f6ra detta anv\u00e4nder vi kommandot wp i18n make-json<\/a>.<\/p>\n
Var medveten om att som standard kommer detta kommando att ta ut de \u00f6versatta str\u00e4ngarna fr\u00e5n din PO-fil f\u00f6r anv\u00e4ndning vid generering av JSON-fil. Detta kan vara besv\u00e4rligt n\u00e4r du \u00e4r mitt i utvecklingen av ditt tema eller plugin. F\u00f6r n\u00e4r du l\u00e4gger till nya eller justerar str\u00e4ngar m\u00e5ste du skanna filerna igen och \u00f6vers\u00e4tta alla str\u00e4ngar igen (och igen, och igen). Lyckligtvis finns det en flagga till kommandot f\u00f6r att undvika detta.<\/p>\n
L\u00e5t oss b\u00f6rja! I din terminal navigerar du till din spr\u00e5kkatalog f\u00f6r ditt projekt. K\u00f6r f\u00f6ljande kommando och h\u00e4nvisa till din po-fil (som n\u00e4mnt har jag en nb_NO.po<\/code>fil redo).<\/p>\n
wp i18n make-json nb_NO.po --no-purge<\/code><\/pre>\n
Om du inte har n\u00e5gra problem med att ta bort de \u00f6versatta str\u00e4ngarna fr\u00e5n din PO-fil (till exempel om du g\u00f6r din slutliga build), kan du hoppa \u00f6ver --no-purge<\/code>flaggan.<\/p>\n
Terminalen b\u00f6r fr\u00e5ga "Success" och ange hur m\u00e5nga JSON-filer som skapades. Om du ser att den genererade tv\u00e5 JSON-filer beror det p\u00e5 att den har l\u00e4st b\u00e5de v\u00e5r k\u00e4llkods Javascript-fil och byggfilen och genererat en f\u00f6r varje. Om du har fler Javascript-filer i ditt projekt kommer du att f\u00e5 \u00e4nnu fler JSON-filer.<\/p>\n
N\u00e4r detta skrivs (WordPress v 5.3.2 och WP-CLI version 2.4.0) genereras JSON-filerna med spr\u00e5kkoden och en hash \u2013 en kryptisk str\u00e4ng som filnamn. Vi m\u00e5ste hitta r\u00e4tt och byta namn p\u00e5 den.<\/p>\n
Byter namn p\u00e5 JSON-filen och laddar den i PHP<\/h2>\n
\"Skapa<\/a><\/p>\n
Din spr\u00e5kmapp ser f\u00f6rmodligen ut ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\n
Kom ih\u00e5g att kommandot har genererat en JSON-fil per Javascript-fil \u2013 och eftersom vi faktiskt har tv\u00e5 filer f\u00f6r v\u00e5rt anpassade block (k\u00e4llan och byggnaden) genererade det tv\u00e5 filer. Om din Javascript-kod \u00e4r uppdelad i flera filer, skulle var och en f\u00e5 tv\u00e5 av sina egna JSON-filer.<\/p>\n
Om du bara sitter med tv\u00e5 JSON-filer (eftersom inga andra Javascript-filer hittades) kan du ta bort en av dem nu. Om du har fler \u00e4n tv\u00e5 m\u00e5ste du \u00f6ppna JSON-filerna och se vilken fil de \u00e4r till f\u00f6r. JSON-filerna inneh\u00e5ller en egenskap " source<\/code>" som talar om vilken Javascript-fil den h\u00e4r JSON-filen \u00e4r till f\u00f6r. Anv\u00e4nd det f\u00f6r att ta reda p\u00e5 vilken JSON-fil du ska beh\u00e5lla. Jag rekommenderar att du hittar den slutliga byggfilen (i motsats till dev-filerna) eftersom denna b\u00f6r inneh\u00e5lla alla str\u00e4ngar fr\u00e5n alla filer.<\/p>\n
N\u00e4r du har hittat r\u00e4tt m\u00e5ste vi byta namn p\u00e5 den. Vi m\u00e5ste byta namn p\u00e5 den f\u00f6r att f\u00f6lja detta m\u00f6nster:<\/p>\n
[textdomain]-[language code]-[script handle].json<\/code><\/p>\n
Anv\u00e4nd textdom\u00e4nen du har anv\u00e4nt \u00f6verallt (t.ex. __('My string', 'awhitepixel')<\/code>), l\u00e4gg till ett bindestreck och spr\u00e5kkoden. Ange sedan ett streck och skripthandtaget du anv\u00e4nde f\u00f6r att registrera din Gutenberg Javascript-fil (wp_register_script()<\/code>). Som referens \u00e4r min textdom\u00e4n awhitepixel<\/code>, min spr\u00e5kkod \u00e4r nb_NO<\/code>, och mitt skripthandtag f\u00f6r Gutenberg-skriptet \u00e4r awp-myfirstblock-js<\/code>. S\u00e5 jag byter namn p\u00e5 JSON-filen till:<\/p>\n
awhitepixel-nb_NO-awp-myfirstblock-js.json<\/code><\/p>\n
Be WordPress att ladda v\u00e5r JSON<\/h3>\n
Allt som \u00e5terst\u00e5r nu \u00e4r det sista steget \u2013 att s\u00e4ga \u00e5t WordPress att ladda v\u00e5r JSON-fil. Vi m\u00e5ste anv\u00e4nda funktionen [wp_set_script_translations](https:\/\/developer.wordpress.org\/reference\/functions\/wp_set_script_translations\/)()<\/code>. Det h\u00e4r \u00e4r en ganska ny WordPress-funktion s\u00e5 jag rekommenderar att du lindar in den i en function_exists()<\/code>. Den accepterar tre parametrar; skripthandtaget f\u00f6r v\u00e5rt block, textdom\u00e4nen och s\u00f6kv\u00e4gen till v\u00e5r \u00f6vers\u00e4ttningsmapp (obs: s\u00f6kv\u00e4gen, inte webbadressen).<\/p>\n
Inuti v\u00e5r funktion kopplad till init<\/code>, d\u00e4r vi registrerade v\u00e5rt blockskript och anrop register_block_type<\/code>kan vi ocks\u00e5 anropa denna nya funktion f\u00f6r att ladda v\u00e5r JSON-\u00f6vers\u00e4ttningsfil. PS: T\u00e4nk p\u00e5 att kroken enqueue_block_assets<\/code>inte fungerar f\u00f6r att registrera \u00f6vers\u00e4ttningar.<\/p>\n
add_action('init', function() {\n    wp_register_script('awp-myfirstblock-js', ....);\n    register_block_type('awp\/firstblock', ....\n\u00a0\n    if (function_exists('wp_set_script_translations')) {\n        wp_set_script_translations('awp-myfirstblock-js', 'awhitepixel', get_template_directory(). '\/assets\/lang');\n    }\n});<\/code><\/pre>\n
Och det \u00e4r allt! Ditt block b\u00f6r nu \u00f6vers\u00e4ttas. Byt WordPress-spr\u00e5ket till det spr\u00e5k du \u00f6versatt till och kontrollera det sj\u00e4lv. N\u00e4r jag byter WordPress-spr\u00e5k till norska och l\u00e4gger till mitt block \u00f6vers\u00e4tts namnet och allt i det:<\/p>\n
\"Skapa<\/a><\/p>\n
Inspelningsk\u00e4lla:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Den h\u00e4r lektionen fokuserar p\u00e5 hur man st\u00f6djer \u00f6vers\u00e4ttning av texterna i v\u00e5rt Gutenberg-block. Vi anv\u00e4nder WP-CLI f\u00f6r att generera de n\u00f6dv\u00e4ndiga JSON-filerna f\u00f6r WordPress.<\/p>\n","protected":false},"author":1,"featured_media":153241,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[901,942,942,848,901,1110,807,807,818,818,848,868,868],"tags":[1173],"class_list":["post-233447","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koda","category-gutenberg-9","category-handledningar","category-n-a","category-php-9","category-plugins-3","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233447","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=233447"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233447\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/153241"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}