Handle translations directly in JS

This uses several processes to allow translatable strings to be
extracted directly from JS files and converted to PHP where they can
be discovered and parsed by GlotPress.

One downside of this current implementation is that the
`gutenberg_get_jed_locale_data` function grabs all of the strings from
the entire text domain. The `wordcamporg` domain currently has ~1,300
strings, all of which get output as an inline JS variable in the page
document. Hopefully this will be solved in the future with something
like this: WordPress/gutenberg#6051

assets/src/blocks.js

@@ -1,3 +1,15 @@
+/**
+ * External dependencies
+ */
+const l10n = WordCampBlocks.l10n || {};
+
+/**
+ * WordPress dependencies
+ */
+const { setLocaleData } = wp.i18n;
+
+setLocaleData( l10n, 'wordcamporg' );
+
 /**
  * Internal dependencies
  */

assets/src/speakers.js

@@ -1,12 +1,19 @@
-// License: GPLv2+
-
+// todo Deprecate this
+var el = wp.element.createElement;
+
+/**
+ * External dependencies
+ */
+const data = WordCampBlocks.speakers || {};
+
+/**
+ * WordPress dependencies
+ */
+const { __ } = wp.i18n;
 const { registerBlockType } = wp.blocks;
 const { InspectorControls } = wp.editor;
 const { ServerSideRender, PanelBody, PanelRow, CheckboxControl, RangeControl, SelectControl, TextControl } = wp.components;
 
-var el = wp.element.createElement,
-	data = WordCampBlocks.speakers || {};
-
 const supports = {
 	className: false,
 };
