Skip to content

Commit 0ee0601

Browse files
CGastrellCGastrell
committed
temp
1 parent a9e7d25 commit 0ee0601

File tree

13 files changed

+2050
-1
lines changed

13 files changed

+2050
-1
lines changed

‎projects/packages/forms/changelog/add-jetpack-forms-international-phone-number

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Significance: minor
2+
Type: added
3+
4+
Forms: new phone field with country code select

‎projects/packages/forms/src/blocks/contact-form/child-blocks.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import JetpackFieldFile from '../field-file';
1313
import JetpackMultipleChoiceField from '../field-multiple-choice';
1414
import JetpackNameField from '../field-name';
1515
import JetpackNumberField from '../field-number';
16+
import JetpackPhoneNumberField from '../field-phone-number';
1617
import JetpackRatingField from '../field-rating';
1718
import JetpackDropdownField from '../field-select';
1819
import JetpackSingleChoiceField from '../field-single-choice';
@@ -26,6 +27,8 @@ import JetpackStepContainer from '../form-step-container';
2627
import JetpackStepDivider from '../form-step-divider';
2728
import JetpackStepNavigation from '../form-step-navigation';
2829
import JetpackInput from '../input';
30+
import JetpackCountryListInput from '../input-country-list';
31+
import JetpackPhoneNumberInput from '../input-phone-number';
2932
import JetpackRatingInput from '../input-rating';
3033
import JetpackLabel from '../label';
3134
import JetpackOption from '../option';
@@ -51,7 +54,15 @@ export const childBlocks = [
5154
JetpackTelephoneField,
5255
JetpackTextareaField,
5356
JetpackFieldFile,
54-
...( getJetpackBlocksVariation() === 'beta' ? [ JetpackRatingField, JetpackRatingInput ] : [] ),
57+
...( getJetpackBlocksVariation() === 'beta'
58+
? [
59+
JetpackRatingField,
60+
JetpackRatingInput,
61+
JetpackPhoneNumberInput,
62+
JetpackCountryListInput,
63+
JetpackPhoneNumberField,
64+
]
65+
: [] ),
5566

5667
// The following are required for these blocks to be parsed correctly in block
5768
// deprecations. They have been flagged with `supports.inserter: false` to

‎projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,18 @@ public static function register_child_blocks() {
236236
),
237237
)
238238
);
239+
240+
Blocks::jetpack_register_block(
241+
'jetpack/phone-number-input',
242+
array()
243+
);
244+
245+
Blocks::jetpack_register_block(
246+
'jetpack/country-list-input',
247+
array()
248+
);
239249
}
250+
240251
// Field render methods.
241252
Blocks::jetpack_register_block(
242253
'jetpack/field-text',
@@ -375,6 +386,16 @@ public static function register_child_blocks() {
375386
),
376387
)
377388
);
389+
390+
Blocks::jetpack_register_block(
391+
'jetpack/field-phone-number',
392+
array(
393+
'render_callback' => array( Contact_Form_Plugin::class, 'gutenblock_render_field_rating' ),
394+
'provides_context' => array(
395+
'jetpack/field-required' => 'required',
396+
),
397+
)
398+
);
378399
}
379400

