Internationalize the plugin using Gutenberg's i18n library and scripts

youknowriad · Apr 4, 2018 · 5e6d8af · 5e6d8af
1 parent cced255
commit 5e6d8af
Show file tree

Hide file tree

Showing 25 changed files with 220 additions and 48 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,6 @@
 {
-  "presets": ["@wordpress/default"]
+  "presets": ["@wordpress/default"],
+  "plugins": [
+    ["@wordpress/babel-plugin-makepot", { "output": "languages/gcf.pot" }]
+  ]
 }
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@ scripts/*/build
 node_modules
 gcf.zip
 .DS_Store
-svn
+svn
+languages
diff --git a/bin/build-plugin-zip.sh b/bin/build-plugin-zip.sh
@@ -48,6 +48,8 @@ status "Installing dependencies..."
 npm install
 status "Generating build..."
 npm run build
+status "Generating PHP file for wordpress.org to parse translations..."
+npx pot-to-php ./languages/gcf.pot ./languages/gcf-translations.php gcf
 
 # Remove any existing zip file
 rm -f gcf.zip

diff --git a/gutenberg-custom-fields.php b/gutenberg-custom-fields.php
@@ -4,6 +4,8 @@
  * Plugin URI: https://github.com/youknowriad/gcf
  * Description: Custom Fields, The Gutenberg way
  * Version: 1.3.1
+ * Text Domain: gcf
+ * Domain Path: /languages
  * Author: Riad Benguella
  *
  * @package gcf
@@ -16,6 +18,7 @@
 require_once dirname( __FILE__ ) . '/lib/hacks.php';
 
 // Registering Script Files
+require_once dirname( __FILE__ ) . '/lib/i18n-script.php';
 require_once dirname( __FILE__ ) . '/lib/fields-script.php';
 require_once dirname( __FILE__ ) . '/lib/config-app-script.php';
 

diff --git a/languages/.gitkeep b/languages/.gitkeep
diff --git a/lib/config-app-script.php b/lib/config-app-script.php
@@ -9,7 +9,7 @@ function gutenberg_custom_fields_config_app_register() {
 	wp_register_script(
 		'gcf-config-app',
 		gutenberg_custom_fields_url( 'scripts/config-app/build/index.js' ),
-		array( 'gcf-fields', 'wp-data', 'wp-element', 'wp-components', 'wp-api', 'wp-api-request' ),
+		array( 'gcf-fields', 'wp-data', 'wp-element', 'wp-components', 'wp-api', 'wp-api-request', 'wp-i18n', 'gcf-i18n' ),
 		filemtime( gutenberg_custom_fields_dir_path() . 'scripts/config-app/build/index.js' ),
 		true
 	);

diff --git a/lib/fields-script.php b/lib/fields-script.php
@@ -9,7 +9,7 @@ function gutenberg_custom_fields_fields_register() {
 	wp_register_script(
 		'gcf-fields',
 		gutenberg_custom_fields_url( 'scripts/fields/build/index.js' ),
-		array( 'wp-element', 'wp-blocks', 'wp-components', 'wp-utils', 'wp-date', 'wp-data' ),
+		array( 'wp-element', 'wp-blocks', 'wp-components', 'wp-utils', 'wp-date', 'wp-data', 'wp-i18n', 'gcf-i18n' ),
 		filemtime( gutenberg_custom_fields_dir_path() . 'scripts/fields/build/index.js' ),
 		true
 	);

diff --git a/lib/i18n-script.php b/lib/i18n-script.php
@@ -0,0 +1,60 @@
+<?php
+
+/**
+ * Returns Jed-formatted localization data.
+ *
+ * @since 1.4.0
+ *
+ * @param  string $domain Translation domain.
+ *
+ * @return array
+ */
+function gutenberg_custom_fields_get_jed_locale_data( $domain ) {
+	$translations = get_translations_for_domain( $domain );
+
+	$locale = array(
+		'' => array(
+			'domain' => $domain,
+			'lang'   => is_admin() ? get_user_locale() : get_locale(),
+		),
+	);
+
+	if ( ! empty( $translations->headers['Plural-Forms'] ) ) {
+		$locale['']['plural_forms'] = $translations->headers['Plural-Forms'];
+	}
+
+	foreach ( $translations->entries as $msgid => $entry ) {
+		$locale[ $msgid ] = $entry->translations;
+	}
+
+	return $locale;
+}
+
+/**
+ * Registers the i18n script
+ *
+ * @since 1.4.0
+ */
+function gutenberg_custom_fields_i18n_register() {
+	$locale_data = gutenberg_custom_fields_get_jed_locale_data( 'gcf' );
+	$content = 'wp.i18n.setLocaleData( ' . json_encode( $locale_data ) . ', "gcf" );';
+
+	wp_register_script(	'gcf-i18n', null, array( 'wp-i18n' ) );
+	wp_script_add_data( 'gcf-i18n', 'data', $content );
+}
+add_action( 'init', 'gutenberg_custom_fields_i18n_register' );
+
+
+/**
+ * Load plugin text domain for translations.
+ *
+ * @since 1.4.0
+ */
+function gutenberg_custom_fields_load_plugin_textdomain() {
+	load_plugin_textdomain(
+		'gcf',
+		false,
+		plugin_basename( gutenberg_custom_fields_dir_path() ) . '/languages/'
+	);
+}
+add_action( 'plugins_loaded', 'gutenberg_custom_fields_load_plugin_textdomain' );
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,8 +18,10 @@
     "package-plugin": "./bin/build-plugin-zip.sh"
   },
   "devDependencies": {
+    "@wordpress/babel-plugin-makepot": "^1.0.0",
     "@wordpress/babel-preset-default": "^1.1.0",
     "@wordpress/browserslist-config": "^2.1.0",
+    "@wordpress/i18n": "^1.0.0",
     "autoprefixer": "^7.1.6",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
@@ -32,5 +34,7 @@
     "sass-loader": "^6.0.6",
     "webpack": "^3.8.1"
   },
