Skip to content

Commit 8fcf2e9

Browse files
n7studiosn7studios
authored
Merge pull request #844 from Kit/block-margin-padding-block-spacing
Blocks: Add Margin and Padding Support
2 parents e62f3f6 + dfa2481 commit 8fcf2e9

11 files changed

Lines changed: 373 additions & 78 deletions

File tree

‎includes/blocks/broadcasts/block.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,14 @@
6161
"link": true,
6262
"background": true,
6363
"text": true
64+
},
65+
"typography": {
66+
"fontSize": true,
67+
"lineHeight": true
68+
},
69+
"spacing": {
70+
"margin": true,
71+
"padding": true
6472
}
6573
},
6674
"editorScript": "convertkit-gutenberg"

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

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ public function get_attributes() {
226226
'default' => $this->get_default_value( 'paginate_label_next' ),
227227
),
228228

229-
// get_supports() color attribute.
229+
// get_supports() style, color and typography attributes.
230230
'style' => array(
231231
'type' => 'object',
232232
),
@@ -236,6 +236,9 @@ public function get_attributes() {
236236
'textColor' => array(
237237
'type' => 'string',
238238
),
239+
'fontSize' => array(
240+
'type' => 'string',
241+
),
239242

240243
// Always required for Gutenberg.
241244
'is_gutenberg_example' => array(
@@ -256,12 +259,20 @@ public function get_attributes() {
256259
public function get_supports() {
257260

258261
return array(
259-
'className' => true,
260-
'color' => array(
262+
'className' => true,
263+
'color' => array(
261264
'link' => true,
262265
'background' => true,
263266
'text' => true,
264267
),
268+
'typography' => array(
269+
'fontSize' => true,
270+
'lineHeight' => true,
271+
),
272+
'spacing' => array(
273+
'margin' => true,
274+
'padding' => true,
275+
),
265276
);
266277

267278
}
@@ -476,7 +487,7 @@ public function render( $atts ) {
476487
$html = $this->build_html(
477488
$posts,
478489
$atts,
479-
true,
490+
! $this->is_block_editor_request(),
480491
$this->get_css_classes(),
481492
$this->get_css_styles( $atts )
482493
);

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

Lines changed: 8 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -159,42 +159,20 @@ public function get_attributes() {
159159

160160
// The below are built in Gutenberg attributes registered in get_supports().
161161

162-
// Color.
162+
// get_supports() style, color and typography attributes.
163+
'style' => array(
164+
'type' => 'object',
165+
),
163166
'backgroundColor' => array(
164167
'type' => 'string',
165168
),
166169
'textColor' => array(
167170
'type' => 'string',
168171
),
169-
170-
// Typography.
171172
'fontSize' => array(
172173
'type' => 'string',
173174
),
174175

175-
// Spacing/Dimensions > Padding.
176-
'style' => array(
177-
'type' => 'object',
178-
'visualizers' => array(
179-
'type' => 'object',
180-
'padding' => array(
181-
'type' => 'object',
182-
'top' => array(
183-
'type' => 'boolean',
184-
),
185-
'bottom' => array(
186-
'type' => 'boolean',
187-
),
188-
'left' => array(
189-
'type' => 'boolean',
190-
),
191-
'right' => array(
192-
'type' => 'boolean',
193-
),
194-
),
195-
),
196-
),
197-
198176
// Always required for Gutenberg.
199177
'is_gutenberg_example' => array(
200178
'type' => 'boolean',
@@ -225,13 +203,12 @@ public function get_supports() {
225203
'__experimentalSkipSerialization' => true,
226204
),
227205
'typography' => array(
228-
'fontSize' => true,
206+
'fontSize' => true,
207+
'lineHeight' => true,
229208
),
230209
'spacing' => array(
231-
'padding' => array(
232-
'horizontal',
233-
'vertical',
234-
),
210+
'margin' => true,
211+
'padding' => true,
235212
),
236213
);
237214

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

Lines changed: 8 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -195,42 +195,20 @@ public function get_attributes() {
195195

196196
// The below are built in Gutenberg attributes registered in get_supports().
197197

198-
// Color.
198+
// get_supports() style, color and typography attributes.
199+
'style' => array(
200+
'type' => 'object',
201+
),
199202
'backgroundColor' => array(
200203
'type' => 'string',
201204
),
202205
'textColor' => array(
203206
'type' => 'string',
204207
),
205-
206-
// Typography.
207208
'fontSize' => array(
208209
'type' => 'string',
209210
),
210211

211-
// Spacing/Dimensions > Padding.
212-
'style' => array(
213-
'type' => 'object',
214-
'visualizers' => array(
215-
'type' => 'object',
216-
'padding' => array(
217-
'type' => 'object',
218-
'top' => array(
219-
'type' => 'boolean',
220-
),
221-
'bottom' => array(
222-
'type' => 'boolean',
223-
),
224-
'left' => array(
225-
'type' => 'boolean',
226-
),
227-
'right' => array(
228-
'type' => 'boolean',
229-
),
230-
),
231-
),
232-
),
233-
234212
// Always required for Gutenberg.
235213
'is_gutenberg_example' => array(
236214
'type' => 'boolean',
@@ -261,13 +239,12 @@ public function get_supports() {
261239
'__experimentalSkipSerialization' => true,
262240
),
263241
'typography' => array(
264-
'fontSize' => true,
242+
'fontSize' => true,
243+
'lineHeight' => true,
265244
),
266245
'spacing' => array(
267-
'padding' => array(
268-
'horizontal',
269-
'vertical',
270-
),
246+
'margin' => true,
247+
'padding' => true,
271248
),
272249
);
273250

‎includes/blocks/formtrigger/block.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,14 @@
3636
"color": {
3737
"background": true,
3838
"text": true
39+
},
40+
"typography": {
41+
"fontSize": true,
42+
"lineHeight": true
43+
},
44+
"spacing": {
45+
"margin": true,
46+
"padding": true
3947
}
4048
},
4149
"editorScript": "convertkit-gutenberg"

‎includes/blocks/product/block.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,14 @@
3636
"color": {
3737
"background": true,
3838
"text": true
39+
},
40+
"typography": {
41+
"fontSize": true,
42+
"lineHeight": true
43+
},
44+
"spacing": {
45+
"margin": true,
46+
"padding": true
3947
}
4048
},
4149
"editorScript": "convertkit-gutenberg"

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -740,6 +740,102 @@ public function testBroadcastsBlockWithHexColorParameters(EndToEndTester $I)
740740
$I->seeInSource('<div class="convertkit-broadcasts wp-block-convertkit-broadcasts has-text-color has-background"');
741741
}
742742

743+
/**
744+
* Test the Broadcasts block's margin and padding parameters works.
745+
*
746+
* @since 2.8.4
747+
*
748+
* @param EndToEndTester $I Tester.
749+
*/
750+
public function testBroadcastsBlockWithMarginAndPaddingParameters(EndToEndTester $I)
751+
{
752+
// Setup Plugin and enable debug log.
753+
$I->setupKitPlugin($I);
754+
$I->setupKitPluginResources($I);
755+
756+
// It's tricky to interact with Gutenberg's margin and padding pickers, so we programmatically create the Page
757+
// instead to then confirm the settings apply on the output.
758+
// We don't need to test the margin and padding pickers themselves, as they are Gutenberg supplied components, and our
759+
// other End To End tests confirm that the block can be added in Gutenberg etc.
760+
$I->havePageInDatabase(
761+
[
762+
'post_name' => 'kit-page-broadcasts-block-margin-padding-params',
763+
'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"}}}} /-->',
764+
]
765+
);
766+
767+
// Load the Page on the frontend site.
768+
$I->amOnPage('/kit-page-broadcasts-block-margin-padding-params');
769+
770+
// Wait for frontend web site to load.
771+
$I->waitForElementVisible('body.page-template-default');
772+
773+
// Check that no PHP warnings or notices were output.
774+
$I->checkNoWarningsAndNoticesOnScreen($I);
775+
776+
// Confirm that the block displays correctly with the expected number of Broadcasts.
777+
$I->seeBroadcastsOutput(
778+
$I,
779+
[
780+
'number_posts' => $_ENV['CONVERTKIT_API_BROADCAST_COUNT'],
781+
]
782+
);
783+
784+
// Confirm that our stylesheet loaded.
785+
$I->seeInSource('<link rel="stylesheet" id="convertkit-broadcasts-css" href="' . $_ENV['WORDPRESS_URL'] . '/wp-content/plugins/convertkit/resources/frontend/css/broadcasts.css');
786+
787+
// Confirm that the chosen margin and padding are applied as CSS styles.
788+
$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)"');
789+
}
790+
791+
/**
792+
* Test the Broadcasts block's typography parameters works.
793+
*
794+
* @since 2.8.4
795+
*
796+
* @param EndToEndTester $I Tester.
797+
*/
798+
public function testBroadcastsBlockWithTypographyParameters(EndToEndTester $I)
799+
{
800+
// Setup Plugin and enable debug log.
801+
$I->setupKitPlugin($I);
802+
$I->setupKitPluginResources($I);
803+
804+
// It's tricky to interact with Gutenberg's typography pickers, so we programmatically create the Page
805+
// instead to then confirm the settings apply on the output.
806+
// We don't need to test the typography picker itself, as it's a Gutenberg supplied component, and our
807+
// other End To End tests confirm that the block can be added in Gutenberg etc.
808+
$I->havePageInDatabase(
809+
[
810+
'post_name' => 'kit-page-broadcasts-block-typography-params',
811+
'post_content' => '<!-- wp:convertkit/broadcasts {"date_format":"m/d/Y","limit":' . $_ENV['CONVERTKIT_API_BROADCAST_COUNT'] . ',"style":{"typography":{"lineHeight":"2"}},"fontSize":"large"} /-->',
812+
]
813+
);
814+
815+
// Load the Page on the frontend site.
816+
$I->amOnPage('/kit-page-broadcasts-block-typography-params');
817+
818+
// Wait for frontend web site to load.
819+
$I->waitForElementVisible('body.page-template-default');
820+
821+
// Check that no PHP warnings or notices were output.
822+
$I->checkNoWarningsAndNoticesOnScreen($I);
823+
824+
// Confirm that the block displays correctly with the expected number of Broadcasts.
825+
$I->seeBroadcastsOutput(
826+
$I,
827+
[
828+
'number_posts' => $_ENV['CONVERTKIT_API_BROADCAST_COUNT'],
829+
]
830+
);
831+
832+
// Confirm that our stylesheet loaded.
833+
$I->seeInSource('<link rel="stylesheet" id="convertkit-broadcasts-css" href="' . $_ENV['WORDPRESS_URL'] . '/wp-content/plugins/convertkit/resources/frontend/css/broadcasts.css');
834+
835+
// Confirm that the chosen typography settings are applied as CSS styles.
836+
$I->seeInSource('<div class="convertkit-broadcasts wp-block-convertkit-broadcasts has-large-font-size" style="line-height:2"');
837+
}
838+
743839
/**
744840
* Deactivate and reset Plugin(s) after each test, if the test passes.
745841
* We don't use _after, as this would provide a screenshot of the Plugin

0 commit comments

Comments
 (0)