Skip to content

Blocks: Add Margin and Padding Support #844

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
n7studios merged 8 commits into from
Jul 10, 2025
Merged

Blocks: Add Margin and Padding Support #844

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3d4ec1d
Blocks: Add support for margin and padding
n7studios Jul 5, 2025
7cacabc
Merge branch 'use-get-block-wrapper-attributes' into block-margin-pad…
n7studios Jul 7, 2025
7cf61f0
Add tests
n7studios Jul 7, 2025
e1b8997
Broadcasts: Don’t include container element if in the block editor
n7studios Jul 7, 2025
37c2878
Blocks: Add typography support, clear up + standardise `style`
n7studios Jul 9, 2025
6748319
Added tests
n7studios Jul 9, 2025
39ac8e4
Include `fontSize` attribute
n7studios Jul 9, 2025
dfa2481
Merge pull request #848 from Kit/block-typography
n7studios Jul 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions includes/blocks/broadcasts/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,14 @@
"link": true,
"background": true,
"text": true
},
"typography": {
"fontSize": true,
"lineHeight": true
},
"spacing": {
"margin": true,
"padding": true
}
},
"editorScript": "convertkit-gutenberg"
Expand Down
19 changes: 15 additions & 4 deletions includes/blocks/class-convertkit-block-broadcasts.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ public function get_attributes() {
'default' => $this->get_default_value( 'paginate_label_next' ),
),

// get_supports() color attribute.
// get_supports() style, color and typography attributes.
'style' => array(
'type' => 'object',
),
Expand All @@ -236,6 +236,9 @@ public function get_attributes() {
'textColor' => array(
'type' => 'string',
),
'fontSize' => array(
'type' => 'string',
),

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

return array(
'className' => true,
'color' => array(
'className' => true,
'color' => array(
'link' => true,
'background' => true,
'text' => true,
),
'typography' => array(
'fontSize' => true,
'lineHeight' => true,
),
'spacing' => array(
'margin' => true,
'padding' => true,
),
);

}
Expand Down Expand Up @@ -476,7 +487,7 @@ public function render( $atts ) {
$html = $this->build_html(
$posts,
$atts,
true,
! $this->is_block_editor_request(),
$this->get_css_classes(),
$this->get_css_styles( $atts )
);
Expand Down
39 changes: 8 additions & 31 deletions includes/blocks/class-convertkit-block-form-trigger.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,42 +159,20 @@ public function get_attributes() {

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

// Color.
// get_supports() style, color and typography attributes.
'style' => array(
'type' => 'object',
),
'backgroundColor' => array(
'type' => 'string',
),
'textColor' => array(
'type' => 'string',
),

// Typography.
'fontSize' => array(
'type' => 'string',
),

// Spacing/Dimensions > Padding.
'style' => array(
'type' => 'object',
'visualizers' => array(
'type' => 'object',
'padding' => array(
'type' => 'object',
'top' => array(
'type' => 'boolean',
),
'bottom' => array(
'type' => 'boolean',
),
'left' => array(
'type' => 'boolean',
),
'right' => array(
'type' => 'boolean',
),
),
),
),

// Always required for Gutenberg.
'is_gutenberg_example' => array(
'type' => 'boolean',
Expand Down Expand Up @@ -225,13 +203,12 @@ public function get_supports() {
'__experimentalSkipSerialization' => true,
),
'typography' => array(
'fontSize' => true,
'fontSize' => true,
'lineHeight' => true,
),
'spacing' => array(
'padding' => array(
'horizontal',
'vertical',
),
'margin' => true,
'padding' => true,
),
);

Expand Down
39 changes: 8 additions & 31 deletions includes/blocks/class-convertkit-block-product.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,42 +195,20 @@ public function get_attributes() {

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

// Color.
// get_supports() style, color and typography attributes.
'style' => array(
'type' => 'object',
),
'backgroundColor' => array(
'type' => 'string',
),
'textColor' => array(
'type' => 'string',
),

// Typography.
'fontSize' => array(
'type' => 'string',
),

// Spacing/Dimensions > Padding.
'style' => array(
'type' => 'object',
'visualizers' => array(
'type' => 'object',
'padding' => array(
'type' => 'object',
'top' => array(
'type' => 'boolean',
),
'bottom' => array(
'type' => 'boolean',
),
'left' => array(
'type' => 'boolean',
),
'right' => array(
'type' => 'boolean',
),
),
),
),

// Always required for Gutenberg.
'is_gutenberg_example' => array(
'type' => 'boolean',
Expand Down Expand Up @@ -261,13 +239,12 @@ public function get_supports() {
'__experimentalSkipSerialization' => true,
),
'typography' => array(
Copy link
Contributor Author

@n7studios n7studios Jul 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was never supported in the Product block, so not sure when this got added. I'd prefer to add typography / font selection support in a separate PR that covers all blocks, so we have consistent options for users.

'fontSize' => true,
'fontSize' => true,
'lineHeight' => true,
),
'spacing' => array(
'padding' => array(
'horizontal',
'vertical',
),
'margin' => true,
'padding' => true,
),
);

Expand Down
8 changes: 8 additions & 0 deletions includes/blocks/formtrigger/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,14 @@
"color": {
"background": true,
"text": true
},
"typography": {
"fontSize": true,
"lineHeight": true
},
"spacing": {
"margin": true,
"padding": true
}
},
"editorScript": "convertkit-gutenberg"
Expand Down
8 changes: 8 additions & 0 deletions includes/blocks/product/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,14 @@
"color": {
"background": true,
"text": true
},
"typography": {
"fontSize": true,
"lineHeight": true
},
"spacing": {
"margin": true,
"padding": true
}
},
"editorScript": "convertkit-gutenberg"
Expand Down
96 changes: 96 additions & 0 deletions tests/EndToEnd/broadcasts/blocks-shortcodes/PageBlockBroadcastsCest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -740,6 +740,102 @@ public function testBroadcastsBlockWithHexColorParameters(EndToEndTester $I)
$I->seeInSource('<div class="convertkit-broadcasts wp-block-convertkit-broadcasts has-text-color has-background"');
}

/**
* Test the Broadcasts block's margin and padding parameters works.
*
* @since 2.8.4
*
* @param EndToEndTester $I Tester.
*/
public function testBroadcastsBlockWithMarginAndPaddingParameters(EndToEndTester $I)
{
// Setup Plugin and enable debug log.
$I->setupKitPlugin($I);
$I->setupKitPluginResources($I);

// It's tricky to interact with Gutenberg's margin and padding pickers, so we programmatically create the Page
// instead to then confirm the settings apply on the output.
// We don't need to test the margin and padding pickers themselves, as they are Gutenberg supplied components, and our
// other End To End tests confirm that the block can be added in Gutenberg etc.
$I->havePageInDatabase(
[
'post_name' => 'kit-page-broadcasts-block-margin-padding-params',
'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"}}}} /-->',
]
);

// Load the Page on the frontend site.
$I->amOnPage('/kit-page-broadcasts-block-margin-padding-params');

// Wait for frontend web site to load.
$I->waitForElementVisible('body.page-template-default');

// Check that no PHP warnings or notices were output.
$I->checkNoWarningsAndNoticesOnScreen($I);

// Confirm that the block displays correctly with the expected number of Broadcasts.
$I->seeBroadcastsOutput(
$I,
[
'number_posts' => $_ENV['CONVERTKIT_API_BROADCAST_COUNT'],
]
);

// Confirm that our stylesheet loaded.
$I->seeInSource('<link rel="stylesheet" id="convertkit-broadcasts-css" href="' . $_ENV['WORDPRESS_URL'] . '/wp-content/plugins/convertkit/resources/frontend/css/broadcasts.css');

// Confirm that the chosen margin and padding are applied as CSS styles.
$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)"');
}

