From 8d3ecf28442351fef40e9aa425d470c68f12a28d Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Mon, 15 Sep 2025 21:43:27 -0300 Subject: [PATCH 1/2] PoC: refactor how we load form child blocks --- .../contact-form/class-contact-form-block.php | 6 +- .../blocks/form-progress-indicator/block.json | 42 +++++++ .../blocks/form-progress-indicator/render.php | 93 +++++++++++++++ .../class-contact-form-plugin.php | 107 ------------------ .../forms/tools/webpack.config.blocks.js | 7 +- ...st-api-v2-endpoint-block-editor-assets.php | 2 + 6 files changed, 144 insertions(+), 113 deletions(-) create mode 100644 projects/packages/forms/src/blocks/form-progress-indicator/block.json create mode 100644 projects/packages/forms/src/blocks/form-progress-indicator/render.php 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 95f638be3f343..ac8ab39e29f22 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 @@ -524,11 +524,9 @@ public static function register_child_blocks() { ) ); + // Register form-progress-indicator using enhanced Jetpack method Blocks::jetpack_register_block( - 'jetpack/form-progress-indicator', - array( - 'render_callback' => array( Contact_Form_Plugin::class, 'gutenblock_render_form_progress_indicator' ), - ) + dirname( __DIR__, 3 ) . '/dist/blocks/form-progress-indicator' ); Blocks::jetpack_register_block( diff --git a/projects/packages/forms/src/blocks/form-progress-indicator/block.json b/projects/packages/forms/src/blocks/form-progress-indicator/block.json new file mode 100644 index 0000000000000..04a9a0a1bd3ea --- /dev/null +++ b/projects/packages/forms/src/blocks/form-progress-indicator/block.json @@ -0,0 +1,42 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "jetpack/form-progress-indicator", + "title": "Form Progress Indicator", + "description": "Display a progress indicator for multi-step forms.", + "keywords": [ "progress", "steps", "indicator", "form" ], + "version": "1.0.0", + "textdomain": "jetpack-forms", + "category": "contact-form", + "parent": [ "jetpack/contact-form" ], + "icon": "controls-forward", + "supports": { + "html": false, + "inserter": false, + "color": { + "text": true, + "background": false + } + }, + "attributes": { + "variant": { + "type": "string", + "default": "line" + }, + "progressColor": { + "type": "string" + }, + "progressBackgroundColor": { + "type": "string" + }, + "textColor": { + "type": "string" + }, + "style": { + "type": "object" + } + }, + "style": "file:./style.css", + "viewScriptModule": "file:../../modules/form-progress-indicator/view.js", + "render": "file:./render.php" +} diff --git a/projects/packages/forms/src/blocks/form-progress-indicator/render.php b/projects/packages/forms/src/blocks/form-progress-indicator/render.php new file mode 100644 index 0000000000000..2811c8d7d9663 --- /dev/null +++ b/projects/packages/forms/src/blocks/form-progress-indicator/render.php @@ -0,0 +1,93 @@ + +
+ data-wp-interactive="jetpack/form"> +
+ + + $i ); ?> +
+
+
+ + + + + + + + +
+
+ + +
+
+
\ No newline at end of file diff --git a/projects/packages/forms/src/contact-form/class-contact-form-plugin.php b/projects/packages/forms/src/contact-form/class-contact-form-plugin.php index cbfc1ea98dac1..5ce5b85e6f581 100644 --- a/projects/packages/forms/src/contact-form/class-contact-form-plugin.php +++ b/projects/packages/forms/src/contact-form/class-contact-form-plugin.php @@ -901,113 +901,6 @@ public static function gutenblock_render_form_step_navigation( $atts, $content ) return $processor->get_updated_html(); } - /** - * Render the progress indicator. - * - * @param array $attributes - the block attributes. - * - * @return string HTML for the progress indicator. - */ - public static function gutenblock_render_form_progress_indicator( $attributes ) { - $version = Constants::get_constant( 'JETPACK__VERSION' ); - if ( empty( $version ) ) { - $version = '0.1'; - } - - // Get step count from Contact_Form_Block - $max_steps = Contact_Form_Block::get_form_step_count(); - - $style_handle = 'jetpack-form-progress-indicator-style'; - if ( ! wp_style_is( $style_handle, 'enqueued' ) ) { - wp_enqueue_style( $style_handle, plugins_url( 'dist/blocks/form-progress-indicator/style.css', dirname( __DIR__ ) ), array(), $version ); - } - - $script_handle = 'jetpack-form-progress-indicator'; - \wp_enqueue_script_module( - $script_handle, - plugins_url( 'dist/modules/form-progress-indicator/view.js', dirname( __DIR__ ) ), - array( '@wordpress/interactivity' ), - $version - ); - - $variant = isset( $attributes['variant'] ) ? $attributes['variant'] : 'line'; - $is_dots_style = $variant === 'dots'; - - // Build custom CSS variables for progress indicator colors - $custom_styles = array(); - - if ( isset( $attributes['progressColor'] ) ) { - $custom_styles[] = '--jp-progress-active-color: ' . esc_attr( $attributes['progressColor'] ); - } - - if ( isset( $attributes['progressBackgroundColor'] ) ) { - $custom_styles[] = '--jp-progress-track-color: ' . esc_attr( $attributes['progressBackgroundColor'] ); - } - - if ( isset( $attributes['textColor'] ) ) { - $custom_styles[] = '--jp-progress-text-color: var(--wp--preset--color--' . esc_attr( $attributes['textColor'] ) . ')'; - } elseif ( isset( $attributes['style']['color']['text'] ) ) { - $custom_styles[] = '--jp-progress-text-color: ' . esc_attr( $attributes['style']['color']['text'] ); - } - - // Use WordPress Style Engine for block supports (dimensions, spacing, background, etc.) - $generated_styles = wp_style_engine_get_styles( $attributes['style'] ?? array() ); - - $generated_css_parts = ! empty( $generated_styles['css'] ) ? explode( ';', $generated_styles['css'] ) : array(); - $all_styles = array_filter( array_merge( $custom_styles, $generated_css_parts ) ); - - $extra_attributes = array(); - if ( ! empty( $all_styles ) ) { - $extra_attributes['style'] = implode( '; ', $all_styles ); - } - - // Add generated classnames if any - $classes = array(); - if ( ! empty( $generated_styles['classnames'] ) ) { - $classes[] = $generated_styles['classnames']; - } - // Add variant class - $classes[] = 'is-variant-' . $variant; - - $extra_attributes['class'] = implode( ' ', $classes ); - - $wrapper_attributes = get_block_wrapper_attributes( $extra_attributes ); - - // Build the complete HTML structure using output buffering for better readability - ob_start(); - $progress_state = $is_dots_style ? 'state.getDotsProgress' : 'state.getStepProgress'; - ?> -
> -
- - - $i ); ?> -
-
-
- - - - - - - - -
-
- - -
-
-
- Date: Mon, 15 Sep 2025 22:10:34 -0300 Subject: [PATCH 2/2] changelog --- .../forms/changelog/fix-form-progress-indicator-mobile-assets | 4 ++++ .../changelog/fix-form-progress-indicator-mobile-assets | 4 ++++ 2 files changed, 8 insertions(+) create mode 100644 projects/packages/forms/changelog/fix-form-progress-indicator-mobile-assets create mode 100644 projects/plugins/jetpack/changelog/fix-form-progress-indicator-mobile-assets diff --git a/projects/packages/forms/changelog/fix-form-progress-indicator-mobile-assets b/projects/packages/forms/changelog/fix-form-progress-indicator-mobile-assets new file mode 100644 index 0000000000000..f542e79f6609e --- /dev/null +++ b/projects/packages/forms/changelog/fix-form-progress-indicator-mobile-assets @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Forms: Refactor child blocks registration diff --git a/projects/plugins/jetpack/changelog/fix-form-progress-indicator-mobile-assets b/projects/plugins/jetpack/changelog/fix-form-progress-indicator-mobile-assets new file mode 100644 index 0000000000000..13322c9deaa1f --- /dev/null +++ b/projects/plugins/jetpack/changelog/fix-form-progress-indicator-mobile-assets @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +Forms: Refactor child blocks registration