Better selection and translation

Author: erseco

assets/js/elp-upload.js

@@ -163,31 +163,40 @@
             // If no file selected, show placeholder
             if ( ! attributes.attachmentId ) {
                 return el( MediaUploadCheck, null,
-                    el( MediaUpload, {
-                        onSelect: onSelectFile,
-                        allowedTypes: [ 'application/zip', 'application/x-exe-learning' ],
-                        value: attributes.attachmentId,
-                        render: function( obj ) {
-                            return el( Placeholder, {
-                                    icon: 'media-default',
-                                    label: __( 'eXeLearning Content', 'exelearning' ),
-                                    instructions: __( 'Upload or select a .elpx file from your media library', 'exelearning' ),
-                                    className: 'exelearning-upload-placeholder'
-                                },
-                                el( 'div', { className: 'components-placeholder__controls' },
-                                    el( Button, {
+                    el( Placeholder, {
+                            icon: 'media-default',
+                            label: __( 'eXeLearning Content', 'exelearning' ),
+                            instructions: __( 'Upload or select a .elpx file from your media library', 'exelearning' ),
+                            className: 'exelearning-upload-placeholder'
+                        },
+                        el( 'div', { className: 'components-placeholder__controls' },
+                            el( MediaUpload, {
+                                onSelect: onSelectFile,
+                                allowedTypes: [ 'application/zip', 'application/x-exe-learning' ],
+                                value: attributes.attachmentId,
+                                mode: 'upload',
+                                render: function( obj ) {
+                                    return el( Button, {
                                         isPrimary: true,
                                         onClick: obj.open
-                                    }, __( 'Upload .elpx File', 'exelearning' ) ),
-                                    el( Button, {
+                                    }, __( 'Upload .elpx File', 'exelearning' ) );
+                                }
+                            }),
+                            el( MediaUpload, {
+                                onSelect: onSelectFile,
+                                allowedTypes: [ 'application/zip', 'application/x-exe-learning' ],
+                                value: attributes.attachmentId,
+                                mode: 'browse',
+                                render: function( obj ) {
+                                    return el( Button, {
                                         isSecondary: true,
                                         onClick: obj.open,
                                         style: { marginLeft: '10px' }
-                                    }, __( 'Media Library', 'exelearning' ) )
-                                )
-                            );
-                        }
-                    })
+                                    }, __( 'Media Library', 'exelearning' ) );
+                                }
+                            })
+                        )
+                    )
                 );
             }
 

composer.json

@@ -19,7 +19,6 @@
         "pot-remove-ctime": "sed -i.bak '/POT-Creation-Date:/d' languages/exelearning.pot && rm languages/exelearning.pot.bak",
         "pot-remove-refs": "sed -i.bak '/^#: /d' languages/exelearning.pot && rm languages/exelearning.pot.bak",
         "untranslated": "msgattrib --untranslated languages/exelearning-es_ES.po && [ $(msgattrib --untranslated languages/exelearning-es_ES.po | wc -l) -eq 0 ]",
-        "make-i18n-json": "wp i18n make-json languages/exelearning-es_ES.po languages/ --purge --pretty-print",
         "check-untranslated": "composer make-pot && composer pot-remove-ctime && composer pot-remove-refs && composer update-po && composer untranslated && composer make-mo"
     },
     "config": {

includes/class-elp-upload-block.php

@@ -49,11 +49,7 @@ public function enqueue_block_scripts() {
 			true
 		);
 
-		wp_set_script_translations(
-			'exelearning-elp-block',
-			'exelearning',
-			plugin_dir_path( __DIR__ ) . 'languages'
-		);
+		$this->inject_block_translations();
 
 		wp_enqueue_style(
 			'exelearning-block-editor',
@@ -192,4 +188,45 @@ public function render_block( $attributes ) {
 
 		return $html;
 	}
+
+	/**
+	 * Inject JS translations from the already-loaded MO textdomain.
+	 * This avoids needing separate JSON translation files.
+	 */
+	private function inject_block_translations() {
+		$strings = array(
+			'Settings',
+			'Height (px)',
+			'Show Teacher Mode toggler',
+			'Edit in eXeLearning',
+			'eXeLearning Content',
+			'Upload or select a .elpx file from your media library',
+			'Upload .elpx File',
+			'Media Library',
+			'Change file',
+			'Remove',
+			'No preview available',
+			'This is an eXeLearning v2 source file. The content will be displayed on the frontend if exported HTML is available.',
+		);
+
+		$locale_data = array();
+		foreach ( $strings as $s ) {
+			$t = __( $s, 'exelearning' ); // phpcs:ignore WordPress.WP.I18n.NonSingularStringLiteralText
+			if ( $t !== $s ) {
+				$locale_data[ $s ] = array( $t );
+			}
+		}
+
+		if ( empty( $locale_data ) ) {
+			return;
+		}
+
+		$locale_data[''] = array( 'domain' => 'exelearning' );
+
+		wp_add_inline_script(
+			'exelearning-elp-block',
+			'wp.i18n.setLocaleData(' . wp_json_encode( $locale_data ) . ',"exelearning");',
+			'before'
+		);
+	}
 }