Display the help text in the TextareaArray setting

.circleci/config.yml

@@ -108,7 +108,7 @@ jobs:
           node-version: lts
       - nodegit-workaround
       - set-up-packages
-      - run: npm run env start && npm run test:e2e
+      - run: npm run wp-env start && npm run test:e2e
 
   svn-deploy:
     executor:

js/src/edit-block/components/editor.js

@@ -74,6 +74,16 @@ import {
  * @property {string} [width] The width, like '25'.
  */
 
+/**
+ * @typedef {Object} Setting A field setting.
+ * @see PHP class Genesis\CustomBlocks\Blocks\Controls\ControlSetting
+ * @property {string} name The name of the setting.
+ * @property {string} label The label of the setting to display in the GCB editor.
+ * @property {string} help A help value that display in the GCB editor.
+ * @property {string} type The setting type, like 'width' or 'text', not a data type like boolean.
+ * @property {*} default The default value.
+ */
+
 /**
  * The editor component.
  *

js/src/edit-block/components/input.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 /**
  * @typedef {Object} InputProps The component props.
  * @property {Function} handleOnChange Handles a change in this setting.
- * @property {Object} setting This setting.
+ * @property {import('./editor').Setting} setting This setting.
  * @property {string} type The type of <input>, like 'text'.
  * @property {string|undefined} value The setting value.
  * @property {number} [min] The min attribute of an input[type="number"].

js/src/edit-block/components/select.js

@@ -8,7 +8,7 @@ import * as React from 'react';
  * @property {Function} handleOnChange Handles a change in this setting.
  * @property {string} id The id attribute.
  * @property {Array} options The options, including their label and value.
- * @property {Object} setting This setting.
+ * @property {import('./editor').Setting} setting This setting.
  * @property {string|undefined} value The setting value.
  */
 

js/src/edit-block/components/settings/checkbox.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 /**
  * @typedef {Object} CheckboxProps The component props.
  * @property {Function} handleOnChange Handles a change in this setting.
- * @property {Object} setting This setting.
+ * @property {import('../editor').Setting} setting This setting.
  * @property {boolean|undefined} value The setting value.
  */
 

js/src/edit-block/components/settings/email.js

@@ -10,7 +10,7 @@ import { Input } from '../';
 
 /**
  * @typedef {Object} EmailProps The component props.
- * @property {Object} setting This setting.
+ * @property {import('../editor').Setting} setting This setting.
  * @property {string|undefined} value The setting value.
  * @property {Function} handleOnChange Handles a change in this setting.
  */

js/src/edit-block/components/settings/location.js

@@ -11,7 +11,7 @@ import { LOCATIONS_WITH_LABEL, LOCATIONS } from '../../constants';
 
 /**
  * @typedef {Object} LocationProps The component props.
- * @property {Object} setting This setting.
+ * @property {import('../editor').Setting} setting This setting.
  * @property {string|undefined} value The setting value.
  * @property {Function} handleOnChange Handles a change to this setting.
  * @property {Function} setCurrentLocation Sets the selected location, like 'editor'.

js/src/edit-block/components/settings/new-line-format.js

@@ -15,7 +15,7 @@ import { Select } from '../';
 
 /**
  * @typedef {Object} NewLineFormatProps The component props.
- * @property {Object} setting This setting.
+ * @property {import('../editor').Setting} setting This setting.
  * @property {string|undefined} value The setting value.
  * @property {Function} handleOnChange Handles a change to this setting.
  */

js/src/edit-block/components/settings/number-non-negative.js

@@ -10,7 +10,7 @@ import { Input } from '../';
 
 /**
  * @typedef {Object} NumberNonNegativeProps The component props.
- * @property {Object} setting This setting.
+ * @property {import('../editor').Setting} setting This setting.
  * @property {string|undefined} value The setting value.
  * @property {Function} handleOnChange Handles a change in this setting.
  */

js/src/edit-block/components/settings/number.js

@@ -10,7 +10,7 @@ import { Input } from '../';
 
 /**
  * @typedef {Object} NumberProps The component props.
- * @property {Object} setting This setting.
+ * @property {import('../editor').Setting} setting This setting.
  * @property {string|undefined} value The setting value.
  * @property {Function} handleOnChange Handles a change in this setting.
  */

js/src/edit-block/components/settings/text.js

@@ -10,7 +10,7 @@ import { Input } from '../';
 
 /**
  * @typedef {Object} TextProps The component props.
- * @property {Object} setting This setting.
+ * @property {import('../editor').Setting} setting This setting.
  * @property {string|undefined} value The setting value.
  * @property {Function} handleOnChange Handles a change in this setting.
  */

js/src/edit-block/components/settings/textarea-array.js

@@ -3,6 +3,11 @@
  */
 import * as React from 'react';
 
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -11,7 +16,7 @@ import { convertSettingsStringToArray, convertSettingsArrayToString } from '../.
 /**
  * @typedef {Object} TextareaArrayProps The component props.
  * @property {Function} handleOnChange Handles a change in this setting.
- * @property {Object} setting This setting.
+ * @property {import('../editor').Setting} setting This setting.
  * @property {Array|undefined} value The setting value.
  */
 
@@ -25,6 +30,7 @@ const TextareaArray = ( { handleOnChange, setting, value } ) => {
 	const id = `setting-textarea-array-${ setting.name }`;
 	const stringValue = convertSettingsArrayToString( value );
 	const textAreaValue = undefined === stringValue ? setting.default : stringValue;
+	const helpClass = 'block italic text-xs mt-1';
 
 	return (
 		<>
@@ -40,6 +46,28 @@ const TextareaArray = ( { handleOnChange, setting, value } ) => {
 				} }
 				value={ textAreaValue }
 			/>
+			{ Boolean( setting.help )
+				? (
+					<p className={ helpClass }>
+						{ setting.help }
+					</p>
+				) : (
+					<>
+						<p className={ helpClass }>
+							{ __(
+								'Each choice on a new line. To specify the value and label separately, use this format:',
+								'genesis-custom-blocks'
+							) }
+						</p>
+						<p className={ helpClass }>
+							foo : Foo
+						</p>
+						<p className={ helpClass }>
+							bar : Bar
+						</p>
+					</>
+				)
+			}
 		</>
 	);
 };

