Skip to content

WIP: Forms: PoC: Register a childblock using block.json #45190

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

Draft
wants to merge 2 commits into
base: trunk
Choose a base branch
from
Draft

WIP: Forms: PoC: Register a childblock using block.json #45190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8d3ecf2
PoC: refactor how we load form child blocks
lezama Sep 16, 2025
13dbee6
changelog
lezama Sep 16, 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 projects/packages/forms/changelog/fix-form-progress-indicator-mobile-assets
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Forms: Refactor child blocks registration
6 changes: 2 additions & 4 deletions projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
42 changes: 42 additions & 0 deletions projects/packages/forms/src/blocks/form-progress-indicator/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
93 changes: 93 additions & 0 deletions projects/packages/forms/src/blocks/form-progress-indicator/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<?php
/**
* Server-side rendering for the form progress indicator block.
*
* Template variables provided by WordPress block render context:
*
* @var array $attributes Block attributes.
* @var string $content Block content.
* @var WP_Block $block Block instance.
*
* @package jetpack-forms
*/

$max_steps = \Automattic\Jetpack\Extensions\Contact_Form\Contact_Form_Block::get_form_step_count();

// phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- $attributes is provided by WordPress.
$variant = isset( $attributes['variant'] ) ? $attributes['variant'] : 'line';

Check failure on line 17 in projects/packages/forms/src/blocks/form-progress-indicator/render.php

View workflow job for this annotation

GitHub Actions / Static analysis 

Plugin PhanPluginDuplicateConditionalNullCoalescing "isset(X) ? X : Y" can usually be simplified to "X ?? Y" in PHP 7. The duplicated expression X was $attributes['variant']

FAQ on Phan issues: pdWQjU-Jb-p2
$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'] ); // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- $attributes is provided by WordPress.
}

if ( isset( $attributes['progressBackgroundColor'] ) ) {
$custom_styles[] = '--jp-progress-track-color: ' . esc_attr( $attributes['progressBackgroundColor'] ); // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- $attributes is provided by WordPress.
}

if ( isset( $attributes['textColor'] ) ) {
$custom_styles[] = '--jp-progress-text-color: var(--wp--preset--color--' . esc_attr( $attributes['textColor'] ) . ')'; // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- $attributes is provided by WordPress.
} elseif ( isset( $attributes['style']['color']['text'] ) ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- $attributes is provided by WordPress.
$custom_styles[] = '--jp-progress-text-color: ' . esc_attr( $attributes['style']['color']['text'] ); // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- $attributes is provided by WordPress.
}

// Use WordPress Style Engine for block supports (dimensions, spacing, background, etc.)
$generated_styles = wp_style_engine_get_styles( $attributes['style'] ?? array() ); // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- $attributes is provided by WordPress.

$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 );

// The progress indicator inherits context from the parent form
// No need to set up its own context as it should use the form's shared context

// Build the complete HTML structure
$progress_state = $is_dots_style ? 'state.getDotsProgress' : 'state.getStepProgress';
?>
<div <?php echo wp_kses_post( $wrapper_attributes ); ?>
data-wp-interactive="jetpack/form">
<div class="jetpack-form-progress-indicator-steps">
<?php if ( $is_dots_style ) : ?>
<?php for ( $i = 0; $i < $max_steps; $i++ ) : ?>
<?php $step_context = array( 'stepIndex' => $i ); ?>
<div class="jetpack-form-progress-indicator-step"
data-wp-class--is-active="state.isStepActive"
data-wp-class--is-completed="state.isStepCompleted"
data-wp-context='<?php echo wp_json_encode( $step_context ); ?>'>
<div class="jetpack-form-progress-indicator-line"></div>
<div class="jetpack-form-progress-indicator-dot">
<span class="jetpack-form-progress-indicator-step-number">
<span class="step-number"><?php echo esc_html( $i + 1 ); ?></span>

