Forms: support autocomplete attribute

projects/packages/forms/changelog/update-forms-autocomplete-attr

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Forms: support 'autocomplete' attributes

projects/packages/forms/src/blocks/field-date/index.js

@@ -39,6 +39,19 @@ const settings = {
 	},
 	deprecated,
 	save,
+	variations: [
+		{
+			name: 'field-birthdate',
+			title: __( 'Birthdate', 'jetpack-forms' ),
+			description: __( 'Capture age with a date picker.', 'jetpack-forms' ),
+			attributes: {
+				// https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#bday
+				autocomplete: 'bday',
+			},
+			isActive: ( blockAttributes, variationAttributes ) =>
+				blockAttributes.autocomplete === variationAttributes.autocomplete,
+		},
+	],
 	example: {
 		innerBlocks: [
 			{

projects/packages/forms/src/blocks/field-number/edit.js

@@ -10,6 +10,7 @@ export default function NumberFieldEdit( props ) {
 			clientId={ props.clientId }
 			type="number"
 			label={ __( 'Number', 'jetpack-forms' ) }
+			autocomplete={ props.attributes.autocomplete }
 			required={ props.attributes.required }
 			requiredText={ props.attributes.requiredText }
 			requiredIndicator={ props.attributes.requiredIndicator }

projects/packages/forms/src/blocks/field-telephone/edit.js

@@ -26,6 +26,7 @@ const isBoolean = value => {
 export default function PhoneFieldEdit( props ) {
 	const { setAttributes, attributes, clientId, isSelected } = props;
 	const {
+		autocomplete,
 		showCountrySelector,
 		width,
 		id,
@@ -135,6 +136,7 @@ export default function PhoneFieldEdit( props ) {
 			</BlockControls>
 
 			<JetpackFieldControls
+				autocomplete={ autocomplete }
 				clientId={ clientId }
 				id={ id }
 				required={ required }

projects/packages/forms/src/blocks/field-text/edit.js

@@ -10,6 +10,7 @@ export default function TextFieldEdit( props ) {
 			clientId={ props.clientId }
 			type="text"
 			label={ __( 'Text', 'jetpack-forms' ) }
+			autocomplete={ props.attributes.autocomplete }
 			required={ props.attributes.required }
 			requiredText={ props.attributes.requiredText }
 			requiredIndicator={ props.attributes.requiredIndicator }

projects/packages/forms/src/blocks/field-textarea/edit.js

@@ -11,7 +11,7 @@ import { ALLOWED_INNER_BLOCKS } from '../shared/util/constants';
 
 export default function TextareaFieldEdit( props ) {
 	const { attributes, clientId, isSelected, setAttributes } = props;
-	const { id, required, width, requiredIndicator } = attributes;
+	const { id, required, width, requiredIndicator, autocomplete } = attributes;
 
 	useFormWrapper( props );
 	const { blockStyle } = useJetpackFieldStyles( attributes );
@@ -49,6 +49,7 @@ export default function TextareaFieldEdit( props ) {
 		<>
 			<div { ...innerBlocksProps } />
 			<JetpackFieldControls
+				autocomplete={ autocomplete }
 				id={ id }
 				required={ required }
 				setAttributes={ setAttributes }

projects/packages/forms/src/blocks/field-time/edit.js

@@ -10,6 +10,7 @@ export default function NumberFieldEdit( props ) {
 			clientId={ props.clientId }
 			type="time"
 			label={ __( 'Time', 'jetpack-forms' ) }
+			autocomplete={ props.attributes.autocomplete }
 			required={ props.attributes.required }
 			requiredText={ props.attributes.requiredText }
 			requiredIndicator={ props.attributes.requiredIndicator }

projects/packages/forms/src/blocks/field-url/edit.js

@@ -10,6 +10,7 @@ export default function UrlFieldEdit( props ) {
 			clientId={ props.clientId }
 			type="url"
 			label={ __( 'Website', 'jetpack-forms' ) }
+			autocomplete={ props.attributes.autocomplete }
 			required={ props.attributes.required }
 			requiredText={ props.attributes.requiredText }
 			requiredIndicator={ props.attributes.requiredIndicator }

projects/packages/forms/src/blocks/shared/components/jetpack-field-controls.js

@@ -3,7 +3,13 @@ import {
 	InspectorControls,
 	BlockControls,
 } from '@wordpress/block-editor';
-import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
+import {
+	ExternalLink,
+	PanelBody,
+	SelectControl,
+	TextControl,
+	ToggleControl,
+} from '@wordpress/components';
 import { isValidElement, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import JetpackFieldWidth from './jetpack-field-width';
@@ -25,6 +31,7 @@ const reservedAttributes = [
 
 const JetpackFieldControls = ( {
 	attributes,
+	autocomplete,
 	id,
 	required,
 	setAttributes,
@@ -142,6 +149,113 @@ const JetpackFieldControls = ( {
 					__nextHasNoMarginBottom={ true }
 					__next40pxDefaultSize={ true }
 				/>
+				<SelectControl
+					label={ __( 'Autocomplete', 'jetpack-forms' ) }
+					value={ autocomplete || '' }
+					onChange={ value => setAttributes( { autocomplete: value } ) }
+					help={
+						<>
+							{ __( 'Guidance to the browser for autocompleting the form.', 'jetpack-forms' ) }
+							<br />
+							<ExternalLink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete">
+								{ __( 'Read more', 'jetpack-forms' ) }
+							</ExternalLink>
+						</>
+					}
+					// See https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete
+					options={ [
+						{
+							label: __( 'Default', 'jetpack-forms' ),
+							value: '',
+						},
+						{
+							label: __( 'Off', 'jetpack-forms' ),
+							value: 'off',
+						},
+						{
+							label: __( 'Telephone', 'jetpack-forms' ),
+							value: 'tel',
+						},
+						{
+							label: __( 'Full name', 'jetpack-forms' ),
+							value: 'name',
+						},
+						{
+							label: __( 'First name', 'jetpack-forms' ),
+							value: 'given-name',
+						},
+						{
+							label: __( 'Middle name', 'jetpack-forms' ),
+							value: 'additional-name',
+						},
+						{
+							label: __( 'The last name', 'jetpack-forms' ),
+							value: 'family-name',
+						},
+						{
+							label: __( 'The honorific prefix ("Mrs.", etc)', 'jetpack-forms' ),
+							value: 'honorific-prefix',
+						},
+						{
+							label: __( 'The honorific suffix ("Jr." etc)', 'jetpack-forms' ),
+							value: 'honorific-suffix',
+						},
+						{
+							label: __( 'A nickname', 'jetpack-forms' ),
+							value: 'nickname',
+						},
+						{
+							label: __( 'A username', 'jetpack-forms' ),
+							value: 'username',
+						},
+						{
+							label: __( 'A job title', 'jetpack-forms' ),
+							value: 'organization-title',
+						},
+						{
+							label: __( 'A company or organization name', 'jetpack-forms' ),
+							value: 'organization',
+						},
+						{
+							label: __( 'A street address', 'jetpack-forms' ),
+							value: 'street-address',
+						},
+						{
+							label: __( 'A country code', 'jetpack-forms' ),
+							value: 'country',
+						},
+						{
+							label: __( 'A country name', 'jetpack-forms' ),
+							value: 'country-name',
+						},
+						{
+							label: __( 'A postal code or ZIP code', 'jetpack-forms' ),
+							value: 'postal-code',
+						},
+						{
+							label: __( 'Currency', 'jetpack-forms' ),
+							value: 'transaction-currency',
+						},
+						{
+							label: __( 'A preferred language', 'jetpack-forms' ),
+							value: 'language',
+						},
+						{
+							label: __( 'A birth date', 'jetpack-forms' ),
+							value: 'bday',
+						},
+						{
+							label: __( 'A gender identity (e.g. "Female")', 'jetpack-forms' ),
+							value: 'sex',
+						},
+						{
+							label: __( 'A URL', 'jetpack-forms' ),
+							value: 'url',
+						},
+					] }
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+				/>
 			</InspectorAdvancedControls>
 		</>
 	);

projects/packages/forms/src/blocks/shared/components/jetpack-field.js

@@ -12,6 +12,7 @@ import JetpackFieldControls from './jetpack-field-controls';
 const JetpackField = props => {
 	const {
 		attributes,
+		autocomplete,
 		clientId,
 		id,
 		isSelected,
@@ -57,6 +58,7 @@ const JetpackField = props => {
 		<>
 			<div { ...innerBlocksProps } />
 			<JetpackFieldControls
+				autocomplete={ autocomplete }
 				id={ id }
 				required={ required }
 				width={ width }

projects/packages/forms/src/blocks/shared/settings/index.js

@@ -4,6 +4,7 @@ export default {
 	apiVersion: 3,
 	attributes: {
 		id: { type: 'string' },
+		autocomplete: { type: 'string', default: '' },
 		required: {
 			type: 'boolean',
 			default: false,

projects/plugins/jetpack/changelog/update-forms-autocomplete-attr

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Forms: support 'autocomplete' browser guidance attributes.