Kit · n7studios · Jul 16, 2025 · Jul 12, 2025 · Jul 12, 2025 · Jul 15, 2025
diff --git a/includes/blocks/class-convertkit-block-broadcasts.php b/includes/blocks/class-convertkit-block-broadcasts.php
@@ -498,13 +498,27 @@ public function render( $atts ) {
 		}
 
 		// Build HTML.
-		$html = $this->build_html(
-			$posts,
-			$atts,
-			! $this->is_block_editor_request(),
-			$this->get_css_classes(),
-			$this->get_css_styles( $atts )
-		);
+		if ( $this->is_block_editor_request() ) {
+			// For the block editor, don't include compiled CSS classes and styles,
+			// as the block editor will add these to the parent container.
+			// Otherwise the block will render incorrectly with double padding, double margins etc.
+			$html = $this->build_html(
+				$posts,
+				$atts,
+				true,
+				array(
+					'convertkit-' . $this->get_name(),
+				)
+			);
+		} else {
+			$html = $this->build_html(
+				$posts,
+				$atts,
+				true,
+				$this->get_css_classes(),
+				$this->get_css_styles( $atts )
+			);
+		}
 
 		/**
 		 * Filter the block's content immediately before it is output.

diff --git a/includes/blocks/class-convertkit-block-form-trigger.php b/includes/blocks/class-convertkit-block-form-trigger.php
@@ -55,6 +55,9 @@ public function enqueue_styles() {
 
 		wp_enqueue_style( 'convertkit-button', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/button.css', array(), CONVERTKIT_PLUGIN_VERSION );
 
+		// Enqueue the block button CSS.
+		wp_enqueue_style( 'wp-block-button' );
+
 	}
 
 	/**

diff --git a/includes/blocks/class-convertkit-block-product.php b/includes/blocks/class-convertkit-block-product.php
@@ -77,6 +77,9 @@ public function enqueue_styles() {
 
 		wp_enqueue_style( 'convertkit-button', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/button.css', array(), CONVERTKIT_PLUGIN_VERSION );
 
+		// Enqueue the block button CSS.
+		wp_enqueue_style( 'wp-block-button' );
+
 	}
 
 	/**

diff --git a/tests/EndToEnd/forms/blocks-shortcodes/PageBlockFormTriggerCest.php b/tests/EndToEnd/forms/blocks-shortcodes/PageBlockFormTriggerCest.php
@@ -65,7 +65,12 @@ public function testFormTriggerBlockWithValidFormParameter(EndToEndTester $I)
 		$I->publishAndViewGutenbergPage($I);
 
 		// Confirm that the block displays.
-		$I->seeFormTriggerOutput($I, $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'], 'Subscribe');
+		$I->seeFormTriggerOutput(
+			$I,
+			formURL: $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'],
+			text: 'Subscribe',
+			isBlock: true
+		);
 	}
 
 	/**
@@ -120,7 +125,12 @@ public function testFormTriggerBlocksWithValidFormParameter(EndToEndTester $I)
 		$I->publishAndViewGutenbergPage($I);
 
 		// Confirm that the block displays.
-		$I->seeFormTriggerOutput($I, $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'], 'Subscribe');
+		$I->seeFormTriggerOutput(
+			$I,
+			formURL: $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'],
+			text: 'Subscribe',
+			isBlock: true
+		);
 
 		// 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.
@@ -206,7 +216,12 @@ public function testFormTriggerBlockWithTextParameter(EndToEndTester $I)
 		$I->publishAndViewGutenbergPage($I);
 
 		// Confirm that the block displays.
-		$I->seeFormTriggerOutput($I, $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'], 'Sign up');
+		$I->seeFormTriggerOutput(
+			$I,
+			formURL: $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'],
+			text: 'Sign up',
+			isBlock: true
+		);
 	}
 
 	/**
@@ -243,7 +258,12 @@ public function testFormTriggerBlockWithBlankTextParameter(EndToEndTester $I)
 		$I->publishAndViewGutenbergPage($I);
 
 		// Confirm that the block displays.
-		$I->seeFormTriggerOutput($I, $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'], 'Subscribe');
+		$I->seeFormTriggerOutput(
+			$I,
+			formURL: $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'],
+			text: 'Subscribe',
+			isBlock: true
+		);
 	}
 
 	/**
@@ -284,7 +304,11 @@ public function testFormTriggerBlockWithThemeColorParameters(EndToEndTester $I)
 		$I->checkNoWarningsAndNoticesOnScreen($I);
 
 		// Confirm that the block displays.
-		$I->seeFormTriggerOutput($I, $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL']);
+		$I->seeFormTriggerOutput(
+			$I,
+			formURL: $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'],
+			isBlock: true
+		);
 
 		// Confirm that the chosen colors are applied as CSS styles.
 		$I->seeInSource('class="convertkit-formtrigger wp-block-button__link wp-element-button wp-block-convertkit-formtrigger has-text-color has-' . $textColor . '-color has-background has-' . $backgroundColor . '-background-color');

diff --git a/tests/EndToEnd/products/PageBlockProductCest.php b/tests/EndToEnd/products/PageBlockProductCest.php
@@ -68,7 +68,8 @@ public function testProductBlockWithValidProductParameter(EndToEndTester $I)
 		$I->seeProductOutput(
 			$I,
 			productURL: $_ENV['CONVERTKIT_API_PRODUCT_URL'],
-			text: 'Buy my product'
+			text: 'Buy my product',
+			isBlock: true
 		);
 	}
 
@@ -154,7 +155,8 @@ public function testProductBlockWithTextParameter(EndToEndTester $I)
 		$I->seeProductOutput(
 			$I,
 			productURL: $_ENV['CONVERTKIT_API_PRODUCT_URL'],
-			text: 'Buy Now'
+			text: 'Buy Now',
+			isBlock: true
 		);
 	}
 
@@ -195,7 +197,8 @@ public function testProductBlockWithBlankTextParameter(EndToEndTester $I)
 		$I->seeProductOutput(
 			$I,
 			productURL: $_ENV['CONVERTKIT_API_PRODUCT_URL'],
-			text: 'Buy my product'
+			text: 'Buy my product',
+			isBlock: true
 		);
 	}
 
@@ -245,7 +248,8 @@ public function testProductBlockWithValidDiscountCodeParameter(EndToEndTester $I
 		$I->seeProductOutput(
 			$I,
 			productURL: $_ENV['CONVERTKIT_API_PRODUCT_URL'],
-			text: 'Buy my product'
+			text: 'Buy my product',
+			isBlock: true
 		);
 
 		// Confirm the discount code has been applied.
@@ -300,7 +304,8 @@ public function testProductBlockWithInvalidDiscountCodeParameter(EndToEndTester
 		$I->seeProductOutput(
 			$I,
 			productURL: $_ENV['CONVERTKIT_API_PRODUCT_URL'],
-			text: 'Buy my product'
+			text: 'Buy my product',
+			isBlock: true
 		);
 
 		// Confirm the discount code is not valid, but the modal displays so the user can still purchase.
@@ -356,7 +361,8 @@ public function testProductBlockWithCheckoutParameterEnabled(EndToEndTester $I)
 		$I->seeProductOutput(
 			$I,
 			productURL: $_ENV['CONVERTKIT_API_PRODUCT_URL'],
-			text: 'Buy my product'
+			text: 'Buy my product',
+			isBlock: true
 		);
 
 		// Confirm the checkout step is displayed.
@@ -466,7 +472,8 @@ public function testProductBlockWithThemeColorParameters(EndToEndTester $I)
 		// Confirm that the block displays.
 		$I->seeProductOutput(
 			$I,
-			productURL: $_ENV['CONVERTKIT_API_PRODUCT_URL']
+			productURL: $_ENV['CONVERTKIT_API_PRODUCT_URL'],
+			isBlock: true
 		);
 
 		// Confirm that the chosen colors are applied as CSS styles.

diff --git a/tests/Support/Helper/KitForms.php b/tests/Support/Helper/KitForms.php
@@ -90,6 +90,11 @@ public function seeFormTriggerOutput($I, $formURL, $text = false, $textColor = f
 		// 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');
 
+		// Confirm that the block button CSS loaded.
+		if ($isBlock) {
+			$I->seeInSource('<style id="wp-block-button-inline-css">');
+		}
+
 		// Confirm that the block displays.
 		$I->seeElementInDOM('a.convertkit-formtrigger.wp-block-button__link');
 

diff --git a/tests/Support/Helper/KitProducts.php b/tests/Support/Helper/KitProducts.php
@@ -63,6 +63,11 @@ public function seeProductOutput($I, $productURL, $text = false, $textColor = fa
 		// 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');
 
+		// Confirm that the block button CSS loaded.
+		if ($isBlock) {
+			$I->seeInSource('<style id="wp-block-button-inline-css">');
+		}
+
 		// Confirm that the block displays.
 		$I->seeElementInDOM('a.convertkit-product.wp-block-button__link');
-Original file line number
+Diff line change
@@ Expand Up / @@ -55,6 +55,9 @@ public function enqueue_styles() { @@
     		wp_enqueue_style( 'convertkit-button', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/button.css', array(), CONVERTKIT_PLUGIN_VERSION );
+    		// Enqueue the block button CSS.
+    		wp_enqueue_style( 'wp-block-button' );
     	}
     	/**
@@ Expand Down @@