1171: Ensure translatable strings in blocks can actually be translated

.babelrc

@@ -14,6 +14,12 @@
       {
         "pragma": "wp.element.createElement"
       }
+    ],
+    [
+      "@wordpress/babel-plugin-makepot",
+      {
+        "output": "languages/amp-js.pot"
+      }
     ]
   ],
   "env": {

.gitignore

@@ -5,3 +5,5 @@ node_modules
 wiki
 amp.zip
 **/*-compiled.js
+languages/*.pot
+languages/*.php

Gruntfile.js

@@ -42,7 +42,16 @@ module.exports = function( grunt ) {
 			verify_matching_versions: {
 				command: 'php bin/verify-version-consistency.php'
 			},
-			create_release_zip: {
+			webpack_production: {
+				command: 'cross-env BABEL_ENV=production webpack'
+			},
+			pot_to_php: {
+				command: 'npm run pot-to-php'
+			},
+			makepot: {
+				command: 'wp i18n make-pot .'
+			},
+			create_build_zip: {
 				command: 'if [ ! -e build ]; then echo "Run grunt build first."; exit 1; fi; if [ -e amp.zip ]; then rm amp.zip; fi; cd build; zip -r ../amp.zip .; cd ..; echo; echo "ZIP of build: $(pwd)/amp.zip"'
 			}
 		},
@@ -82,6 +91,8 @@ module.exports = function( grunt ) {
 		spawnQueue = [];
 		stdout = [];
 
+		grunt.task.run( 'shell:webpack_production' );
+
 		spawnQueue.push(
 			{
 				cmd: 'git',
@@ -100,12 +111,14 @@ module.exports = function( grunt ) {
 			versionAppend = commitHash + '-' + new Date().toISOString().replace( /\.\d+/, '' ).replace( /-|:/g, '' );
 
 			paths = lsOutput.trim().split( /\n/ ).filter( function( file ) {
-				return ! /^(blocks|\.|bin|([^/]+)+\.(md|json|xml)|Gruntfile\.js|tests|wp-assets|dev-lib|readme\.md|composer\..*)/.test( file );
+				return ! /^(blocks|\.|bin|([^/]+)+\.(md|json|xml)|Gruntfile\.js|tests|wp-assets|dev-lib|readme\.md|composer\..*|languages\/README.*)/.test( file );
 			} );
 			paths.push( 'vendor/autoload.php' );
 			paths.push( 'assets/js/*-compiled.js' );
 			paths.push( 'vendor/composer/**' );
 			paths.push( 'vendor/sabberworm/php-css-parser/lib/**' );
+			paths.push( 'languages/amp-translations.php' );
+			paths.push( 'languages/amp.pot' );
 
 			grunt.task.run( 'clean' );
 			grunt.config.set( 'copy', {
@@ -137,8 +150,6 @@ module.exports = function( grunt ) {
 			grunt.task.run( 'readme' );
 			grunt.task.run( 'copy' );
 
-			grunt.task.run( 'shell:create_release_zip' );
-
 			done();
 		}
 
@@ -163,16 +174,21 @@ module.exports = function( grunt ) {
 		doNext();
 	} );
 
-	grunt.registerTask( 'create-release-zip', [
-		'build',
-		'shell:create_release_zip'
+	grunt.registerTask( 'create-build-zip', [
+		'shell:create_build_zip'
+	] );
+
+	grunt.registerTask( 'build-release', [
+		'shell:makepot',
+		'shell:pot_to_php',
+		'build'
 	] );
 
 	grunt.registerTask( 'deploy', [
-		'build',
 		'jshint',
 		'shell:phpunit',
 		'shell:verify_matching_versions',
+		'build-release',
 		'wp_deploy'
 	] );
 };

assets/js/amp-editor-blocks.js

@@ -15,7 +15,7 @@ var ampEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
 			ampLayoutOptions: [
 				{
 					value: 'nodisplay',
-					label: __( 'No Display' ),
+					label: __( 'No Display', 'amp' ),
 					notAvailable: [
 						'core-embed/vimeo',
 						'core-embed/dailymotion',
@@ -27,36 +27,36 @@ var ampEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
 				{
 					// Not supported by amp-audio and amp-pixel.
 					value: 'fixed',
-					label: __( 'Fixed' ),
+					label: __( 'Fixed', 'amp' ),
 					notAvailable: [
 						'core-embed/soundcloud'
 					]
 				},
 				{
 					// To ensure your AMP element displays, you must specify a width and height for the containing element.
 					value: 'responsive',
-					label: __( 'Responsive' ),
+					label: __( 'Responsive', 'amp' ),
 					notAvailable: [
 						'core/audio',
 						'core-embed/soundcloud'
 					]
 				},
 				{
 					value: 'fixed-height',
-					label: __( 'Fixed height' ),
+					label: __( 'Fixed height', 'amp' ),
 					notAvailable: []
 				},
 				{
 					value: 'fill',
-					label: __( 'Fill' ),
+					label: __( 'Fill', 'amp' ),
 					notAvailable: [
 						'core/audio',
 						'core-embed/soundcloud'
 					]
 				},
 				{
 					value: 'flex-item',
-					label: __( 'Flex Item' ),
+					label: __( 'Flex Item', 'amp' ),
 					notAvailable: [
 						'core/audio',
 						'core-embed/soundcloud'
@@ -65,7 +65,7 @@ var ampEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
 				{
 					// Not supported by video.
 					value: 'intrinsic',
-					label: __( 'Intrinsic' ),
+					label: __( 'Intrinsic', 'amp' ),
 					notAvailable: [
 						'core/audio',
 						'core-embed/youtube',
@@ -120,7 +120,7 @@ var ampEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
 		var layoutOptions = [
 			{
 				value: '',
-				label: __( 'Default' )
+				label: __( 'Default', 'amp' )
 			}
 		];
 
@@ -282,15 +282,15 @@ var ampEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
 			SelectControl = wp.components.SelectControl,
 			ToggleControl = wp.components.ToggleControl,
 			PanelBody = wp.components.PanelBody,
-			label = __( 'AMP Layout' );
+			label = __( 'AMP Layout', 'amp' );
 
 		if ( 'core/image' === name ) {
-			label = __( 'AMP Layout (modifies width/height)' );
+			label = __( 'AMP Layout (modifies width/height)', 'amp' );
 		}
 
 		return isSelected && (
 			el( InspectorControls, { key: 'inspector' },
-				el( PanelBody, { title: __( 'AMP Settings' ) },
+				el( PanelBody, { title: __( 'AMP Settings', 'amp' ) },
 					el( SelectControl, {
 						label: label,
 						value: ampLayout,
@@ -303,7 +303,7 @@ var ampEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
 						}
 					} ),
 					el( ToggleControl, {
-						label: __( 'AMP loading indicator disabled' ),
+						label: __( 'AMP loading indicator disabled', 'amp' ),
 						checked: ampNoLoading,
 						onChange: function() {
 							props.setAttributes( { ampNoLoading: ! ampNoLoading } );
@@ -332,15 +332,15 @@ var ampEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
 
 		if ( component.isGalleryShortcode( props.attributes ) ) {
 			toggleControl = el( ToggleControl, {
-				label: __( 'Display as AMP carousel' ),
+				label: __( 'Display as AMP carousel', 'amp' ),
 				checked: ampCarousel,
 				onChange: function() {
 					props.setAttributes( { ampCarousel: ! ampCarousel } );
 				}
 			} );
 			return isSelected && (
 				el( InspectorControls, { key: 'inspector' },
-					el( PanelBody, { title: __( 'AMP Settings' ) },
+					el( PanelBody, { title: __( 'AMP Settings', 'amp' ) },
 						toggleControl
 					)
 				)

bin/deploy-travis-pantheon.sh

@@ -85,7 +85,7 @@ if [ ! -e node_modules/.bin ]; then
     npm install
 fi
 PATH="node_modules/.bin/:$PATH"
-grunt build
+npm run build
 rsync -avz --delete ./build/ "$repo_dir/wp-content/plugins/amp/"
 git --no-pager log -1 --format="Build AMP plugin at %h: %s" > /tmp/commit-message.txt
 

blocks/amp-brid-player/index.js

@@ -19,12 +19,12 @@ const {
 export default registerBlockType(
 	'amp/amp-brid-player',
 	{
-		title: __( 'AMP Brid Player' ),
-		description: __( 'Displays the Brid Player used in Brid.tv Video Platform.' ),
+		title: __( 'AMP Brid Player', 'amp' ),
+		description: __( 'Displays the Brid Player used in Brid.tv Video Platform.', 'amp' ),
 		category: 'common',
 		icon: 'embed-generic',
 		keywords: [
-			__( 'Embed' )
+			__( 'Embed', 'amp' )
 		],
 
 		attributes: {
@@ -63,12 +63,12 @@ export default registerBlockType(
 		edit( { attributes, isSelected, setAttributes } ) {
 			const { autoPlay, dataPartner, dataPlayer, dataVideo, dataPlaylist, dataOutstream, layout, height, width } = attributes;
 			const ampLayoutOptions = [
-				{ value: 'responsive', label: __( 'Responsive' ) },
-				{ value: 'fixed-height', label: __( 'Fixed height' ) },
-				{ value: 'fixed', label: __( 'Fixed' ) },
-				{ value: 'fill', label: __( 'Fill' ) },
-				{ value: 'flex-item', label: __( 'Flex-item' ) },
-				{ value: 'nodisplay', label: __( 'No Display' ) }
+				{ value: 'responsive', label: __( 'Responsive', 'amp' ) },
+				{ value: 'fixed-height', label: __( 'Fixed height', 'amp' ) },
+				{ value: 'fixed', label: __( 'Fixed', 'amp' ) },
+				{ value: 'fill', label: __( 'Fill', 'amp' ) },
+				{ value: 'flex-item', label: __( 'Flex-item', 'amp' ) },
+				{ value: 'nodisplay', label: __( 'No Display', 'amp' ) }
 
 			];
 			let url = false;
@@ -80,52 +80,52 @@ export default registerBlockType(
 					{
 						isSelected && (
 							<InspectorControls key='inspector'>
-								<PanelBody title={ __( 'Brid Player Settings' ) }>
+								<PanelBody title={ __( 'Brid Player Settings', 'amp' ) }>
 									<TextControl
-										label={ __( 'Brid.tv partner ID (required)' ) }
+										label={ __( 'Brid.tv partner ID (required)', 'amp' ) }
 										value={ dataPartner }
 										onChange={ value => ( setAttributes( { dataPartner: value } ) ) }
 									/>
 									<TextControl
-										label={ __( 'Brid.tv player ID (required)' ) }
+										label={ __( 'Brid.tv player ID (required)', 'amp' ) }
 										value={ dataPlayer }
 										onChange={ value => ( setAttributes( { dataPlayer: value } ) ) }
 									/>
 									<TextControl
-										label={ __( 'Video ID (one of video / playlist / outstream ID is required)' ) }
+										label={ __( 'Video ID (one of video / playlist / outstream ID is required)', 'amp' ) }
 										value={ dataVideo }
 										onChange={ value => ( setAttributes( { dataVideo: value } ) ) }
 									/>
 									<TextControl
-										label={ __( 'Outstream unit ID (one of video / playlist / outstream ID is required)' ) }
+										label={ __( 'Outstream unit ID (one of video / playlist / outstream ID is required)', 'amp' ) }
 										value={ dataOutstream }
 										onChange={ value => ( setAttributes( { dataOutstream: value } ) ) }
 									/>
 									<TextControl
-										label={ __( 'Playlist ID (one of video / playlist / outstream ID is required)' ) }
+										label={ __( 'Playlist ID (one of video / playlist / outstream ID is required)', 'amp' ) }
 										value={ dataPlaylist }
 										onChange={ value => ( setAttributes( { dataPlaylist: value } ) ) }
 									/>
 									<ToggleControl
-										label={ __( 'Autoplay' ) }
+										label={ __( 'Autoplay', 'amp' ) }
 										checked={ autoPlay }
 										onChange={ () => ( setAttributes( { autoPlay: ! autoPlay } ) ) }
 									/>
 									<SelectControl
-										label={ __( 'Layout' ) }
+										label={ __( 'Layout', 'amp', 'amp' ) }
 										value={ layout }
 										options={ ampLayoutOptions }
 										onChange={ value => ( setAttributes( { layout: value } ) ) }
 									/>
 									<TextControl
 										type="number"
-										label={ __( 'Width (px)' ) }
+										label={ __( 'Width (px)', 'amp' ) }
 										value={ width !== undefined ? width : '' }
 										onChange={ value => ( setAttributes( { width: value } ) ) }
 									/>
 									<TextControl
 										type="number"
-										label={ __( 'Height (px)' ) }
+										label={ __( 'Height (px)', 'amp' ) }
 										value={ height }
 										onChange={ value => ( setAttributes( { height: value } ) ) }
 									/>
@@ -135,17 +135,17 @@ export default registerBlockType(
 					}
 					{
 						url && (
-							<Placeholder label={ __( 'Brid Player' ) }>
+							<Placeholder label={ __( 'Brid Player', 'amp' ) }>
 								<p className="components-placeholder__error">{ url }</p>
-								<p className="components-placeholder__error">{ __( 'Previews for this are unavailable in the editor, sorry!' ) }</p>
+								<p className="components-placeholder__error">{ __( 'Previews for this are unavailable in the editor, sorry!', 'amp' ) }</p>
 							</Placeholder>
 						)
 
 					}
 					{
 						! url && (
-							<Placeholder label={ __( 'Brid Player' ) }>
-								<p>{ __( 'Add required data to use the block.' ) }</p>
+							<Placeholder label={ __( 'Brid Player', 'amp' ) }>
+								<p>{ __( 'Add required data to use the block.', 'amp' ) }</p>
 							</Placeholder>
 						)
 					}