diff --git a/includes/blocks/class-convertkit-block-broadcasts.php b/includes/blocks/class-convertkit-block-broadcasts.php
index 9a4198204..d9a8751d9 100644
--- 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
index acd9061c1..5e1c999b5 100644
--- 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
index fa6c617f8..e72f47870 100644
--- 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
index a2cfaa18f..d6f7b02e2 100644
--- 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
index e723312db..dccbad208 100644
--- 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
index a2f6b05c8..f4411fcdf 100644
--- 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('');
+ }
+
// 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
index b5b34a388..68caa0687 100644
--- 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('');
+ }
+
// Confirm that the block displays.
$I->seeElementInDOM('a.convertkit-product.wp-block-button__link');