Improve i18n of strings.

Addresses #16730 (comment) Renames `type` to `property` to better indicate that it is a formal CSS property value and therefore should not be translated lest it break the underlying code. Added title attribute to enable true text-based strings to be translatable.
WordPress · Jul 24, 2019 · 052fd28 · 052fd28
1 parent 2835aa6
commit 052fd28
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 25 deletions.
diff --git a/packages/block-editor/src/components/dimension-control/index.js b/packages/block-editor/src/components/dimension-control/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { startCase } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -12,52 +7,51 @@ import {
 	BaseControl,
 	Tooltip,
 } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import sizesTable from './sizes';
 
-function DimensionControl( { type, attributes, setAttributes, clientId } ) {
-	const humanTypeName = startCase( type );
-
+function DimensionControl( { title, property, attributes, setAttributes, clientId } ) {
 	const onChangeSpacingSize = ( event ) => {
 		const theSize = sizesTable.find( ( size ) => event.target.value === size.slug );
 
 		if ( ! theSize ) {
 			return;
 		}
 
-		if ( attributes[ `${ type }Size` ] === theSize.slug ) {
+		if ( attributes[ `${ property }Size` ] === theSize.slug ) {
 			setAttributes( {
-				[ `${ type }Size` ]: '',
-				[ `${ type }Top` ]: 0,
-				[ `${ type }Right` ]: 0,
-				[ `${ type }Left` ]: 0,
-				[ `${ type }Bottom` ]: 0,
+				[ `${ property }Size` ]: '',
+				[ `${ property }Top` ]: 0,
+				[ `${ property }Right` ]: 0,
+				[ `${ property }Left` ]: 0,
+				[ `${ property }Bottom` ]: 0,
 			} );
 		} else {
 			setAttributes( {
-				[ `${ type }Size` ]: theSize.slug,
-				[ `${ type }Top` ]: theSize.size,
-				[ `${ type }Right` ]: theSize.size,
-				[ `${ type }Left` ]: theSize.size,
-				[ `${ type }Bottom` ]: theSize.size,
+				[ `${ property }Size` ]: theSize.slug,
+				[ `${ property }Top` ]: theSize.size,
+				[ `${ property }Right` ]: theSize.size,
+				[ `${ property }Left` ]: theSize.size,
+				[ `${ property }Bottom` ]: theSize.size,
 			} );
 		}
 	};
 
 	// Todo - update with unique Block instance ID?
-	const controlId = `block-spacing-${ type }-${ clientId }`;
+	const controlId = `block-spacing-${ property }-${ clientId }`;
 
 	return (
 		<BaseControl
 			id={ controlId }
-			help={ `Select the ${ type } for this Block` }
+			help={ sprintf( __( 'Select the %s for this Block' ), property ) }
 			className="block-editor-dimension-control"
 		>
 			<BaseControl.VisualLabel>
-				{ humanTypeName }
+				{ title }
 			</BaseControl.VisualLabel>
 			<ButtonGroup
 				id={ controlId }
@@ -66,7 +60,7 @@ function DimensionControl( { type, attributes, setAttributes, clientId } ) {
 				{ sizesTable.map( function( size ) {
 					const visualName = size.name.substring( 0, 1 );
 					const hiddenName = size.name.substring( 1 );
-					const isSelected = attributes[ `${ type }Size` ] === size.slug;
+					const isSelected = attributes[ `${ property }Size` ] === size.slug;
 					return (
 						<Tooltip key={ size.slug } text={ size.name }>
 							<Button

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
@@ -61,13 +61,15 @@ function GroupEdit( {
 
 				<PanelBody title={ __( 'Spacing' ) }>
 					<DimensionControl
-						type="padding"
+						title={ __( 'Padding' ) }
+						property="padding"
 						attributes={ attributes }
 						setAttributes={ setAttributes }
 						clientId={ clientId }
 					/>
 					<DimensionControl
-						type="margin"
+						title={ __( 'Margin' ) }
+						property="margin"
 						attributes={ attributes }
 						setAttributes={ setAttributes }
 						clientId={ clientId }