From 37c287843e7fcb21bcc04bf22b9fb10e5e43cc10 Mon Sep 17 00:00:00 2001 From: Tim Carr Date: Wed, 9 Jul 2025 14:45:02 +0800 Subject: [PATCH 1/3] Blocks: Add typography support, clear up + standardise `style` MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `visualizers` aren’t needed in the block editor. `fontSize` belongs within `typography` --- includes/blocks/broadcasts/block.json | 4 ++ .../class-convertkit-block-broadcasts.php | 12 ++++-- .../class-convertkit-block-form-trigger.php | 36 +++------------- .../blocks/class-convertkit-block-product.php | 43 +++++-------------- includes/blocks/formtrigger/block.json | 4 ++ includes/blocks/product/block.json | 4 ++ 6 files changed, 37 insertions(+), 66 deletions(-) diff --git a/includes/blocks/broadcasts/block.json b/includes/blocks/broadcasts/block.json index ac4b0bd72..df0b5217e 100644 --- a/includes/blocks/broadcasts/block.json +++ b/includes/blocks/broadcasts/block.json @@ -62,6 +62,10 @@ "background": true, "text": true }, + "typography": { + "fontSize": true, + "lineHeight": true + }, "spacing": { "margin": true, "padding": true diff --git a/includes/blocks/class-convertkit-block-broadcasts.php b/includes/blocks/class-convertkit-block-broadcasts.php index 2c3f7a5dc..6a0671eb6 100644 --- a/includes/blocks/class-convertkit-block-broadcasts.php +++ b/includes/blocks/class-convertkit-block-broadcasts.php @@ -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', ), @@ -256,13 +256,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, ), diff --git a/includes/blocks/class-convertkit-block-form-trigger.php b/includes/blocks/class-convertkit-block-form-trigger.php index 0e8cc2e92..a5d7d4c50 100644 --- a/includes/blocks/class-convertkit-block-form-trigger.php +++ b/includes/blocks/class-convertkit-block-form-trigger.php @@ -159,7 +159,10 @@ 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', ), @@ -167,34 +170,6 @@ public function get_attributes() { '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', @@ -225,7 +200,8 @@ public function get_supports() { '__experimentalSkipSerialization' => true, ), 'typography' => array( - 'fontSize' => true, + 'fontSize' => true, + 'lineHeight' => true, ), 'spacing' => array( 'margin' => true, diff --git a/includes/blocks/class-convertkit-block-product.php b/includes/blocks/class-convertkit-block-product.php index 02fc0b853..f14d7a580 100644 --- a/includes/blocks/class-convertkit-block-product.php +++ b/includes/blocks/class-convertkit-block-product.php @@ -195,7 +195,10 @@ 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', ), @@ -203,34 +206,6 @@ public function get_attributes() { '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', @@ -250,8 +225,8 @@ public function get_attributes() { public function get_supports() { return array( - 'className' => true, - 'color' => array( + 'className' => true, + 'color' => array( 'background' => true, 'text' => true, @@ -260,7 +235,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, ), diff --git a/includes/blocks/formtrigger/block.json b/includes/blocks/formtrigger/block.json index 6460132b0..3dba03250 100644 --- a/includes/blocks/formtrigger/block.json +++ b/includes/blocks/formtrigger/block.json @@ -37,6 +37,10 @@ "background": true, "text": true }, + "typography": { + "fontSize": true, + "lineHeight": true + }, "spacing": { "margin": true, "padding": true diff --git a/includes/blocks/product/block.json b/includes/blocks/product/block.json index e25db1531..534a3123d 100644 --- a/includes/blocks/product/block.json +++ b/includes/blocks/product/block.json @@ -37,6 +37,10 @@ "background": true, "text": true }, + "typography": { + "fontSize": true, + "lineHeight": true + }, "spacing": { "margin": true, "padding": true From 674831937783ebef53df213bddd39860450d4ab5 Mon Sep 17 00:00:00 2001 From: Tim Carr Date: Wed, 9 Jul 2025 14:45:06 +0800 Subject: [PATCH 2/3] Added tests --- .../PageBlockBroadcastsCest.php | 48 +++++++++++++++++++ .../PageBlockFormTriggerCest.php | 44 +++++++++++++++++ .../products/PageBlockProductCest.php | 44 +++++++++++++++++ tests/Support/Helper/KitForms.php | 23 ++++++--- tests/Support/Helper/KitProducts.php | 23 ++++++--- 5 files changed, 168 insertions(+), 14 deletions(-) diff --git a/tests/EndToEnd/broadcasts/blocks-shortcodes/PageBlockBroadcastsCest.php b/tests/EndToEnd/broadcasts/blocks-shortcodes/PageBlockBroadcastsCest.php index 34e6d0cd4..b78dbe239 100644 --- a/tests/EndToEnd/broadcasts/blocks-shortcodes/PageBlockBroadcastsCest.php +++ b/tests/EndToEnd/broadcasts/blocks-shortcodes/PageBlockBroadcastsCest.php @@ -788,6 +788,54 @@ public function testBroadcastsBlockWithMarginAndPaddingParameters(EndToEndTester $I->seeInSource('
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' => '', + ] + ); + + // 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('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' => '', + ] + ); + + // 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. diff --git a/tests/EndToEnd/products/PageBlockProductCest.php b/tests/EndToEnd/products/PageBlockProductCest.php index c7cd9ea80..e723312db 100644 --- a/tests/EndToEnd/products/PageBlockProductCest.php +++ b/tests/EndToEnd/products/PageBlockProductCest.php @@ -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' => '', + ] + ); + + // 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. diff --git a/tests/Support/Helper/KitForms.php b/tests/Support/Helper/KitForms.php index 59e02f853..a2f6b05c8 100644 --- a/tests/Support/Helper/KitForms.php +++ b/tests/Support/Helper/KitForms.php @@ -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('