@@ -26,7 +26,7 @@ export class AllFormFieldsFlow implements BlockFlow {
26
26
}
27
27
28
28
// You add an individual input field...
29
- blockSidebarName = 'Text Input Field ' ;
29
+ blockSidebarName = 'Text input field ' ;
30
30
// ... but a full Form block is added and marked as selected in the editor!
31
31
blockEditorSelector = makeSelectorFromBlockName ( 'Form' ) ;
32
32
@@ -38,31 +38,31 @@ export class AllFormFieldsFlow implements BlockFlow {
38
38
async configure ( context : EditorContext ) : Promise < void > {
39
39
// Determine if we are working with the refactored form fields (released June 2025)
40
40
const editorCanvas = await context . editorPage . getEditorCanvas ( ) ;
41
- const initailBlock = editorCanvas . locator ( makeSelectorFromBlockName ( 'Text Input Field ' ) ) ;
41
+ const initailBlock = editorCanvas . locator ( makeSelectorFromBlockName ( 'Text input field ' ) ) ;
42
42
const inputChild = initailBlock . locator ( '[aria-label="Block: Input"]' ) ;
43
43
const isRefactor = ( await inputChild . count ( ) ) > 0 ;
44
44
45
45
// Text Input Field is already added by the first step, so let's start by labeling it.
46
46
await labelFormFieldBlock ( context . addedBlockLocator , {
47
- blockName : 'Text Input Field ' ,
47
+ blockName : 'Text input field ' ,
48
48
accessibleLabelName : 'Add label…' ,
49
- labelText : this . addLabelPrefix ( 'Text Input Field ' ) ,
49
+ labelText : this . addLabelPrefix ( 'Text input field ' ) ,
50
50
} ) ;
51
- let lastBlockName = 'Text Input Field ' ;
51
+ let lastBlockName = 'Text input field ' ;
52
52
53
53
// Add remaining field blocks, labeling as we go.
54
54
const remainingBlocksToAdd = [
55
- [ 'Name Field ' , 'Add label…' ] ,
56
- [ 'Email Field ' , 'Add label…' ] ,
57
- [ 'Website Field ' , 'Add label…' ] ,
58
- [ 'Date Picker ' , 'Add label…' ] ,
59
- [ 'Phone Number Field ' , 'Add label…' ] ,
60
- [ 'Multi-line Text Field ' , 'Add label…' ] ,
55
+ [ 'Name field ' , 'Add label…' ] ,
56
+ [ 'Email field ' , 'Add label…' ] ,
57
+ [ 'Website field ' , 'Add label…' ] ,
58
+ [ 'Date picker ' , 'Add label…' ] ,
59
+ [ 'Phone number field ' , 'Add label…' ] ,
60
+ [ 'Multi-line text field ' , 'Add label…' ] ,
61
61
[ 'Checkbox' , 'Add label…' ] ,
62
- [ 'Multiple Choice (Checkbox )' , 'Add label' ] ,
63
- [ 'Single Choice (Radio )' , 'Add label' ] ,
64
- [ 'Dropdown Field ' , 'Add label' ] ,
65
- [ 'Terms Consent ' , 'Add implicit consent message…' ] ,
62
+ [ 'Multiple choice (checkbox )' , 'Add label' ] ,
63
+ [ 'Single choice (radio )' , 'Add label' ] ,
64
+ [ 'Dropdown field ' , 'Add label' ] ,
65
+ [ 'Terms consent ' , 'Add implicit consent message…' ] ,
66
66
] ;
67
67
for ( const [ blockName , accessibleLabelName ] of remainingBlocksToAdd ) {
68
68
await this . addFieldBlockToForm ( context , blockName , lastBlockName , isRefactor ) ;
@@ -79,8 +79,8 @@ export class AllFormFieldsFlow implements BlockFlow {
79
79
const otherBlocksToLabel = isRefactor
80
80
? [
81
81
[ 'Button' , 'Add text…' ] ,
82
- [ 'Option' , 'Add option…' , 'Single Choice (Radio )' ] ,
83
- [ 'Option' , 'Add option…' , 'Multiple Choice (Checkbox )' ] ,
82
+ [ 'Option' , 'Add option…' , 'Single choice (radio )' ] ,
83
+ [ 'Option' , 'Add option…' , 'Multiple choice (checkbox )' ] ,
84
84
]
85
85
: [
86
86
[ 'Button' , 'Add text…' ] ,
@@ -106,28 +106,28 @@ export class AllFormFieldsFlow implements BlockFlow {
106
106
*/
107
107
async validateAfterPublish ( context : PublishedPostContext ) : Promise < void > {
108
108
const isRefactor = ( await context . page . locator ( '.wp-block-jetpack-input' ) . count ( ) ) > 0 ;
109
- const radioName = isRefactor ? 'Option' : 'Single Choice Option ' ;
110
- const checkboxName = isRefactor ? 'Option' : 'Multiple Choice Option ' ;
109
+ const radioName = isRefactor ? 'Option' : 'Single choice option ' ;
110
+ const checkboxName = isRefactor ? 'Option' : 'Multiple choice option ' ;
111
111
112
112
await validatePublishedFormFields ( context . page , [
113
- { type : 'textbox' , accessibleName : this . addLabelPrefix ( 'Text Input Field ' ) } ,
114
- { type : 'textbox' , accessibleName : this . addLabelPrefix ( 'Name Field ' ) } ,
115
- { type : 'textbox' , accessibleName : this . addLabelPrefix ( 'Email Field ' ) } ,
116
- { type : 'textbox' , accessibleName : this . addLabelPrefix ( 'Website Field ' ) } ,
117
- { type : 'textbox' , accessibleName : this . addLabelPrefix ( 'Phone Number Field ' ) } ,
118
- { type : 'textbox' , accessibleName : this . addLabelPrefix ( 'Multi-line Text Field ' ) } ,
113
+ { type : 'textbox' , accessibleName : this . addLabelPrefix ( 'Text input field ' ) } ,
114
+ { type : 'textbox' , accessibleName : this . addLabelPrefix ( 'Name field ' ) } ,
115
+ { type : 'textbox' , accessibleName : this . addLabelPrefix ( 'Email field ' ) } ,
116
+ { type : 'textbox' , accessibleName : this . addLabelPrefix ( 'Website field ' ) } ,
117
+ { type : 'textbox' , accessibleName : this . addLabelPrefix ( 'Phone number field ' ) } ,
118
+ { type : 'textbox' , accessibleName : this . addLabelPrefix ( 'Multi-line text field ' ) } ,
119
119
{ type : 'checkbox' , accessibleName : this . addLabelPrefix ( 'Checkbox' ) } ,
120
120
{ type : 'radio' , accessibleName : this . addLabelPrefix ( radioName ) } ,
121
121
{ type : 'checkbox' , accessibleName : this . addLabelPrefix ( checkboxName ) } ,
122
122
{ type : 'button' , accessibleName : this . addLabelPrefix ( 'Button' ) } ,
123
123
// Currently broken, sadly! See: https://github.com/Automattic/jetpack/issues/30762
124
- // { type: 'combobox', accessibleName: this.addLabelPrefix( 'Dropdown Field ' ) },
124
+ // { type: 'combobox', accessibleName: this.addLabelPrefix( 'Dropdown field ' ) },
125
125
] ) ;
126
126
127
127
// The terms consent is kind of weird because it's applied to a hidden checkbox, so we validate that here.
128
128
await context . page
129
129
. getByRole ( 'checkbox' , {
130
- name : this . addLabelPrefix ( 'Terms Consent ' ) ,
130
+ name : this . addLabelPrefix ( 'Terms consent ' ) ,
131
131
includeHidden : true ,
132
132
} )
133
133
. first ( )
0 commit comments