380401
// Paid file field block

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
2+
import { __ } from '@wordpress/i18n';
3+
import debugFactory from 'debug';
4+
import JetpackFieldControls from '../shared/components/jetpack-field-controls';
5+
import useFormWrapper from '../shared/hooks/use-form-wrapper';
6+
import useJetpackFieldStyles from '../shared/hooks/use-jetpack-field-styles';
7+
import './style.scss';
8+
9+
const debug = debugFactory( 'jetpack-forms:field-phone-number' );
10+
11+
export default function PhoneNumberFieldEdit( props ) {
12+
useFormWrapper( props );
13+
const { attributes, setAttributes, clientId } = props;
14+
const { required, id, width } = attributes;
15+
const { blockStyle } = useJetpackFieldStyles( attributes );
16+
17+
const blockProps = useBlockProps( {
18+
className: `jetpack-field jetpack-field-phone-number${
19+
width ? ` jetpack-field__width-${ width }` : ''
20+
}`,
21+
style: blockStyle,
22+
} );
23+
24+
const innerBlocksProps = useInnerBlocksProps( blockProps, {
25+
allowedBlocks: [ 'jetpack/label', 'jetpack/phone-number-input' ],
26+
template: [
27+
[
28+
'jetpack/label',
29+
{
30+
label: __( 'Phone Number', 'jetpack-forms' ),
31+
placeholder: __( 'Add label…', 'jetpack-forms' ),
32+
},
33+
],
34+
[ 'jetpack/phone-number-input', {} ],
35+
],
36+
templateLock: 'all',
37+
__experimentalCaptureToolbars: true,
38+
} );
39+
40+
debug( 'attributes', attributes );
41+
42+
return (
43+
<>
44+
<div { ...innerBlocksProps } />
45+
46+
<JetpackFieldControls
47+
clientId={ clientId }
48+
id={ id }
49+
required={ required }
50+
attributes={ attributes }
51+
setAttributes={ setAttributes }
52+
width={ width }
53+
/>
54+
</>
55+
);
56+
}

‎projects/packages/forms/src/blocks/field-phone-number/index.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { Path } from '@wordpress/components';
2+
import { __ } from '@wordpress/i18n';
3+
import renderMaterialIcon from '../shared/components/render-material-icon';
4+
import defaultSettings from '../shared/settings';
5+
import { getIconColor } from '../shared/util/block-icons';
6+
import edit from './edit';
7+
import save from './save';
8+
9+
const name = 'field-phone-number';
10+
const settings = {
11+
apiVersion: 3,
12+
...defaultSettings,
13+
title: __( 'Phone Number field', 'jetpack-forms' ),
14+
description: __( 'Allow visitors to enter an international phone number.', 'jetpack-forms' ),
15+
icon: {
16+
foreground: getIconColor(),
17+
src: renderMaterialIcon(
18+
<Path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
19+
),
20+
},
21+
attributes: {
22+
...defaultSettings.attributes,
23+
},
24+
allowedBlocks: [ 'jetpack/label', 'jetpack/phone-number-input' ],
25+
// providesContext: { },
26+
edit,
27+
save,
28+
example: {
29+
innerBlocks: [
30+
{
31+
name: 'jetpack/label',
32+
attributes: {
33+
label: __( 'Phone Number', 'jetpack-forms' ),
34+
},
35+
},
36+
{
37+
name: 'jetpack/phone-number-input',
38+
},
39+
],
40+
},
41+
};
42+
43+
export default { name, settings };

‎projects/packages/forms/src/blocks/field-phone-number/save.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { useInnerBlocksProps } from '@wordpress/block-editor';
2+
3+
export default function PhoneNumberFieldSave() {
4+
const innerBlocksProps = useInnerBlocksProps.save();
5+
return <div { ...innerBlocksProps } />;
6+
}

‎projects/packages/forms/src/blocks/field-phone-number/style.scss

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.jetpack-contact-form .jetpack-field.jetpack-field-phone-number {
2+
3+
.jetpack-phone-number-input {
4+
display: flex;
5+
gap: 8px;
6+
7+
8+
&__dropdown {
9+
flex: 0;
10+
border-radius: var( --jetpack--contact-form--border-radius, 4px ); // to match default border radius on forms.css
11+
12+
display: flex;
13+
align-items: center;
14+
gap: 8px;
15+
white-space: nowrap;
16+
}
17+
18+
&__input {
19+
flex: 1;
20+
}
21+
}
22+
}

