Update subscription form block to declare compatibility with api v3

This allows the Block editor to run in iframe mode.
The iframe mode is more performant and expected in QIT tests.

mailpoet/assets/js/src/post-editor-block/subscription-form/edit.jsx

@@ -4,12 +4,13 @@ import { Icon } from './icon.jsx';
 
 const wp = window.wp;
 const { Placeholder, PanelBody } = wp.components;
-const { BlockIcon, InspectorControls } = wp.blockEditor;
+const { BlockIcon, InspectorControls, useBlockProps } = wp.blockEditor;
 const ServerSideRender = wp.serverSideRender;
 
 const allForms = window.mailpoet_forms;
 
 function Edit({ attributes, setAttributes }) {
+  const blockProps = useBlockProps();
   function displayFormsSelect() {
     if (!Array.isArray(allForms)) return null;
     if (allForms.length === 0) return null;
@@ -27,7 +28,7 @@ function Edit({ attributes, setAttributes }) {
           {window.locale.selectForm}
         </option>
         {allForms.map((form) => (
-          <option value={form.id}>
+          <option value={form.id} key={`form-${form.id}`}>
             {form.name +
               (form.status === 'disabled'
                 ? ` (${window.locale.inactive})`
@@ -63,7 +64,7 @@ function Edit({ attributes, setAttributes }) {
   }
 
   return (
-    <>
+    <div {...blockProps}>
       <InspectorControls>
         <PanelBody title="MailPoet Subscription Form" initialOpen>
           {selectFormSettings()}
@@ -81,7 +82,7 @@ function Edit({ attributes, setAttributes }) {
         )}
         {attributes.formId !== null && renderForm()}
       </div>
-    </>
+    </div>
   );
 }
 

mailpoet/assets/js/src/post-editor-block/subscription-form/form-block.jsx

@@ -6,6 +6,7 @@ const { registerBlockType } = wp.blocks;
 
 registerBlockType('mailpoet/subscription-form-block-render', {
   title: window.locale.subscriptionForm,
+  apiVersion: 3,
   attributes: {
     formId: {
       type: 'number',
@@ -19,6 +20,7 @@ registerBlockType('mailpoet/subscription-form-block-render', {
 
 registerBlockType('mailpoet/subscription-form-block', {
   title: window.locale.subscriptionForm,
+  apiVersion: 3,
   icon: Icon,
   category: 'widgets',
   example: {},

mailpoet/tests/acceptance/Forms/GutenbergFormBlockCest.php

@@ -122,22 +122,22 @@ class GutenbergFormBlockCest {
     $i->amEditingPostWithId($postId);
     $this->closeDialog($i);
     $i->waitForText('My Gutenberg form');
+    $i->switchToIframe('iframe[name="editor-canvas"]');
     $i->click('[aria-label="Add title"]');
     $i->click('[aria-label="Add block"]');
+    $i->switchToIFrame();
     $i->fillField('[placeholder="Search"]', 'MailPoet Subscription Form');
     $i->waitForElement(Locator::contains('button', 'MailPoet Subscription Form'));
     $i->click(Locator::contains('button', 'MailPoet Subscription Form'));
+    $i->switchToIframe('iframe[name="editor-canvas"]');
     $i->waitForElement('[aria-label="Block: MailPoet Subscription Form"]');
     $i->selectOption('.mailpoet-block-create-forms-list', 'Acceptance Test Block Form');
     $i->waitForElementVisible('[data-automation-id="form_email"]');
     $i->waitForElementVisible('[data-automation-id="form_first_name"]');
     $i->waitForElementVisible('[data-automation-id="form_last_name"]');
-    // From WP 6.6 the button label is Save
-    if (version_compare($i->getWordPressVersion(), '6.6', '<')) {
-      $i->click('Update');
-    } else {
-      $i->click('Save');
-    }
+    $i->switchToIFrame();
+    $i->click('Save');
+
     $i->waitForText('Post updated.');
 
     $i->wantTo('Verify the added form on the front-end');