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 5fd597d28..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, @@ -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), ];