Merge pull request #1114 from Yoast/P3-418-snippet-editor-fields

Allow custom labels to be used in the replacement variable editor

Author: afercia

packages/replacement-variable-editor/src/SettingsSnippetEditor.js

@@ -122,6 +122,7 @@ class SettingsSnippetEditor extends React.Component {
 			descriptionEditorFieldPlaceholder,
 			hasPaperStyle,
 			fieldIds,
+			labels,
 		} = this.props;
 
 		const { activeField, hoveredField } = this.state;
@@ -140,6 +141,7 @@ class SettingsSnippetEditor extends React.Component {
 					recommendedReplacementVariables={ recommendedReplacementVariables }
 					containerPadding={ hasPaperStyle ? "0 20px" : "0" }
 					fieldIds={ fieldIds }
+					labels={ labels }
 				/>
 			</ErrorBoundary>
 		);
@@ -160,13 +162,18 @@ SettingsSnippetEditor.propTypes = {
 		title: PropTypes.string.isRequired,
 		description: PropTypes.string.isRequired,
 	} ).isRequired,
+	labels: PropTypes.shape( {
+		title: PropTypes.string,
+		description: PropTypes.string,
+	} ),
 };
 
 SettingsSnippetEditor.defaultProps = {
 	replacementVariables: [],
 	recommendedReplacementVariables: [],
 	hasPaperStyle: true,
-	descriptionEditorFieldPlaceholder: "",
+	descriptionEditorFieldPlaceholder: null,
+	labels: {},
 };
 
 export default SettingsSnippetEditor;

packages/replacement-variable-editor/src/SettingsSnippetEditorFields.js

@@ -124,6 +124,7 @@ class SettingsSnippetEditorFields extends React.Component {
 			},
 			containerPadding,
 			fieldIds,
+			labels,
 		} = this.props;
 
 		return (
@@ -132,7 +133,7 @@ class SettingsSnippetEditorFields extends React.Component {
 			>
 				<ReplacementVariableEditor
 					type="title"
-					label={ __( "SEO title", "yoast-components" ) }
+					label={ labels.title || __( "SEO title", "yoast-components" ) }
 					onFocus={ () => onFocus( "title" ) }
 					onBlur={ onBlur }
 					isActive={ activeField === "title" }
@@ -147,7 +148,7 @@ class SettingsSnippetEditorFields extends React.Component {
 				<ReplacementVariableEditor
 					type="description"
 					placeholder={ descriptionEditorFieldPlaceholder }
-					label={ __( "Meta description", "yoast-components" ) }
+					label={ labels.description ||  __( "Meta description", "yoast-components" ) }
 					onFocus={ () => onFocus( "description" ) }
 					onBlur={ onBlur }
 					isActive={ activeField === "description" }
@@ -182,13 +183,19 @@ SettingsSnippetEditorFields.propTypes = {
 		title: PropTypes.string.isRequired,
 		description: PropTypes.string.isRequired,
 	} ).isRequired,
+	labels: PropTypes.shape( {
+		title: PropTypes.string,
+		description: PropTypes.string,
+	} ),
 };
 
 SettingsSnippetEditorFields.defaultProps = {
 	replacementVariables: [],
 	onFocus: () => {},
 	onBlur: () => {},
 	containerPadding: "0 20px",
+	descriptionEditorFieldPlaceholder: null,
+	labels: {},
 };
 
 export default SettingsSnippetEditorFields;