‎projects/packages/forms/src/blocks/input-country-list/edit.js

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import {
2+
InspectorControls,
3+
RichText,
4+
useBlockProps,
5+
useInnerBlocksProps,
6+
} from '@wordpress/block-editor';
7+
import { PanelBody, SelectControl } from '@wordpress/components';
8+
import { useMemo } from '@wordpress/element';
9+
import { __ } from '@wordpress/i18n';
10+
import debugFactory from 'debug';
11+
import { countryCodes } from '../input-phone-number/country-codes';
12+
import { useSyncedAttributes } from '../shared/hooks/use-synced-attributes';
13+
import useVariationStyleProperties from '../shared/hooks/use-variation-style-properties.js';
14+
15+
const debug = debugFactory( 'jetpack-forms:input-country-list' );
16+
17+
const SYNCED_ATTRIBUTE_KEYS = [
18+
'backgroundColor',
19+
'borderColor',
20+
'fontFamily',
21+
'fontSize',
22+
'style',
23+
'textColor',
24+
];
25+
26+
export default function CountryListInputEdit( props ) {
27+
const { attributes, setAttributes, context, clientId } = props;
28+
const { defaultCountry, name } = attributes;
29+
30+
const { 'jetpack/field-share-attributes': isSynced } = context;
31+
debug( 'isSynced', isSynced );
32+
useSyncedAttributes( name, isSynced, SYNCED_ATTRIBUTE_KEYS, attributes, setAttributes );
33+
const variationProps = useVariationStyleProperties( {
34+
clientId,
35+
inputBlockName: name,
36+
inputBlockAttributes: attributes,
37+
} );
38+
39+
debug( 'variationProps.cssVars', variationProps?.cssVars );
40+
const blockProps = useBlockProps( {
41+
className: `jetpack-country-list-input jetpack-field__input`,
42+
style: variationProps?.cssVars,
43+
} );
44+
const innerBlocksProps = useInnerBlocksProps( blockProps );
45+
46+
const countryList = useMemo( () => {
47+
return countryCodes.map( country => ( {
48+
label: country.label + ' ' + country.country,
49+
value: country.label,
50+
} ) );
51+
}, [] );
52+
53+
return (
54+
<>
55+
<div { ...innerBlocksProps }>
56+
<RichText.Content value={ defaultCountry || '' } />
57+
<span className="jetpack-field-dropdown__icon" />
58+
</div>
59+
60+
<InspectorControls>
61+
<PanelBody title="Settings">
62+
<SelectControl
63+
__nextHasNoMarginBottom={ true }
64+
__next40pxDefaultSize
65+
label={ __( 'Default country', 'jetpack-forms' ) }
66+
value={ defaultCountry }
67+
onChange={ value => setAttributes( { defaultCountry: value } ) }
68+
options={ countryList }
69+
/>
70+
</PanelBody>
71+
</InspectorControls>
72+
</>
73+
);
74+
}

‎projects/packages/forms/src/blocks/input-country-list/index.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { __ } from '@wordpress/i18n';
2+
import edit from './edit';
3+
4+
const name = 'country-list-input';
5+
const settings = {
6+
apiVersion: 3,
7+
title: __( 'Country List Input', 'jetpack-forms' ),
8+
description: __( 'A country selection input for phone numbers', 'jetpack-forms' ),
9+
category: 'contact-form',
10+
icon: 'flag',
11+
parent: [ 'jetpack/phone-number-input' ],
12+
usesContext: [ 'jetpack/field-share-attributes' ],
13+
supports: {
14+
reusable: false,
15+
html: false,
16+
color: {
17+
text: true,
18+
background: true,
19+
gradients: false,
20+
},
21+
__experimentalBorder: {
22+
color: true,
23+
radius: true,
24+
style: true,
25+
width: true,
26+
__experimentalDefaultControls: {
27+
color: true,
28+
radius: true,
29+
style: true,
30+
width: true,
31+
},
32+
},
33+
typography: {
34+
fontSize: true,
35+
lineHeight: true,
36+
__experimentalFontFamily: true,
37+
__experimentalFontWeight: true,
38+
__experimentalFontStyle: true,
39+
__experimentalTextTransform: true,
40+
__experimentalTextDecoration: true,
41+
__experimentalLetterSpacing: true,
42+
__experimentalDefaultControls: {
43+
fontSize: true,
44+
},
45+
},
46+
},
47+
attributes: {
48+
defaultCountry: {
49+
type: 'string',
50+
default: '+1',
51+
},
52+
},
53+
edit,
54+
save: () => null,
55+
};
56+
57+
export default {
58+
name,
59+
settings,
60+
};

0 commit comments

Comments
 (0)