diff --git a/includes/blocks/broadcasts/block.json b/includes/blocks/broadcasts/block.json index df0b5217e..966fdea87 100644 --- a/includes/blocks/broadcasts/block.json +++ b/includes/blocks/broadcasts/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 1, + "apiVersion": 2, "name": "convertkit/broadcasts", "title": "Kit Broadcasts", "category": "kit", diff --git a/includes/blocks/form-builder-field-custom/block.json b/includes/blocks/form-builder-field-custom/block.json index f474b6c33..17e329ccd 100644 --- a/includes/blocks/form-builder-field-custom/block.json +++ b/includes/blocks/form-builder-field-custom/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 1, + "apiVersion": 2, "name": "convertkit/form-builder-field-custom", "title": "Kit Form Builder: Custom Field", "category": "kit", diff --git a/includes/blocks/form-builder-field-email/block.json b/includes/blocks/form-builder-field-email/block.json index 0f63ef98b..837c06cb3 100644 --- a/includes/blocks/form-builder-field-email/block.json +++ b/includes/blocks/form-builder-field-email/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 1, + "apiVersion": 2, "name": "convertkit/form-builder-field-email", "title": "Kit Form Builder: Email Field", "category": "kit", diff --git a/includes/blocks/form-builder-field-name/block.json b/includes/blocks/form-builder-field-name/block.json index 58a7b2d15..8e3d5f212 100644 --- a/includes/blocks/form-builder-field-name/block.json +++ b/includes/blocks/form-builder-field-name/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 1, + "apiVersion": 2, "name": "convertkit/form-builder-field-name", "title": "Kit Form Builder: Name Field", "category": "kit", diff --git a/includes/blocks/form-builder/block.json b/includes/blocks/form-builder/block.json index f8e60ea92..204b305b9 100644 --- a/includes/blocks/form-builder/block.json +++ b/includes/blocks/form-builder/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 1, + "apiVersion": 2, "name": "convertkit/form-builder", "title": "Kit Form Builder", "category": "kit", diff --git a/includes/blocks/form/block.json b/includes/blocks/form/block.json index 312dc2de5..8b677bb10 100644 --- a/includes/blocks/form/block.json +++ b/includes/blocks/form/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 1, + "apiVersion": 2, "name": "convertkit/form", "title": "Kit Form", "category": "kit", diff --git a/includes/blocks/formtrigger/block.json b/includes/blocks/formtrigger/block.json index 3dba03250..fa7158caa 100644 --- a/includes/blocks/formtrigger/block.json +++ b/includes/blocks/formtrigger/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 1, + "apiVersion": 2, "name": "convertkit/formtrigger", "title": "Kit Form Trigger", "category": "kit", diff --git a/includes/blocks/product/block.json b/includes/blocks/product/block.json index 534a3123d..cdf8e35e9 100644 --- a/includes/blocks/product/block.json +++ b/includes/blocks/product/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 1, + "apiVersion": 2, "name": "convertkit/product", "title": "Kit Product", "category": "kit", diff --git a/resources/backend/js/gutenberg.js b/resources/backend/js/gutenberg.js index 5790051b4..ed05041dc 100644 --- a/resources/backend/js/gutenberg.js +++ b/resources/backend/js/gutenberg.js @@ -41,8 +41,8 @@ function convertKitGutenbergRegisterBlock(block) { // Define some constants for the various items we'll use. const el = element.createElement; const { registerBlockType } = blocks; - const { InspectorControls, InnerBlocks } = editor; - const { Fragment, useState } = element; + const { InspectorControls, InnerBlocks, useBlockProps } = editor; + const { useState } = element; const { Button, Icon, @@ -364,14 +364,19 @@ function convertKitGutenbergRegisterBlock(block) { * @param {Object} props Block properties. * @return {Object} Block settings sidebar elements. */ - const editBlock = function (props) { + const EditBlock = function (props) { + const blockProps = useBlockProps(); + + console.log(props); + console.log(blockProps); + // If requesting an example of how this block looks (which is requested // when the user adds a new block and hovers over this block's icon), // show the preview image. if (props.attributes.is_gutenberg_example === true) { - return ( - Fragment, - {}, + return el( + 'div', + blockProps, el('img', { src: block.gutenberg_example_image, }) @@ -381,7 +386,7 @@ function convertKitGutenbergRegisterBlock(block) { // If no access token has been defined in the Plugin, or no resources exist in Kit // for this block, show a message in the block to tell the user what to do. if (!block.has_access_token || !block.has_resources) { - return DisplayNoticeWithLink(props); + return DisplayNoticeWithLink(props, blockProps); } // Build Inspector Control Panels, which will appear in the Sidebar when editing the Block. @@ -401,7 +406,11 @@ function convertKitGutenbergRegisterBlock(block) { block, props ); - return editBlockWithPanelsAndPreview(panels, preview); + return editBlockWithPanelsAndPreview( + panels, + preview, + blockProps + ); } // If no settings have been defined for this block, render the block with a notice @@ -416,7 +425,11 @@ function convertKitGutenbergRegisterBlock(block) { block.name, block.gutenberg_help_description ); - return editBlockWithPanelsAndPreview(panels, preview); + return editBlockWithPanelsAndPreview( + panels, + preview, + blockProps + ); } // If no render_callback is defined, render the block. @@ -443,7 +456,11 @@ function convertKitGutenbergRegisterBlock(block) { template, }) ); - return editBlockWithPanelsAndPreview(panels, preview); + return editBlockWithPanelsAndPreview( + panels, + preview, + blockProps + ); } // Use the block's PHP's render() function by calling the ServerSideRender component. @@ -455,7 +472,7 @@ function convertKitGutenbergRegisterBlock(block) { // apply styles with i.e. convertkit-block.name. className: 'convertkit-ssr-' + block.name, }); - return editBlockWithPanelsAndPreview(panels, preview); + return editBlockWithPanelsAndPreview(panels, preview, blockProps); }; /** @@ -464,19 +481,20 @@ function convertKitGutenbergRegisterBlock(block) { * * @since 3.0.0 * - * @param {Object} panels Block panels. - * @param {Object} preview Block preview. - * @return {Object} Block settings sidebar elements. + * @param {Object} panels Block panels. + * @param {Object} preview Block preview. + * @param {Object} blockProps Block properties. + * @return {Object} Block settings sidebar elements. */ - const editBlockWithPanelsAndPreview = function (panels, preview) { - return el( - // Sidebar Panel with Fields. - Fragment, - {}, + const editBlockWithPanelsAndPreview = function ( + panels, + preview, + blockProps + ) { + return el('div', blockProps, [ el(InspectorControls, {}, panels), - // Block Preview. - preview - ); + preview, + ]); }; /** @@ -488,7 +506,10 @@ function convertKitGutenbergRegisterBlock(block) { */ const saveBlock = function () { if (typeof block.gutenberg_template !== 'undefined') { - return el('div', {}, el(InnerBlocks.Content)); + // Use useBlockProps.save() to preserve styling classes and attributes + // from block supports (colors, typography, spacing, etc.) + const blockProps = useBlockProps.save(); + return el('div', blockProps, el(InnerBlocks.Content)); } // Deliberate; preview in the editor is determined by the return statement in `edit` above. @@ -504,10 +525,11 @@ function convertKitGutenbergRegisterBlock(block) { * * @since 2.2.5 * - * @param {Object} props Block properties. - * @return {Object} Notice. + * @param {Object} props Block properties. + * @param {Object} blockProps Block properties. + * @return {Object} Notice. */ - const DisplayNoticeWithLink = function (props) { + const DisplayNoticeWithLink = function (props, blockProps) { // useState to toggle the refresh button's disabled state. const [buttonDisabled, setButtonDisabled] = useState(false); @@ -541,13 +563,19 @@ function convertKitGutenbergRegisterBlock(block) { // Return the element. return el( 'div', - { - // convertkit-no-content class allows resources/backend/css/gutenberg.css - // to apply styling/branding to the block. - className: - 'convertkit-' + block.name + ' convertkit-no-content', - }, - elements + blockProps, + el( + 'div', + { + // convertkit-no-content class allows resources/backend/css/gutenberg.css + // to apply styling/branding to the block. + className: + 'convertkit-' + + block.name + + ' convertkit-no-content', + }, + elements + ) ); }; @@ -851,7 +879,7 @@ function convertKitGutenbergRegisterBlock(block) { }, // Editor. - edit: editBlock, + edit: EditBlock, // Output. save: saveBlock, diff --git a/tests/Support/Helper/WPGutenberg.php b/tests/Support/Helper/WPGutenberg.php index fd5781988..21b631fd1 100644 --- a/tests/Support/Helper/WPGutenberg.php +++ b/tests/Support/Helper/WPGutenberg.php @@ -11,11 +11,13 @@ class WPGutenberg extends \Codeception\Module { /** * Helper method to switch to the Gutenberg editor Iframe. - * Use this method if all blocks use the Block API v3, - * as this means Gutenberg will be served in an Iframe. - * At present, we use v2 to provide backwards compatibility - * down to WordPress 5.6: - * https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/ + * Use this method if all blocks use the block editor apiVersion 3, + * as this means the block editor will be served in an Iframe. + * + * Any blocks using apiVersion 2 or lower will result in the block editor + * *not* being served in an Iframe + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/ * * @since 2.7.7 *