Skip to content

Forms: Add granular block categories to form editor #46626

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
enejb merged 26 commits into from
Jan 21, 2026
Merged

Forms: Add granular block categories to form editor #46626

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
947f75d
Forms: Add granular form field categories to form editor
enejb Jan 15, 2026
b8c01d2
add changelog
enejb Jan 15, 2026
908c680
Add tests for category-utils functions
enejb Jan 15, 2026
ee438e4
update text to input
enejb Jan 15, 2026
72f8b4a
Add getFormCategorySlug test
enejb Jan 15, 2026
3d10469
Refactor block category override logic for form editor
enejb Jan 16, 2026
1554021
Update categories
enejb Jan 19, 2026
b7db60e
update the changelog
enejb Jan 19, 2026
1f610c9
Convert to pass ts linter
enejb Jan 19, 2026
54072db
Update the return of setupFormEditorCategories
enejb Jan 19, 2026
bacabc0
fix test
enejb Jan 19, 2026
02a169e
Add core/button block
enejb Jan 20, 2026
d5401e3
Move time and date field to advanced
enejb Jan 20, 2026
395ebbf
Add multistep form category
enejb Jan 20, 2026
077dc15
Update tests
enejb Jan 20, 2026
ab43d37
Do not use the settings object
enejb Jan 20, 2026
61a960f
fix linter
enejb Jan 21, 2026
10bba56
update changelog
enejb Jan 21, 2026
8b09478
prefix categories with jetpack
enejb Jan 21, 2026
0b0dfc7
remove ...defaultSettings.supports
enejb Jan 21, 2026
b0bb4c2
revert
enejb Jan 21, 2026
3d1779c
also remove ...defaultSettings.supports
enejb Jan 21, 2026
80fa393
fix typo
enejb Jan 21, 2026
03934cc
fix typo
enejb Jan 21, 2026
54e9886
Add jetpack prefix
enejb Jan 21, 2026
9e367d1
update the variable name
enejb Jan 21, 2026
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/update-jetpack-form-editor-add-categories
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: added

