diff --git a/resources/backend/css/gutenberg.css b/resources/backend/css/gutenberg.css
index aab86edfa..fb2df6d06 100644
--- a/resources/backend/css/gutenberg.css
+++ b/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 {
diff --git a/resources/backend/js/gutenberg-block-form.js b/resources/backend/js/gutenberg-block-form.js
index 4b89b3e66..2601439c6 100644
--- a/resources/backend/js/gutenberg-block-form.js
+++ b/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: [
diff --git a/resources/backend/js/gutenberg.js b/resources/backend/js/gutenberg.js
index d14b81bf4..5790051b4 100644
--- a/resources/backend/js/gutenberg.js
+++ b/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,