@@ -62,8 +69,8 @@ const schema = {
 const schema = data.schema;
 
 registerBlockType( 'wordcamp/speakers', {
-	title: data.l10n['block_label'],
-	description: data.l10n['block_description'],
+	title: __( 'Speakers', 'wordcamporg' ),
+	description: __( 'Add a list of speakers.', 'wordcamporg' ),
 	icon: 'megaphone',
 	category: 'wordcamp',
 	attributes: schema,
@@ -78,7 +85,7 @@ registerBlockType( 'wordcamp/speakers', {
 				// Some controls currently have broken layout within a PanelRow. See https://github.com/WordPress/gutenberg/pull/4564
 				//el( PanelRow, {}, [
 					el( SelectControl, {
-						label: data.l10n['track_label'],
+						label: __( 'From which session tracks?', 'wordcamporg' ),
 						value: props.attributes['track'],
 						options: data.options['track'],
 						multiple: true,
@@ -93,7 +100,7 @@ registerBlockType( 'wordcamp/speakers', {
 				// Some controls currently have broken layout within a PanelRow. See https://github.com/WordPress/gutenberg/pull/4564
 				//el( PanelRow, {}, [
 					el( SelectControl, {
-						label: data.l10n['groups_label'],
+						label: __( 'From which speaker groups?', 'wordcamporg' ),
 						value: props.attributes['groups'],
 						options: data.options['groups'],
 						multiple: true,
@@ -106,7 +113,7 @@ registerBlockType( 'wordcamp/speakers', {
 		whichControls.push(
 			el( PanelRow, {}, [
 				el( CheckboxControl, {
-					label: data.l10n['show_all_posts_label'],
+					label: __( 'Show all', 'wordcamporg' ),
 					checked: props.attributes['show_all_posts'],
 					onChange: ( value ) => { props.setAttributes( { 'show_all_posts': value } ); },
 				} ),
@@ -118,7 +125,7 @@ registerBlockType( 'wordcamp/speakers', {
 				// Some controls currently have broken layout within a PanelRow. See https://github.com/WordPress/gutenberg/pull/4564
 				//el( PanelRow, {}, [
 					el( RangeControl, {
-						label: data.l10n['posts_per_page_label'],
+						label: __( 'Number to show', 'wordcamporg' ),
 						value: props.attributes['posts_per_page'],
 						min: schema['posts_per_page'].minimum,
 						max: schema['posts_per_page'].maximum,
@@ -134,7 +141,7 @@ registerBlockType( 'wordcamp/speakers', {
 			// Some controls currently have broken layout within a PanelRow. See https://github.com/WordPress/gutenberg/pull/4564
 			//el( PanelRow, {}, [
 				el( SelectControl, {
-					label: data.l10n['sort_label'],
+					label: __( 'Sort by', 'wordcamporg' ),
 					value: props.attributes['sort'],
 					options: data.options['sort'],
 					onChange: ( value ) => { props.setAttributes( { 'sort': value } ); },
@@ -145,8 +152,8 @@ registerBlockType( 'wordcamp/speakers', {
 		displayControls.push(
 			el( PanelRow, {}, [
 				el( CheckboxControl, {
-					label: data.l10n['speaker_link_label'],
-					help: data.l10n['speaker_link_help'],
+					label: __( 'Link titles to single posts', 'wordcamporg' ),
+					help: __( 'These will not appear in the block preview.', 'wordcamporg' ),
 					checked: props.attributes['speaker_link'],
 					onChange: ( value ) => { props.setAttributes( { 'speaker_link': value } ); },
 				} ),
@@ -156,7 +163,7 @@ registerBlockType( 'wordcamp/speakers', {
 		displayControls.push(
 			el( PanelRow, {}, [
 				el( CheckboxControl, {
-					label: data.l10n['show_avatars_label'],
+					label: __( 'Show avatars', 'wordcamporg' ),
 					checked: props.attributes['show_avatars'],
 					onChange: ( value ) => { props.setAttributes( { 'show_avatars': value } ); },
 				} ),
@@ -168,8 +175,8 @@ registerBlockType( 'wordcamp/speakers', {
 				// Some controls currently have broken layout within a PanelRow. See https://github.com/WordPress/gutenberg/pull/4564
 				//el( PanelRow, {}, [
 					el( RangeControl, {
-						label: data.l10n['avatar_size_label'],
-						help: data.l10n['avatar_size_help'],
+						label: __( 'Avatar size (px)', 'wordcamporg' ),
+						help: __( 'Height and width in pixels.', 'wordcamporg' ),
 						value: props.attributes['avatar_size'],
 						min: schema['avatar_size'].minimum,
 						max: schema['avatar_size'].maximum,
@@ -189,14 +196,14 @@ registerBlockType( 'wordcamp/speakers', {
 			el( InspectorControls, {}, [
 				el( PanelBody,
 					{
-						title: data.l10n['panel_which_title'],
+						title: __( 'Which Speakers?', 'wordcamporg' ),
 						initialOpen: true,
 					},
 					whichControls
 				),
 				el( PanelBody,
 					{
-						title: data.l10n['panel_display_title'],
+						title: __( 'Speaker Display', 'wordcamporg' ),
 						initialOpen: false,
 					},
 					displayControls

blocks.php

@@ -48,15 +48,21 @@ function enqueue_assets() {
 	wp_enqueue_script(
 		'wordcamp-blocks',
 		plugins_url( 'assets/blocks.js', __FILE__ ),
-		array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' ),
+		array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor', 'wp-i18n' ),
 		filemtime( plugin_dir_path( __FILE__ ) . 'assets/blocks.js' ),
 		false
 	);
 
+	$data = [
+		'l10n' => gutenberg_get_jed_locale_data( 'wordcamporg' ),
+	];
+
 	/**
+	 * Filter: Add/modify data sent to WordCamp Blocks JS scripts.
 	 *
+	 * @param array $data Associative multidimensional array of data.
 	 */
-	$data = apply_filters( 'wordcamp_blocks_script_data', [] );
+	$data = apply_filters( 'wordcamp_blocks_script_data', $data );
 
 	wp_add_inline_script(
 		'wordcamp-blocks',