Merge pull request #974 from Kit/fix-block-keys

Blocks: Fix unique `key` prop warning

Author: n7studios

resources/backend/css/gutenberg.css

@@ -2,7 +2,7 @@
 .components-flex-item button.wp-convertkit-refresh-resources {
 	margin: 24px 0 0 0;
 	padding: 0;
-	height: 32px;
+	height: 40px;
 }
 
 .components-flex-item button.wp-convertkit-refresh-resources span.dashicons {

resources/backend/js/gutenberg-block-form.js

@@ -77,7 +77,7 @@ function convertKitGutenbergFormBlockRenderPreview(block, props) {
 			{
 				className: className.join(' '),
 			},
-			wp.components.SandBox({
+			wp.element.createElement(wp.components.SandBox, {
 				html,
 				title: block.name,
 				styles: [

resources/backend/js/gutenberg.js

@@ -144,6 +144,13 @@ function convertKitGutenbergRegisterBlock(block) {
 				label: field.label,
 				help: field.description,
 				value: props.attributes[attribute],
+
+				// Add __next40pxDefaultSize and __nextHasNoMarginBottom properties,
+				// preventing deprecation notices in the block editor and opt in to the new styles
+				// from 7.0.
+				__next40pxDefaultSize: true,
+				__nextHasNoMarginBottom: true,
+
 				onChange(value) {
 					if (field.type === 'number') {
 						// If value is a blank string i.e. no attribute value was provided,
@@ -229,10 +236,18 @@ function convertKitGutenbergRegisterBlock(block) {
 						[
 							el(
 								FlexItem,
-								{},
+								{
+									key: attribute + '-select',
+								},
 								el(SelectControl, fieldProperties)
 							),
-							el(FlexItem, {}, inlineRefreshButton(props)),
+							el(
+								FlexItem,
+								{
+									key: attribute + '-refresh',
+								},
+								inlineRefreshButton(props)
+							),
 						]
 					);
 
@@ -509,9 +524,15 @@ function convertKitGutenbergRegisterBlock(block) {
 			} else {
 				// Refresh button enabled; display the notice, link and button.
 				elements = [
-					!block.has_access_token
-						? block.no_access_token.notice
-						: block.no_resources.notice,
+					el(
+						'div',
+						{
+							key: props.clientId + '-notice',
+						},
+						!block.has_access_token
+							? block.no_access_token.notice
+							: block.no_resources.notice
+					),
 					noticeLink(props, setButtonDisabled),
 					refreshButton(props, buttonDisabled, setButtonDisabled),
 				];