js/src/edit-block/components/settings/textarea.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 /**
  * @typedef {Object} TextareaProps The component props.
  * @property {Function} handleOnChange Handles a change in this setting.
- * @property {Object} setting This setting.
+ * @property {import('../editor').Setting} setting This setting.
  * @property {string|undefined} value The setting value.
  */
 

js/src/edit-block/components/settings/width.js

@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 
 /**
  * @typedef {Object} WidthProps The component props.
- * @property {Object} setting This setting.
+ * @property {import('../editor').Setting} setting This setting.
  * @property {string|undefined} value The setting value.
  * @property {Function} handleOnChange Handles a change in this setting.
  */

js/src/edit-block/helpers/getSettingsComponent.js

@@ -17,7 +17,7 @@ import { snakeCaseToPascalCase } from '../../common/helpers';
 /**
  * @typedef {Object} SettingsComponentProps The component props.
  * @property {Function} handleOnChange Handles a change in this setting.
- * @property {Object} setting This setting.
+ * @property {import('../editor').Setting} setting This setting.
  * @property {boolean|undefined} value The setting value.
  * @property {Function} setCurrentLocation Sets the current location, like 'editor'.
  */

js/src/edit-block/helpers/getSettingsDefaults.js

@@ -1,16 +1,3 @@
-/**
- * @typedef {Object} Setting A field setting.
- * @see PHP class Genesis\CustomBlocks\Blocks\Controls\ControlSetting
- * @property {string} name Setting name (slug).
- * @property {string} label Setting label.
- * @property {string} type Setting type, not a data type like 'object'.
- * @property {*} default Setting default value.
- * @property {string} help Setting help text for the editor.
- * @property {*} sanitize To sanitize the setting value.
- * @property {*} validate To validate the value.
- * @property {*} value The current value.
- */
-
 /**
  * Gets the settings defaults for a given control.
  *
@@ -31,7 +18,7 @@ const getSettingsDefaults = ( controlName, controls ) => {
 	return controls[ controlName ].settings.reduce(
 		/**
 		 * @param {Object} accumulator The reducer's accumulator.
-		 * @param {Setting} setting The field setting.
+		 * @param {import('../components/editor').Setting} setting The field setting.
 		 * @return {Object} Key/value pairs of a setting name to its default value.
 		 */
 		( accumulator, setting ) => ( {

package.json

@@ -108,7 +108,7 @@
     "check-licenses": "wp-scripts check-licenses --prod --gpl2",
     "build": "wp-scripts build",
     "dev": "wp-scripts start",
-    "env": "wp-env",
+    "wp-env": "wp-env",
     "gulp": "gulp",
     "lint": "npm-run-all --parallel lint:*",
     "lint:css": "wp-scripts lint-style '**/*.scss'",

php/Blocks/Controls/Multiselect.php

@@ -53,13 +53,7 @@ public function register_settings() {
 				'label'    => __( 'Choices', 'genesis-custom-blocks' ),
 				'type'     => 'textarea_array',
 				'default'  => '',
-				'help'     => sprintf(
-					'%s %s<br />%s<br />%s',
-					__( 'Enter each choice on a new line.', 'genesis-custom-blocks' ),
-					__( 'To specify the value and label separately, use this format:', 'genesis-custom-blocks' ),
-					_x( 'foo : Foo', 'Format for the menu values. option_value : Option Name', 'genesis-custom-blocks' ),
-					_x( 'bar : Bar', 'Format for the menu values. option_value : Option Name', 'genesis-custom-blocks' )
-				),
+				'help'     => '',
 				'sanitize' => [ $this, 'sanitize_textarea_assoc_array' ],
 			]
 		);
@@ -69,7 +63,7 @@ public function register_settings() {
 				'label'    => __( 'Default Value', 'genesis-custom-blocks' ),
 				'type'     => 'textarea_array',
 				'default'  => '',
-				'help'     => __( 'Enter each default value on a new line.', 'genesis-custom-blocks' ),
+				'help'     => __( 'Each default value on a new line.', 'genesis-custom-blocks' ),
 				'sanitize' => [ $this, 'sanitize_textarea_array' ],
 				'validate' => [ $this, 'validate_options' ],
 			]

php/Blocks/Controls/Radio.php

@@ -46,13 +46,7 @@ public function register_settings() {
 				'label'    => __( 'Choices', 'genesis-custom-blocks' ),
 				'type'     => 'textarea_array',
 				'default'  => '',
-				'help'     => sprintf(
-					'%s %s<br />%s<br />%s',
-					__( 'Enter each choice on a new line.', 'genesis-custom-blocks' ),
-					__( 'To specify the value and label separately, use this format:', 'genesis-custom-blocks' ),
-					_x( 'foo : Foo', 'Format for the menu values. option_value : Option Name', 'genesis-custom-blocks' ),
-					_x( 'bar : Bar', 'Format for the menu values. option_value : Option Name', 'genesis-custom-blocks' )
-				),
+				'help'     => '',
 				'sanitize' => [ $this, 'sanitize_textarea_assoc_array' ],
 			]
 		);