Added granular block categories for better organization of form fields in the block inserter on the Form Editor.
6 changes: 6 additions & 0 deletions projects/packages/forms/src/blocks/field-checkbox/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ import save from './save.js';
const name = 'field-checkbox';
const settings = {
...defaultSettings,
supports: {
...defaultSettings.supports,
jetpack_form: {
category: 'choice',
},
},
title: __( 'Checkbox', 'jetpack-forms' ),
keywords: [ __( 'Confirm', 'jetpack-forms' ), __( 'Accept', 'jetpack-forms' ) ],
description: __( 'Confirm or select information with a single checkbox.', 'jetpack-forms' ),
Expand Down
6 changes: 6 additions & 0 deletions projects/packages/forms/src/blocks/field-consent/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ import save from './save.js';
const name = 'field-consent';
const settings = {
...defaultSettings,
supports: {
...defaultSettings.supports,
jetpack_form: {
category: 'advanced',
},
},
title: __( 'Terms consent', 'jetpack-forms' ),
keywords: [ __( 'Consent', 'jetpack-forms' ) ],
description: __(
Expand Down
6 changes: 6 additions & 0 deletions projects/packages/forms/src/blocks/field-date/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ import save from './save.js';
const name = 'field-date';
const settings = {
...defaultSettings,
supports: {
...defaultSettings.supports,
jetpack_form: {
category: 'advanced',
},
},
title: __( 'Date picker', 'jetpack-forms' ),
keywords: [
__( 'Calendar', 'jetpack-forms' ),
Expand Down
6 changes: 6 additions & 0 deletions projects/packages/forms/src/blocks/field-email/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ import save from './save.js';
const name = 'field-email';
const settings = {
...defaultSettings,
supports: {
...defaultSettings.supports,
jetpack_form: {
category: 'contact-info',
},
},
title: __( 'Email field', 'jetpack-forms' ),
keywords: [ __( 'e-mail', 'jetpack-forms' ), __( 'mail', 'jetpack-forms' ), 'email' ],
description: __( 'Collect email addresses from your visitors.', 'jetpack-forms' ),
Expand Down
6 changes: 6 additions & 0 deletions projects/packages/forms/src/blocks/field-file/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@ import save from './save.js';
const name = 'field-file';
const settings = {
...defaultSettings,
supports: {
...defaultSettings.supports,
jetpack_form: {
category: 'advanced',
},
},
title: __( 'File upload field', 'jetpack-forms' ),
keywords: [
__( 'File', 'jetpack-forms' ),
Expand Down
6 changes: 6 additions & 0 deletions projects/packages/forms/src/blocks/field-hidden/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@ import save from './save.js';
const name = 'field-hidden';
const settings = {
...defaultSettings,
supports: {
...defaultSettings.supports,
jetpack_form: {
category: 'advanced',
},
},
title: __( 'Hidden field', 'jetpack-forms' ),
description: __(
'Invisible to site visitors. Allows you to store extra values with each form submission.',
Expand Down
6 changes: 6 additions & 0 deletions projects/packages/forms/src/blocks/field-image-select/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,12 @@ const name = 'field-image-select';

const settings = {
...defaultSettings,
supports: {
...defaultSettings.supports,
jetpack_form: {
category: 'choice',
},
},
title: __( 'Image Select Field', 'jetpack-forms' ),
keywords: [
__( 'Image', 'jetpack-forms' ),
Expand Down
6 changes: 6 additions & 0 deletions projects/packages/forms/src/blocks/field-multiple-choice/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ import save from './save.js';
const name = 'field-checkbox-multiple';
const settings = {
...defaultSettings,
supports: {
...defaultSettings.supports,
jetpack_form: {
category: 'choice',
},
},
title: __( 'Multiple choice (checkbox)', 'jetpack-forms' ),
keywords: [ __( 'Choose multiple', 'jetpack-forms' ), __( 'Option', 'jetpack-forms' ) ],
description: __(
Expand Down
6 changes: 6 additions & 0 deletions projects/packages/forms/src/blocks/field-name/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@ const transforms = {

const settings = {
...defaultSettings,
supports: {
...defaultSettings.supports,
jetpack_form: {
category: 'contact-info',
},
},
attributes: {
...defaultSettings.attributes,
fieldVariant: {
Expand Down
6 changes: 6 additions & 0 deletions projects/packages/forms/src/blocks/field-number/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ import save from './save.js';
const name = 'field-number';
const settings = {
...defaultSettings,
supports: {
...defaultSettings.supports,
jetpack_form: {
category: 'basic',
},
},
title: __( 'Number input field', 'jetpack-forms' ),
description: __( 'Collect numbers from site visitors.', 'jetpack-forms' ),
icon: renderMaterialIcon(
Expand Down
3 changes: 3 additions & 0 deletions projects/packages/forms/src/blocks/field-rating/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@ const settings = {
},
supports: {
...defaultSettings.supports,
jetpack_form: {
category: 'advanced',
},
},
variations,
allowedBlocks: [ 'jetpack/label', 'jetpack/input-rating' ],
Expand Down
6 changes: 6 additions & 0 deletions projects/packages/forms/src/blocks/field-select/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ import save from './save.js';
const name = 'field-select';
const settings = {
...defaultSettings,
supports: {
...defaultSettings.supports,
jetpack_form: {
category: 'choice',
},
},
title: __( 'Dropdown field', 'jetpack-forms' ),
keywords: [
__( 'Choose', 'jetpack-forms' ),
Expand Down
6 changes: 6 additions & 0 deletions projects/packages/forms/src/blocks/field-single-choice/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ import save from './save.js';
const name = 'field-radio';
const settings = {
...defaultSettings,
supports: {
...defaultSettings.supports,
jetpack_form: {
category: 'choice',
},
},
title: __( 'Single choice (radio)', 'jetpack-forms' ),
keywords: [
__( 'Choose', 'jetpack-forms' ),
Expand Down
3 changes: 3 additions & 0 deletions projects/packages/forms/src/blocks/field-slider/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ const settings = {
supports: {
...defaultSettings.supports,
interactivity: true,
jetpack_form: {
category: 'advanced',
},
},
providesContext: {
...defaultSettings.providesContext,
Expand Down
11 changes: 7 additions & 4 deletions projects/packages/forms/src/blocks/field-telephone/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@ import save from './save.js';
const name = 'field-telephone';
export const settings = {
...defaultSettings,
supports: {
...defaultSettings.supports,
interactivity: true,
jetpack_form: {
category: 'contact-info',
},
},
title: __( 'Phone number field', 'jetpack-forms' ),
keywords: [
__( 'Phone', 'jetpack-forms' ),
Expand All @@ -33,10 +40,6 @@ export const settings = {
default: '',
},
},
supports: {
...defaultSettings.supports,
interactivity: true,
},
providesContext: {
...defaultSettings.providesContext,
'jetpack/field-prefix-default': 'default',
Expand Down
6 changes: 6 additions & 0 deletions projects/packages/forms/src/blocks/field-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ import save from './save.js';
const name = 'field-text';
const settings = {
...defaultSettings,
supports: {
...defaultSettings.supports,
jetpack_form: {
category: 'basic',
},
},
title: __( 'Text input field', 'jetpack-forms' ),
description: __( 'Collect short text responses from site visitors.', 'jetpack-forms' ),
icon: {
Expand Down
6 changes: 6 additions & 0 deletions projects/packages/forms/src/blocks/field-textarea/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ import save from './save.js';
const name = 'field-textarea';
const settings = {
...defaultSettings,
supports: {
...defaultSettings.supports,
jetpack_form: {
category: 'basic',
},
},
title: __( 'Multi-line text field', 'jetpack-forms' ),
keywords: [
__( 'Textarea', 'jetpack-forms' ),
Expand Down
6 changes: 6 additions & 0 deletions projects/packages/forms/src/blocks/field-time/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@ import save from './save.js';
const name = 'field-time';
const settings = {
...defaultSettings,
supports: {
...defaultSettings.supports,
jetpack_form: {
category: 'advanced',
},
},
title: __( 'Time input field', 'jetpack-forms' ),
description: __( 'Capture time information with a time picker.', 'jetpack-forms' ),
icon: renderMaterialIcon(
Expand Down
6 changes: 6 additions & 0 deletions projects/packages/forms/src/blocks/field-url/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ import save from './save.js';
const name = 'field-url';
const settings = {
...defaultSettings,
supports: {
...defaultSettings.supports,
jetpack_form: {
category: 'contact-info',
},
},
title: __( 'Website field', 'jetpack-forms' ),
keywords: [
__( 'url', 'jetpack-forms' ),
Expand Down
3 changes: 3 additions & 0 deletions projects/packages/forms/src/blocks/form-progress-indicator/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ export const settings = {
text: true,
},
},
jetpack_form: {
category: 'multistep',
},
},
title: __( 'Progress indicator', 'jetpack-forms' ),
description: __(
Expand Down
3 changes: 3 additions & 0 deletions projects/packages/forms/src/blocks/form-step-container/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@ export const settings = {
style: true,
width: true,
},
jetpack_form: {
category: 'multistep',
},
},
attributes: {},
template: [ [ 'jetpack/form-step', {} ] ],
Expand Down
3 changes: 3 additions & 0 deletions projects/packages/forms/src/blocks/form-step-divider/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ export const settings = {
supports: {
html: false,
reusable: false,
jetpack_form: {
category: 'multistep',
},
},
edit: edit,
save: () => null,
Expand Down
3 changes: 3 additions & 0 deletions projects/packages/forms/src/blocks/form-step-navigation/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ export const settings = {
justifyContent: 'right',
},
},
jetpack_form: {
category: 'multistep',
},
},
title: __( 'Step navigation', 'jetpack-forms' ),
description: __( 'Responsible for the navigation between steps.', 'jetpack-forms' ),
Expand Down
3 changes: 3 additions & 0 deletions projects/packages/forms/src/blocks/form-step/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ export const settings = {
padding: true,
margin: true,
},
jetpack_form: {
category: 'multistep',
},
},
attributes: {
align: {
Expand Down
12 changes: 11 additions & 1 deletion projects/packages/forms/src/form-editor/class-form-editor.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,11 @@ public static function allowed_blocks_for_jetpack_form( $allowed_block_types, $e
'jetpack/field-rating',
'jetpack/field-text',
'jetpack/field-number',
'jetpack/field-file-upload',
'jetpack/field-hidden',
'jetpack/field-file',
'jetpack/field-time',
'jetpack/field-slider',
'jetpack/field-image-select',
Copy link
Member

@simison simison Jan 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have a lot of these lists for core blocks and fields; I'm pretty worried that they're hard to maintain and someone (especially from other teams) will forget to update one of them, and it's hard to notice. Plus it's just pain already to add new fields due to how many places/lists one needs to be mindful about.

Ideally, we could consolidate them as much as possible; can be separate PR.


// Supporting blocks.
'jetpack/button',
Copy link
Member

@simison simison Jan 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we're missing core/button here. Case in point.

Expand All @@ -76,6 +80,11 @@ public static function allowed_blocks_for_jetpack_form( $allowed_block_types, $e
'jetpack/options',
'jetpack/option',
'jetpack/phone-input',
'jetpack/dropzone',
'jetpack/input-range',
'jetpack/input-rating',
'jetpack/fieldset-image-options',
'jetpack/input-image-option',

// Multistep blocks.
'jetpack/form-step',
Expand All @@ -86,6 +95,7 @@ public static function allowed_blocks_for_jetpack_form( $allowed_block_types, $e

// Core blocks for rich content.
'core/audio',
'core/button',
'core/columns',
'core/column',
'core/group',
Expand Down
Loading
Loading