diff --git a/composites/Plugin/SnippetEditor/components/SnippetEditor.js b/composites/Plugin/SnippetEditor/components/SnippetEditor.js
index 783c680e..6f7755a9 100644
--- a/composites/Plugin/SnippetEditor/components/SnippetEditor.js
+++ b/composites/Plugin/SnippetEditor/components/SnippetEditor.js
@@ -113,6 +113,7 @@ class SnippetEditor extends React.Component {
data,
titleLengthProgress,
descriptionLengthProgress,
+ replacementVariablesExplanation,
} = this.props;
const replacementVariables = this.decodeSeparatorVariable( this.props.replacementVariables );
const { activeField, hoveredField, isOpen } = this.state;
@@ -130,6 +131,7 @@ class SnippetEditor extends React.Component {
onChange={ this.handleChange }
onFocus={ this.setFieldFocus }
replacementVariables={ replacementVariables }
+ replacementVariablesExplanation={ replacementVariablesExplanation }
titleLengthProgress={ titleLengthProgress }
descriptionLengthProgress={ descriptionLengthProgress }
/>
@@ -404,6 +406,7 @@ SnippetEditor.propTypes = {
mapDataToPreview: PropTypes.func,
keyword: PropTypes.string,
locale: PropTypes.string,
+ replacementVariablesExplanation: PropTypes.string,
};
SnippetEditor.defaultProps = {
diff --git a/composites/Plugin/SnippetEditor/components/SnippetEditorFields.js b/composites/Plugin/SnippetEditor/components/SnippetEditorFields.js
index b9780ea5..c7650a30 100644
--- a/composites/Plugin/SnippetEditor/components/SnippetEditorFields.js
+++ b/composites/Plugin/SnippetEditor/components/SnippetEditorFields.js
@@ -94,11 +94,11 @@ const InputContainerDescription = InputContainer.extend`
`;
const FormSection = styled.div`
- margin: 32px 0;
+ margin: 32px 0 0;
`;
const StyledEditor = styled.section`
- padding: 10px 20px 20px 20px;
+ padding: 10px 20px 0 20px;
`;
const SimulatedLabel = styled.div`
@@ -107,6 +107,11 @@ const SimulatedLabel = styled.div`
font-family: Arial, Roboto-Regular, HelveticaNeue, sans-serif;
`;
+const ReplacementVariableExplanation = styled.p`
+ margin: 16px 0;
+ font-size: 13px;
+`;
+
class SnippetEditorFields extends React.Component {
/**
* Constructs the snippet editor fields.
@@ -208,6 +213,7 @@ class SnippetEditorFields extends React.Component {
activeField,
hoveredField,
replacementVariables,
+ replacementVariablesExplanation,
titleLengthProgress,
descriptionLengthProgress,
onFocus,
@@ -293,6 +299,7 @@ class SnippetEditorFields extends React.Component {
value={ descriptionLengthProgress.actual }
progressColor={ this.getProgressColor( descriptionLengthProgress.score ) }
/>
+ { replacementVariablesExplanation }
);
@@ -331,6 +338,7 @@ SnippetEditorFields.propTypes = {
hoveredField: PropTypes.oneOf( [ "title", "slug", "description" ] ),
titleLengthProgress: lengthProgressShape,
descriptionLengthProgress: lengthProgressShape,
+ replacementVariablesExplanation: PropTypes.string,
};
SnippetEditorFields.defaultProps = {
@@ -346,6 +354,8 @@ SnippetEditorFields.defaultProps = {
actual: 0,
score: 0,
},
+ replacementVariablesExplanation: __( "Type '%' to add snippet variables. " +
+ "See the 'Help' tab on this page to see all available variables.", "yoast-components" ),
};
export default SnippetEditorFields;
diff --git a/composites/Plugin/SnippetEditor/tests/__snapshots__/SnippetEditorTest.js.snap b/composites/Plugin/SnippetEditor/tests/__snapshots__/SnippetEditorTest.js.snap
index b918d85f..8a6a0f38 100644
--- a/composites/Plugin/SnippetEditor/tests/__snapshots__/SnippetEditorTest.js.snap
+++ b/composites/Plugin/SnippetEditor/tests/__snapshots__/SnippetEditorTest.js.snap
@@ -641,6 +641,7 @@ exports[`SnippetEditor activates a field on onClick() and opens the editor 1`] =
onChange={[Function]}
onFocus={[Function]}
replacementVariables={Array []}
+ replacementVariablesExplanation="Type '%' to add snippet variables. See the 'Help' tab on this page to see all available variables."
titleLengthProgress={
Object {
"actual": 0,
@@ -743,7 +744,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
margin-right: 7px;
}
-.c36 {
+.c37 {
font-size: 0.8rem;
height: 33px;
border: 1px solid #dbdbdb;
@@ -1014,11 +1015,11 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
}
.c30 {
- margin: 32px 0;
+ margin: 32px 0 0;
}
.c29 {
- padding: 10px 20px 20px 20px;
+ padding: 10px 20px 0 20px;
}
.c31 {
@@ -1027,6 +1028,11 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
}
+.c36 {
+ margin: 16px 0;
+ font-size: 13px;
+}
+
.c24 {
border: none;
border-bottom: 4px solid transparent;
@@ -2016,6 +2022,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
onChange={[Function]}
onFocus={[Function]}
replacementVariables={Array []}
+ replacementVariablesExplanation="Type '%' to add snippet variables. See the 'Help' tab on this page to see all available variables."
titleLengthProgress={
Object {
"actual": 0,
@@ -2176,6 +2183,13 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
value={0}
/>
+
+
+ Type '%' to add snippet variables. See the 'Help' tab on this page to see all available variables.
+
+
@@ -2188,7 +2202,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
backgroundColor="#f7f7f7"
borderColor="#ccc"
boxShadowColor="#ccc"
- className="c36"
+ className="c37"
onClick={[Function]}
textColor="#555"
type="button"
@@ -2197,7 +2211,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
backgroundColor="#f7f7f7"
borderColor="#ccc"
boxShadowColor="#ccc"
- className="c36 Button-kDSBcD c3"
+ className="c37 Button-kDSBcD c3"
onClick={[Function]}
textColor="#555"
type="button"
@@ -2206,7 +2220,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
backgroundColor="#f7f7f7"
borderColor="#ccc"
boxShadowColor="#ccc"
- className="c36 Button-kDSBcD c3 Button-kDSBcD c4"
+ className="c37 Button-kDSBcD c3 Button-kDSBcD c4"
onClick={[Function]}
textColor="#555"
type="button"
@@ -2215,7 +2229,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
backgroundColor="#f7f7f7"
borderColor="#ccc"
boxShadowColor="#ccc"
- className="c36 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
+ className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
onClick={[Function]}
textColor="#555"
type="button"
@@ -2224,13 +2238,13 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
backgroundColor="#f7f7f7"
borderColor="#ccc"
boxShadowColor="#ccc"
- className="c36 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
+ className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
onClick={[Function]}
textColor="#555"
type="button"
>