Merge branch 'main' into block-editor-preview-refactor

Author: n7studios

includes/blocks/class-convertkit-block-form.php

@@ -187,6 +187,9 @@ public function get_attributes() {
 			),
 
 			// get_supports() style, color and typography attributes.
+			'align'                => array(
+				'type' => 'string',
+			),
 			'style'                => array(
 				'type' => 'object',
 			),
@@ -213,6 +216,7 @@ public function get_attributes() {
 	public function get_supports() {
 
 		return array(
+			'align'     => true,
 			'className' => true,
 			'color'     => array(
 				'link'       => false,

includes/blocks/form/block.json

@@ -23,6 +23,7 @@
         }
     },
     "supports": {
+        "align": true,
         "className": true,
         "color": {
             "link": false,

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

@@ -67,7 +67,7 @@ function convertKitGutenbergFormBlockRenderPreview( block, props ) {
 					html: html,
 					title: block.name,
 					styles: [
-					'body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; text-align:center;}',
+					'body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; text-align:center;} form{margin: 0 auto;}',
 					],
 				}
 			)

tests/EndToEnd/forms/blocks-shortcodes/PageBlockFormCest.php

@@ -1318,6 +1318,56 @@ public function testFormBlockWithMarginAndPaddingParameters(EndToEndTester $I)
 		$I->seeInSource('<div class="convertkit-form wp-block-convertkit-form" style="padding-top:var(--wp--preset--spacing--30);margin-top:var(--wp--preset--spacing--30)"');
 	}
 
+	/**
+	 * Test the Form block's alignment parameter works.
+	 *
+	 * @since   2.8.8
+	 *
+	 * @param   EndToEndTester $I  Tester.
+	 */
+	public function testFormBlockWithAlignmentParameter(EndToEndTester $I)
+	{
+		// Setup Plugin and enable debug log.
+		$I->setupKitPlugin($I);
+		$I->setupKitPluginResources($I);
+
+		// It's tricky to interact with Gutenberg's margin and padding pickers, so we programmatically create the Page
+		// instead to then confirm the settings apply on the output.
+		// We don't need to test the margin and padding pickers themselves, as they are Gutenberg supplied components, and our
+		// other End To End tests confirm that the block can be added in Gutenberg etc.
+		$pageID = $I->havePostInDatabase(
+			[
+				'post_type'    => 'page',
+				'post_name'    => 'kit-page-form-block-alignment-param',
+				'post_content' => '<!-- wp:convertkit/form {"form":"' . $_ENV['CONVERTKIT_API_FORM_ID'] . '","align":"right"} /-->',
+				'meta_input'   => [
+					// Configure Kit Plugin to not display a default Form.
+					'_wp_convertkit_post_meta' => [
+						'form'         => '0',
+						'landing_page' => '',
+						'tag'          => '',
+					],
+				],
+			]
+		);
+
+		// Load the Page on the frontend site.
+		$I->amOnPage('?p=' . $pageID);
+
+		// Wait for frontend web site to load.
+		$I->waitForElementVisible('body.page-template-default');
+
+		// Check that no PHP warnings or notices were output.
+		$I->checkNoWarningsAndNoticesOnScreen($I);
+
+		// Confirm that one Kit Form is output in the DOM.
+		// This confirms that there is only one script on the page for this form, which renders the form.
+		$I->seeFormOutput($I, $_ENV['CONVERTKIT_API_FORM_ID']);
+
+		// Confirm that the chosen alignment is applied as a CSS class.
+		$I->seeInSource('<div class="convertkit-form alignright wp-block-convertkit-form"');
+	}
+
 	/**
 	 * Deactivate and reset Plugin(s) after each test, if the test passes.
 	 * We don't use _after, as this would provide a screenshot of the Plugin