Blocks: Add Margin and Padding Support

includes/blocks/broadcasts/block.json

@@ -61,6 +61,10 @@
             "link": true,
             "background": true,
             "text": true
+        },
+        "spacing": {
+            "margin": true,
+            "padding": true
         }
     },
     "editorScript": "convertkit-gutenberg"

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

@@ -262,6 +262,10 @@ public function get_supports() {
 				'background' => true,
 				'text'       => true,
 			),
+			'spacing'   => array(
+				'margin'  => true,
+				'padding' => true,
+			),
 		);
 
 	}

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

@@ -228,10 +228,8 @@ public function get_supports() {
 				'fontSize' => true,
 			),
 			'spacing'    => array(
-				'padding' => array(
-					'horizontal',
-					'vertical',
-				),
+				'margin'  => true,
+				'padding' => true,
 			),
 		);
 

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

@@ -250,8 +250,8 @@ public function get_attributes() {
 	public function get_supports() {
 
 		return array(
-			'className'  => true,
-			'color'      => array(
+			'className' => true,
+			'color'     => array(
 				'background'                      => true,
 				'text'                            => true,
 
@@ -260,14 +260,9 @@ public function get_supports() {
 				// See: https://github.com/WordPress/gutenberg/issues/32417.
 				'__experimentalSkipSerialization' => true,
 			),
-			'typography' => array(
-				'fontSize' => true,
-			),
-			'spacing'    => array(
-				'padding' => array(
-					'horizontal',
-					'vertical',
-				),
+			'spacing'   => array(
+				'margin'  => true,
+				'padding' => true,
 			),
 		);
 

includes/blocks/formtrigger/block.json

@@ -36,6 +36,10 @@
         "color": {
             "background": true,
             "text": true
+        },
+        "spacing": {
+            "margin": true,
+            "padding": true
         }
     },
     "editorScript": "convertkit-gutenberg"

includes/blocks/product/block.json

@@ -36,6 +36,10 @@
         "color": {
             "background": true,
             "text": true
+        },
+        "spacing": {
+            "margin": true,
+            "padding": true
         }
     },
     "editorScript": "convertkit-gutenberg"

tests/EndToEnd/broadcasts/blocks-shortcodes/PageBlockBroadcastsCest.php

@@ -740,6 +740,54 @@ public function testBroadcastsBlockWithHexColorParameters(EndToEndTester $I)
 		$I->seeInSource('<div class="convertkit-broadcasts wp-block-convertkit-broadcasts has-text-color has-background"');
 	}
 
+	/**
+	 * Test the Broadcasts block's margin and padding parameters works.
+	 *
+	 * @since   2.8.4
+	 *
+	 * @param   EndToEndTester $I  Tester.
+	 */
+	public function testBroadcastsBlockWithMarginAndPaddingParameters(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.
+		$I->havePageInDatabase(
+			[
+				'post_name'    => 'kit-page-broadcasts-block-margin-padding-params',
+				'post_content' => '<!-- wp:convertkit/broadcasts {"date_format":"m/d/Y","limit":' . $_ENV['CONVERTKIT_API_BROADCAST_COUNT'] . ',"style":{"spacing":{"padding":{"top":"var:preset|spacing|30"},"margin":{"top":"var:preset|spacing|30"}}}} /-->',
+			]
+		);
+
+		// Load the Page on the frontend site.
+		$I->amOnPage('/kit-page-broadcasts-block-margin-padding-params');
+
+		// 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 the block displays correctly with the expected number of Broadcasts.
+		$I->seeBroadcastsOutput(
+			$I,
+			[
+				'number_posts' => $_ENV['CONVERTKIT_API_BROADCAST_COUNT'],
+			]
+		);
+
+		// Confirm that our stylesheet loaded.
+		$I->seeInSource('<link rel="stylesheet" id="convertkit-broadcasts-css" href="' . $_ENV['WORDPRESS_URL'] . '/wp-content/plugins/convertkit/resources/frontend/css/broadcasts.css');
+
+		// Confirm that the chosen margin and padding are applied as CSS styles.
+		$I->seeInSource('<div class="convertkit-broadcasts wp-block-convertkit-broadcasts" style="padding-top:var(--wp--preset--spacing--30);margin-top:var(--wp--preset--spacing--30)"');
+	}
+
 	/**
 	 * 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

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

@@ -341,6 +341,49 @@ public function testFormTriggerBlockWithHexColorParameters(EndToEndTester $I)
 		);
 	}
 
+	/**
+	 * Test the Form Trigger block's margin and padding parameters works.
+	 *
+	 * @since   2.8.4
+	 *
+	 * @param   EndToEndTester $I  Tester.
+	 */
+	public function testFormTriggerBlockWithMarginAndPaddingParameters(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.
+		$I->havePageInDatabase(
+			[
+				'post_name'    => 'kit-page-form-trigger-block-margin-padding-params',
+				'post_content' => '<!-- wp:convertkit/formtrigger {"form":"' . $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_ID'] . '","style":{"spacing":{"padding":{"top":"var:preset|spacing|30"},"margin":{"top":"var:preset|spacing|30"}}}} /-->',
+			]
+		);
+
+		// Load the Page on the frontend site.
+		$I->amOnPage('/kit-page-form-trigger-block-margin-padding-params');
+
+		// 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 the block displays and has the inline styles applied.
+		$I->seeFormTriggerOutput(
+			$I,
+			formURL: $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'],
+			text: 'Subscribe',
+			styles: 'padding-top:var(--wp--preset--spacing--30);margin-top:var(--wp--preset--spacing--30)',
+			isBlock: true
+		);
+	}
+
 	/**
 	 * Test the Form Trigger block displays a message with a link to the Plugin's
 	 * settings screen, when the Plugin has no credentials specified.

tests/EndToEnd/products/PageBlockProductCest.php

@@ -521,6 +521,49 @@ public function testProductBlockWithHexColorParameters(EndToEndTester $I)
 		);
 	}
 
+	/**
+	 * Test the Form Trigger block's margin and padding parameters works.
+	 *
+	 * @since   2.8.4
+	 *
+	 * @param   EndToEndTester $I  Tester.
+	 */
+	public function testProductBlockWithMarginAndPaddingParameters(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.
+		$I->havePageInDatabase(
+			[
+				'post_name'    => 'kit-page-product-block-margin-padding-params',
+				'post_content' => '<!-- wp:convertkit/product {"product":"36377","style":{"spacing":{"padding":{"top":"var:preset|spacing|30"},"margin":{"top":"var:preset|spacing|30"}}}} /-->',
+			]
+		);
+
+		// Load the Page on the frontend site.
+		$I->amOnPage('/kit-page-product-block-margin-padding-params');
+
+		// 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 the block displays and has the inline styles applied.
+		$I->seeProductOutput(
+			$I,
+			productURL: $_ENV['CONVERTKIT_API_PRODUCT_URL'],
+			text: 'Buy my product',
+			styles: 'padding-top:var(--wp--preset--spacing--30);margin-top:var(--wp--preset--spacing--30)',
+			isBlock: true
+		);
+	}
+
 	/**
 	 * Test the Product block displays a message with a link to the Plugin's
 	 * settings screen, when the Plugin has Not connected to Kit.

tests/Support/Helper/KitForms.php

@@ -81,9 +81,10 @@ public function seeFormOutput($I, $formID, $position = false, $element = false,
 	 * @param   bool|string    $text           Test if the button text matches the given value.
 	 * @param   bool|string    $textColor      Test if the given text color is applied.
 	 * @param   bool|string    $backgroundColor Test is the given background color is applied.
+	 * @param   bool|string    $styles         Test if the given styles are applied.
 	 * @param   bool           $isBlock        Test if this is a form trigger block or shortcode.
 	 */
-	public function seeFormTriggerOutput($I, $formURL, $text = false, $textColor = false, $backgroundColor = false, $isBlock = false)
+	public function seeFormTriggerOutput($I, $formURL, $text = false, $textColor = false, $backgroundColor = false, $styles = false, $isBlock = false)
 	{
 		// Confirm that the button stylesheet loaded.
 		$I->seeInSource('<link rel="stylesheet" id="convertkit-button-css" href="' . $_ENV['WORDPRESS_URL'] . '/wp-content/plugins/convertkit/resources/frontend/css/button.css');
@@ -129,6 +130,14 @@ public function seeFormTriggerOutput($I, $formURL, $text = false, $textColor = f
 			}
 		}
 
+		// Confirm that the styles are as expected.
+		if ($styles !== false) {
+			$I->assertStringContainsString(
+				$styles,
+				$I->grabAttributeFrom('a.convertkit-formtrigger', 'style')
+			);
+		}
+
 		// Click the button to confirm that the Kit modal displays.
 		$I->click('a.convertkit-formtrigger');
 		$I->waitForElementVisible('div.formkit-overlay');

tests/Support/Helper/KitProducts.php

@@ -54,9 +54,10 @@ public function seeProductLink($I, $productURL, $text = false)
 	 * @param   bool|string    $text           Test if the button text matches the given value.
 	 * @param   bool|string    $textColor      Test if the given text color is applied.
 	 * @param   bool|string    $backgroundColor Test is the given background color is applied.
+	 * @param   bool|string    $styles         Test if the given styles are applied.
 	 * @param   bool           $isBlock        Test if this is a product block or shortcode.
 	 */
-	public function seeProductOutput($I, $productURL, $text = false, $textColor = false, $backgroundColor = false, $isBlock = false)
+	public function seeProductOutput($I, $productURL, $text = false, $textColor = false, $backgroundColor = false, $styles = false, $isBlock = false)
 	{
 		// Confirm that the product stylesheet loaded.
 		$I->seeInSource('<link rel="stylesheet" id="convertkit-button-css" href="' . $_ENV['WORDPRESS_URL'] . '/wp-content/plugins/convertkit/resources/frontend/css/button.css');
@@ -104,6 +105,14 @@ public function seeProductOutput($I, $productURL, $text = false, $textColor = fa
 			}
 		}
 
+		// Confirm that the styles are as expected.
+		if ($styles !== false) {
+			$I->assertStringContainsString(
+				$styles,
+				$I->grabAttributeFrom('a.convertkit-product', 'style')
+			);
+		}
+
 		// Click the button to confirm that the Kit modal displays; this confirms
 		// necessary Kit scripts have been loaded.
 		$I->click('a.convertkit-product');