/**
* Test the Broadcasts block's typography parameters works.
*
* @since 2.8.4
*
* @param EndToEndTester $I Tester.
*/
public function testBroadcastsBlockWithTypographyParameters(EndToEndTester $I)
{
// Setup Plugin and enable debug log.
$I->setupKitPlugin($I);
$I->setupKitPluginResources($I);

// It's tricky to interact with Gutenberg's typography pickers, so we programmatically create the Page
// instead to then confirm the settings apply on the output.
// We don't need to test the typography picker itself, as it's a Gutenberg supplied component, and our
// other End To End tests confirm that the block can be added in Gutenberg etc.
$I->havePageInDatabase(
[
'post_name' => 'kit-page-broadcasts-block-typography-params',
'post_content' => '<!-- wp:convertkit/broadcasts {"date_format":"m/d/Y","limit":' . $_ENV['CONVERTKIT_API_BROADCAST_COUNT'] . ',"style":{"typography":{"lineHeight":"2"}},"fontSize":"large"} /-->',
]
);

// Load the Page on the frontend site.
$I->amOnPage('/kit-page-broadcasts-block-typography-params');

// Wait for frontend web site to load.
$I->waitForElementVisible('body.page-template-default');

// Check that no PHP warnings or notices were output.
$I->checkNoWarningsAndNoticesOnScreen($I);

// Confirm that the block displays correctly with the expected number of Broadcasts.
$I->seeBroadcastsOutput(
$I,
[
'number_posts' => $_ENV['CONVERTKIT_API_BROADCAST_COUNT'],
]
);

// Confirm that our stylesheet loaded.
$I->seeInSource('<link rel="stylesheet" id="convertkit-broadcasts-css" href="' . $_ENV['WORDPRESS_URL'] . '/wp-content/plugins/convertkit/resources/frontend/css/broadcasts.css');

// Confirm that the chosen typography settings are applied as CSS styles.
$I->seeInSource('<div class="convertkit-broadcasts wp-block-convertkit-broadcasts has-large-font-size" style="line-height:2"');
}

/**
* Deactivate and reset Plugin(s) after each test, if the test passes.
* We don't use _after, as this would provide a screenshot of the Plugin
Expand Down
Loading