-  "browserslist": ["extends @wordpress/browserslist-config"]
+  "browserslist": [
+    "extends @wordpress/browserslist-config"
+  ]
 }
diff --git a/scripts/config-app/components/about/index.js b/scripts/config-app/components/about/index.js
@@ -1,3 +1,5 @@
+import { __ } from "@wordpress/i18n";
+
 import "./style.scss";
 import TemplateNewButton from "../template-new-button";
 
@@ -9,10 +11,12 @@ function About({ onCreateTemplate }) {
 
   return (
     <div className="gcf-about">
-      <h1>Welcome to Gutenberg Custom Fields</h1>
+      <h1>{__("Welcome to Gutenberg Custom Fields")}</h1>
       <p>
-        Gutenberg Custom Fields allows you to control the content of the
-        Gutenberg edit screen by creating pre-filled templates.
+        {__(
+          "Gutenberg Custom Fields allows you to control the content of the Gutenberg edit screen by creating pre-filled templates.",
+          "gcf"
+        )}
       </p>
 
       <TemplateNewButton onClick={onCreateTemplate} isLarge />

diff --git a/scripts/config-app/components/layout/index.js b/scripts/config-app/components/layout/index.js
@@ -1,3 +1,4 @@
+import { __ } from "@wordpress/i18n";
 import { Component } from "@wordpress/element";
 import { connect } from "react-redux";
 
@@ -99,7 +100,7 @@ class Layout extends Component {
           !!templates.length && (
             <div className="gcf-layout__templates">
               <div className="gcf-layout__templates-header">
-                <h1>Your custom field templates</h1>
+                <h1>{__("Your GCF templates", "gcf")}</h1>
                 <TemplateNewButton onClick={this.onNewTemplate} />
               </div>
               <TemplateList