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');