From 97fd3a1212cdb8f77ba6471390ad86ad1ad711ea Mon Sep 17 00:00:00 2001 From: Jimmy Comack Date: Thu, 18 Mar 2021 16:36:58 +0100 Subject: [PATCH 1/4] Added support for variable labels when using the snippet editor --- .../src/SettingsSnippetEditor.js | 3 ++- .../src/SettingsSnippetEditorFields.js | 9 +++++++-- .../__snapshots__/SnippetEditorTest.js.snap | 20 +++++++++++++++++++ 3 files changed, 29 insertions(+), 3 deletions(-) diff --git a/packages/replacement-variable-editor/src/SettingsSnippetEditor.js b/packages/replacement-variable-editor/src/SettingsSnippetEditor.js index 62b0338fc8..e1f7692a20 100644 --- 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 } /> ); @@ -166,7 +168,6 @@ SettingsSnippetEditor.defaultProps = { replacementVariables: [], recommendedReplacementVariables: [], hasPaperStyle: true, - descriptionEditorFieldPlaceholder: "", }; export default SettingsSnippetEditor; diff --git a/packages/replacement-variable-editor/src/SettingsSnippetEditorFields.js b/packages/replacement-variable-editor/src/SettingsSnippetEditorFields.js index be2d8e4878..6aa45a3b82 100644 --- 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 { > onFocus( "title" ) } onBlur={ onBlur } isActive={ activeField === "title" } @@ -147,7 +148,7 @@ class SettingsSnippetEditorFields extends React.Component { onFocus( "description" ) } onBlur={ onBlur } isActive={ activeField === "description" } @@ -182,6 +183,10 @@ SettingsSnippetEditorFields.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string.isRequired, } ).isRequired, + labels: PropTypes.shape( { + title: PropTypes.string, + description: PropTypes.string, + } ), }; SettingsSnippetEditorFields.defaultProps = { diff --git a/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap b/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap index 60ce6b5028..b5761d918c 100644 --- a/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap +++ b/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap @@ -470,6 +470,7 @@ exports[`SnippetEditor activates a field on onMouseUp() and opens the editor 1`] } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" + descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -485,6 +486,7 @@ exports[`SnippetEditor activates a field on onMouseUp() and opens the editor 1`] replacementVariables={Array []} slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" + titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, @@ -2339,6 +2341,7 @@ exports[`SnippetEditor closes when calling close() 1`] = ` } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" + descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -2354,6 +2357,7 @@ exports[`SnippetEditor closes when calling close() 1`] = ` replacementVariables={Array []} slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" + titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, @@ -6317,6 +6321,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = ` } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" + descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -6332,6 +6337,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = ` replacementVariables={Array []} slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" + titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, @@ -8683,6 +8689,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] = } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" + descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -8698,6 +8705,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] = replacementVariables={Array []} slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" + titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, @@ -11893,6 +11901,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" + descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -11908,6 +11917,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call replacementVariables={Array []} slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" + titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, @@ -14297,6 +14307,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" + descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -14312,6 +14323,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle replacementVariables={Array []} slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" + titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, @@ -16663,6 +16675,7 @@ exports[`SnippetEditor opens when calling open() 1`] = ` } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" + descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -16678,6 +16691,7 @@ exports[`SnippetEditor opens when calling open() 1`] = ` replacementVariables={Array []} slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" + titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, @@ -19044,6 +19058,7 @@ exports[`SnippetEditor passes replacement variables to the title and description } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" + descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -19074,6 +19089,7 @@ exports[`SnippetEditor passes replacement variables to the title and description } slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" + titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, @@ -20113,6 +20129,7 @@ exports[`SnippetEditor removes the highlight from the hovered field on calling o } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" + descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -20128,6 +20145,7 @@ exports[`SnippetEditor removes the highlight from the hovered field on calling o replacementVariables={Array []} slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" + titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, @@ -21982,6 +22000,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] = } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" + descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -21997,6 +22016,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] = replacementVariables={Array []} slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" + titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, From 0638b0e92449c0c005378b9311ba1fd5d8f4cb23 Mon Sep 17 00:00:00 2001 From: Jimmy Comack Date: Fri, 19 Mar 2021 10:07:52 +0100 Subject: [PATCH 2/4] Updated snapshot tests --- .../__snapshots__/SnippetEditorTest.js.snap | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap b/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap index b5761d918c..60ce6b5028 100644 --- a/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap +++ b/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap @@ -470,7 +470,6 @@ exports[`SnippetEditor activates a field on onMouseUp() and opens the editor 1`] } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" - descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -486,7 +485,6 @@ exports[`SnippetEditor activates a field on onMouseUp() and opens the editor 1`] replacementVariables={Array []} slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" - titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, @@ -2341,7 +2339,6 @@ exports[`SnippetEditor closes when calling close() 1`] = ` } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" - descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -2357,7 +2354,6 @@ exports[`SnippetEditor closes when calling close() 1`] = ` replacementVariables={Array []} slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" - titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, @@ -6321,7 +6317,6 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = ` } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" - descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -6337,7 +6332,6 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = ` replacementVariables={Array []} slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" - titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, @@ -8689,7 +8683,6 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] = } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" - descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -8705,7 +8698,6 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] = replacementVariables={Array []} slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" - titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, @@ -11901,7 +11893,6 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" - descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -11917,7 +11908,6 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call replacementVariables={Array []} slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" - titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, @@ -14307,7 +14297,6 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" - descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -14323,7 +14312,6 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle replacementVariables={Array []} slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" - titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, @@ -16675,7 +16663,6 @@ exports[`SnippetEditor opens when calling open() 1`] = ` } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" - descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -16691,7 +16678,6 @@ exports[`SnippetEditor opens when calling open() 1`] = ` replacementVariables={Array []} slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" - titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, @@ -19058,7 +19044,6 @@ exports[`SnippetEditor passes replacement variables to the title and description } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" - descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -19089,7 +19074,6 @@ exports[`SnippetEditor passes replacement variables to the title and description } slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" - titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, @@ -20129,7 +20113,6 @@ exports[`SnippetEditor removes the highlight from the hovered field on calling o } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" - descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -20145,7 +20128,6 @@ exports[`SnippetEditor removes the highlight from the hovered field on calling o replacementVariables={Array []} slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" - titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, @@ -22000,7 +21982,6 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] = } descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here" descriptionInputId="yoast-google-preview-description" - descriptionLabel="Meta description" descriptionLengthProgress={ Object { "actual": 42, @@ -22016,7 +21997,6 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] = replacementVariables={Array []} slugInputId="yoast-google-preview-slug" titleInputId="yoast-google-preview-title" - titleLabel="SEO title" titleLengthProgress={ Object { "actual": 0, From 21716e056631e861af26eeb2c7d3c1e5f9cea642 Mon Sep 17 00:00:00 2001 From: Jimmy Comack Date: Fri, 19 Mar 2021 10:33:26 +0100 Subject: [PATCH 3/4] Fixed eslint issue --- .../replacement-variable-editor/src/SettingsSnippetEditor.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/replacement-variable-editor/src/SettingsSnippetEditor.js b/packages/replacement-variable-editor/src/SettingsSnippetEditor.js index e1f7692a20..44cf9666e3 100644 --- a/packages/replacement-variable-editor/src/SettingsSnippetEditor.js +++ b/packages/replacement-variable-editor/src/SettingsSnippetEditor.js @@ -162,6 +162,10 @@ SettingsSnippetEditor.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string.isRequired, } ).isRequired, + labels: PropTypes.shape( { + title: PropTypes.string, + description: PropTypes.string, + } ), }; SettingsSnippetEditor.defaultProps = { From ff501740acf19ce9b0315e0aa00457c96bccb100 Mon Sep 17 00:00:00 2001 From: Jimmy Comack Date: Fri, 19 Mar 2021 12:42:40 +0100 Subject: [PATCH 4/4] Fixed more eslint issues --- .../replacement-variable-editor/src/SettingsSnippetEditor.js | 2 ++ .../src/SettingsSnippetEditorFields.js | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/replacement-variable-editor/src/SettingsSnippetEditor.js b/packages/replacement-variable-editor/src/SettingsSnippetEditor.js index 44cf9666e3..1392da788d 100644 --- a/packages/replacement-variable-editor/src/SettingsSnippetEditor.js +++ b/packages/replacement-variable-editor/src/SettingsSnippetEditor.js @@ -172,6 +172,8 @@ SettingsSnippetEditor.defaultProps = { replacementVariables: [], recommendedReplacementVariables: [], hasPaperStyle: true, + descriptionEditorFieldPlaceholder: null, + labels: {}, }; export default SettingsSnippetEditor; diff --git a/packages/replacement-variable-editor/src/SettingsSnippetEditorFields.js b/packages/replacement-variable-editor/src/SettingsSnippetEditorFields.js index 6aa45a3b82..0656149cee 100644 --- a/packages/replacement-variable-editor/src/SettingsSnippetEditorFields.js +++ b/packages/replacement-variable-editor/src/SettingsSnippetEditorFields.js @@ -194,6 +194,8 @@ SettingsSnippetEditorFields.defaultProps = { onFocus: () => {}, onBlur: () => {}, containerPadding: "0 20px", + descriptionEditorFieldPlaceholder: null, + labels: {}, }; export default SettingsSnippetEditorFields;