{"id":9931,"date":"2018-07-13T14:28:23","date_gmt":"2018-07-13T19:28:23","guid":{"rendered":"http:\/\/www.bluehost.com\/blog\/?p=9931"},"modified":"2018-07-13T14:28:23","modified_gmt":"2018-07-13T19:28:23","slug":"javascript-translations-in-gutenberg","status":"publish","type":"post","link":"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/","title":{"rendered":"JavaScript Translations in Gutenberg"},"content":{"rendered":"

Since 2007, WordPress<\/a> has supported the translation of text strings in PHP. As of 2018, we now have a similar process for translating strings in JavaScript<\/a>.
\nTraditionally, WordPress developers have utilized the wp_localize_script()<\/code> function for passing translated strings from PHP into JavaScript. Unfortunately, this approach doesn\u2019t scale well and makes for some messy code. Thankfully, with the dawn of Gutenberg, we now have the new WordPress i18n<\/a> npm library.
\nAt the time of this writing, it is a bit hard to find examples of how to properly translate JavaScript strings in WordPress from start to finish. Most examples will give you a piece of the puzzle, but not the entire picture. Our goal today is to document the entire process from start to finish.<\/p>\n

Internationalization and Localization Overview<\/h2>\n

There are two steps in the translation process: Internationalization<\/a> and localization<\/a>.
\nIt is common to see the abbreviations i18n and l10n when referring to internationalization and localization. The logic behind this is that you take the first and last letter of the word, count the remaining letters and put that number in between.
\nAt the most basic level, internationalization is the process of preparing a theme or plugin for translation. Localization is the process of leveraging that preparation and actually performing the translation.
\nInternationalization<\/strong> starts by utilizing the translation functions<\/a> that WordPress provides. Essentially, all of these functions allow you to provide a text string to be translated and what is called a text domain<\/a>.<\/p>\n

Text Domain<\/strong> – a namespace, or unique identifier, under which all of your translated strings are managed. WordPress uses the text domain to tell the difference between the translation for your theme or plugin and that of another.<\/p><\/blockquote>\n

Finally, an automated tool is used to locate and compile all of the text strings with your text domain into a .pot<\/code> (portable object template) file.
\nLocalization<\/strong>, the next step in the process, starts when you provide the .pot<\/code> file to a translator for translation into the language(s) of choice. The translator will take the file, translate the strings, and save the translated strings into a .po<\/code>(portable object) file. However, WordPress requires a .mo<\/code> (machine object) file in order to dynamically translate the text via code.
\nThe last step is to convert the .po file into a .mo<\/code> file. There are a number of ways to do this, but if you use a tool like Poedit<\/a> both of these files can be generated simultaneously.
\nAt this point, we\u2019ve prepped for translation and have a file that will allow WordPress to translate the strings via code. However, nothing is going to be translated unless WordPress knows what language is in use and where the language file is located:<\/p>\n

    \n
  1. \nSet the language<\/strong> – you can tell WordPress what language you want to use by going to Settings > General<\/em> in the WordPress admin and selecting the desired language from the Site Language<\/em> dropdown. While your users would normally be the ones doing this, you should do this to thoroughly test that your translation is working.<\/li>\n
  2. \nRegister your language file<\/strong> – WordPress has a few functions you can use to register your language file so it can be found. If you are translating a theme, you will want to use load_theme_textdomain()<\/a>. If you are translating a plugin, you will want to use load_plugin_textdomain()<\/a>.<\/li>\n<\/ol>\n

    Translating JavaScript Strings<\/h2>\n

    Now that we have a clear understanding of how translations work in WordPress, let\u2019s take a look at exactly how we can translate strings in JavaScript.<\/p>\n

    Using the WordPress i18n Package<\/h3>\n

    Let\u2019s start by taking a look at a translation function in JS:<\/p>\n

    __( 'Hello World!', 'text-domain' );<\/code><\/pre>\n
    Looks familiar, doesn\u2019t it? The JavaScript i18n API<\/a> mirrors the translation functions that you would normally use in PHP. The only exception is that you need to first load the WordPress i18n NPM library into your project and import the necessary functions to make them available.
    \nTo do this, start by installing the npm module:<\/p>\n
    npm install --save @wordpress\/i18n<\/code><\/pre>\n
    Next, import the functions that you will be using from the module:<\/p>\n
    import { __, _n, sprintf } from '@wordpress\/i18n';<\/code><\/pre>\n
    Note: This approach uses JavaScript ES6. It will be necessary to run an automated build process to convert the code into browser-safe JavaScript. We recommend using Babel and Webpack to accomplish this.<\/em><\/p>\n
    Generating a .pot File<\/h3>\n
    Traditionally, generating a .pot file for strings in a PHP file has typically been accomplished using the Grunt task runner and the grunt-wp-i18n package<\/a>. However, this tool doesn\u2019t scan JavaScript files.
    \nWordPress has released an NPM package called     babel-plugin-makepot<\/a> for the specific purpose of automatically generating (or updating) a .pot file as you make changes to your JavaScript files.
    \nThis Babel plugin requires the use of     Babel<\/a>. Typically, Babel is configured to run via Webpack<\/a>.
    \nTo do this, start by installing the npm module:<\/p>\n
    npm install --save-dev @wordpress\/babel-plugin-makepot<\/code><\/pre>\n
    Next, update your Babel loader configuration to include the makepot plugin:<\/p>\n
    [ \"@wordpress\/babel-plugin-makepot\", {\n\t\"output\": \"languages\/myplugin.pot\"\n} ]<\/code><\/pre>\n
    If you aren\u2019t familiar with Babel or Webpack, all of this can be confusing. When learning something for the first time, it is often easier to look at a working example. Perhaps reviewing this webpack.config.js<\/a> file will help.
    \nOnce you\u2019ve set up this package you will run Webpack, which will then watch your JavaScript files for changes, automatically detect when you are using translation functions, and will automatically generate or keep your .pot file up to date in your languages\/ directory.<\/p>\n
    Loading the Translation File<\/h3>\n
    Essentially, once you\u2019ve gone through the process of converting your .pot file into a .mo file, you are ready to register the translation file with WordPress in the traditional way.
    \nIn a plugin:<\/p>\n
    <?php\nadd_action( 'plugins_loaded', function () {\n\tload_plugin_textdomain( 'text-domain', plugin_basename( __DIR__ ) . '\/languages' );\n} );\n<\/code><\/pre>\n
    or in a theme:<\/p>\n
    <?php\nadd_action( 'after_setup_theme', function () {\n\tload_theme_textdomain( 'text-domain', get_template_directory() . '\/languages' );\n} );\n<\/code><\/pre>\n
    Passing Translations to JavaScript<\/h3>\n
    WordPress will load our .mo files via PHP, which is sufficient for ensuring that any strings in PHP are translated. However, since we are trying to translate strings in JavaScript, we still have one more hurdle. We need to take the translations that PHP knows about and pass them to our JavaScript on the front-end.
    \nMuch like the old method of using wp_localize_script() to pass translated strings to our JavaScript, we need to make sure we bridge the gap between the back-end and the front-end.
    \nNote<\/strong>: As of this writing the code that follows is currently dependent on the WordPress Gutenberg plugin being installed and active on a site. Once the new Gutenberg WordPress editing experience is rolled into core, there will not be a plugin dependency, but some of these functions may have slightly different names. However, most current use cases for JavaScript translation are within the context of creating Gutenberg blocks.<\/em>
    \nThe WordPress i18n JavaScript library is presently loaded under the wp global variable in JavaScript. This means that in order to access the i18n library in WordPress, you would do so like this: wp.i18n.
    \nWhat we want to do is leverage the setLocaleData() API call from the WordPress i18n library to register our translation(s):<\/p>\n
    <?php\nadd_action( 'wp_enqueue_scripts', function () {\n\t$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';\n\twp_enqueue_script(\n\t\t'my-script-js',\n\t\tplugins_url( \"\/assets\/js\/script{$suffix}.js\", __FILE__ ),\n\t\t[ 'wp-i18n' ],\n\t\tfilemtime( __DIR__ . \"\/assets\/js\/script{$suffix}.js\" )\n\t);\n\tif ( function_exists( 'gutenberg_get_jed_locale_data' ) ) {\n\t\t$locale  = gutenberg_get_jed_locale_data( 'text-domain' );\n\t\t$content = 'wp.i18n.setLocaleData( ' . json_encode( $locale ) . ', \"text-domain\" );';\n\t\twp_script_add_data( 'my-script-js', 'data', $content );\n\t}\n} );\n<\/code><\/pre>\n
    In this example, we are loading our script on the wp_enqueue_scripts<\/code> hook. If you are creating a Gutenberg block, you may want to use the enqueue_block_assets<\/code> or enqueue_block_editor_assets<\/code> hook.
    \nIn order to follow best practices, we ensure that we load either the minified or non-minified JavaScript code depending on the state of the SCRIPT_DEBUG<\/code> constant.
    \nWe register our custom script and give it a handle (my-script-js<\/code> in this case). Only after we\u2019ve registered or enqueued our script can we call wp_script_add_data()<\/code>, which allows us to register custom data with our JavaScript file. Essentially, it will output and run any JavaScript code that we provide, but only when our file is loaded.
    \nThe JavaScript code we want to run is wp.i18n.setLocaleData()<\/code>, which will be passed the locale data and our custom text domain. We are setting up the JavaScript code in PHP so we can easily pass our translations from the back-end to the front-end.
    \nAs you can see, we are using the gutenberg_get_jed_locale_data()<\/code> function which accepts a text domain and returns the translation data in a structure that the setLocaleData()<\/code> JavaScript method expects. We use json_encode()<\/code> to make sure we convert the PHP arrays into JSON and we are good to go!
    \nNote: Just for good measure, we\u2019re wrapping our call to gutenberg_get_jed_locale_data()<\/code> in a function_exists()<\/code> check just in case the Gutenberg plugin isn\u2019t active or WordPress changes the function name once Gutenberg is rolled into core. In either one of those cases, it would disable the JavaScript translations.<\/em>
    \nHave any questions? Leave a comment below.<\/p>\n
    \n
    \"\"<\/a>
    \nMicah Wood is a     WordPress Developer<\/a> at Bluehost<\/a>. A professional WordPress developer for over a decade, Micah has worked on sites for Fortune 100 companies, has released over a dozen WordPress plugins<\/a>, is a frequent speaker at WordCamps, co-organizes the WordPress Gwinnett<\/a> meetup, is a co-host on the WP Square One<\/a> podcast and shares his knowledge by blogging on WordPress development<\/a> topics.
    \nEmail:     micah.wood@endurance.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    Since 2007, WordPress has supported the translation of text strings in PHP. As of 2018, we now have a similar process for translating strings in JavaScript. Traditionally, WordPress developers have utilized the wp_localize_script() function for passing translated strings from PHP into JavaScript. Unfortunately, this approach doesn\u2019t scale well and makes for some messy code. Thankfully, […]<\/p>\n","protected":false},"author":56,"featured_media":9953,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_title":"JavaScript Translations in Gutenberg | Bluehost","_yoast_wpseo_metadesc":"","inline_featured_image":false,"footnotes":""},"categories":[3046,21],"tags":[3317,3332],"ppma_author":[636],"class_list":["post-9931","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-wordpress","tag-cms","tag-low-code-no-code"],"acf":[],"yoast_head":"\nJavaScript Translations in Gutenberg | Bluehost<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/posts\/9931\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Translations in Gutenberg\" \/>\n<meta property=\"og:description\" content=\"Since 2007, WordPress has supported the translation of text strings in PHP. As of 2018, we now have a similar process for translating strings in JavaScript. Traditionally, WordPress developers have utilized the wp_localize_script() function for passing translated strings from PHP into JavaScript. Unfortunately, this approach doesn\u2019t scale well and makes for some messy code. Thankfully, […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/\" \/>\n<meta property=\"og:site_name\" content=\"Bluehost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bluehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-13T19:28:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/07\/gutenberg-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"422\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Micah Wood\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bluehost\" \/>\n<meta name=\"twitter:site\" content=\"@bluehost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Micah Wood\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/\"},\"author\":{\"name\":\"Micah Wood\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/#\/schema\/person\/5d652fcd250a3e4eb123d3ca9d230b74\"},\"headline\":\"JavaScript Translations in Gutenberg\",\"datePublished\":\"2018-07-13T19:28:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/\"},\"wordCount\":1469,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/07\/gutenberg-1.png\",\"keywords\":[\"CMS\",\"Low-Code \/ No-Code\"],\"articleSection\":[\"Development\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/\",\"url\":\"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/\",\"name\":\"JavaScript Translations in Gutenberg | Bluehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/07\/gutenberg-1.png\",\"datePublished\":\"2018-07-13T19:28:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/#primaryimage\",\"url\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/07\/gutenberg-1.png\",\"contentUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/07\/gutenberg-1.png\",\"width\":800,\"height\":422},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/www.bluehost.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Websites\",\"item\":\"https:\/\/www.bluehost.com\/blog\/category\/websites\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Translations in Gutenberg\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/#website\",\"url\":\"https:\/\/www.bluehost.com\/blog\/\",\"name\":\"Bluehost\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bluehost.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/#organization\",\"name\":\"Bluehost\",\"url\":\"https:\/\/www.bluehost.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg\",\"contentUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg\",\"width\":136,\"height\":24,\"caption\":\"Bluehost\"},\"image\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/bluehost\/\",\"https:\/\/x.com\/bluehost\",\"https:\/\/www.linkedin.com\/company\/bluehost-com\/\",\"https:\/\/www.youtube.com\/user\/bluehost\",\"https:\/\/en.wikipedia.org\/wiki\/Bluehost\"],\"description\":\"Bluehost is a leading web hosting provider empowering millions of websites worldwide. \\u2028Discover how Bluehost's expertise, reliability, and innovation can help you achieve your online goals.\",\"telephone\":\"+1-888-401-4678\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/#\/schema\/person\/5d652fcd250a3e4eb123d3ca9d230b74\",\"name\":\"Micah Wood\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/#\/schema\/person\/image\/23494c9101089ad44ae88ce9d2f56aac\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"caption\":\"Micah Wood\"},\"url\":\"https:\/\/www.bluehost.com\/blog\/author\/micah-wood\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript Translations in Gutenberg | Bluehost","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/posts\/9931\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Translations in Gutenberg","og_description":"Since 2007, WordPress has supported the translation of text strings in PHP. As of 2018, we now have a similar process for translating strings in JavaScript. Traditionally, WordPress developers have utilized the wp_localize_script() function for passing translated strings from PHP into JavaScript. Unfortunately, this approach doesn\u2019t scale well and makes for some messy code. Thankfully, […]","og_url":"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/","og_site_name":"Bluehost Blog","article_publisher":"https:\/\/www.facebook.com\/bluehost\/","article_published_time":"2018-07-13T19:28:23+00:00","og_image":[{"width":800,"height":422,"url":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/07\/gutenberg-1.png","type":"image\/png"}],"author":"Micah Wood","twitter_card":"summary_large_image","twitter_creator":"@bluehost","twitter_site":"@bluehost","twitter_misc":{"Written by":"Micah Wood","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/#article","isPartOf":{"@id":"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/"},"author":{"name":"Micah Wood","@id":"https:\/\/www.bluehost.com\/blog\/#\/schema\/person\/5d652fcd250a3e4eb123d3ca9d230b74"},"headline":"JavaScript Translations in Gutenberg","datePublished":"2018-07-13T19:28:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/"},"wordCount":1469,"commentCount":0,"publisher":{"@id":"https:\/\/www.bluehost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/07\/gutenberg-1.png","keywords":["CMS","Low-Code \/ No-Code"],"articleSection":["Development","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/","url":"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/","name":"JavaScript Translations in Gutenberg | Bluehost","isPartOf":{"@id":"https:\/\/www.bluehost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/07\/gutenberg-1.png","datePublished":"2018-07-13T19:28:23+00:00","breadcrumb":{"@id":"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/#primaryimage","url":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/07\/gutenberg-1.png","contentUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/07\/gutenberg-1.png","width":800,"height":422},{"@type":"BreadcrumbList","@id":"https:\/\/www.bluehost.com\/blog\/javascript-translations-in-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.bluehost.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Websites","item":"https:\/\/www.bluehost.com\/blog\/category\/websites\/"},{"@type":"ListItem","position":3,"name":"JavaScript Translations in Gutenberg"}]},{"@type":"WebSite","@id":"https:\/\/www.bluehost.com\/blog\/#website","url":"https:\/\/www.bluehost.com\/blog\/","name":"Bluehost","description":"","publisher":{"@id":"https:\/\/www.bluehost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bluehost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.bluehost.com\/blog\/#organization","name":"Bluehost","url":"https:\/\/www.bluehost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bluehost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg","contentUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg","width":136,"height":24,"caption":"Bluehost"},"image":{"@id":"https:\/\/www.bluehost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/bluehost\/","https:\/\/x.com\/bluehost","https:\/\/www.linkedin.com\/company\/bluehost-com\/","https:\/\/www.youtube.com\/user\/bluehost","https:\/\/en.wikipedia.org\/wiki\/Bluehost"],"description":"Bluehost is a leading web hosting provider empowering millions of websites worldwide. \u2028Discover how Bluehost's expertise, reliability, and innovation can help you achieve your online goals.","telephone":"+1-888-401-4678"},{"@type":"Person","@id":"https:\/\/www.bluehost.com\/blog\/#\/schema\/person\/5d652fcd250a3e4eb123d3ca9d230b74","name":"Micah Wood","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bluehost.com\/blog\/#\/schema\/person\/image\/23494c9101089ad44ae88ce9d2f56aac","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"Micah Wood"},"url":"https:\/\/www.bluehost.com\/blog\/author\/micah-wood\/"}]}},"authors":[{"term_id":636,"user_id":56,"is_guest":0,"slug":"micah-wood","display_name":"Micah Wood","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":"","9":"","10":"","11":"","12":"","13":"","14":"","15":""}],"_links":{"self":[{"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/posts\/9931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/users\/56"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/comments?post=9931"}],"version-history":[{"count":0,"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/posts\/9931\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/media\/9953"}],"wp:attachment":[{"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/media?parent=9931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/categories?post=9931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/tags?post=9931"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/ppma_author?post=9931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}