From 91ab442af65f62749f1852a6472624a631f5185f Mon Sep 17 00:00:00 2001
From: boblinthorst <bob.linthorst@gmail.com>
Date: Thu, 24 May 2018 09:45:33 +0200
Subject: [PATCH 1/3] Added explanatory text for the replacevars

---
 .../components/SnippetEditorFields.js         |  13 +-
 .../__snapshots__/SnippetEditorTest.js.snap   | 300 ++++++++++++------
 2 files changed, 221 insertions(+), 92 deletions(-)

diff --git a/composites/Plugin/SnippetEditor/components/SnippetEditorFields.js b/composites/Plugin/SnippetEditor/components/SnippetEditorFields.js
index b3541594..ac52bf12 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.
@@ -276,6 +281,10 @@ class SnippetEditorFields extends React.Component {
 						value={ descriptionLengthProgress.actual }
 						progressColor={ this.getProgressColor( descriptionLengthProgress.score ) }
 					/>
+					<ReplacementVariableExplanation>{
+						__( "Type '%' to add snippet variables, " +
+							"see the 'Help' tab on this page to see all available variables.", "yoast-components" )
+					}</ReplacementVariableExplanation>
 				</FormSection>
 			</StyledEditor>
 		);
diff --git a/composites/Plugin/SnippetEditor/tests/__snapshots__/SnippetEditorTest.js.snap b/composites/Plugin/SnippetEditor/tests/__snapshots__/SnippetEditorTest.js.snap
index b914086d..40e92546 100644
--- a/composites/Plugin/SnippetEditor/tests/__snapshots__/SnippetEditorTest.js.snap
+++ b/composites/Plugin/SnippetEditor/tests/__snapshots__/SnippetEditorTest.js.snap
@@ -743,7 +743,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
   margin-right: 7px;
 }
 
