From 34550d4a128a25cdbce3fd09855ceb753a0596d0 Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Thu, 28 Aug 2025 17:41:45 -0300 Subject: [PATCH 01/21] Switch contact form submit button to core/buttons block Replaces usage of the custom jetpack/button block with the core/buttons and core/button blocks for submit actions in the contact form. Updates block variations, editor logic, and server-side rendering to support and enhance compatibility with core/buttons, including interactivity attributes and error handling. This change improves alignment with WordPress core blocks and future-proofs the contact form implementation. --- .../contact-form/class-contact-form-block.php | 50 ++++++++ .../forms/src/blocks/contact-form/edit.tsx | 34 +++-- .../forms/src/blocks/contact-form/editor.scss | 1 - .../src/blocks/contact-form/variations.js | 120 ++++++++++++------ .../src/contact-form/class-contact-form.php | 7 +- 5 files changed, 162 insertions(+), 50 deletions(-) diff --git a/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php b/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php index 81b90d613a8f4..1e25be5a5dd58 100644 --- a/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php +++ b/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php @@ -47,6 +47,7 @@ public static function register_block() { add_filter( 'render_block_data', array( __CLASS__, 'find_nested_html_block' ), 10, 3 ); add_filter( 'render_block_core/html', array( __CLASS__, 'render_wrapped_html_block' ), 10, 2 ); + add_filter( 'render_block_core/buttons', array( __CLASS__, 'render_buttons_block' ), 10, 2 ); add_filter( 'jetpack_block_editor_feature_flags', array( __CLASS__, 'register_feature' ) ); add_filter( 'pre_render_block', array( __CLASS__, 'pre_render_contact_form' ), 10, 3 ); @@ -102,6 +103,55 @@ public static function render_wrapped_html_block( $content, $parsed_block ) { return $content; } + /** + * Add Jetpack Forms interactivity attributes to core/buttons blocks that live inside a contact form. + * + * @param string $content Rendered block HTML. + * @param array $parsed_block Parsed block data. + * + * @return string + */ + public static function render_buttons_block( $content, $parsed_block ) { + // We don't need the parsed_block details anymore; suppress unused-variable warning. + unset( $parsed_block ); + // We simply scan the content for our marker class; if absent, return early. + if ( ! str_contains( $content, 'jetpack-form-submit-button' ) ) { + return $content; + } + + if ( ! class_exists( '\WP_HTML_Tag_Processor' ) ) { + return $content; + } + + $processor = new \WP_HTML_Tag_Processor( $content ); + $modified = false; + + // Find wrapper div with marker class. + while ( $processor->next_tag( array( 'tag_name' => 'div' ) ) ) { + $class_attr = $processor->get_attribute( 'class' ); + if ( $class_attr && str_contains( $class_attr, 'jetpack-form-submit-button' ) ) { + // Ensure interactivity root attribute on wrapper. + if ( ! $processor->get_attribute( 'data-wp-interactive' ) ) { + $processor->set_attribute( 'data-wp-interactive', 'jetpack/form' ); + } + // Save bookmark to return later. + $processor->set_bookmark( 'wrapper' ); + + // Dive into its children to find first link or button. + if ( $processor->next_tag( array( 'tag_name' => array( 'a', 'button' ) ) ) ) { + $processor->set_attribute( 'data-wp-class--is-submitting', 'state.isSubmitting' ); + $processor->set_attribute( 'data-wp-bind--aria-disabled', 'state.isAriaDisabled' ); + $modified = true; + } + + // Jump back to wrapper to continue outer loop safely. + $processor->seek( 'wrapper' ); + } + } + + return $modified ? $processor->get_updated_html() : $content; + } + /** * Register the Child blocks of Contact Form * We are registering child blocks only when Contact Form plugin is Active diff --git a/projects/packages/forms/src/blocks/contact-form/edit.tsx b/projects/packages/forms/src/blocks/contact-form/edit.tsx index 1979e448941c7..41e553e32fc79 100644 --- a/projects/packages/forms/src/blocks/contact-form/edit.tsx +++ b/projects/packages/forms/src/blocks/contact-form/edit.tsx @@ -211,11 +211,13 @@ function JetpackContactFormEdit( { [ clientId, steps ] ); - const submitButton = useFindBlockRecursively( - clientId, - block => block.name === 'jetpack/button' + const findButtonsBlock = useCallback( + block => block.name === 'core/buttons' || block.name === 'jetpack/button', + [] ); + const submitButton = useFindBlockRecursively( clientId, findButtonsBlock ); + const { postTitle, hasAnyInnerBlocks, postAuthorEmail, selectedBlockClientId, onlySubmitBlock } = useSelect( select => { @@ -236,6 +238,11 @@ function JetpackContactFormEdit( { const { getUser } = select( coreStore ); const innerBlocksData = getBlocks( clientId ); + const isSingleButtonBlock = + innerBlocksData.length === 1 && + ( innerBlocksData[ 0 ].name === 'core/buttons' || + innerBlocksData[ 0 ].name === 'jetpack/button' ); + const title = getEditedPostAttribute( 'title' ); const authorId = getEditedPostAttribute( 'author' ); const authorEmail = authorId && getUser( authorId )?.email; @@ -245,8 +252,7 @@ function JetpackContactFormEdit( { hasAnyInnerBlocks: innerBlocksData.length > 0, postAuthorEmail: authorEmail, selectedBlockClientId: selectedStepBlockId, - onlySubmitBlock: - innerBlocksData.length === 1 && innerBlocksData[ 0 ].name === 'jetpack/button', + onlySubmitBlock: isSingleButtonBlock, }; }, [ clientId ] @@ -344,7 +350,7 @@ function JetpackContactFormEdit( { // Find the submit button const submitButtonIndex = currentInnerBlocks.findIndex( block => - block.name === 'jetpack/button' && + ( block.name === 'core/buttons' || block.name === 'jetpack/button' ) && ( block.attributes?.customVariant === 'submit' || block.attributes?.element === 'button' ) ); @@ -479,7 +485,9 @@ function JetpackContactFormEdit( { // Helper functions const findButtonBlock = () => { - const buttonIndex = currentInnerBlocks.findIndex( block => block.name === 'jetpack/button' ); + const buttonIndex = currentInnerBlocks.findIndex( + block => block.name === 'core/buttons' || block.name === 'jetpack/button' + ); return buttonIndex !== -1 ? { block: currentInnerBlocks[ buttonIndex ], @@ -720,10 +728,14 @@ function JetpackContactFormEdit( { // Ensure we have a submit button at the end of the form. if ( ! finalSubmitButton ) { // Create a fresh submit button if none was found. - finalSubmitButton = createBlock( 'jetpack/button', { - element: 'button', - text: __( 'Submit', 'jetpack-forms' ), - } ); + finalSubmitButton = createBlock( 'core/buttons', {}, [ + createBlock( 'core/button', { + text: __( 'Submit', 'jetpack-forms' ), + type: 'submit', + tagName: 'button', + className: 'wp-block-jetpack-button jetpack-form-submit-button', + } ), + ] ); } const finalBlocks = [ ...flattenedInnerBlocks, finalSubmitButton ]; diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index 983855fd0424d..a78c8083dedde 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -55,7 +55,6 @@ } .wp-block { - flex: 1 1 100%; margin-top: 0; margin-bottom: 0; max-width: 100%; diff --git a/projects/packages/forms/src/blocks/contact-form/variations.js b/projects/packages/forms/src/blocks/contact-form/variations.js index ee870c0bfcaf1..4a40899c0a9a6 100644 --- a/projects/packages/forms/src/blocks/contact-form/variations.js +++ b/projects/packages/forms/src/blocks/contact-form/variations.js @@ -66,12 +66,20 @@ const variations = [ ], ], [ - 'jetpack/button', - { - text: __( 'Contact Us', 'jetpack-forms' ), - element: 'button', - lock: { remove: true }, - }, + 'core/buttons', + {}, + [ + [ + 'core/button', + { + text: __( 'Contact Us', 'jetpack-forms' ), + tagName: 'button', + className: 'jetpack-form-submit-button', + type: 'submit', + element: 'button', + }, + ], + ], ], ], attributes: { @@ -145,12 +153,20 @@ const variations = [ ], ], [ - 'jetpack/button', - { - text: __( 'Send RSVP', 'jetpack-forms' ), - element: 'button', - lock: { remove: true }, - }, + 'core/buttons', + {}, + [ + [ + 'core/button', + { + text: __( 'Send RSVP', 'jetpack-forms' ), + tagName: 'button', + className: 'jetpack-form-submit-button', + type: 'submit', + element: 'button', + }, + ], + ], ], ], attributes: { @@ -298,12 +314,20 @@ const variations = [ ], ], [ - 'jetpack/button', - { - text: __( 'Send', 'jetpack-forms' ), - element: 'button', - lock: { remove: true }, - }, + 'core/buttons', + {}, + [ + [ + 'core/button', + { + text: __( 'Send', 'jetpack-forms' ), + tagName: 'button', + className: 'jetpack-form-submit-button', + type: 'submit', + element: 'button', + }, + ], + ], ], ], attributes: { @@ -487,12 +511,20 @@ const variations = [ ], ], [ - 'jetpack/button', - { - text: __( 'Book appointment', 'jetpack-forms' ), - element: 'button', - lock: { remove: true }, - }, + 'core/buttons', + {}, + [ + [ + 'core/button', + { + text: __( 'Book appointment', 'jetpack-forms' ), + tagName: 'button', + className: 'jetpack-form-submit-button', + type: 'submit', + element: 'button', + }, + ], + ], ], ], attributes: { @@ -633,12 +665,20 @@ const variations = [ ], ], [ - 'jetpack/button', - { - text: __( 'Send Feedback', 'jetpack-forms' ), - element: 'button', - lock: { remove: true }, - }, + 'core/buttons', + {}, + [ + [ + 'core/button', + { + text: __( 'Send Feedback', 'jetpack-forms' ), + tagName: 'button', + className: 'jetpack-form-submit-button', + type: 'submit', + element: 'button', + }, + ], + ], ], ], attributes: { @@ -956,12 +996,20 @@ const variations = [ [ [ 'jetpack/label' ], [ 'jetpack/input', { type: 'checkbox' } ] ], ], [ - 'jetpack/button', - { - text: __( 'Subscribe', 'jetpack-forms' ), - element: 'button', - lock: { remove: true }, - }, + 'core/buttons', + {}, + [ + [ + 'core/button', + { + text: __( 'Subscribe', 'jetpack-forms' ), + tagName: 'button', + className: 'jetpack-form-submit-button', + type: 'submit', + element: 'button', + }, + ], + ], ], ], attributes: {}, diff --git a/projects/packages/forms/src/contact-form/class-contact-form.php b/projects/packages/forms/src/contact-form/class-contact-form.php index 1bfa69dd9768a..b1dfaa9dcee8a 100644 --- a/projects/packages/forms/src/contact-form/class-contact-form.php +++ b/projects/packages/forms/src/contact-form/class-contact-form.php @@ -1069,7 +1069,7 @@ class='{$container_classes_string}' * @param int $id Contact Form ID. */ $url = apply_filters( 'grunion_contact_form_form_action', $url, $GLOBALS['post'], $id, $page ); - $has_submit_button_block = str_contains( $content, 'wp-block-jetpack-button' ); + $has_submit_button_block = str_contains( $content, 'wp-block-jetpack-button' ) || str_contains( $content, 'wp-block-buttons' ); $form_classes = 'contact-form commentsblock'; if ( $submission_success ) { $form_classes .= ' submission-success'; @@ -1104,8 +1104,11 @@ class='" . esc_attr( $form_classes ) . "' $form_aria_label $r = preg_replace( '/
Date: Thu, 28 Aug 2025 17:58:47 -0300 Subject: [PATCH 02/21] simpler --- .../contact-form/class-contact-form-block.php | 51 ++++++------------- 1 file changed, 15 insertions(+), 36 deletions(-) diff --git a/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php b/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php index 1e25be5a5dd58..eb63eb14ccd0b 100644 --- a/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php +++ b/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php @@ -47,7 +47,7 @@ public static function register_block() { add_filter( 'render_block_data', array( __CLASS__, 'find_nested_html_block' ), 10, 3 ); add_filter( 'render_block_core/html', array( __CLASS__, 'render_wrapped_html_block' ), 10, 2 ); - add_filter( 'render_block_core/buttons', array( __CLASS__, 'render_buttons_block' ), 10, 2 ); + add_filter( 'render_block_core/button', array( __CLASS__, 'render_submit_button' ), 10, 2 ); add_filter( 'jetpack_block_editor_feature_flags', array( __CLASS__, 'register_feature' ) ); add_filter( 'pre_render_block', array( __CLASS__, 'pre_render_contact_form' ), 10, 3 ); @@ -106,50 +106,29 @@ public static function render_wrapped_html_block( $content, $parsed_block ) { /** * Add Jetpack Forms interactivity attributes to core/buttons blocks that live inside a contact form. * - * @param string $content Rendered block HTML. - * @param array $parsed_block Parsed block data. - * - * @return string + * @param string $content Rendered HTML of the core/button block. + * @param array $parsed_block Parsed block array. + * @return string Possibly modified HTML. */ - public static function render_buttons_block( $content, $parsed_block ) { - // We don't need the parsed_block details anymore; suppress unused-variable warning. - unset( $parsed_block ); - // We simply scan the content for our marker class; if absent, return early. - if ( ! str_contains( $content, 'jetpack-form-submit-button' ) ) { - return $content; + public static function render_submit_button( $content, $parsed_block ) { + $class = $parsed_block['attrs']['className'] ?? ''; + if ( ! str_contains( $class, 'jetpack-form-submit-button' ) ) { + return $content; // Not our submit button. } if ( ! class_exists( '\WP_HTML_Tag_Processor' ) ) { return $content; } - $processor = new \WP_HTML_Tag_Processor( $content ); - $modified = false; - - // Find wrapper div with marker class. - while ( $processor->next_tag( array( 'tag_name' => 'div' ) ) ) { - $class_attr = $processor->get_attribute( 'class' ); - if ( $class_attr && str_contains( $class_attr, 'jetpack-form-submit-button' ) ) { - // Ensure interactivity root attribute on wrapper. - if ( ! $processor->get_attribute( 'data-wp-interactive' ) ) { - $processor->set_attribute( 'data-wp-interactive', 'jetpack/form' ); - } - // Save bookmark to return later. - $processor->set_bookmark( 'wrapper' ); - - // Dive into its children to find first link or button. - if ( $processor->next_tag( array( 'tag_name' => array( 'a', 'button' ) ) ) ) { - $processor->set_attribute( 'data-wp-class--is-submitting', 'state.isSubmitting' ); - $processor->set_attribute( 'data-wp-bind--aria-disabled', 'state.isAriaDisabled' ); - $modified = true; - } - - // Jump back to wrapper to continue outer loop safely. - $processor->seek( 'wrapper' ); - } + $p = new \WP_HTML_Tag_Processor( $content ); + if ( ! $p->next_tag( array( 'tag_name' => array( 'button', 'a' ) ) ) ) { + return $content; } - return $modified ? $processor->get_updated_html() : $content; + $p->set_attribute( 'data-wp-class--is-submitting', 'state.isSubmitting' ); + $p->set_attribute( 'data-wp-bind--aria-disabled', 'state.isAriaDisabled' ); + + return $p->get_updated_html(); } /** From 610fa488df47e6e2d77d7984f42f9a5d692f015b Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Thu, 28 Aug 2025 18:32:01 -0300 Subject: [PATCH 03/21] Restrict flex styling to specific wp-block elements --- projects/packages/forms/src/blocks/contact-form/editor.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index a78c8083dedde..45d2959795d84 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -54,7 +54,8 @@ flex: 1 1 100%; } - .wp-block { + .wp-block:not(.wp-block-buttons):not(.wp-block-button) { + flex: 0 0 100%; margin-top: 0; margin-bottom: 0; max-width: 100%; From 0cc1193cd2d2dbeca9a831828e69d6844120d8ce Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Thu, 28 Aug 2025 19:05:31 -0300 Subject: [PATCH 04/21] Add spinner animation for submitting form button Introduces a spinner animation to the submit button when the form is submitting by adding CSS for a loading indicator and keyframes for the spinner effect. --- .../forms/src/contact-form/css/grunion.scss | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/projects/packages/forms/src/contact-form/css/grunion.scss b/projects/packages/forms/src/contact-form/css/grunion.scss index a51cd8a566fa7..d42585df8e580 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.scss +++ b/projects/packages/forms/src/contact-form/css/grunion.scss @@ -1307,3 +1307,23 @@ on production builds, the attributes are being reordered, causing side-effects .contact-form-ajax-submission:not(.submission-success) { display: none; } + +.jetpack-form-submit-button.is-submitting .wp-block-button__link::after, +.jetpack-form-submit-button.is-submitting button::after { + content: ""; + display: inline-block; + width: 1em; + height: 1em; + margin-left: 0.5em; + border: 2px solid currentColor; + border-right-color: transparent; + border-radius: 50%; + animation: jp-spinner 0.75s linear infinite; +} + +@keyframes jp-spinner { + + to { + transform: rotate(360deg); + } +} From 1e4c34f2d2f4598be321fb3517add8a51673da1a Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Thu, 28 Aug 2025 19:07:57 -0300 Subject: [PATCH 05/21] Restrict tag processing to button and update submit styles --- .../forms/src/blocks/contact-form/class-contact-form-block.php | 2 +- projects/packages/forms/src/contact-form/css/grunion.scss | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php b/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php index eb63eb14ccd0b..ae150f01e9088 100644 --- a/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php +++ b/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php @@ -121,7 +121,7 @@ public static function render_submit_button( $content, $parsed_block ) { } $p = new \WP_HTML_Tag_Processor( $content ); - if ( ! $p->next_tag( array( 'tag_name' => array( 'button', 'a' ) ) ) ) { + if ( ! $p->next_tag( array( 'tag_name' => 'button' ) ) ) { return $content; } diff --git a/projects/packages/forms/src/contact-form/css/grunion.scss b/projects/packages/forms/src/contact-form/css/grunion.scss index d42585df8e580..f7d66a0b7dbc5 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.scss +++ b/projects/packages/forms/src/contact-form/css/grunion.scss @@ -1308,7 +1308,6 @@ on production builds, the attributes are being reordered, causing side-effects display: none; } -.jetpack-form-submit-button.is-submitting .wp-block-button__link::after, .jetpack-form-submit-button.is-submitting button::after { content: ""; display: inline-block; From 621575324e730838067194564479f5c3a826b4dd Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Thu, 28 Aug 2025 19:11:45 -0300 Subject: [PATCH 06/21] changelog --- projects/packages/forms/changelog/add-core-button-submit | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/packages/forms/changelog/add-core-button-submit diff --git a/projects/packages/forms/changelog/add-core-button-submit b/projects/packages/forms/changelog/add-core-button-submit new file mode 100644 index 0000000000000..4d4cc73ceb6ca --- /dev/null +++ b/projects/packages/forms/changelog/add-core-button-submit @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Forms: allow using the Gutenberg Core Button block as the submit control in Contact Form. The block gets the same interactivity bindings and loading spinner as the Jetpack Button, and all form variations now insert a core button by default. From c6b007f35369d7ebffd38f445c71d4377350fe14 Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Fri, 29 Aug 2025 09:14:16 -0300 Subject: [PATCH 07/21] Update projects/packages/forms/src/blocks/contact-form/variations.js Co-authored-by: Mikael Korpela --- projects/packages/forms/src/blocks/contact-form/variations.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/packages/forms/src/blocks/contact-form/variations.js b/projects/packages/forms/src/blocks/contact-form/variations.js index 4a40899c0a9a6..57b9d4619d71f 100644 --- a/projects/packages/forms/src/blocks/contact-form/variations.js +++ b/projects/packages/forms/src/blocks/contact-form/variations.js @@ -671,7 +671,7 @@ const variations = [ [ 'core/button', { - text: __( 'Send Feedback', 'jetpack-forms' ), + text: __( 'Send feedback', 'jetpack-forms' ), tagName: 'button', className: 'jetpack-form-submit-button', type: 'submit', From 82764ad8d0a21926e0f1919c7769f60d0cd83cb6 Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Fri, 29 Aug 2025 09:27:34 -0300 Subject: [PATCH 08/21] Refactor render_submit_button to improve clarity --- .../forms/src/blocks/contact-form/class-contact-form-block.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php b/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php index ae150f01e9088..a056d2b1037a8 100644 --- a/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php +++ b/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php @@ -113,7 +113,7 @@ public static function render_wrapped_html_block( $content, $parsed_block ) { public static function render_submit_button( $content, $parsed_block ) { $class = $parsed_block['attrs']['className'] ?? ''; if ( ! str_contains( $class, 'jetpack-form-submit-button' ) ) { - return $content; // Not our submit button. + return $content; } if ( ! class_exists( '\WP_HTML_Tag_Processor' ) ) { From f79550568ca0ec0a611210561ba7bdebd597fd75 Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Mon, 15 Sep 2025 11:51:37 -0300 Subject: [PATCH 09/21] Update projects/packages/forms/src/blocks/contact-form/variations.js Co-authored-by: Mikael Korpela --- projects/packages/forms/src/blocks/contact-form/variations.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/packages/forms/src/blocks/contact-form/variations.js b/projects/packages/forms/src/blocks/contact-form/variations.js index 57b9d4619d71f..1126fba5e5cf4 100644 --- a/projects/packages/forms/src/blocks/contact-form/variations.js +++ b/projects/packages/forms/src/blocks/contact-form/variations.js @@ -72,7 +72,7 @@ const variations = [ [ 'core/button', { - text: __( 'Contact Us', 'jetpack-forms' ), + text: __( 'Contact us', 'jetpack-forms' ), tagName: 'button', className: 'jetpack-form-submit-button', type: 'submit', From b11a368a5ba90db0512bfa44c37dce335a336c9f Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Tue, 16 Sep 2025 14:59:07 -0300 Subject: [PATCH 10/21] add some tests to improve coverage --- .../contact-form/Contact_Form_Block_Test.php | 279 ++++++++++++++++++ 1 file changed, 279 insertions(+) diff --git a/projects/packages/forms/tests/php/contact-form/Contact_Form_Block_Test.php b/projects/packages/forms/tests/php/contact-form/Contact_Form_Block_Test.php index cb458e0a4a65f..982c9ae2f695b 100644 --- a/projects/packages/forms/tests/php/contact-form/Contact_Form_Block_Test.php +++ b/projects/packages/forms/tests/php/contact-form/Contact_Form_Block_Test.php @@ -150,4 +150,283 @@ public static function data_provider_test_register_child_blocks() { ), ); } + + /** + * Test that ::render_submit_button adds interactivity attributes to submit buttons. + * + * @dataProvider data_provider_test_render_submit_button + */ + #[DataProvider( 'data_provider_test_render_submit_button' )] + public function test_render_submit_button( $content, $parsed_block, $expected ) { + $result = Contact_Form_Block::render_submit_button( $content, $parsed_block ); + $this->assertEquals( $expected, $result ); + } + + /** + * Data provider for test_render_submit_button. + */ + public static function data_provider_test_render_submit_button() { + // Skip HTML Tag Processor tests if the class doesn't exist (WordPress < 6.2) + if ( ! class_exists( '\WP_HTML_Tag_Processor' ) ) { + return array( + 'no html tag processor' => array( + '', + array( 'attrs' => array( 'className' => 'jetpack-form-submit-button' ) ), + '', + ), + ); + } + + return array( + 'submit button with jetpack class' => array( + '', + array( 'attrs' => array( 'className' => 'jetpack-form-submit-button' ) ), + '', + ), + 'button without jetpack class' => array( + '', + array( 'attrs' => array( 'className' => 'wp-block-button__link' ) ), + '', + ), + 'submit button with multiple classes including jetpack' => array( + '', + array( 'attrs' => array( 'className' => 'my-custom-class jetpack-form-submit-button another-class' ) ), + '', + ), + 'block with no className attribute' => array( + '', + array( 'attrs' => array() ), + '', + ), + 'block with empty className' => array( + '', + array( 'attrs' => array( 'className' => '' ) ), + '', + ), + 'content without button tag' => array( + '
Not a button
', + array( 'attrs' => array( 'className' => 'jetpack-form-submit-button' ) ), + '
Not a button
', + ), + ); + } + + /** + * Test that ::render_wrapped_html_block wraps HTML blocks with jetpack form parent. + */ + public function test_render_wrapped_html_block() { + $content = '

Some HTML content

'; + + // Test with hasJPFormParent flag + $parsed_block_with_parent = array( 'hasJPFormParent' => true ); + $result = Contact_Form_Block::render_wrapped_html_block( $content, $parsed_block_with_parent ); + $this->assertEquals( '

Some HTML content

', $result ); + + // Test without hasJPFormParent flag + $parsed_block_without_parent = array(); + $result = Contact_Form_Block::render_wrapped_html_block( $content, $parsed_block_without_parent ); + $this->assertEquals( '

Some HTML content

', $result ); + + // Test with hasJPFormParent set to false + $parsed_block_false_parent = array( 'hasJPFormParent' => false ); + $result = Contact_Form_Block::render_wrapped_html_block( $content, $parsed_block_false_parent ); + $this->assertEquals( '

Some HTML content

', $result ); + } + + /** + * Test that ::register_feature adds multistep-form feature. + */ + public function test_register_feature() { + $input_features = array( 'existing-feature' => true ); + + // We can't easily mock static methods, so we'll test the structure + $result = Contact_Form_Block::register_feature( $input_features ); + + // Should preserve existing features + $this->assertTrue( $result['existing-feature'] ); + + // Should add multistep-form feature + $this->assertArrayHasKey( 'multistep-form', $result ); + $this->assertIsBool( $result['multistep-form'] ); + } + + /** + * Test form step counting functionality. + * + * @dataProvider data_provider_test_form_step_counting + */ + #[DataProvider( 'data_provider_test_form_step_counting' )] + public function test_form_step_counting( $block_structure, $expected_steps ) { + // Use reflection to access private method + $reflection = new \ReflectionClass( Contact_Form_Block::class ); + $count_method = $reflection->getMethod( 'count_form_steps_in_block' ); + $count_method->setAccessible( true ); + + $result = $count_method->invoke( null, $block_structure ); + $this->assertEquals( $expected_steps, $result ); + } + + /** + * Data provider for form step counting tests. + */ + public static function data_provider_test_form_step_counting() { + return array( + 'no inner blocks' => array( + array( + 'blockName' => 'jetpack/contact-form', + 'innerBlocks' => array(), + ), + 0, + ), + 'single form step' => array( + array( + 'blockName' => 'jetpack/contact-form', + 'innerBlocks' => array( + array( + 'blockName' => 'jetpack/form-step', + 'innerBlocks' => array(), + ), + ), + ), + 1, + ), + 'multiple form steps' => array( + array( + 'blockName' => 'jetpack/contact-form', + 'innerBlocks' => array( + array( + 'blockName' => 'jetpack/form-step', + 'innerBlocks' => array(), + ), + array( + 'blockName' => 'jetpack/form-step', + 'innerBlocks' => array(), + ), + array( + 'blockName' => 'jetpack/form-step', + 'innerBlocks' => array(), + ), + ), + ), + 3, + ), + 'nested form steps in container' => array( + array( + 'blockName' => 'jetpack/contact-form', + 'innerBlocks' => array( + array( + 'blockName' => 'jetpack/form-step-container', + 'innerBlocks' => array( + array( + 'blockName' => 'jetpack/form-step', + 'innerBlocks' => array(), + ), + array( + 'blockName' => 'jetpack/form-step', + 'innerBlocks' => array(), + ), + ), + ), + ), + ), + 2, + ), + 'mixed blocks with form steps' => array( + array( + 'blockName' => 'jetpack/contact-form', + 'innerBlocks' => array( + array( + 'blockName' => 'jetpack/field-text', + 'innerBlocks' => array(), + ), + array( + 'blockName' => 'jetpack/form-step', + 'innerBlocks' => array(), + ), + array( + 'blockName' => 'jetpack/field-email', + 'innerBlocks' => array(), + ), + array( + 'blockName' => 'jetpack/form-step', + 'innerBlocks' => array(), + ), + ), + ), + 2, + ), + ); + } + + /** + * Test pre_render_contact_form hook processing. + */ + public function test_pre_render_contact_form() { + $contact_form_block = array( + 'blockName' => 'jetpack/contact-form', + 'innerBlocks' => array( + array( + 'blockName' => 'jetpack/form-step', + 'innerBlocks' => array(), + ), + array( + 'blockName' => 'jetpack/form-step', + 'innerBlocks' => array(), + ), + ), + ); + + $other_block = array( + 'blockName' => 'core/paragraph', + 'innerBlocks' => array(), + ); + + // Test that it returns null for non-contact-form blocks + $result = Contact_Form_Block::pre_render_contact_form( null, $other_block ); + $this->assertNull( $result ); + + // Test that it processes contact form blocks and returns null (lets normal rendering continue) + $result = Contact_Form_Block::pre_render_contact_form( null, $contact_form_block ); + $this->assertNull( $result ); + + // Test that step count is updated after processing + $step_count = Contact_Form_Block::get_form_step_count(); + $this->assertEquals( 2, $step_count ); + } + + /** + * Test get_form_step_count method. + */ + public function test_get_form_step_count() { + // Use reflection to set the private static property for testing + $reflection = new \ReflectionClass( Contact_Form_Block::class ); + $step_count_property = $reflection->getProperty( 'form_step_count' ); + $step_count_property->setAccessible( true ); + $step_count_property->setValue( null, 5 ); + + $result = Contact_Form_Block::get_form_step_count(); + $this->assertEquals( 5, $result ); + + // Reset to default + $step_count_property->setValue( null, 1 ); + } + + /** + * Test can_manage_block method behavior. + */ + public function test_can_manage_block() { + // Test the filter override + add_filter( 'jetpack_contact_form_can_manage_block', '__return_true' ); + $this->assertTrue( Contact_Form_Block::can_manage_block() ); + remove_filter( 'jetpack_contact_form_can_manage_block', '__return_true' ); + + add_filter( 'jetpack_contact_form_can_manage_block', '__return_false' ); + + // When not in Jetpack context (class doesn't exist), should return true + if ( ! class_exists( 'Jetpack' ) ) { + $this->assertTrue( Contact_Form_Block::can_manage_block() ); + } + + remove_filter( 'jetpack_contact_form_can_manage_block', '__return_false' ); + } } From f382e5fb624df3a64e7169e80eb3dc35f4b8f604 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Tue, 16 Sep 2025 15:51:33 -0300 Subject: [PATCH 11/21] fix disabled and submitting states --- .../forms/src/blocks/contact-form/class-contact-form-block.php | 1 + projects/packages/forms/src/contact-form/css/grunion.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php b/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php index a056d2b1037a8..7e3fc0ac37e3e 100644 --- a/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php +++ b/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php @@ -127,6 +127,7 @@ public static function render_submit_button( $content, $parsed_block ) { $p->set_attribute( 'data-wp-class--is-submitting', 'state.isSubmitting' ); $p->set_attribute( 'data-wp-bind--aria-disabled', 'state.isAriaDisabled' ); + $p->set_attribute( 'data-wp-bind--disabled', 'state.isAriaDisabled' ); return $p->get_updated_html(); } diff --git a/projects/packages/forms/src/contact-form/css/grunion.scss b/projects/packages/forms/src/contact-form/css/grunion.scss index f7d66a0b7dbc5..27b27f2fef8ab 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.scss +++ b/projects/packages/forms/src/contact-form/css/grunion.scss @@ -1308,7 +1308,7 @@ on production builds, the attributes are being reordered, causing side-effects display: none; } -.jetpack-form-submit-button.is-submitting button::after { +.jetpack-form-submit-button button.is-submitting::after { content: ""; display: inline-block; width: 1em; From 708017b221f2a73475cb59d3e53d9904975b6408 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Tue, 16 Sep 2025 16:15:28 -0300 Subject: [PATCH 12/21] update tests after attribute addition --- .../forms/tests/php/contact-form/Contact_Form_Block_Test.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/packages/forms/tests/php/contact-form/Contact_Form_Block_Test.php b/projects/packages/forms/tests/php/contact-form/Contact_Form_Block_Test.php index 982c9ae2f695b..d444d39a20964 100644 --- a/projects/packages/forms/tests/php/contact-form/Contact_Form_Block_Test.php +++ b/projects/packages/forms/tests/php/contact-form/Contact_Form_Block_Test.php @@ -181,7 +181,7 @@ public static function data_provider_test_render_submit_button() { 'submit button with jetpack class' => array( '', array( 'attrs' => array( 'className' => 'jetpack-form-submit-button' ) ), - '', + '', ), 'button without jetpack class' => array( '', @@ -191,7 +191,7 @@ public static function data_provider_test_render_submit_button() { 'submit button with multiple classes including jetpack' => array( '', array( 'attrs' => array( 'className' => 'my-custom-class jetpack-form-submit-button another-class' ) ), - '', + '', ), 'block with no className attribute' => array( '', From 9ebe21554e79bccc9508933d8e73f2140f2c87c0 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Tue, 16 Sep 2025 16:19:50 -0300 Subject: [PATCH 13/21] modify useformwrapper to use core/buttons as well --- .../src/blocks/shared/hooks/use-form-wrapper.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/projects/packages/forms/src/blocks/shared/hooks/use-form-wrapper.js b/projects/packages/forms/src/blocks/shared/hooks/use-form-wrapper.js index ef4b599663420..9eec92b14bee9 100644 --- a/projects/packages/forms/src/blocks/shared/hooks/use-form-wrapper.js +++ b/projects/packages/forms/src/blocks/shared/hooks/use-form-wrapper.js @@ -25,11 +25,14 @@ export default function useFormWrapper( { attributes, clientId, name } ) { clientId, createBlock( FORM_BLOCK_NAME, {}, [ createBlock( name, attributes, getBlocks( clientId ) ), - createBlock( 'jetpack/button', { - text: __( 'Submit', 'jetpack-forms' ), - element: 'button', - lock: { remove: true }, - } ), + createBlock( 'core/buttons', { lock: { remove: true } }, [ + createBlock( 'core/button', { + text: __( 'Submit', 'jetpack-forms' ), + type: 'submit', + tagName: 'button', + className: 'wp-block-jetpack-button jetpack-form-submit-button', + } ), + ] ), ] ) ); } From 90f3322395421258cc65e9b871d86f49c14e0c0e Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Wed, 17 Sep 2025 08:46:44 -0300 Subject: [PATCH 14/21] Apply suggestion from @manzoorwanijk Co-authored-by: Manzoor Wani --- .../forms/tests/php/contact-form/Contact_Form_Block_Test.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/packages/forms/tests/php/contact-form/Contact_Form_Block_Test.php b/projects/packages/forms/tests/php/contact-form/Contact_Form_Block_Test.php index d444d39a20964..5d1d768b22ce1 100644 --- a/projects/packages/forms/tests/php/contact-form/Contact_Form_Block_Test.php +++ b/projects/packages/forms/tests/php/contact-form/Contact_Form_Block_Test.php @@ -167,7 +167,7 @@ public function test_render_submit_button( $content, $parsed_block, $expected ) */ public static function data_provider_test_render_submit_button() { // Skip HTML Tag Processor tests if the class doesn't exist (WordPress < 6.2) - if ( ! class_exists( '\WP_HTML_Tag_Processor' ) ) { + if ( ! class_exists( \WP_HTML_Tag_Processor::class ) ) { return array( 'no html tag processor' => array( '', From 1d0a3c2ab3cfbb9316e0240a9b4c923f1d33d0b4 Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Wed, 17 Sep 2025 08:47:25 -0300 Subject: [PATCH 15/21] Update projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php Co-authored-by: Manzoor Wani --- .../forms/src/blocks/contact-form/class-contact-form-block.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php b/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php index 7e3fc0ac37e3e..d509916522b5c 100644 --- a/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php +++ b/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php @@ -116,7 +116,7 @@ public static function render_submit_button( $content, $parsed_block ) { return $content; } - if ( ! class_exists( '\WP_HTML_Tag_Processor' ) ) { + if ( ! class_exists( \WP_HTML_Tag_Processor::class ) ) { return $content; } From 2b7131629d47092ed4996ed7808ad60394926e5f Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Wed, 17 Sep 2025 11:17:08 -0300 Subject: [PATCH 16/21] change patterns to use core buttons --- .../forms/src/contact-form/class-util.php | 49 ++++++++++++++++--- 1 file changed, 42 insertions(+), 7 deletions(-) diff --git a/projects/packages/forms/src/contact-form/class-util.php b/projects/packages/forms/src/contact-form/class-util.php index a9a4688430401..3cebf9b19dab9 100644 --- a/projects/packages/forms/src/contact-form/class-util.php +++ b/projects/packages/forms/src/contact-form/class-util.php @@ -56,7 +56,12 @@ public static function register_pattern() { - + +
+ +
+
+
', ), @@ -69,7 +74,12 @@ public static function register_pattern() { - + +
+ +
+
+ ', ), @@ -83,7 +93,12 @@ public static function register_pattern() { - + +
+ +
+
+ ', ), @@ -98,7 +113,12 @@ public static function register_pattern() { - + +
+ +
+
+ ', ), @@ -114,7 +134,12 @@ public static function register_pattern() { - + +
+ +
+
+ ', ), @@ -131,7 +156,12 @@ public static function register_pattern() { - + +
+ +
+
+ ', ), @@ -147,7 +177,12 @@ public static function register_pattern() { - + +
+ +
+
+ ', ), From df87d1f7b09cb3aab45246fc11dd12f8056d540d Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Tue, 2 Dec 2025 12:19:41 -0300 Subject: [PATCH 17/21] switch core/buttons for core/button --- .../forms/src/blocks/contact-form/edit.tsx | 20 ++- .../forms/src/blocks/contact-form/editor.scss | 3 +- .../src/blocks/contact-form/variations.js | 132 +++++++----------- .../forms/src/blocks/dropzone/index.js | 2 +- .../blocks/shared/hooks/use-form-wrapper.js | 14 +- .../src/contact-form/class-contact-form.php | 2 +- .../forms/src/contact-form/class-util.php | 63 +++------ 7 files changed, 88 insertions(+), 148 deletions(-) diff --git a/projects/packages/forms/src/blocks/contact-form/edit.tsx b/projects/packages/forms/src/blocks/contact-form/edit.tsx index 41e553e32fc79..cf80d784971c8 100644 --- a/projects/packages/forms/src/blocks/contact-form/edit.tsx +++ b/projects/packages/forms/src/blocks/contact-form/edit.tsx @@ -212,7 +212,7 @@ function JetpackContactFormEdit( { ); const findButtonsBlock = useCallback( - block => block.name === 'core/buttons' || block.name === 'jetpack/button', + block => block.name === 'core/button' || block.name === 'jetpack/button', [] ); @@ -240,7 +240,7 @@ function JetpackContactFormEdit( { const isSingleButtonBlock = innerBlocksData.length === 1 && - ( innerBlocksData[ 0 ].name === 'core/buttons' || + ( innerBlocksData[ 0 ].name === 'core/button' || innerBlocksData[ 0 ].name === 'jetpack/button' ); const title = getEditedPostAttribute( 'title' ); @@ -350,7 +350,7 @@ function JetpackContactFormEdit( { // Find the submit button const submitButtonIndex = currentInnerBlocks.findIndex( block => - ( block.name === 'core/buttons' || block.name === 'jetpack/button' ) && + ( block.name === 'core/button' || block.name === 'jetpack/button' ) && ( block.attributes?.customVariant === 'submit' || block.attributes?.element === 'button' ) ); @@ -728,14 +728,12 @@ function JetpackContactFormEdit( { // Ensure we have a submit button at the end of the form. if ( ! finalSubmitButton ) { // Create a fresh submit button if none was found. - finalSubmitButton = createBlock( 'core/buttons', {}, [ - createBlock( 'core/button', { - text: __( 'Submit', 'jetpack-forms' ), - type: 'submit', - tagName: 'button', - className: 'wp-block-jetpack-button jetpack-form-submit-button', - } ), - ] ); + finalSubmitButton = createBlock( 'core/button', { + text: __( 'Submit', 'jetpack-forms' ), + type: 'submit', + tagName: 'button', + className: 'wp-block-jetpack-button jetpack-form-submit-button', + } ); } const finalBlocks = [ ...flattenedInnerBlocks, finalSubmitButton ]; diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index 45d2959795d84..e0a98f816b771 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -54,7 +54,8 @@ flex: 1 1 100%; } - .wp-block:not(.wp-block-buttons):not(.wp-block-button) { + // .wp-block:not(.wp-block-buttons):not(.wp-block-button) { + .wp-block { flex: 0 0 100%; margin-top: 0; margin-bottom: 0; diff --git a/projects/packages/forms/src/blocks/contact-form/variations.js b/projects/packages/forms/src/blocks/contact-form/variations.js index 1126fba5e5cf4..b9c018e4bf03e 100644 --- a/projects/packages/forms/src/blocks/contact-form/variations.js +++ b/projects/packages/forms/src/blocks/contact-form/variations.js @@ -66,20 +66,14 @@ const variations = [ ], ], [ - 'core/buttons', - {}, - [ - [ - 'core/button', - { - text: __( 'Contact us', 'jetpack-forms' ), - tagName: 'button', - className: 'jetpack-form-submit-button', - type: 'submit', - element: 'button', - }, - ], - ], + 'core/button', + { + text: __( 'Contact us', 'jetpack-forms' ), + tagName: 'button', + className: 'jetpack-form-submit-button', + type: 'submit', + element: 'button', + }, ], ], attributes: { @@ -153,20 +147,14 @@ const variations = [ ], ], [ - 'core/buttons', - {}, - [ - [ - 'core/button', - { - text: __( 'Send RSVP', 'jetpack-forms' ), - tagName: 'button', - className: 'jetpack-form-submit-button', - type: 'submit', - element: 'button', - }, - ], - ], + 'core/button', + { + text: __( 'Send RSVP', 'jetpack-forms' ), + tagName: 'button', + className: 'jetpack-form-submit-button', + type: 'submit', + element: 'button', + }, ], ], attributes: { @@ -314,20 +302,14 @@ const variations = [ ], ], [ - 'core/buttons', - {}, - [ - [ - 'core/button', - { - text: __( 'Send', 'jetpack-forms' ), - tagName: 'button', - className: 'jetpack-form-submit-button', - type: 'submit', - element: 'button', - }, - ], - ], + 'core/button', + { + text: __( 'Send', 'jetpack-forms' ), + tagName: 'button', + className: 'jetpack-form-submit-button', + type: 'submit', + element: 'button', + }, ], ], attributes: { @@ -511,20 +493,14 @@ const variations = [ ], ], [ - 'core/buttons', - {}, - [ - [ - 'core/button', - { - text: __( 'Book appointment', 'jetpack-forms' ), - tagName: 'button', - className: 'jetpack-form-submit-button', - type: 'submit', - element: 'button', - }, - ], - ], + 'core/button', + { + text: __( 'Book appointment', 'jetpack-forms' ), + tagName: 'button', + className: 'jetpack-form-submit-button', + type: 'submit', + element: 'button', + }, ], ], attributes: { @@ -665,20 +641,14 @@ const variations = [ ], ], [ - 'core/buttons', - {}, - [ - [ - 'core/button', - { - text: __( 'Send feedback', 'jetpack-forms' ), - tagName: 'button', - className: 'jetpack-form-submit-button', - type: 'submit', - element: 'button', - }, - ], - ], + 'core/button', + { + text: __( 'Send feedback', 'jetpack-forms' ), + tagName: 'button', + className: 'jetpack-form-submit-button', + type: 'submit', + element: 'button', + }, ], ], attributes: { @@ -996,20 +966,14 @@ const variations = [ [ [ 'jetpack/label' ], [ 'jetpack/input', { type: 'checkbox' } ] ], ], [ - 'core/buttons', - {}, - [ - [ - 'core/button', - { - text: __( 'Subscribe', 'jetpack-forms' ), - tagName: 'button', - className: 'jetpack-form-submit-button', - type: 'submit', - element: 'button', - }, - ], - ], + 'core/button', + { + text: __( 'Subscribe', 'jetpack-forms' ), + tagName: 'button', + className: 'jetpack-form-submit-button', + type: 'submit', + element: 'button', + }, ], ], attributes: {}, diff --git a/projects/packages/forms/src/blocks/dropzone/index.js b/projects/packages/forms/src/blocks/dropzone/index.js index c83fe7ce86e12..9ce7d96d8a5d1 100644 --- a/projects/packages/forms/src/blocks/dropzone/index.js +++ b/projects/packages/forms/src/blocks/dropzone/index.js @@ -11,7 +11,7 @@ const settings = { description: __( 'A dropzone for file uploads.', 'jetpack-forms' ), parent: [ 'jetpack/field-file' ], allowedBlocks: [ - 'core/buttons', + 'core/button', 'core/heading', 'core/image', 'core/list', diff --git a/projects/packages/forms/src/blocks/shared/hooks/use-form-wrapper.js b/projects/packages/forms/src/blocks/shared/hooks/use-form-wrapper.js index 9eec92b14bee9..2a487caad9955 100644 --- a/projects/packages/forms/src/blocks/shared/hooks/use-form-wrapper.js +++ b/projects/packages/forms/src/blocks/shared/hooks/use-form-wrapper.js @@ -25,14 +25,12 @@ export default function useFormWrapper( { attributes, clientId, name } ) { clientId, createBlock( FORM_BLOCK_NAME, {}, [ createBlock( name, attributes, getBlocks( clientId ) ), - createBlock( 'core/buttons', { lock: { remove: true } }, [ - createBlock( 'core/button', { - text: __( 'Submit', 'jetpack-forms' ), - type: 'submit', - tagName: 'button', - className: 'wp-block-jetpack-button jetpack-form-submit-button', - } ), - ] ), + createBlock( 'core/button', { + text: __( 'Submit', 'jetpack-forms' ), + type: 'submit', + tagName: 'button', + className: 'wp-block-jetpack-button jetpack-form-submit-button', + } ), ] ) ); } diff --git a/projects/packages/forms/src/contact-form/class-contact-form.php b/projects/packages/forms/src/contact-form/class-contact-form.php index b1dfaa9dcee8a..cccaec4232408 100644 --- a/projects/packages/forms/src/contact-form/class-contact-form.php +++ b/projects/packages/forms/src/contact-form/class-contact-form.php @@ -1069,7 +1069,7 @@ class='{$container_classes_string}' * @param int $id Contact Form ID. */ $url = apply_filters( 'grunion_contact_form_form_action', $url, $GLOBALS['post'], $id, $page ); - $has_submit_button_block = str_contains( $content, 'wp-block-jetpack-button' ) || str_contains( $content, 'wp-block-buttons' ); + $has_submit_button_block = str_contains( $content, 'wp-block-jetpack-button' ) || str_contains( $content, 'wp-block-button' ); $form_classes = 'contact-form commentsblock'; if ( $submission_success ) { $form_classes .= ' submission-success'; diff --git a/projects/packages/forms/src/contact-form/class-util.php b/projects/packages/forms/src/contact-form/class-util.php index 3cebf9b19dab9..19e13d7d9447d 100644 --- a/projects/packages/forms/src/contact-form/class-util.php +++ b/projects/packages/forms/src/contact-form/class-util.php @@ -56,12 +56,9 @@ public static function register_pattern() { - -
- -
-
- + +
+ ', ), @@ -74,12 +71,9 @@ public static function register_pattern() { - -
- -
-
- + +
+ ', ), @@ -93,12 +87,9 @@ public static function register_pattern() { - -
- -
-
- + +
+ ', ), @@ -113,12 +104,9 @@ public static function register_pattern() { - -
- -
-
- + +
+ ', ), @@ -134,12 +122,9 @@ public static function register_pattern() { - -
- -
-
- + +
+ ', ), @@ -156,12 +141,9 @@ public static function register_pattern() { - -
- -
-
- + +
+ ', ), @@ -177,12 +159,9 @@ public static function register_pattern() { - -
- -
-
- + +
+ ', ), From 7e6d3243f12efbb1c7b7dd623c8fd3e63d281f4b Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Tue, 2 Dec 2025 12:21:19 -0300 Subject: [PATCH 18/21] changelog --- .../forms/changelog/replace-forms-jetpack-buttons-core | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/packages/forms/changelog/replace-forms-jetpack-buttons-core diff --git a/projects/packages/forms/changelog/replace-forms-jetpack-buttons-core b/projects/packages/forms/changelog/replace-forms-jetpack-buttons-core new file mode 100644 index 0000000000000..ddb988efebaf3 --- /dev/null +++ b/projects/packages/forms/changelog/replace-forms-jetpack-buttons-core @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Forms: use core/button instead of jetpack/button From caa35c751c50261170064dc75e87b3204c491539 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Tue, 2 Dec 2025 12:40:21 -0300 Subject: [PATCH 19/21] make core buttons take the same styles as previous jetpack buttons --- .../forms/src/blocks/contact-form/editor.scss | 16 ++++++++++++++++ .../forms/src/contact-form/css/grunion.scss | 3 +++ 2 files changed, 19 insertions(+) diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index e0a98f816b771..bed7db07fbcee 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -61,6 +61,7 @@ margin-bottom: 0; max-width: 100%; + &.wp-block-button, &.wp-block-jetpack-button { flex: 0 0 auto; min-height: var(--jetpack--contact-form--input-height, auto); @@ -87,6 +88,7 @@ box-sizing: border-box; } + &.wp-block-button__width-25, &.jetpack-field__width-25 { flex: 1 1 calc(25% - calc(var(--wp--style--block-gap, 1.5rem) * 1)); max-width: 25%; @@ -97,16 +99,30 @@ max-width: 33.33%; } + &.wp-block-button__width-50, &.jetpack-field__width-50 { flex: 1 1 calc(50% - calc(var(--wp--style--block-gap, 1.5rem) * 1)); max-width: 50%; } + &.wp-block-button__width-75, &.jetpack-field__width-75 { flex: 1 1 calc(75% - calc(var(--wp--style--block-gap, 1.5rem) * 1)); max-width: 75%; } + &.wp-block-button__width-100 { + flex: 1 1 100%; + max-width: 100%; + } + + &.wp-block-button.has-custom-width { + + .wp-block-button__link { + width: 100%; + } + } + &.jetpack-field__width-auto { flex: 1 1 0; } diff --git a/projects/packages/forms/src/contact-form/css/grunion.scss b/projects/packages/forms/src/contact-form/css/grunion.scss index 27b27f2fef8ab..329ea944115a3 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.scss +++ b/projects/packages/forms/src/contact-form/css/grunion.scss @@ -430,6 +430,7 @@ that needs to mimic the input element styles */ } } +.wp-block-jetpack-contact-form .wp-block-button__width-25, .wp-block-jetpack-contact-form .grunion-field-width-25-wrap { flex: 1 1 calc(25% - calc(var(--wp--style--block-gap, 1.5rem) * 1)); max-width: 25%; @@ -440,11 +441,13 @@ that needs to mimic the input element styles */ max-width: 33.33%; } +.wp-block-jetpack-contact-form .wp-block-button__width-50, .wp-block-jetpack-contact-form .grunion-field-width-50-wrap { flex: 1 1 calc(50% - calc(var(--wp--style--block-gap, 1.5rem) * 1)); max-width: 50%; } +.wp-block-jetpack-contact-form .wp-block-button__width-75, .wp-block-jetpack-contact-form .grunion-field-width-75-wrap { flex: 1 1 calc(75% - calc(var(--wp--style--block-gap, 1.5rem) * 1)); max-width: 75%; From add6cadbcc1e0a3e88859902544a06acea194f6c Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Wed, 3 Dec 2025 12:42:00 -0300 Subject: [PATCH 20/21] avoid margins on buttons --- projects/packages/forms/src/blocks/contact-form/editor.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index bed7db07fbcee..ba1b774f732b4 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -67,6 +67,7 @@ min-height: var(--jetpack--contact-form--input-height, auto); align-self: flex-end; line-height: 1; + margin-block: 0; .wp-block-button__link { min-height: var(--jetpack--contact-form--input-height, auto); From 067848372e7b2d2afbfde5f6b28c0eb2b6c7f9c2 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Fri, 5 Dec 2025 10:27:04 -0300 Subject: [PATCH 21/21] add conditional so php8.5 test doesn't fail due to deprecated method --- .../tests/php/contact-form/Contact_Form_Block_Test.php | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/projects/packages/forms/tests/php/contact-form/Contact_Form_Block_Test.php b/projects/packages/forms/tests/php/contact-form/Contact_Form_Block_Test.php index 5d1d768b22ce1..c9d5364aa1b34 100644 --- a/projects/packages/forms/tests/php/contact-form/Contact_Form_Block_Test.php +++ b/projects/packages/forms/tests/php/contact-form/Contact_Form_Block_Test.php @@ -260,7 +260,9 @@ public function test_form_step_counting( $block_structure, $expected_steps ) { // Use reflection to access private method $reflection = new \ReflectionClass( Contact_Form_Block::class ); $count_method = $reflection->getMethod( 'count_form_steps_in_block' ); - $count_method->setAccessible( true ); + if ( PHP_VERSION_ID < 80100 ) { + $count_method->setAccessible( true ); + } $result = $count_method->invoke( null, $block_structure ); $this->assertEquals( $expected_steps, $result ); @@ -401,7 +403,9 @@ public function test_get_form_step_count() { // Use reflection to set the private static property for testing $reflection = new \ReflectionClass( Contact_Form_Block::class ); $step_count_property = $reflection->getProperty( 'form_step_count' ); - $step_count_property->setAccessible( true ); + if ( PHP_VERSION_ID < 80100 ) { + $step_count_property->setAccessible( true ); + } $step_count_property->setValue( null, 5 ); $result = Contact_Form_Block::get_form_step_count();