diff --git a/projects/packages/forms/changelog/update-form-name-variations-example b/projects/packages/forms/changelog/update-form-name-variations-example new file mode 100644 index 0000000000000..c86a3ed0e7172 --- /dev/null +++ b/projects/packages/forms/changelog/update-form-name-variations-example @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Forms: add examples for first/last name field variations diff --git a/projects/packages/forms/src/blocks/field-name/variations.js b/projects/packages/forms/src/blocks/field-name/variations.js index 7065ae3ee32ff..abde919d606d6 100644 --- a/projects/packages/forms/src/blocks/field-name/variations.js +++ b/projects/packages/forms/src/blocks/field-name/variations.js @@ -24,6 +24,7 @@ const variations = [ description: __( 'Collect the visitor’s name.', 'jetpack-forms' ), icon, scope: [ 'transform' ], + isActive: ( { id } ) => ! [ FIRST_NAME_ID, LAST_NAME_ID ].includes( id ), attributes: { id: '', }, @@ -46,6 +47,22 @@ const variations = [ [ 'jetpack/label', { label: DEFAULT_FIRST_NAME_LABEL } ], [ 'jetpack/input', { type: 'text' } ], ], + example: { + innerBlocks: [ + { + name: 'jetpack/label', + attributes: { + label: DEFAULT_FIRST_NAME_LABEL, + }, + }, + { + name: 'jetpack/input', + attributes: { + type: 'text', + }, + }, + ], + }, }, { name: LAST_NAME_ID, @@ -61,6 +78,22 @@ const variations = [ [ 'jetpack/label', { label: DEFAULT_LAST_NAME_LABEL } ], [ 'jetpack/input', { type: 'text' } ], ], + example: { + innerBlocks: [ + { + name: 'jetpack/label', + attributes: { + label: DEFAULT_LAST_NAME_LABEL, + }, + }, + { + name: 'jetpack/input', + attributes: { + type: 'text', + }, + }, + ], + }, }, ];