-.c37 {
+.c38 {
   font-size: 0.8rem;
   height: 33px;
   border: 1px solid #dbdbdb;
@@ -1044,11 +1044,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 {
@@ -1057,6 +1057,11 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
   font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
 }
 
+.c37 {
+  margin: 16px 0;
+  font-size: 13px;
+}
+
 .c24 {
   border: none;
   border-bottom: 4px solid transparent;
@@ -2200,6 +2205,13 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
                   value={42}
                 />
               </ProgressBar>
+              <SnippetEditorFields__ReplacementVariableExplanation>
+                <p
+                  className="c37"
+                >
+                  Type '%' to add snippet variables, see the "Help" tab on this page to see all available variables.
+                </p>
+              </SnippetEditorFields__ReplacementVariableExplanation>
             </div>
           </SnippetEditorFields__FormSection>
         </section>
@@ -2212,7 +2224,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
         backgroundColor="#f7f7f7"
         borderColor="#ccc"
         boxShadowColor="#ccc"
-        className="c37"
+        className="c38"
         onClick={[Function]}
         textColor="#555"
         type="button"
@@ -2221,7 +2233,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
           backgroundColor="#f7f7f7"
           borderColor="#ccc"
           boxShadowColor="#ccc"
-          className="c37 Button-kDSBcD c3"
+          className="c38 Button-kDSBcD c3"
           onClick={[Function]}
           textColor="#555"
           type="button"
@@ -2230,7 +2242,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
             backgroundColor="#f7f7f7"
             borderColor="#ccc"
             boxShadowColor="#ccc"
-            className="c37 Button-kDSBcD c3 Button-kDSBcD c4"
+            className="c38 Button-kDSBcD c3 Button-kDSBcD c4"
             onClick={[Function]}
             textColor="#555"
             type="button"
@@ -2239,7 +2251,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
               backgroundColor="#f7f7f7"
               borderColor="#ccc"
               boxShadowColor="#ccc"
-              className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
+              className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
               onClick={[Function]}
               textColor="#555"
               type="button"
@@ -2248,13 +2260,13 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
                 backgroundColor="#f7f7f7"
                 borderColor="#ccc"
                 boxShadowColor="#ccc"
-                className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
+                className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
                 onClick={[Function]}
                 textColor="#555"
                 type="button"
               >
                 <button
-                  className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
+                  className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
                   onClick={[Function]}
                   type="button"
                 >
@@ -2355,7 +2367,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 2
   margin-right: 7px;
 }
 
-.c37 {
+.c38 {
   font-size: 0.8rem;
   height: 33px;
   border: 1px solid #dbdbdb;
@@ -2656,11 +2668,11 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 2
 }
 
 .c30 {
-  margin: 32px 0;
+  margin: 32px 0 0;
 }
 
 .c29 {
-  padding: 10px 20px 20px 20px;
+  padding: 10px 20px 0 20px;
 }
 
 .c31 {
@@ -2669,6 +2681,11 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 2
   font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
 }
 
+.c37 {
+  margin: 16px 0;
+  font-size: 13px;
+}
+
 .c24 {
   border: none;
   border-bottom: 4px solid transparent;
@@ -3812,6 +3829,13 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 2
                   value={42}
                 />
               </ProgressBar>
+              <SnippetEditorFields__ReplacementVariableExplanation>
+                <p
+                  className="c37"
+                >
+                  Type '%' to add snippet variables, see the "Help" tab on this page to see all available variables.
+                </p>
+              </SnippetEditorFields__ReplacementVariableExplanation>
             </div>
           </SnippetEditorFields__FormSection>
         </section>
@@ -3824,7 +3848,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 2
         backgroundColor="#f7f7f7"
         borderColor="#ccc"
         boxShadowColor="#ccc"
-        className="c37"
+        className="c38"
         onClick={[Function]}
         textColor="#555"
         type="button"
@@ -3833,7 +3857,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 2
           backgroundColor="#f7f7f7"
           borderColor="#ccc"
           boxShadowColor="#ccc"
-          className="c37 Button-kDSBcD c3"
+          className="c38 Button-kDSBcD c3"
           onClick={[Function]}
           textColor="#555"
           type="button"
@@ -3842,7 +3866,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 2
             backgroundColor="#f7f7f7"
             borderColor="#ccc"
             boxShadowColor="#ccc"
-            className="c37 Button-kDSBcD c3 Button-kDSBcD c4"
+            className="c38 Button-kDSBcD c3 Button-kDSBcD c4"
             onClick={[Function]}
             textColor="#555"
             type="button"
@@ -3851,7 +3875,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 2
               backgroundColor="#f7f7f7"
               borderColor="#ccc"
               boxShadowColor="#ccc"
-              className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
+              className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
               onClick={[Function]}
               textColor="#555"
               type="button"
@@ -3860,13 +3884,13 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 2
                 backgroundColor="#f7f7f7"
                 borderColor="#ccc"
                 boxShadowColor="#ccc"
-                className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
+                className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
                 onClick={[Function]}
                 textColor="#555"
                 type="button"
               >
                 <button
-                  className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
+                  className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
                   onClick={[Function]}
                   type="button"
                 >
@@ -3967,7 +3991,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 3
   margin-right: 7px;
 }
 
-.c37 {
+.c38 {
   font-size: 0.8rem;
   height: 33px;
   border: 1px solid #dbdbdb;
@@ -4268,11 +4292,11 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 3
 }
 
 .c30 {
-  margin: 32px 0;
+  margin: 32px 0 0;
 }
 
 .c29 {
-  padding: 10px 20px 20px 20px;
+  padding: 10px 20px 0 20px;
 }
 
 .c31 {
@@ -4281,6 +4305,11 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 3
   font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
 }
 
+.c37 {
+  margin: 16px 0;
+  font-size: 13px;
+}
+
 .c24 {
   border: none;
   border-bottom: 4px solid transparent;
@@ -5424,6 +5453,13 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 3
                   value={42}
                 />
               </ProgressBar>
+              <SnippetEditorFields__ReplacementVariableExplanation>
+                <p
+                  className="c37"
+                >
+                  Type '%' to add snippet variables, see the "Help" tab on this page to see all available variables.
+                </p>
+              </SnippetEditorFields__ReplacementVariableExplanation>
             </div>
           </SnippetEditorFields__FormSection>
         </section>
@@ -5436,7 +5472,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 3
         backgroundColor="#f7f7f7"
         borderColor="#ccc"
         boxShadowColor="#ccc"
-        className="c37"
+        className="c38"
         onClick={[Function]}
         textColor="#555"
         type="button"
@@ -5445,7 +5481,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 3
           backgroundColor="#f7f7f7"
           borderColor="#ccc"
           boxShadowColor="#ccc"
-          className="c37 Button-kDSBcD c3"
+          className="c38 Button-kDSBcD c3"
           onClick={[Function]}
           textColor="#555"
           type="button"
@@ -5454,7 +5490,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 3
             backgroundColor="#f7f7f7"
             borderColor="#ccc"
             boxShadowColor="#ccc"
-            className="c37 Button-kDSBcD c3 Button-kDSBcD c4"
+            className="c38 Button-kDSBcD c3 Button-kDSBcD c4"
             onClick={[Function]}
             textColor="#555"
             type="button"
@@ -5463,7 +5499,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 3
               backgroundColor="#f7f7f7"
               borderColor="#ccc"
               boxShadowColor="#ccc"
-              className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
+              className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
               onClick={[Function]}
               textColor="#555"
               type="button"
@@ -5472,13 +5508,13 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 3
                 backgroundColor="#f7f7f7"
                 borderColor="#ccc"
                 boxShadowColor="#ccc"
-                className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
+                className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
                 onClick={[Function]}
                 textColor="#555"
                 type="button"
               >
                 <button
-                  className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
+                  className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
                   onClick={[Function]}
                   type="button"
                 >
@@ -5579,7 +5615,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
   margin-right: 7px;
 }
 
-.c37 {
+.c38 {
   font-size: 0.8rem;
   height: 33px;
   border: 1px solid #dbdbdb;
@@ -5880,11 +5916,11 @@ exports[`SnippetEditor closes when calling close() 1`] = `
 }
 
 .c30 {
-  margin: 32px 0;
+  margin: 32px 0 0;
 }
 
 .c29 {
-  padding: 10px 20px 20px 20px;
+  padding: 10px 20px 0 20px;
 }
 
 .c31 {
@@ -5893,6 +5929,11 @@ exports[`SnippetEditor closes when calling close() 1`] = `
   font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
 }
 
+.c37 {
+  margin: 16px 0;
+  font-size: 13px;
+}
+
 .c24 {
   border: none;
   border-bottom: 4px solid transparent;
@@ -7036,6 +7077,13 @@ exports[`SnippetEditor closes when calling close() 1`] = `
                   value={42}
                 />
               </ProgressBar>
+              <SnippetEditorFields__ReplacementVariableExplanation>
+                <p
+                  className="c37"
+                >
+                  Type '%' to add snippet variables, see the "Help" tab on this page to see all available variables.
+                </p>
+              </SnippetEditorFields__ReplacementVariableExplanation>
             </div>
           </SnippetEditorFields__FormSection>
         </section>
@@ -7048,7 +7096,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
         backgroundColor="#f7f7f7"
         borderColor="#ccc"
         boxShadowColor="#ccc"
-        className="c37"
+        className="c38"
         onClick={[Function]}
         textColor="#555"
         type="button"
@@ -7057,7 +7105,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
           backgroundColor="#f7f7f7"
           borderColor="#ccc"
           boxShadowColor="#ccc"
-          className="c37 Button-kDSBcD c3"
+          className="c38 Button-kDSBcD c3"
           onClick={[Function]}
           textColor="#555"
           type="button"
@@ -7066,7 +7114,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
             backgroundColor="#f7f7f7"
             borderColor="#ccc"
             boxShadowColor="#ccc"
-            className="c37 Button-kDSBcD c3 Button-kDSBcD c4"
+            className="c38 Button-kDSBcD c3 Button-kDSBcD c4"
             onClick={[Function]}
             textColor="#555"
             type="button"
@@ -7075,7 +7123,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
               backgroundColor="#f7f7f7"
               borderColor="#ccc"
               boxShadowColor="#ccc"
-              className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
+              className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
               onClick={[Function]}
               textColor="#555"
               type="button"
@@ -7084,13 +7132,13 @@ exports[`SnippetEditor closes when calling close() 1`] = `
                 backgroundColor="#f7f7f7"
                 borderColor="#ccc"
                 boxShadowColor="#ccc"
-                className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
+                className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
                 onClick={[Function]}
                 textColor="#555"
                 type="button"
               >
                 <button
-                  className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
+                  className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
                   onClick={[Function]}
                   type="button"
                 >
@@ -8405,7 +8453,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
   margin-right: 7px;
 }
 
-.c37 {
+.c38 {
   font-size: 0.8rem;
   height: 33px;
   border: 1px solid #dbdbdb;
@@ -8706,11 +8754,11 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
 }
 
 .c30 {
-  margin: 32px 0;
+  margin: 32px 0 0;
 }
 
 .c29 {
-  padding: 10px 20px 20px 20px;
+  padding: 10px 20px 0 20px;
 }
 
 .c31 {
@@ -8719,6 +8767,11 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
   font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
 }
 
+.c37 {
+  margin: 16px 0;
+  font-size: 13px;
+}
+
 .c24 {
   border: none;
   border-bottom: 4px solid transparent;
@@ -9862,6 +9915,13 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
                   value={42}
                 />
               </ProgressBar>
+              <SnippetEditorFields__ReplacementVariableExplanation>
+                <p
+                  className="c37"
+                >
+                  Type '%' to add snippet variables, see the "Help" tab on this page to see all available variables.
+                </p>
+              </SnippetEditorFields__ReplacementVariableExplanation>
             </div>
           </SnippetEditorFields__FormSection>
         </section>
@@ -9874,7 +9934,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
         backgroundColor="#f7f7f7"
         borderColor="#ccc"
         boxShadowColor="#ccc"
-        className="c37"
+        className="c38"
         onClick={[Function]}
         textColor="#555"
         type="button"
@@ -9883,7 +9943,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
           backgroundColor="#f7f7f7"
           borderColor="#ccc"
           boxShadowColor="#ccc"
-          className="c37 Button-kDSBcD c3"
+          className="c38 Button-kDSBcD c3"
           onClick={[Function]}
           textColor="#555"
           type="button"
@@ -9892,7 +9952,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
             backgroundColor="#f7f7f7"
             borderColor="#ccc"
             boxShadowColor="#ccc"
-            className="c37 Button-kDSBcD c3 Button-kDSBcD c4"
+            className="c38 Button-kDSBcD c3 Button-kDSBcD c4"
             onClick={[Function]}
             textColor="#555"
             type="button"
@@ -9901,7 +9961,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
               backgroundColor="#f7f7f7"
               borderColor="#ccc"
               boxShadowColor="#ccc"
-              className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
+              className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
               onClick={[Function]}
               textColor="#555"
               type="button"
@@ -9910,13 +9970,13 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
                 backgroundColor="#f7f7f7"
                 borderColor="#ccc"
                 boxShadowColor="#ccc"
-                className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
+                className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
                 onClick={[Function]}
                 textColor="#555"
                 type="button"
               >
                 <button
-                  className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
+                  className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
                   onClick={[Function]}
                   type="button"
                 >
@@ -10017,7 +10077,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
   margin-right: 7px;
 }
 
-.c37 {
+.c38 {
   font-size: 0.8rem;
   height: 33px;
   border: 1px solid #dbdbdb;
@@ -10318,11 +10378,11 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
 }
 
 .c30 {
-  margin: 32px 0;
+  margin: 32px 0 0;
 }
 
 .c29 {
-  padding: 10px 20px 20px 20px;
+  padding: 10px 20px 0 20px;
 }
 
 .c31 {
@@ -10331,6 +10391,11 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
   font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
 }
 
+.c37 {
+  margin: 16px 0;
+  font-size: 13px;
+}
+
 .c24 {
   border: none;
   border-bottom: 4px solid transparent;
@@ -11474,6 +11539,13 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
                   value={42}
                 />
               </ProgressBar>
+              <SnippetEditorFields__ReplacementVariableExplanation>
+                <p
+                  className="c37"
+                >
+                  Type '%' to add snippet variables, see the "Help" tab on this page to see all available variables.
+                </p>
+              </SnippetEditorFields__ReplacementVariableExplanation>
             </div>
           </SnippetEditorFields__FormSection>
         </section>
@@ -11486,7 +11558,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
         backgroundColor="#f7f7f7"
         borderColor="#ccc"
         boxShadowColor="#ccc"
-        className="c37"
+        className="c38"
         onClick={[Function]}
         textColor="#555"
         type="button"
@@ -11495,7 +11567,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
           backgroundColor="#f7f7f7"
           borderColor="#ccc"
           boxShadowColor="#ccc"
-          className="c37 Button-kDSBcD c3"
+          className="c38 Button-kDSBcD c3"
           onClick={[Function]}
           textColor="#555"
           type="button"
@@ -11504,7 +11576,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
             backgroundColor="#f7f7f7"
             borderColor="#ccc"
             boxShadowColor="#ccc"
-            className="c37 Button-kDSBcD c3 Button-kDSBcD c4"
+            className="c38 Button-kDSBcD c3 Button-kDSBcD c4"
             onClick={[Function]}
             textColor="#555"
             type="button"
@@ -11513,7 +11585,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
               backgroundColor="#f7f7f7"
               borderColor="#ccc"
               boxShadowColor="#ccc"
-              className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
+              className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
               onClick={[Function]}
               textColor="#555"
               type="button"
@@ -11522,13 +11594,13 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
                 backgroundColor="#f7f7f7"
                 borderColor="#ccc"
                 boxShadowColor="#ccc"
-                className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
+                className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
                 onClick={[Function]}
                 textColor="#555"
                 type="button"
               >
                 <button
-                  className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
+                  className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
                   onClick={[Function]}
                   type="button"
                 >
@@ -12872,7 +12944,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
   margin-right: 7px;
 }
 
-.c38 {
+.c39 {
   font-size: 0.8rem;
   height: 33px;
   border: 1px solid #dbdbdb;
@@ -13173,11 +13245,11 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
 }
 
 .c31 {
-  margin: 32px 0;
+  margin: 32px 0 0;
 }
 
 .c30 {
-  padding: 10px 20px 20px 20px;
+  padding: 10px 20px 0 20px;
 }
 
 .c32 {
@@ -13186,6 +13258,11 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
   font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
 }
 
+.c38 {
+  margin: 16px 0;
+  font-size: 13px;
+}
+
 .c25 {
   border: none;
   border-bottom: 4px solid transparent;
@@ -14349,6 +14426,13 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
                   value={42}
                 />
               </ProgressBar>
+              <SnippetEditorFields__ReplacementVariableExplanation>
+                <p
+                  className="c38"
+                >
+                  Type '%' to add snippet variables, see the "Help" tab on this page to see all available variables.
+                </p>
+              </SnippetEditorFields__ReplacementVariableExplanation>
             </div>
           </SnippetEditorFields__FormSection>
         </section>
@@ -14361,7 +14445,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
         backgroundColor="#f7f7f7"
         borderColor="#ccc"
         boxShadowColor="#ccc"
-        className="c38"
+        className="c39"
         onClick={[Function]}
         textColor="#555"
         type="button"
@@ -14370,7 +14454,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
           backgroundColor="#f7f7f7"
           borderColor="#ccc"
           boxShadowColor="#ccc"
-          className="c38 Button-kDSBcD c3"
+          className="c39 Button-kDSBcD c3"
           onClick={[Function]}
           textColor="#555"
           type="button"
@@ -14379,7 +14463,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
             backgroundColor="#f7f7f7"
             borderColor="#ccc"
             boxShadowColor="#ccc"
-            className="c38 Button-kDSBcD c3 Button-kDSBcD c4"
+            className="c39 Button-kDSBcD c3 Button-kDSBcD c4"
             onClick={[Function]}
             textColor="#555"
             type="button"
@@ -14388,7 +14472,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
               backgroundColor="#f7f7f7"
               borderColor="#ccc"
               boxShadowColor="#ccc"
-              className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
+              className="c39 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
               onClick={[Function]}
               textColor="#555"
               type="button"
@@ -14397,13 +14481,13 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
                 backgroundColor="#f7f7f7"
                 borderColor="#ccc"
                 boxShadowColor="#ccc"
-                className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
+                className="c39 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
                 onClick={[Function]}
                 textColor="#555"
                 type="button"
               >
                 <button
-                  className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
+                  className="c39 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
                   onClick={[Function]}
                   type="button"
                 >
@@ -14504,7 +14588,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseOver() is called
   margin-right: 7px;
 }
 
-.c38 {
+.c39 {
   font-size: 0.8rem;
   height: 33px;
   border: 1px solid #dbdbdb;
@@ -14805,11 +14889,11 @@ exports[`SnippetEditor highlights the hovered field when onMouseOver() is called
 }
 
 .c31 {
-  margin: 32px 0;
+  margin: 32px 0 0;
 }
 
 .c30 {
-  padding: 10px 20px 20px 20px;
+  padding: 10px 20px 0 20px;
 }
 
 .c32 {
@@ -14818,6 +14902,11 @@ exports[`SnippetEditor highlights the hovered field when onMouseOver() is called
   font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
 }
 
+.c38 {
+  margin: 16px 0;
+  font-size: 13px;
+}
+
 .c25 {
   border: none;
   border-bottom: 4px solid transparent;
@@ -15981,6 +16070,13 @@ exports[`SnippetEditor highlights the hovered field when onMouseOver() is called
                   value={42}
                 />
               </ProgressBar>
+              <SnippetEditorFields__ReplacementVariableExplanation>
+                <p
+                  className="c38"
+                >
+                  Type '%' to add snippet variables, see the "Help" tab on this page to see all available variables.
+                </p>
+              </SnippetEditorFields__ReplacementVariableExplanation>
             </div>
           </SnippetEditorFields__FormSection>
         </section>
@@ -15993,7 +16089,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseOver() is called
         backgroundColor="#f7f7f7"
         borderColor="#ccc"
         boxShadowColor="#ccc"
-        className="c38"
+        className="c39"
         onClick={[Function]}
         textColor="#555"
         type="button"
@@ -16002,7 +16098,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseOver() is called
           backgroundColor="#f7f7f7"
           borderColor="#ccc"
           boxShadowColor="#ccc"
-          className="c38 Button-kDSBcD c3"
+          className="c39 Button-kDSBcD c3"
           onClick={[Function]}
           textColor="#555"
           type="button"
@@ -16011,7 +16107,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseOver() is called
             backgroundColor="#f7f7f7"
             borderColor="#ccc"
             boxShadowColor="#ccc"
-            className="c38 Button-kDSBcD c3 Button-kDSBcD c4"
+            className="c39 Button-kDSBcD c3 Button-kDSBcD c4"
             onClick={[Function]}
             textColor="#555"
             type="button"
@@ -16020,7 +16116,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseOver() is called
               backgroundColor="#f7f7f7"
               borderColor="#ccc"
               boxShadowColor="#ccc"
-              className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
+              className="c39 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
               onClick={[Function]}
               textColor="#555"
               type="button"
@@ -16029,13 +16125,13 @@ exports[`SnippetEditor highlights the hovered field when onMouseOver() is called
                 backgroundColor="#f7f7f7"
                 borderColor="#ccc"
                 boxShadowColor="#ccc"
-                className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
+                className="c39 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
                 onClick={[Function]}
                 textColor="#555"
                 type="button"
               >
                 <button
-                  className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
+                  className="c39 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
                   onClick={[Function]}
                   type="button"
                 >
@@ -16136,7 +16232,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
   margin-right: 7px;
 }
 
-.c37 {
+.c38 {
   font-size: 0.8rem;
   height: 33px;
   border: 1px solid #dbdbdb;
@@ -16437,11 +16533,11 @@ exports[`SnippetEditor opens when calling open() 1`] = `
 }
 
 .c30 {
-  margin: 32px 0;
+  margin: 32px 0 0;
 }
 
 .c29 {
-  padding: 10px 20px 20px 20px;
+  padding: 10px 20px 0 20px;
 }
 
 .c31 {
@@ -16450,6 +16546,11 @@ exports[`SnippetEditor opens when calling open() 1`] = `
   font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
 }
 
+.c37 {
+  margin: 16px 0;
+  font-size: 13px;
+}
+
 .c24 {
   border: none;
   border-bottom: 4px solid transparent;
@@ -17593,6 +17694,13 @@ exports[`SnippetEditor opens when calling open() 1`] = `
                   value={42}
                 />
               </ProgressBar>
+              <SnippetEditorFields__ReplacementVariableExplanation>
+                <p
+                  className="c37"
+                >
+                  Type '%' to add snippet variables, see the "Help" tab on this page to see all available variables.
+                </p>
+              </SnippetEditorFields__ReplacementVariableExplanation>
             </div>
           </SnippetEditorFields__FormSection>
         </section>
@@ -17605,7 +17713,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
         backgroundColor="#f7f7f7"
         borderColor="#ccc"
         boxShadowColor="#ccc"
-        className="c37"
+        className="c38"
         onClick={[Function]}
         textColor="#555"
         type="button"
@@ -17614,7 +17722,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
           backgroundColor="#f7f7f7"
           borderColor="#ccc"
           boxShadowColor="#ccc"
-          className="c37 Button-kDSBcD c3"
+          className="c38 Button-kDSBcD c3"
           onClick={[Function]}
           textColor="#555"
           type="button"
@@ -17623,7 +17731,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
             backgroundColor="#f7f7f7"
             borderColor="#ccc"
             boxShadowColor="#ccc"
-            className="c37 Button-kDSBcD c3 Button-kDSBcD c4"
+            className="c38 Button-kDSBcD c3 Button-kDSBcD c4"
             onClick={[Function]}
             textColor="#555"
             type="button"
@@ -17632,7 +17740,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
               backgroundColor="#f7f7f7"
               borderColor="#ccc"
               boxShadowColor="#ccc"
-              className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
+              className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
               onClick={[Function]}
               textColor="#555"
               type="button"
@@ -17641,13 +17749,13 @@ exports[`SnippetEditor opens when calling open() 1`] = `
                 backgroundColor="#f7f7f7"
                 borderColor="#ccc"
                 boxShadowColor="#ccc"
-                className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
+                className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
                 onClick={[Function]}
                 textColor="#555"
                 type="button"
               >
                 <button
-                  className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
+                  className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
                   onClick={[Function]}
                   type="button"
                 >
@@ -17748,7 +17856,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
   margin-right: 7px;
 }
 
-.c37 {
+.c38 {
   font-size: 0.8rem;
   height: 33px;
   border: 1px solid #dbdbdb;
@@ -18049,11 +18157,11 @@ exports[`SnippetEditor passes replacement variables to the title and description
 }
 
 .c30 {
-  margin: 32px 0;
+  margin: 32px 0 0;
 }
 
 .c29 {
-  padding: 10px 20px 20px 20px;
+  padding: 10px 20px 0 20px;
 }
 
 .c31 {
@@ -18062,6 +18170,11 @@ exports[`SnippetEditor passes replacement variables to the title and description
   font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
 }
 
+.c37 {
+  margin: 16px 0;
+  font-size: 13px;
+}
+
 .c24 {
   border: none;
   border-bottom: 4px solid transparent;
@@ -19249,6 +19362,13 @@ exports[`SnippetEditor passes replacement variables to the title and description
                   value={42}
                 />
               </ProgressBar>
+              <SnippetEditorFields__ReplacementVariableExplanation>
+                <p
+                  className="c37"
+                >
+                  Type '%' to add snippet variables, see the "Help" tab on this page to see all available variables.
+                </p>
+              </SnippetEditorFields__ReplacementVariableExplanation>
             </div>
           </SnippetEditorFields__FormSection>
         </section>
@@ -19261,7 +19381,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
         backgroundColor="#f7f7f7"
         borderColor="#ccc"
         boxShadowColor="#ccc"
-        className="c37"
+        className="c38"
         onClick={[Function]}
         textColor="#555"
         type="button"
@@ -19270,7 +19390,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
           backgroundColor="#f7f7f7"
           borderColor="#ccc"
           boxShadowColor="#ccc"
-          className="c37 Button-kDSBcD c3"
+          className="c38 Button-kDSBcD c3"
           onClick={[Function]}
           textColor="#555"
           type="button"
@@ -19279,7 +19399,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
             backgroundColor="#f7f7f7"
             borderColor="#ccc"
             boxShadowColor="#ccc"
-            className="c37 Button-kDSBcD c3 Button-kDSBcD c4"
+            className="c38 Button-kDSBcD c3 Button-kDSBcD c4"
             onClick={[Function]}
             textColor="#555"
             type="button"
@@ -19288,7 +19408,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
               backgroundColor="#f7f7f7"
               borderColor="#ccc"
               boxShadowColor="#ccc"
-              className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
+              className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5"
               onClick={[Function]}
               textColor="#555"
               type="button"
@@ -19297,13 +19417,13 @@ exports[`SnippetEditor passes replacement variables to the title and description
                 backgroundColor="#f7f7f7"
                 borderColor="#ccc"
                 boxShadowColor="#ccc"
-                className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
+                className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6"
                 onClick={[Function]}
                 textColor="#555"
                 type="button"
               >
                 <button
-                  className="c37 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
+                  className="c38 Button-kDSBcD c3 Button-kDSBcD c4 Button-kDSBcD c5 Button-kDSBcD c6 c7"
                   onClick={[Function]}
                   type="button"
                 >

From 07403a0d7fe63f0e9e3b42a57959038f76708b7b Mon Sep 17 00:00:00 2001
From: boblinthorst <bob.linthorst@gmail.com>
Date: Thu, 24 May 2018 10:02:17 +0200
Subject: [PATCH 2/3] Changed text at Irene's suggestion

---
 .../Plugin/SnippetEditor/components/SnippetEditorFields.js    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/composites/Plugin/SnippetEditor/components/SnippetEditorFields.js b/composites/Plugin/SnippetEditor/components/SnippetEditorFields.js
index ac52bf12..55c4bd68 100644
--- a/composites/Plugin/SnippetEditor/components/SnippetEditorFields.js
+++ b/composites/Plugin/SnippetEditor/components/SnippetEditorFields.js
@@ -282,8 +282,8 @@ class SnippetEditorFields extends React.Component {
 						progressColor={ this.getProgressColor( descriptionLengthProgress.score ) }
 					/>
 					<ReplacementVariableExplanation>{
-						__( "Type '%' to add snippet variables, " +
-							"see the 'Help' tab on this page to see all available variables.", "yoast-components" )
+						__( "Type '%' to add snippet variables. " +
+							"See the 'Help' tab on this page to see all available variables.", "yoast-components" )
 					}</ReplacementVariableExplanation>
 				</FormSection>
 			</StyledEditor>

From 853425cbb28bdb617122fd28c28194ec3dd87728 Mon Sep 17 00:00:00 2001
From: boblinthorst <bob.linthorst@gmail.com>
Date: Thu, 24 May 2018 11:09:30 +0200
Subject: [PATCH 3/3] Changed it to a prop, and made the string default

---
 .../SnippetEditor/components/SnippetEditor.js      |  3 +++
 .../components/SnippetEditorFields.js              |  9 +++++----
 .../tests/__snapshots__/SnippetEditorTest.js.snap  | 14 ++++++++++++++
 3 files changed, 22 insertions(+), 4 deletions(-)

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 b7695859..c7650a30 100644
--- a/composites/Plugin/SnippetEditor/components/SnippetEditorFields.js
+++ b/composites/Plugin/SnippetEditor/components/SnippetEditorFields.js
@@ -213,6 +213,7 @@ class SnippetEditorFields extends React.Component {
 			activeField,
 			hoveredField,
 			replacementVariables,
+			replacementVariablesExplanation,
 			titleLengthProgress,
 			descriptionLengthProgress,
 			onFocus,
@@ -298,10 +299,7 @@ class SnippetEditorFields extends React.Component {
 						value={ descriptionLengthProgress.actual }
 						progressColor={ this.getProgressColor( descriptionLengthProgress.score ) }
 					/>
-					<ReplacementVariableExplanation>{
-						__( "Type '%' to add snippet variables. " +
-							"See the 'Help' tab on this page to see all available variables.", "yoast-components" )
-					}</ReplacementVariableExplanation>
+					<ReplacementVariableExplanation>{ replacementVariablesExplanation }</ReplacementVariableExplanation>
 				</FormSection>
 			</StyledEditor>
 		);
@@ -340,6 +338,7 @@ SnippetEditorFields.propTypes = {
 	hoveredField: PropTypes.oneOf( [ "title", "slug", "description" ] ),
 	titleLengthProgress: lengthProgressShape,
 	descriptionLengthProgress: lengthProgressShape,
+	replacementVariablesExplanation: PropTypes.string,
 };
 
 SnippetEditorFields.defaultProps = {
@@ -355,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 ea737032..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,
@@ -2021,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,
@@ -3621,6 +3623,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 2
       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,
@@ -5221,6 +5224,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 3
       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,
@@ -6821,6 +6825,7 @@ exports[`SnippetEditor closes when calling close() 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,
@@ -9667,6 +9672,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 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": 361,
@@ -11299,6 +11305,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 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": 100,
@@ -12921,6 +12928,7 @@ exports[`SnippetEditor decodes separator replacement variables in the  1`] = `
           },
         ]
       }
+      replacementVariablesExplanation="Type '%' to add snippet variables. See the 'Help' tab on this page to see all available variables."
       titleLengthProgress={
         Object {
           "actual": 0,
@@ -13236,6 +13244,7 @@ exports[`SnippetEditor doesn't remove the highlight if the wrong field is left 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,
@@ -15806,6 +15815,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
       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,
@@ -17426,6 +17436,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseOver() is called
       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,
@@ -19026,6 +19037,7 @@ exports[`SnippetEditor opens when calling open() 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,
@@ -20648,6 +20660,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
           },
         ]
       }
+      replacementVariablesExplanation="Type '%' to add snippet variables. See the 'Help' tab on this page to see all available variables."
       titleLengthProgress={
         Object {
           "actual": 0,
@@ -21558,6 +21571,7 @@ exports[`SnippetEditor removes the highlight from the hovered field on calling o
       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,