Merge pull request #56 from studiopress/fix/email-same-field

Fix bug with same field name, add more e2e tests

.eslintrc

@@ -53,6 +53,7 @@
         "plugin:jest/all"
       ],
       "rules": {
+        "jest/expect-expect": "off",
         "jest/lowercase-name": [
           "error",
           {

CHANGELOG.md

@@ -1,29 +1,41 @@
 ## Changelog ##
 
-### 1.0.0 - 2020-09-01 ###
+### 1.1.0 - 2020-01-27 ###
 
-Plugin released!
+New, more effortless editor, with undo/redo and separate editor/inspector
 
-* Easily create custom blocks
-* 13 fields to add
-* Simple templating, with PHP files
+* Template and onboarding notices, restore e2e test. [PR 55](https://github.com/studiopress/genesis-custom-blocks/pull/55)
+* Add functionality to the duplicate button. [PR 53](https://github.com/studiopress/genesis-custom-blocks/pull/53)
+* Auto-slug block and field names, make Repeater work. [PR 51](https://github.com/studiopress/genesis-custom-blocks/pull/51)
+* Add fields to the correct location, allow creating new block. [PR 48](https://github.com/studiopress/genesis-custom-blocks/pull/48)
+* Add editor field UI component. [PR 44](https://github.com/studiopress/genesis-custom-blocks/pull/44)
+* Add the 'Block Settings' panel. [PR 43](https://github.com/studiopress/genesis-custom-blocks/pull/43)
+* Edit Block UI: Render block field. [PR 41](https://github.com/studiopress/genesis-custom-blocks/pull/41)
 
-### 1.0.1 - 2020-09-01 ###
+### 1.0.3 - 2020-10-21 ###
 
-Fix an error if Block Lab 1.5.6 is also active
+Allow more text and improve activation experience
 
-* Fixes an error with Block Lab 1.5.6, where it defines functions twice
-* Error does not occur with latest Block Lab
+* Allow fields with a huge amount of text. [PR 39](https://github.com/studiopress/genesis-custom-blocks/pull/39)
+* Ensure that all submenus appear on first installation. [PR 40](https://github.com/studiopress/genesis-custom-blocks/pull/40)
 
 ### 1.0.2 - 2020-09-16 ###
 
 Fix a notice from the Textarea field
 
 * Fixes a notice from the Textarea field having the wrong type. [PR 33](https://github.com/studiopress/genesis-custom-blocks/pull/33)
 
-### 1.0.3 - 2020-10-21 ###
+### 1.0.1 - 2020-09-01 ###
 
-Allow more text and improve activation experience
+Fix an error if Block Lab 1.5.6 is also active
 
-* Allow fields with a huge amount of text. [PR 39](https://github.com/studiopress/genesis-custom-blocks/pull/39)
-* Ensure that all submenus appear on first installation. [PR 40](https://github.com/studiopress/genesis-custom-blocks/pull/40)
+* Fixes an error with Block Lab 1.5.6, where it defines functions twice
+* Error does not occur with latest Block Lab
+
+### 1.0.0 - 2020-09-01 ###
+
+Plugin released!
+
+* Easily create custom blocks
+* 13 fields to add
+* Simple templating, with PHP files

README.md

@@ -3,9 +3,9 @@
 Contributors: lukecarbis, ryankienstra, Stino11, rheinardkorf, studiopress, wpengine
 Tags: gutenberg, blocks, block editor, fields, template
 Requires at least: 5.4
-Tested up to: 5.5
+Tested up to: 5.6
 Requires PHP: 5.6
-Stable tag: 1.0.3
+Stable tag: 1.1.0
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl
 

bin/pre-commit.sh

@@ -13,7 +13,6 @@ fi
 js_files=$( git diff --diff-filter=d --staged --name-only | grep -E '^js\/\S*\.js$' )
 if [ ! -z "$js_files" ]; then
     npm run lint:js:files $js_files
-    npm run test:js $js_files -- --findRelatedTests
     if [ $? != 0 ]; then
         exit 1
     fi

genesis-custom-blocks.php

@@ -8,7 +8,7 @@
  *
  * Plugin Name: Genesis Custom Blocks
  * Description: The easy way to build custom blocks for Gutenberg.
- * Version: 1.1.0-beta-1
+ * Version: 1.1.0
  * Author: Genesis Custom Blocks
  * Author URI: https://studiopress.com
  * License: GPL2

js/src/block-editor/controls/color.js

@@ -1,8 +1,14 @@
+/**
+ * External dependencies
+ */
+import * as React from 'react';
+
 /**
  * WordPress dependencies
  */
 import { BaseControl, TextControl, Popover, ColorIndicator, ColorPicker } from '@wordpress/components';
 import { withState } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
 
 const GcbColorPopover = withState( {
 } )( ( { isVisible, color, onUpdate, setState } ) => {
@@ -19,7 +25,10 @@ const GcbColorPopover = withState( {
 	};
 
 	return (
-		<BaseControl className="genesis-custom-blocks-color-popover">
+		<BaseControl
+			className="genesis-custom-blocks-color-popover"
+			id={ __( 'Color control picker', 'genesis-custom-blocks' ) }
+		>
 			<ColorIndicator
 				colorValue={ color }
 				onMouseDown={ ( event ) => {
@@ -55,13 +64,15 @@ const GcbColorPopover = withState( {
 } );
 
 const GcbColorControl = ( props ) => {
-	const { field, getValue, instanceId, onChange } = props;
+	const { field, getValue, onChange } = props;
 	const initialValue = getValue( props );
 	const value = 'undefined' !== typeof initialValue ? initialValue : field.default;
+	const id = `gcb-color-${ field ? field.name : '' }`;
 
 	return (
-		<BaseControl label={ field.label } id={ `gcb-color-${ instanceId }` } className="genesis-custom-blocks-color-control" help={ field.help }>
+		<BaseControl label={ field.label } id={ id } className="genesis-custom-blocks-color-control" help={ field.help }>
 			<TextControl
+				id={ id }
 				value={ value }
 				onChange={ onChange }
 			/>

js/src/block-editor/controls/range.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import * as React from 'react';
+
 /**
  * WordPress dependencies
  */

js/src/edit-block/components/field-panel.js

@@ -112,14 +112,15 @@ const FieldPanel = ( {
 								if ( isNewField ) {
 									didAutoSlug.current = true;
 									const newName = convertToSlug( event.target.value );
-									changedField.name = newName;
+									const newDeDuplicatedName = changeFieldSettings( fieldToChange, { ...changedField, name: newName } );
+
 									setSelectedField( {
 										...fieldToChange,
-										name: newName,
+										name: newDeDuplicatedName,
 									} );
+								} else {
+									changeFieldSettings( fieldToChange, changedField );
 								}
-
-								changeFieldSettings( fieldToChange, changedField );
 							} }
 							onBlur={ () => {
 								if ( didAutoSlug.current ) {
@@ -139,9 +140,9 @@ const FieldPanel = ( {
 							onChange={ ( event ) => {
 								if ( event.target ) {
 									const changedName = event.target.value;
-									changeFieldSettings( selectedField, { name: changedName } );
+									const deDuplicatedName = changeFieldSettings( selectedField, { name: changedName } );
 
-									const newSelectedField = { name: changedName };
+									const newSelectedField = { name: deDuplicatedName };
 									if ( selectedField.hasOwnProperty( 'parent' ) ) {
 										newSelectedField.parent = selectedField.parent;
 									}
@@ -152,7 +153,7 @@ const FieldPanel = ( {
 						<span className="block italic text-xs mt-1">{ __( 'Single word, no spaces.', 'genesis-custom-blocks' ) }</span>
 					</div>
 					<div className="mt-5">
-						<label className="text-sm" htmlFor="field-control">{ __( 'Field ', 'genesis-custom-blocks' ) }</label>
+						<label className="text-sm" htmlFor="field-control">{ __( 'Field Type', 'genesis-custom-blocks' ) }</label>
 						<select /* eslint-disable-line jsx-a11y/no-onchange */
 							className="flex items-center w-full h-8 rounded-sm border border-gray-600 mt-2 px-2 text-sm"
 							id="field-control"

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

@@ -93,7 +93,7 @@ const Field = ( {
 		<div
 			role="row"
 			className={ className(
-				'field w-full',
+				'relative w-full rounded-sm border border-gray-400 hover:border-black',
 				getWidthClass( field.width )
 			) }
 			key={ `field-item-${ index }` }
@@ -108,7 +108,7 @@ const Field = ( {
 		>
 			<div
 				role="gridcell"
-				className="relative flex flex-col items-center w-full p-4 bg-white border border-gray-400 rounded-sm"
+				className="flex flex-col items-center w-full p-4 bg-white rounded-sm"
 				id={ `field-item-${ index }` }
 			>
 				<div className="flex w-full items-center">

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

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import * as React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Input } from '../';
+
+/**
+ * @typedef {Object} EmailProps The component props.
+ * @property {Object} setting This setting.
+ * @property {string|undefined} value The setting value.
+ * @property {Function} handleOnChange Handles a change in this setting.
+ */
+
+/**
+ * The number component.
+ *
+ * @param {EmailProps} props The component props.
+ * @return {React.ReactElement} The number component.
+ */
+const Email = ( props ) => {
+	return <Input { ...props } type="email" />;
+};
+
+export default Email;

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

@@ -1,4 +1,5 @@
 export { default as Checkbox } from './checkbox';
+export { default as Email } from './email';
 export { default as Location } from './location';
 export { default as NewLineFormat } from './new-line-format';
 export { default as Number } from './number';

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

@@ -36,7 +36,7 @@ const Side = ( {
 
 	return (
 		<div className="side flex-shrink-0 flex flex-col border-l border-gray-300 overflow-scroll">
-			<div className="flex w-full border-b border-gray-300">
+			<div className="flex flex-shrink-0 w-full border-b border-gray-300">
 				<button
 					onClick={ () => setPanelDisplaying( BLOCK_PANEL ) }
 					className={ classNames(

js/src/edit-block/hooks/useField.js

@@ -28,7 +28,7 @@ import { DEFAULT_LOCATION } from '../constants';
  * @property {function(SelectedField):void} deleteField Deletes this field.
  * @property {function(SelectedField):void} duplicateField Duplicates this field.
  * @property {function(SelectedField,string):void} changeControl Changes the control of the field.
- * @property {function(SelectedField,Object):void} changeFieldSettings Changes field settings.
+ * @property {function(SelectedField,Object):string} changeFieldSettings Changes field settings.
  * @property {function(SelectedField):Object} getField Gets the selected field.
  * @property {function(string,string|null):import('../components/editor').Field[]|null} getFieldsForLocation Gets all of the fields for a given location.
  * @property {function(number,number,string,string|null):void} reorderFields Reorders the fields for a given location.
@@ -246,6 +246,7 @@ const useField = () => {
 	 *
 	 * @param {SelectedField} fieldToChange The field to change.
 	 * @param {Object} newSettings The new settings of the field.
+	 * @return {string} The name of the field that was changed.
 	 */
 	const changeFieldSettings = ( fieldToChange, newSettings ) => {
 		const newBlock = { ...block };
@@ -276,12 +277,20 @@ const useField = () => {
 
 		if ( newSettings.hasOwnProperty( 'name' ) ) {
 			if ( hasParent ) {
+				// If the new name already exists like 'foo', append a space like 'foo '.
+				// The block.fields object is keyed by field.name, so it can't have duplicate names.
+				newSettings.name = newBlock.fields[ fieldToChange.parent ].sub_fields[ newSettings.name ]
+					? `${ newSettings.name } `
+					: newSettings.name;
 				newBlock.fields[ fieldToChange.parent ].sub_fields = changeFieldName(
 					newBlock.fields[ fieldToChange.parent ].sub_fields,
 					fieldToChange.name,
 					newSettings.name
 				);
 			} else {
+				newSettings.name = newBlock.fields[ newSettings.name ]
+					? `${ newSettings.name } `
+					: newSettings.name;
 				newBlock.fields = changeFieldName(
 					newBlock.fields,
 					fieldToChange.name,
@@ -291,6 +300,7 @@ const useField = () => {
 		}
 
 		editBlock( newBlock );
+		return newSettings.name;
 	};
 
 	/**

package.json

@@ -1,7 +1,7 @@
 {
   "name": "genesis-custom-blocks",
   "title": "Genesis Custom Blocks",
-  "version": "1.1.0-beta-1",
+  "version": "1.1.0",
   "description": "WordPress plugin with a simple templating system for building custom blocks.",
   "author": "Genesis Custom Blocks",
   "license": "GPL-2.0-or-later",
@@ -100,6 +100,7 @@
     "style-loader": "1.2.1",
     "tailwindcss": "2.0.2",
     "uglifyjs-webpack-plugin": "2.2.0",
+    "uuid": "8.3.2",
     "webpack": "4.44.1",
     "webpack-cli": "3.3.12"
   },
@@ -121,7 +122,7 @@
     "lint:php:fix": "vendor/bin/phpcbf",
     "packages-update": "wp-scripts packages-update",
     "precommit": "./bin/pre-commit.sh",
-    "test:e2e": "wp-scripts test-e2e --config=tests/e2e/jest.config.js --runInBand",
+    "test:e2e": "wp-scripts test-e2e --config=tests/e2e/jest.config.js",
     "test:e2e:interactive": "npm run test:e2e -- --puppeteer-interactive",
     "test:js": "wp-scripts test-unit-js --config=tests/js/jest.config.js",
     "test:js:coverage": "npm run test:js -- --coverage --coverageDirectory=tests/coverage/js",

php/Blocks/Controls/Range.php

@@ -52,7 +52,7 @@ public function register_settings() {
 				'name'     => 'min',
 				'label'    => __( 'Minimum Value', 'genesis-custom-blocks' ),
 				'type'     => 'number',
-				'default'  => '',
+				'default'  => 0,
 				'sanitize' => [ $this, 'sanitize_number' ],
 			]
 		);
@@ -61,7 +61,7 @@ public function register_settings() {
 				'name'     => 'max',
 				'label'    => __( 'Maximum Value', 'genesis-custom-blocks' ),
 				'type'     => 'number',
-				'default'  => '',
+				'default'  => 100,
 				'sanitize' => [ $this, 'sanitize_number' ],
 			]
 		);