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

Allow custom labels to be used in the replacement variable editor
Yoast · Mar 23, 2021 · 7c7d0fd · 7c7d0fd
2 parents 10a27ee + ff50174
commit 7c7d0fd
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/packages/replacement-variable-editor/src/SettingsSnippetEditor.js b/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;
diff --git a/packages/replacement-variable-editor/src/SettingsSnippetEditorFields.js b/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;