Check failure on line 79 in projects/packages/forms/src/blocks/form-progress-indicator/render.php

View workflow job for this annotation

GitHub Actions / Static analysis 

TypeError PhanTypeMismatchArgument Argument 1 ($text) is ($i + 1) of type 1 but \esc_html() takes string defined at /home/runner/work/jetpack/jetpack/vendor/php-stubs/wordpress-stubs/wordpress-stubs.php:110207

FAQ on Phan issues: pdWQjU-Jb-p2
<span class="step-checkmark" role="img" aria-label="<?php echo esc_attr__( 'Completed', 'jetpack-forms' ); ?>">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z" fill="currentColor"/>
</svg>
</span>
</span>
</div>
</div>
<?php endfor; ?>
<?php endif; ?>
<div class="jetpack-form-progress-indicator-progress"
data-wp-style--width="<?php echo esc_attr( $progress_state ); ?>"></div>
</div>
</div>
107 changes: 0 additions & 107 deletions projects/packages/forms/src/contact-form/class-contact-form-plugin.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
?>
<div <?php echo wp_kses_post( $wrapper_attributes ); ?>>
<div class="jetpack-form-progress-indicator-steps">
<?php if ( $is_dots_style ) : ?>
<?php for ( $i = 0; $i < $max_steps; $i++ ) : ?>
<?php $step_context = array( 'stepIndex' => $i ); ?>
<div class="jetpack-form-progress-indicator-step"
data-wp-class--is-active="state.isStepActive"
data-wp-class--is-completed="state.isStepCompleted"
data-wp-context='<?php echo wp_json_encode( $step_context ); ?>'>
<div class="jetpack-form-progress-indicator-line"></div>
<div class="jetpack-form-progress-indicator-dot">
<span class="jetpack-form-progress-indicator-step-number">
<span class="step-number"><?php echo esc_html( $i + 1 ); ?></span>
<span class="step-checkmark" role="img" aria-label="<?php echo esc_attr__( 'Completed', 'jetpack-forms' ); ?>">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z" fill="currentColor"/>
</svg>
</span>
</span>
</div>
</div>
<?php endfor; ?>
<?php endif; ?>
<div class="jetpack-form-progress-indicator-progress"
data-wp-style--width="<?php echo esc_attr( $progress_state ); ?>"></div>
</div>
</div>
<?php
return ob_get_clean();
}

/**
* Returns the form "Outlined" style classes and styles.
* Important: The "Outlined" style is somewhat different as it uses custom HTML to create a border around the field's label.
Expand Down
7 changes: 5 additions & 2 deletions projects/packages/forms/tools/webpack.config.blocks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,8 +89,11 @@ module.exports = [
new CopyWebpackPlugin( {
patterns: [
{
from: 'src/blocks/**/block.json',
to: '[name][ext]',
from: 'src/blocks',
to: '.',
globOptions: {
ignore: [ '**/*.js', '**/*.ts', '**/*.tsx', '**/*.scss', '**/*.css' ],
},
noErrorOnMissing: true,
},
],
Expand Down
2 changes: 2 additions & 0 deletions ...inc/lib/core-api/wpcom-endpoints/class-wpcom-rest-api-v2-endpoint-block-editor-assets.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,11 @@ class WPCOM_REST_API_V2_Endpoint_Block_Editor_Assets extends WP_REST_Controller
'jetpack/business-hours',
'jetpack/button',
'jetpack/calendly',
'jetpack/contact-form',
'jetpack/contact-info',
'jetpack/event-countdown',
'jetpack/eventbrite',
'jetpack/form-progress-indicator',
'jetpack/gif',
'jetpack/goodreads',
'jetpack/google-calendar',
Expand Down
4 changes: 4 additions & 0 deletions projects/plugins/jetpack/changelog/fix-form-progress-indicator-mobile-assets
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: other

Forms: Refactor child blocks registration
Loading