Skip to content

Commit 148807e

Browse files
n7studiosn7studios
authored
Merge pull request #850 from Kit/fix-block-render-accuracy
Blocks: Improve Rendering Accuracy
2 parents 103bb6b + 65eda60 commit 148807e

7 files changed

Lines changed: 80 additions & 19 deletions

File tree

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

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -498,13 +498,27 @@ public function render( $atts ) {
498498
}
499499

500500
// Build HTML.
501-
$html = $this->build_html(
502-
$posts,
503-
$atts,
504-
! $this->is_block_editor_request(),
505-
$this->get_css_classes(),
506-
$this->get_css_styles( $atts )
507-
);
501+
if ( $this->is_block_editor_request() ) {
502+
// For the block editor, don't include compiled CSS classes and styles,
503+
// as the block editor will add these to the parent container.
504+
// Otherwise the block will render incorrectly with double padding, double margins etc.
505+
$html = $this->build_html(
506+
$posts,
507+
$atts,
508+
true,
509+
array(
510+
'convertkit-' . $this->get_name(),
511+
)
512+
);
513+
} else {
514+
$html = $this->build_html(
515+
$posts,
516+
$atts,
517+
true,
518+
$this->get_css_classes(),
519+
$this->get_css_styles( $atts )
520+
);
521+
}
508522

