Skip to content
This repository was archived by the owner on Oct 4, 2022. It is now read-only.

Allow custom labels to be used in the replacement variable editor #1114

Merged
merged 5 commits into from
Mar 23, 2021
Merged

Allow custom labels to be used in the replacement variable editor #1114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
97fd3a1
Added support for variable labels when using the snippet editor
Mar 18, 2021
8001829
Merge branch 'develop' into P3-418-snippet-editor-fields
Mar 19, 2021
0638b0e
Updated snapshot tests
Mar 19, 2021
21716e0
Fixed eslint issue
Mar 19, 2021
ff50174
Fixed more eslint issues
Mar 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion packages/replacement-variable-editor/src/SettingsSnippetEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ class SettingsSnippetEditor extends React.Component {
descriptionEditorFieldPlaceholder,
hasPaperStyle,
fieldIds,
labels,
} = this.props;

const { activeField, hoveredField } = this.state;
Expand All @@ -140,6 +141,7 @@ class SettingsSnippetEditor extends React.Component {
recommendedReplacementVariables={ recommendedReplacementVariables }
containerPadding={ hasPaperStyle ? "0 20px" : "0" }
fieldIds={ fieldIds }
labels={ labels }
/>
</ErrorBoundary>
);
Expand All @@ -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;
11 changes: 9 additions & 2 deletions packages/replacement-variable-editor/src/SettingsSnippetEditorFields.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@ class SettingsSnippetEditorFields extends React.Component {
},
containerPadding,
fieldIds,
labels,
} = this.props;

return (
Expand All @@ -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" }
Expand All @@ -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" }
Expand Down Expand Up @@ -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;