Skip to content

Blocks: Add Typography Support #848

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 3 commits into from
Jul 10, 2025
Merged

Blocks: Add Typography Support #848

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
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
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
4 changes: 4 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 @@ -62,6 +62,10 @@
"background": true,
"text": true
},
"typography": {
"fontSize": true,
"lineHeight": true
},
"spacing": {
"margin": true,
"padding": true
Expand Down
15 changes: 11 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,13 +259,17 @@ public function get_attributes() {
public function get_supports() {

return array(
'className' => true,
'color' => array(
'className' => true,
'color' => array(
'link' => true,
'background' => true,
'text' => true,
),
'spacing' => array(
'typography' => array(
'fontSize' => true,
'lineHeight' => true,
),
'spacing' => array(
'margin' => true,
'padding' => true,
),
Expand Down
33 changes: 6 additions & 27 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,7 +203,8 @@ public function get_supports() {
'__experimentalSkipSerialization' => true,
),
'typography' => array(
'fontSize' => true,
'fontSize' => true,
'lineHeight' => true,
),
'spacing' => array(
'margin' => true,
Expand Down
40 changes: 11 additions & 29 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 All @@ -250,8 +228,8 @@ public function get_attributes() {
public function get_supports() {

return array(
'className' => true,
'color' => array(
'className' => true,
'color' => array(
'background' => true,
'text' => true,

Expand All @@ -260,7 +238,11 @@ public function get_supports() {
// See: https://github.com/WordPress/gutenberg/issues/32417.
'__experimentalSkipSerialization' => true,
),
'spacing' => array(
'typography' => array(
'fontSize' => true,
'lineHeight' => true,
),
'spacing' => array(
'margin' => true,
'padding' => true,
),
Expand Down
4 changes: 4 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 @@ -37,6 +37,10 @@
"background": true,
"text": true
},
"typography": {
"fontSize": true,
"lineHeight": true
},
"spacing": {
"margin": true,
"padding": true
Expand Down
4 changes: 4 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 @@ -37,6 +37,10 @@
"background": true,
"text": true
},
"typography": {
"fontSize": true,
"lineHeight": true
},
"spacing": {
"margin": true,
"padding": true
Expand Down
48 changes: 48 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 @@ -788,6 +788,54 @@ public function testBroadcastsBlockWithMarginAndPaddingParameters(EndToEndTester
$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
44 changes: 44 additions & 0 deletions tests/EndToEnd/forms/blocks-shortcodes/PageBlockFormTriggerCest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,6 +384,50 @@ public function testFormTriggerBlockWithMarginAndPaddingParameters(EndToEndTeste
);
}

/**
* Test the Form Trigger block's typography parameters works.
*
* @since 2.8.4
*
* @param EndToEndTester $I Tester.
*/
public function testFormTriggerBlockWithTypographyParameters(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-form-trigger-block-typography-params',
'post_content' => '<!-- wp:convertkit/formtrigger {"form":"' . $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_ID'] . '","style":{"typography":{"lineHeight":"2"}},"fontSize":"large"} /-->',
]
);

// Load the Page on the frontend site.
$I->amOnPage('/kit-page-form-trigger-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 and has the inline styles applied.
$I->seeFormTriggerOutput(
$I,
formURL: $_ENV['CONVERTKIT_API_FORM_FORMAT_MODAL_URL'],
text: 'Subscribe',
cssClasses: 'has-large-font-size',
styles: 'line-height:2',
isBlock: true
);
}

/**
* Test the Form Trigger block displays a message with a link to the Plugin's
* settings screen, when the Plugin has no credentials specified.
Expand Down
44 changes: 44 additions & 0 deletions tests/EndToEnd/products/PageBlockProductCest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -564,6 +564,50 @@ public function testProductBlockWithMarginAndPaddingParameters(EndToEndTester $I
);
}

/**
* Test the Product block's typography parameters works.
*
* @since 2.8.4
*
* @param EndToEndTester $I Tester.
*/
public function testProductBlockWithTypographyParameters(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-product-block-typography-params',
'post_content' => '<!-- wp:convertkit/product {"product":"36377","style":{"typography":{"lineHeight":"2"}},"fontSize":"large"} /-->',
]
);

// Load the Page on the frontend site.
$I->amOnPage('/kit-page-product-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 and has the inline styles applied.
$I->seeProductOutput(
$I,
productURL: $_ENV['CONVERTKIT_API_PRODUCT_URL'],
text: 'Buy my product',
cssClasses: 'has-large-font-size',
styles: 'line-height:2',
isBlock: true
);
}

/**
* Test the Product block displays a message with a link to the Plugin's
* settings screen, when the Plugin has Not connected to Kit.
Expand Down
23 changes: 16 additions & 7 deletions tests/Support/Helper/KitForms.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,15 +76,16 @@ public function seeFormOutput($I, $formID, $position = false, $element = false,
*
* @since 2.2.0
*
* @param EndToEndTester $I Tester.
* @param string $formURL Form URL.
* @param bool|string $text Test if the button text matches the given value.
* @param bool|string $textColor Test if the given text color is applied.
* @param EndToEndTester $I Tester.
* @param string $formURL Form URL.
* @param bool|string $text Test if the button text matches the given value.
* @param bool|string $textColor Test if the given text color is applied.
* @param bool|string $backgroundColor Test is the given background color is applied.
* @param bool|string $styles Test if the given styles are applied.
* @param bool $isBlock Test if this is a form trigger block or shortcode.
* @param bool|string $cssClasses Test if the given CSS classes are applied.
* @param bool|string $styles Test if the given styles are applied.
* @param bool $isBlock Test if this is a form trigger block or shortcode.
*/
public function seeFormTriggerOutput($I, $formURL, $text = false, $textColor = false, $backgroundColor = false, $styles = false, $isBlock = false)
public function seeFormTriggerOutput($I, $formURL, $text = false, $textColor = false, $backgroundColor = false, $cssClasses = false, $styles = false, $isBlock = false)
{
// Confirm that the button stylesheet loaded.
$I->seeInSource('<link rel="stylesheet" id="convertkit-button-css" href="' . $_ENV['WORDPRESS_URL'] . '/wp-content/plugins/convertkit/resources/frontend/css/button.css');
Expand Down Expand Up @@ -130,6 +131,14 @@ public function seeFormTriggerOutput($I, $formURL, $text = false, $textColor = f
}
}

// Confirm that the CSS classes are as expected.
if ($cssClasses !== false) {
$I->assertStringContainsString(
$cssClasses,
$I->grabAttributeFrom('a.convertkit-formtrigger', 'class')
);
}

// Confirm that the styles are as expected.
if ($styles !== false) {
$I->assertStringContainsString(
Expand Down
Loading