509523
/**
510524
* Filter the block's content immediately before it is output.

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,9 @@ public function enqueue_styles() {
5555

5656
wp_enqueue_style( 'convertkit-button', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/button.css', array(), CONVERTKIT_PLUGIN_VERSION );
5757

58+
// Enqueue the block button CSS.
59+
wp_enqueue_style( 'wp-block-button' );
60+
5861
}
5962

6063
/**

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,9 @@ public function enqueue_styles() {
7777

7878
wp_enqueue_style( 'convertkit-button', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/button.css', array(), CONVERTKIT_PLUGIN_VERSION );
7979

80+
// Enqueue the block button CSS.
81+
wp_enqueue_style( 'wp-block-button' );
82+
8083
}
8184

8285
/**

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

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,12 @@ public function testFormTriggerBlockWithValidFormParameter(EndToEndTester $I)
6565
$I->publishAndViewGutenbergPage($I);
6666

6767
// Confirm that the block displays.
68-
$I->seeFormTriggerOutput($I, $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'], 'Subscribe');
68+
$I->seeFormTriggerOutput(
69+
$I,
70+
formURL: $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'],
71+
text: 'Subscribe',
72+
isBlock: true
73+
);
6974
}
7075

7176
/**
@@ -120,7 +125,12 @@ public function testFormTriggerBlocksWithValidFormParameter(EndToEndTester $I)
120125
$I->publishAndViewGutenbergPage($I);
121126

122127
// Confirm that the block displays.
123-
$I->seeFormTriggerOutput($I, $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'], 'Subscribe');
128+
$I->seeFormTriggerOutput(
129+
$I,
130+
formURL: $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'],
131+
text: 'Subscribe',
132+
isBlock: true
133+
);
124134

125135
// Confirm that one Kit Form is output in the DOM.
126136
// 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)
206216
$I->publishAndViewGutenbergPage($I);
207217

208218
// Confirm that the block displays.
209-
$I->seeFormTriggerOutput($I, $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'], 'Sign up');
219+
$I->seeFormTriggerOutput(
220+
$I,
221+
formURL: $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'],
222+
text: 'Sign up',
223+
isBlock: true
224+
);
210225
}
211226

212227
/**
@@ -243,7 +258,12 @@ public function testFormTriggerBlockWithBlankTextParameter(EndToEndTester $I)
243258
$I->publishAndViewGutenbergPage($I);
244259

245260
// Confirm that the block displays.
246-
$I->seeFormTriggerOutput($I, $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'], 'Subscribe');
261+
$I->seeFormTriggerOutput(
262+
$I,
263+
formURL: $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'],
264+
text: 'Subscribe',
265+
isBlock: true
266+
);
247267
}
248268

249269
/**
@@ -284,7 +304,11 @@ public function testFormTriggerBlockWithThemeColorParameters(EndToEndTester $I)
284304
$I->checkNoWarningsAndNoticesOnScreen($I);
285305

286306
// Confirm that the block displays.
287-
$I->seeFormTriggerOutput($I, $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL']);
307+
$I->seeFormTriggerOutput(
308+
$I,
309+
formURL: $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'],
310+
isBlock: true
311+
);
288312

289313
// Confirm that the chosen colors are applied as CSS styles.
290314
$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');

‎tests/EndToEnd/products/PageBlockProductCest.php‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,8 @@ public function testProductBlockWithValidProductParameter(EndToEndTester $I)
6868
$I->seeProductOutput(
6969
$I,
7070
productURL: $_ENV['CONVERTKIT_API_PRODUCT_URL'],
71-
text: 'Buy my product'
71+
text: 'Buy my product',
72+
isBlock: true
7273
);
7374
}
7475

@@ -154,7 +155,8 @@ public function testProductBlockWithTextParameter(EndToEndTester $I)
154155
$I->seeProductOutput(
155156
$I,
156157
productURL: $_ENV['CONVERTKIT_API_PRODUCT_URL'],
157-
text: 'Buy Now'
158+
text: 'Buy Now',
159+
isBlock: true
158160
);
159161
}
160162

@@ -195,7 +197,8 @@ public function testProductBlockWithBlankTextParameter(EndToEndTester $I)
195197
$I->seeProductOutput(
196198
$I,
197199
productURL: $_ENV['CONVERTKIT_API_PRODUCT_URL'],
198-
text: 'Buy my product'
200+
text: 'Buy my product',
201+
isBlock: true
199202
);
200203
}
201204

@@ -245,7 +248,8 @@ public function testProductBlockWithValidDiscountCodeParameter(EndToEndTester $I
245248
$I->seeProductOutput(
246249
$I,
247250
productURL: $_ENV['CONVERTKIT_API_PRODUCT_URL'],
248-
text: 'Buy my product'
251+
text: 'Buy my product',
252+
isBlock: true
249253
);
250254

251255
// Confirm the discount code has been applied.
@@ -300,7 +304,8 @@ public function testProductBlockWithInvalidDiscountCodeParameter(EndToEndTester
300304
$I->seeProductOutput(
301305
$I,
302306
productURL: $_ENV['CONVERTKIT_API_PRODUCT_URL'],
303-
text: 'Buy my product'
307+
text: 'Buy my product',
308+
isBlock: true
304309
);
305310

306311
// 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)
356361
$I->seeProductOutput(
357362
$I,
358363
productURL: $_ENV['CONVERTKIT_API_PRODUCT_URL'],
359-
text: 'Buy my product'
364+
text: 'Buy my product',
365+
isBlock: true
360366
);
361367

362368
// Confirm the checkout step is displayed.
@@ -466,7 +472,8 @@ public function testProductBlockWithThemeColorParameters(EndToEndTester $I)
466472
// Confirm that the block displays.
467473
$I->seeProductOutput(
468474
$I,
469-
productURL: $_ENV['CONVERTKIT_API_PRODUCT_URL']
475+
productURL: $_ENV['CONVERTKIT_API_PRODUCT_URL'],
476+
isBlock: true
470477
);
471478

472479
// Confirm that the chosen colors are applied as CSS styles.

‎tests/Support/Helper/KitForms.php‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,11 @@ public function seeFormTriggerOutput($I, $formURL, $text = false, $textColor = f
9090
// Confirm that the button stylesheet loaded.
9191
$I->seeInSource('<link rel="stylesheet" id="convertkit-button-css" href="' . $_ENV['WORDPRESS_URL'] . '/wp-content/plugins/convertkit/resources/frontend/css/button.css');
9292

93+
// Confirm that the block button CSS loaded.
94+
if ($isBlock) {
95+
$I->seeInSource('<style id="wp-block-button-inline-css">');
96+
}
97+
9398
// Confirm that the block displays.
9499
$I->seeElementInDOM('a.convertkit-formtrigger.wp-block-button__link');
95100

‎tests/Support/Helper/KitProducts.php‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,11 @@ public function seeProductOutput($I, $productURL, $text = false, $textColor = fa
6363
// Confirm that the product stylesheet loaded.
6464
$I->seeInSource('<link rel="stylesheet" id="convertkit-button-css" href="' . $_ENV['WORDPRESS_URL'] . '/wp-content/plugins/convertkit/resources/frontend/css/button.css');
6565

66+
// Confirm that the block button CSS loaded.
67+
if ($isBlock) {
68+
$I->seeInSource('<style id="wp-block-button-inline-css">');
69+
}
70+
6671
// Confirm that the block displays.
6772
$I->seeElementInDOM('a.convertkit-product.wp-block-button__link');
6873

0 commit comments

Comments
 (0)