php/Blocks/Controls/Select.php

@@ -46,13 +46,7 @@ public function register_settings() {
 				'label'    => __( 'Choices', 'genesis-custom-blocks' ),
 				'type'     => 'textarea_array',
 				'default'  => '',
-				'help'     => sprintf(
-					'%s %s<br />%s<br />%s',
-					__( 'Enter each choice on a new line.', 'genesis-custom-blocks' ),
-					__( 'To specify the value and label separately, use this format:', 'genesis-custom-blocks' ),
-					_x( 'foo : Foo', 'Format for the menu values. option_value : Option Name', 'genesis-custom-blocks' ),
-					_x( 'bar : Bar', 'Format for the menu values. option_value : Option Name', 'genesis-custom-blocks' )
-				),
+				'help'     => '',
 				'sanitize' => [ $this, 'sanitize_textarea_assoc_array' ],
 			]
 		);

tests/php/Unit/Blocks/Controls/TestMultiselect.php

@@ -85,7 +85,7 @@ public function test_register_settings() {
 				'label'    => 'Choices',
 				'type'     => 'textarea_array',
 				'default'  => '',
-				'help'     => 'Enter each choice on a new line. To specify the value and label separately, use this format:<br />foo : Foo<br />bar : Bar',
+				'help'     => '',
 				'sanitize' => [ $this->instance, 'sanitize_textarea_assoc_array' ],
 				'validate' => '',
 				'value'    => null,
@@ -95,7 +95,7 @@ public function test_register_settings() {
 				'label'    => 'Default Value',
 				'type'     => 'textarea_array',
 				'default'  => '',
-				'help'     => 'Enter each default value on a new line.',
+				'help'     => 'Each default value on a new line.',
 				'sanitize' => [ $this->instance, 'sanitize_textarea_array' ],
 				'validate' => [ $this->instance, 'validate_options' ],
 				'value'    => null,

tests/php/Unit/Blocks/Controls/TestRadio.php

@@ -85,7 +85,7 @@ public function test_register_settings() {
 				'label'    => 'Choices',
 				'type'     => 'textarea_array',
 				'default'  => '',
-				'help'     => 'Enter each choice on a new line. To specify the value and label separately, use this format:<br />foo : Foo<br />bar : Bar',
+				'help'     => '',
 				'sanitize' => [ $this->instance, 'sanitize_textarea_assoc_array' ],
 				'validate' => '',
 				'value'    => null,

tests/php/Unit/Blocks/Controls/TestSelect.php

@@ -85,7 +85,7 @@ public function test_register_settings() {
 				'label'    => 'Choices',
 				'type'     => 'textarea_array',
 				'default'  => '',
-				'help'     => 'Enter each choice on a new line. To specify the value and label separately, use this format:<br />foo : Foo<br />bar : Bar',
+				'help'     => '',
 				'sanitize' => [ $this->instance, 'sanitize_textarea_assoc_array' ],
 				'validate' => '',
 				'value'    => null,