diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/contact-form')
10 files changed, 0 insertions, 1851 deletions
diff --git a/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-contact-form.js b/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-contact-form.js deleted file mode 100644 index 952a3934..00000000 --- a/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-contact-form.js +++ /dev/null @@ -1,266 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; -import emailValidator from 'email-validator'; -import { __, sprintf } from '@wordpress/i18n'; -import { Button, PanelBody, Path, Placeholder, TextControl } from '@wordpress/components'; -import { Component, Fragment } from '@wordpress/element'; -import { compose, withInstanceId } from '@wordpress/compose'; -import { InnerBlocks, InspectorControls } from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import HelpMessage from '../../../shared/help-message'; -import renderMaterialIcon from '../../../shared/render-material-icon'; -import SubmitButton from '../../../shared/submit-button'; - -const ALLOWED_BLOCKS = [ - 'jetpack/markdown', - 'core/paragraph', - 'core/image', - 'core/heading', - 'core/gallery', - 'core/list', - 'core/quote', - 'core/shortcode', - 'core/audio', - 'core/code', - 'core/cover', - 'core/file', - 'core/html', - 'core/separator', - 'core/spacer', - 'core/subhead', - 'core/table', - 'core/verse', - 'core/video', -]; - -class JetpackContactForm extends Component { - constructor( ...args ) { - super( ...args ); - this.onChangeSubject = this.onChangeSubject.bind( this ); - this.onBlurTo = this.onBlurTo.bind( this ); - this.onChangeTo = this.onChangeTo.bind( this ); - this.onChangeSubmit = this.onChangeSubmit.bind( this ); - this.onFormSettingsSet = this.onFormSettingsSet.bind( this ); - this.getToValidationError = this.getToValidationError.bind( this ); - this.renderToAndSubjectFields = this.renderToAndSubjectFields.bind( this ); - this.preventEnterSubmittion = this.preventEnterSubmittion.bind( this ); - this.hasEmailError = this.hasEmailError.bind( this ); - - const to = args[ 0 ].attributes.to ? args[ 0 ].attributes.to : ''; - const error = to - .split( ',' ) - .map( this.getToValidationError ) - .filter( Boolean ); - - this.state = { - toError: error && error.length ? error : null, - }; - } - - getIntroMessage() { - return __( - 'You’ll receive an email notification each time someone fills out the form. Where should it go, and what should the subject line be?', - 'jetpack' - ); - } - - getEmailHelpMessage() { - return __( 'You can enter multiple email addresses separated by commas.', 'jetpack' ); - } - - onChangeSubject( subject ) { - this.props.setAttributes( { subject } ); - } - - getToValidationError( email ) { - email = email.trim(); - if ( email.length === 0 ) { - return false; // ignore the empty emails - } - if ( ! emailValidator.validate( email ) ) { - return { email }; - } - return false; - } - - onBlurTo( event ) { - const error = event.target.value - .split( ',' ) - .map( this.getToValidationError ) - .filter( Boolean ); - if ( error && error.length ) { - this.setState( { toError: error } ); - return; - } - } - - onChangeTo( to ) { - const emails = to.trim(); - if ( emails.length === 0 ) { - this.setState( { toError: null } ); - this.props.setAttributes( { to } ); - return; - } - - this.setState( { toError: null } ); - this.props.setAttributes( { to } ); - } - - onChangeSubmit( submitButtonText ) { - this.props.setAttributes( { submitButtonText } ); - } - - onFormSettingsSet( event ) { - event.preventDefault(); - if ( this.state.toError ) { - // don't submit the form if there are errors. - return; - } - this.props.setAttributes( { hasFormSettingsSet: 'yes' } ); - } - - getfieldEmailError( errors ) { - if ( errors ) { - if ( errors.length === 1 ) { - if ( errors[ 0 ] && errors[ 0 ].email ) { - return sprintf( __( '%s is not a valid email address.', 'jetpack' ), errors[ 0 ].email ); - } - return errors[ 0 ]; - } - - if ( errors.length === 2 ) { - return sprintf( - __( '%s and %s are not a valid email address.', 'jetpack' ), - errors[ 0 ].email, - errors[ 1 ].email - ); - } - const inValidEmails = errors.map( error => error.email ); - return sprintf( - __( '%s are not a valid email address.', 'jetpack' ), - inValidEmails.join( ', ' ) - ); - } - return null; - } - - preventEnterSubmittion( event ) { - if ( event.key === 'Enter' ) { - event.preventDefault(); - event.stopPropagation(); - } - } - - renderToAndSubjectFields() { - const fieldEmailError = this.state.toError; - const { instanceId, attributes } = this.props; - const { subject, to } = attributes; - return ( - <Fragment> - <TextControl - aria-describedby={ `contact-form-${ instanceId }-email-${ - this.hasEmailError() ? 'error' : 'help' - }` } - label={ __( 'Email address', 'jetpack' ) } - placeholder={ __( 'name@example.com', 'jetpack' ) } - onKeyDown={ this.preventEnterSubmittion } - value={ to } - onBlur={ this.onBlurTo } - onChange={ this.onChangeTo } - /> - <HelpMessage isError id={ `contact-form-${ instanceId }-email-error` }> - { this.getfieldEmailError( fieldEmailError ) } - </HelpMessage> - <HelpMessage id={ `contact-form-${ instanceId }-email-help` }> - { this.getEmailHelpMessage() } - </HelpMessage> - - <TextControl - label={ __( 'Email subject line', 'jetpack' ) } - value={ subject } - placeholder={ __( "Let's work together", 'jetpack' ) } - onChange={ this.onChangeSubject } - /> - </Fragment> - ); - } - - hasEmailError() { - const fieldEmailError = this.state.toError; - return fieldEmailError && fieldEmailError.length > 0; - } - - render() { - const { className, attributes } = this.props; - const { hasFormSettingsSet } = attributes; - const formClassnames = classnames( className, 'jetpack-contact-form', { - 'has-intro': ! hasFormSettingsSet, - } ); - - return ( - <Fragment> - <InspectorControls> - <PanelBody title={ __( 'Email feedback settings', 'jetpack' ) }> - { this.renderToAndSubjectFields() } - </PanelBody> - </InspectorControls> - <div className={ formClassnames }> - { ! hasFormSettingsSet && ( - <Placeholder - label={ __( 'Form', 'jetpack' ) } - icon={ renderMaterialIcon( - <Path d="M13 7.5h5v2h-5zm0 7h5v2h-5zM19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM11 6H6v5h5V6zm-1 4H7V7h3v3zm1 3H6v5h5v-5zm-1 4H7v-3h3v3z" /> - ) } - > - <form onSubmit={ this.onFormSettingsSet }> - <p className="jetpack-contact-form__intro-message">{ this.getIntroMessage() }</p> - { this.renderToAndSubjectFields() } - <p className="jetpack-contact-form__intro-message"> - { __( - '(If you leave these blank, notifications will go to the author with the post or page title as the subject line.)', - 'jetpack' - ) } - </p> - <div className="jetpack-contact-form__create"> - <Button isPrimary type="submit" disabled={ this.hasEmailError() }> - { __( 'Add form', 'jetpack' ) } - </Button> - </div> - </form> - </Placeholder> - ) } - { hasFormSettingsSet && ( - <InnerBlocks - allowedBlocks={ ALLOWED_BLOCKS } - templateLock={ false } - template={ [ - [ - 'jetpack/field-name', - { - required: true, - }, - ], - [ - 'jetpack/field-email', - { - required: true, - }, - ], - [ 'jetpack/field-url', {} ], - [ 'jetpack/field-textarea', {} ], - ] } - /> - ) } - { hasFormSettingsSet && <SubmitButton { ...this.props } /> } - </div> - </Fragment> - ); - } -} - -export default compose( [ withInstanceId ] )( JetpackContactForm ); diff --git a/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-checkbox.js b/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-checkbox.js deleted file mode 100644 index 05e49dc4..00000000 --- a/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-checkbox.js +++ /dev/null @@ -1,62 +0,0 @@ -/** - * External dependencies - */ -import { __ } from '@wordpress/i18n'; -import { BaseControl, PanelBody, TextControl, ToggleControl } from '@wordpress/components'; -import { Fragment } from '@wordpress/element'; -import { InspectorControls } from '@wordpress/editor'; -import { withInstanceId } from '@wordpress/compose'; - -/** - * Internal dependencies - */ -import JetpackFieldLabel from './jetpack-field-label'; - -const JetpackFieldCheckbox = ( { - instanceId, - required, - label, - setAttributes, - isSelected, - defaultValue, - id, -} ) => { - return ( - <BaseControl - id={ `jetpack-field-checkbox-${ instanceId }` } - className="jetpack-field jetpack-field-checkbox" - label={ - <Fragment> - <input - className="jetpack-field-checkbox__checkbox" - type="checkbox" - disabled - checked={ defaultValue } - /> - <JetpackFieldLabel - required={ required } - label={ label } - setAttributes={ setAttributes } - isSelected={ isSelected } - /> - <InspectorControls> - <PanelBody title={ __( 'Field Settings', 'jetpack' ) }> - <ToggleControl - label={ __( 'Default Checked State', 'jetpack' ) } - checked={ defaultValue } - onChange={ value => setAttributes( { defaultValue: value } ) } - /> - <TextControl - label={ __( 'ID', 'jetpack' ) } - value={ id } - onChange={ value => setAttributes( { id: value } ) } - /> - </PanelBody> - </InspectorControls> - </Fragment> - } - /> - ); -}; - -export default withInstanceId( JetpackFieldCheckbox ); diff --git a/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-label.js b/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-label.js deleted file mode 100644 index 0ee3d7ba..00000000 --- a/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-label.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * External dependencies - */ -import { __ } from '@wordpress/i18n'; -import { PlainText } from '@wordpress/editor'; -import { ToggleControl } from '@wordpress/components'; - -const JetpackFieldLabel = ( { setAttributes, label, resetFocus, isSelected, required } ) => { - return ( - <div className="jetpack-field-label"> - <PlainText - value={ label } - className="jetpack-field-label__input" - onChange={ value => { - resetFocus && resetFocus(); - setAttributes( { label: value } ); - } } - placeholder={ __( 'Write label…', 'jetpack' ) } - /> - { isSelected && ( - <ToggleControl - label={ __( 'Required', 'jetpack' ) } - className="jetpack-field-label__required" - checked={ required } - onChange={ value => setAttributes( { required: value } ) } - /> - ) } - { ! isSelected && required && ( - <span className="required">{ __( '(required)', 'jetpack' ) }</span> - ) } - </div> - ); -}; - -export default JetpackFieldLabel; diff --git a/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-multiple.js b/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-multiple.js deleted file mode 100644 index 292bdeaf..00000000 --- a/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-multiple.js +++ /dev/null @@ -1,122 +0,0 @@ -/** - * External dependencies - */ -import { __ } from '@wordpress/i18n'; -import { BaseControl, IconButton, PanelBody, TextControl } from '@wordpress/components'; -import { Component, Fragment } from '@wordpress/element'; -import { InspectorControls } from '@wordpress/editor'; -import { withInstanceId } from '@wordpress/compose'; - -/** - * Internal dependencies - */ -import JetpackFieldLabel from './jetpack-field-label'; -import JetpackOption from './jetpack-option'; - -class JetpackFieldMultiple extends Component { - constructor( ...args ) { - super( ...args ); - this.onChangeOption = this.onChangeOption.bind( this ); - this.addNewOption = this.addNewOption.bind( this ); - this.state = { inFocus: null }; - } - - onChangeOption( key = null, option = null ) { - const newOptions = this.props.options.slice( 0 ); - if ( null === option ) { - // Remove a key - newOptions.splice( key, 1 ); - if ( key > 0 ) { - this.setState( { inFocus: key - 1 } ); - } - } else { - // update a key - newOptions.splice( key, 1, option ); - this.setState( { inFocus: key } ); // set the focus. - } - this.props.setAttributes( { options: newOptions } ); - } - - addNewOption( key = null ) { - const newOptions = this.props.options.slice( 0 ); - let inFocus = 0; - if ( 'object' === typeof key ) { - newOptions.push( '' ); - inFocus = newOptions.length - 1; - } else { - newOptions.splice( key + 1, 0, '' ); - inFocus = key + 1; - } - - this.setState( { inFocus: inFocus } ); - this.props.setAttributes( { options: newOptions } ); - } - - render() { - const { type, instanceId, required, label, setAttributes, isSelected, id } = this.props; - let { options } = this.props; - let { inFocus } = this.state; - if ( ! options.length ) { - options = [ '' ]; - inFocus = 0; - } - - return ( - <Fragment> - <BaseControl - id={ `jetpack-field-multiple-${ instanceId }` } - className="jetpack-field jetpack-field-multiple" - label={ - <JetpackFieldLabel - required={ required } - label={ label } - setAttributes={ setAttributes } - isSelected={ isSelected } - resetFocus={ () => this.setState( { inFocus: null } ) } - /> - } - > - <ol - className="jetpack-field-multiple__list" - id={ `jetpack-field-multiple-${ instanceId }` } - > - { options.map( ( option, index ) => ( - <JetpackOption - type={ type } - key={ index } - option={ option } - index={ index } - onChangeOption={ this.onChangeOption } - onAddOption={ this.addNewOption } - isInFocus={ index === inFocus && isSelected } - isSelected={ isSelected } - /> - ) ) } - </ol> - { isSelected && ( - <IconButton - className="jetpack-field-multiple__add-option" - icon="insert" - label={ __( 'Insert option', 'jetpack' ) } - onClick={ this.addNewOption } - > - { __( 'Add option', 'jetpack' ) } - </IconButton> - ) } - </BaseControl> - - <InspectorControls> - <PanelBody title={ __( 'Field Settings', 'jetpack' ) }> - <TextControl - label={ __( 'ID', 'jetpack' ) } - value={ id } - onChange={ value => setAttributes( { id: value } ) } - /> - </PanelBody> - </InspectorControls> - </Fragment> - ); - } -} - -export default withInstanceId( JetpackFieldMultiple ); diff --git a/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-textarea.js b/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-textarea.js deleted file mode 100644 index e2025941..00000000 --- a/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-textarea.js +++ /dev/null @@ -1,59 +0,0 @@ -/** - * External dependencies - */ -import { __ } from '@wordpress/i18n'; -import { Fragment } from '@wordpress/element'; -import { InspectorControls } from '@wordpress/editor'; -import { PanelBody, TextareaControl, TextControl } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import JetpackFieldLabel from './jetpack-field-label'; - -function JetpackFieldTextarea( { - required, - label, - setAttributes, - isSelected, - defaultValue, - placeholder, - id, -} ) { - return ( - <Fragment> - <div className="jetpack-field"> - <TextareaControl - label={ - <JetpackFieldLabel - required={ required } - label={ label } - setAttributes={ setAttributes } - isSelected={ isSelected } - /> - } - placeholder={ placeholder } - value={ placeholder } - onChange={ value => setAttributes( { placeholder: value } ) } - title={ __( 'Set the placeholder text', 'jetpack' ) } - /> - </div> - <InspectorControls> - <PanelBody title={ __( 'Field Settings', 'jetpack' ) }> - <TextControl - label={ __( 'Default Value', 'jetpack' ) } - value={ defaultValue } - onChange={ value => setAttributes( { defaultValue: value } ) } - /> - <TextControl - label={ __( 'ID', 'jetpack' ) } - value={ id } - onChange={ value => setAttributes( { id: value } ) } - /> - </PanelBody> - </InspectorControls> - </Fragment> - ); -} - -export default JetpackFieldTextarea; diff --git a/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field.js b/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field.js deleted file mode 100644 index 6a8269ff..00000000 --- a/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field.js +++ /dev/null @@ -1,62 +0,0 @@ -/** - * External dependencies - */ -import classNames from 'classnames'; -import { __ } from '@wordpress/i18n'; -import { Fragment } from '@wordpress/element'; -import { InspectorControls } from '@wordpress/editor'; -import { PanelBody, TextControl } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import JetpackFieldLabel from './jetpack-field-label'; - -function JetpackField( { - isSelected, - type, - required, - label, - setAttributes, - defaultValue, - placeholder, - id, -} ) { - return ( - <Fragment> - <div className={ classNames( 'jetpack-field', { 'is-selected': isSelected } ) }> - <TextControl - type={ type } - label={ - <JetpackFieldLabel - required={ required } - label={ label } - setAttributes={ setAttributes } - isSelected={ isSelected } - /> - } - placeholder={ placeholder } - value={ placeholder } - onChange={ value => setAttributes( { placeholder: value } ) } - title={ __( 'Set the placeholder text', 'jetpack' ) } - /> - </div> - <InspectorControls> - <PanelBody title={ __( 'Field Settings', 'jetpack' ) }> - <TextControl - label={ __( 'Default Value', 'jetpack' ) } - value={ defaultValue } - onChange={ value => setAttributes( { defaultValue: value } ) } - /> - <TextControl - label={ __( 'ID', 'jetpack' ) } - value={ id } - onChange={ value => setAttributes( { id: value } ) } - /> - </PanelBody> - </InspectorControls> - </Fragment> - ); -} - -export default JetpackField; diff --git a/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-option.js b/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-option.js deleted file mode 100644 index 8cd2792d..00000000 --- a/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-option.js +++ /dev/null @@ -1,80 +0,0 @@ -/** - * External dependencies - */ -import { __ } from '@wordpress/i18n'; -import { IconButton } from '@wordpress/components'; -import { Component, createRef } from '@wordpress/element'; - -class JetpackOption extends Component { - constructor( ...args ) { - super( ...args ); - this.onChangeOption = this.onChangeOption.bind( this ); - this.onKeyPress = this.onKeyPress.bind( this ); - this.onDeleteOption = this.onDeleteOption.bind( this ); - this.textInput = createRef(); - } - - componentDidMount() { - if ( this.props.isInFocus ) { - this.textInput.current.focus(); - } - } - - componentDidUpdate() { - if ( this.props.isInFocus ) { - this.textInput.current.focus(); - } - } - - onChangeOption( event ) { - this.props.onChangeOption( this.props.index, event.target.value ); - } - - onKeyPress( event ) { - if ( event.key === 'Enter' ) { - this.props.onAddOption( this.props.index ); - event.preventDefault(); - return; - } - - if ( event.key === 'Backspace' && event.target.value === '' ) { - this.props.onChangeOption( this.props.index ); - event.preventDefault(); - return; - } - } - - onDeleteOption() { - this.props.onChangeOption( this.props.index ); - } - - render() { - const { isSelected, option, type } = this.props; - return ( - <li className="jetpack-option"> - { type && type !== 'select' && ( - <input className="jetpack-option__type" type={ type } disabled /> - ) } - <input - type="text" - className="jetpack-option__input" - value={ option } - placeholder={ __( 'Write option…', 'jetpack' ) } - onChange={ this.onChangeOption } - onKeyDown={ this.onKeyPress } - ref={ this.textInput } - /> - { isSelected && ( - <IconButton - className="jetpack-option__remove" - icon="trash" - label={ __( 'Remove option', 'jetpack' ) } - onClick={ this.onDeleteOption } - /> - ) } - </li> - ); - } -} - -export default JetpackOption; diff --git a/plugins/jetpack/extensions/blocks/contact-form/editor.js b/plugins/jetpack/extensions/blocks/contact-form/editor.js deleted file mode 100644 index 9ffc068d..00000000 --- a/plugins/jetpack/extensions/blocks/contact-form/editor.js +++ /dev/null @@ -1,7 +0,0 @@ -/** - * Internal dependencies - */ -import registerJetpackBlock from '../../shared/register-jetpack-block'; -import { childBlocks, name, settings } from '.'; - -registerJetpackBlock( name, settings, childBlocks ); diff --git a/plugins/jetpack/extensions/blocks/contact-form/editor.scss b/plugins/jetpack/extensions/blocks/contact-form/editor.scss deleted file mode 100644 index 13053f07..00000000 --- a/plugins/jetpack/extensions/blocks/contact-form/editor.scss +++ /dev/null @@ -1,696 +0,0 @@ -@import '../../shared/styles/gutenberg-colors.scss'; -@import '../../shared/styles/gutenberg-variables.scss'; - -.jetpack-contact-form .components-placeholder { - padding: 24px; - - input[type='text'] { - width: 100%; - outline-width: 0; - outline-style: none; - line-height: 16px; - } - - .components-placeholder__label svg { - margin-right: 1ch; - } - - .help-message, - .components-placeholder__fieldset { - text-align: left; - } - - .help-message { - width: 100%; - margin: -18px 0 28px; - } - - .components-base-control { - margin-bottom: 16px; - width: 100%; - } -} - -.jetpack-contact-form__intro-message { - margin: 0 0 16px; -} - -.jetpack-contact-form__create { - width: 100%; -} - -.jetpack-field-label { - display: flex; - flex-direction: row; - - .components-base-control { - margin-top:-1px; - margin-bottom: -3px; - - &.jetpack-field-label__required { - .components-form-toggle { - margin: 2px 8px 0 0; - } - - .components-toggle-control__label { - word-break: normal; - } - } - } - - .required { - color: var( --color-error ); - word-break: normal; - } - - .components-toggle-control .components-base-control__field { - margin-bottom: 0; - } -} - -.jetpack-field-label__input { - flex-grow: 1; - min-height: unset; - padding: 0; -} - -// Duplicated to elevate specificity in order to overwrite core styles -.jetpack-field-label__input.jetpack-field-label__input.jetpack-field-label__input { - border-color: $white; - border-radius: 0; - font-weight: 600; - margin: 0; - margin-bottom: 2px; - padding: 0; - width: auto; - - &:focus { - border-color: $white; - box-shadow: none; - } -} - -input.components-text-control__input { - line-height: 16px; -} - -.jetpack-field { - // done to increase elevate specificity in order to overwrite calypso styles - .components-text-control__input.components-text-control__input { - width: 100%; - } - .components-text-control__input, - .components-textarea-control__input { - color: #72777c; - padding: 10px 8px; - } -} - -.jetpack-field-checkbox__checkbox.jetpack-field-checkbox__checkbox.jetpack-field-checkbox__checkbox { - float: left; -} - -// Duplicated to elevate specificity in order to overwrite core styles -.jetpack-field-multiple__list.jetpack-field-multiple__list { - list-style-type: none; - margin: 0; - - &:empty { - display: none; - } - - // TODO: make this a class, @enej - [data-type='jetpack/field-select'] & { - border: 1px solid $dark-gray-150; - border-radius: 4px; - padding: 4px; - } -} - -.jetpack-option { - display: flex; - align-items: center; - margin: 0; -} - -.jetpack-option__type.jetpack-option__type { - margin-top: 0; -} - -// Duplicated to elevate specificity in order to overwrite core styles -.jetpack-option__input.jetpack-option__input.jetpack-option__input { - border-color: $white; - border-radius: 0; - flex-grow: 1; - - &:hover { - border-color: #357cb5; - } - - &:focus { - border-color: #e3e5e8; - box-shadow: none; - } -} -// Duplicated to elevate specificity in order to overwrite calypso styles -.jetpack-option__remove.jetpack-option__remove { - padding: 6px; - vertical-align: bottom; -} - -.jetpack-field-multiple__add-option { - margin-left: -6px; - padding: 4px; - padding-right: 8px; - - svg { - margin-right: 12px; - } -} - -.jetpack-field-checkbox .components-base-control__label { - display: flex; - align-items: center; - - .jetpack-field-label { - flex-grow:1; - } - - .jetpack-field-label__input { - font-size: 13px; - font-weight: 400; - padding-left: 10px; - } -} - -/* ========================================================================== -** Shortcode Classic Block Styles -** ======================================================================= */ - -@media ( min-width: 481px ) { - .jetpack-contact-form-shortcode-preview { - padding: 24px; - } -} - -.jetpack-contact-form-shortcode-preview { - font-family: $default-font; - font-size: 16px; - line-height: 1.4em; - display: block; - position: relative; - margin: 0 auto; - padding: 16px; - box-sizing: border-box; - background: $white; - box-shadow: 0 0 0 1px rgba( 200, 215, 225, 0.5 ), 0 1px 2px #e9eff3; - - &::after { - content: '.'; - display: block; - height: 0; - clear: both; - visibility: hidden; - } - - > div { - margin-top: 24px; - } - - > div:first-child { - margin-top: 0; - } - /* ========================================================================== - ** Labels - ** ======================================================================= */ - - label { - display: block; - font-size: 14px; - font-weight: 600; - margin-bottom: 5px; - } - - - /* ========================================================================== - ** Text Inputs - ** ======================================================================= */ - - input[type='text'], - input[type='tel'], - input[type='email'], - input[type='url'] { - border-radius: 0; - appearance: none; - box-sizing: border-box; - margin: 0; - padding: 7px 14px; - width: 100%; - color: #2e4453; - font-size: 16px; - line-height: 1.5; - border: 1px solid #c8d7e1; - background-color: $white; - transition: all 0.15s ease-in-out; - box-shadow: none; - } - - input[type='text']::placeholder, - input[type='tel']::placeholder, - input[type='email']::placeholder, - input[type='url']::placeholder { - color: #87a6bc; - } - - input[type='text']:hover, - input[type='tel']:hover, - input[type='email']:hover, - input[type='url']:hover { - border-color: #a8bece; - } - - input[type='text']:focus, - input[type='tel']:focus, - input[type='email']:focus, - input[type='url']:focus { - border-color: #0087be; - outline: none; - box-shadow: 0 0 0 2px #78dcfa; - } - - input[type='text']:focus::-ms-clear, - input[type='tel']:focus::-ms-clear, - input[type='email']:focus::-ms-clear, - input[type='url']:focus::-ms-clear { - display: none; - } - - input[type='text']:disabled, - input[type='tel']:disabled, - input[type='email']:disabled, - input[type='url']:disabled { - background: #f3f6f8; - border-color: #e9eff3; - color: #a8bece; - -webkit-text-fill-color: #a8bece; - } - - input[type='text']:disabled:hover, - input[type='tel']:disabled:hover, - input[type='email']:disabled:hover, - input[type='url']:disabled:hover { - cursor: default; - } - - input[type='text']:disabled::placeholder, - input[type='tel']:disabled::placeholder, - input[type='email']:disabled::placeholder, - input[type='url']:disabled::placeholder { - color: #a8bece; - } - - - /* ========================================================================== - ** Textareas - ** ======================================================================= */ - - textarea { - border-radius: 0; - appearance: none; - box-sizing: border-box; - margin: 0; - padding: 7px 14px; - height: 92px; - width: 100%; - color: #2e4453; - font-size: 16px; - line-height: 1.5; - border: 1px solid #c8d7e1; - background-color: $white; - transition: all 0.15s ease-in-out; - box-shadow: none; - } - - textarea::placeholder { - color: #87a6bc; - } - - textarea:hover { - border-color: #a8bece; - } - - textarea:focus { - border-color: #0087be; - outline: none; - box-shadow: 0 0 0 2px #78dcfa; - } - - textarea:focus::-ms-clear { - display: none; - } - - textarea:disabled { - background: #f3f6f8; - border-color: #e9eff3; - color: #a8bece; - -webkit-text-fill-color: #a8bece; - } - - textarea:disabled:hover { - cursor: default; - } - - textarea:disabled::placeholder { - color: #a8bece; - } - - - /* ========================================================================== - ** Checkboxes - ** ======================================================================= */ - - input[type='checkbox'] { - -webkit-appearance: none; - display: inline-block; - box-sizing: border-box; - margin: 2px 0 0; - padding: 7px 14px; - width: 16px; - height: 16px; - float: left; - outline: 0; - padding: 0; - box-shadow: none; - background-color: $white; - border: 1px solid #c8d7e1; - color: #2e4453; - font-size: 16px; - line-height: 0; - text-align: center; - vertical-align: middle; - appearance: none; - transition: all 0.15s ease-in-out; - clear: none; - cursor: pointer; - } - - input[type='checkbox']:checked::before { - content: '\f147'; - font-family: Dashicons; - margin: -3px 0 0 -4px; - float: left; - display: inline-block; - vertical-align: middle; - width: 16px; - font-size: 20px; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - speak: none; - color: #00aadc; - } - - input[type='checkbox']:disabled:checked::before { - color: #a8bece; - } - - input[type='checkbox']:hover { - border-color: #a8bece; - } - - input[type='checkbox']:focus { - border-color: #0087be; - outline: none; - box-shadow: 0 0 0 2px #78dcfa; - } - - input[type='checkbox']:disabled { - background: #f3f6f8; - border-color: #e9eff3; - color: #a8bece; - opacity: 1; - } - - input[type='checkbox']:disabled:hover { - cursor: default; - } - - input[type='checkbox'] + span { - display: block; - font-weight: normal; - margin-left: 24px; - } - - - /* ========================================================================== - ** Radio buttons - ** ======================================================================== */ - - input[type=radio] { - color: #2e4453; - font-size: 16px; - border: 1px solid #c8d7e1; - background-color: $white; - transition: all 0.15s ease-in-out; - box-sizing: border-box; - -webkit-appearance: none; - clear: none; - cursor: pointer; - display: inline-block; - line-height: 0; - height: 16px; - margin: 2px 4px 0 0; - float: left; - outline: 0; - padding: 0; - text-align: center; - vertical-align: middle; - width: 16px; - min-width: 16px; - appearance: none; - border-radius: 50%; - line-height: 10px; - } - - input[type='radio']:hover { - border-color: #a8bece; - } - - input[type='radio']:focus { - border-color: #0087be; - outline: none; - box-shadow: 0 0 0 2px #78dcfa; - } - - input[type='radio']:focus::-ms-clear { - display: none; - } - - input[type='radio']:checked::before { - float: left; - display: inline-block; - content: '\2022'; - margin: 3px; - width: 8px; - height: 8px; - text-indent: -9999px; - background: #00aadc; - vertical-align: middle; - border-radius: 50%; - animation: grow 0.2s ease-in-out; - } - - input[type='radio']:disabled { - background: #f3f6f8; - border-color: #e9eff3; - color: #a8bece; - opacity: 1; - -webkit-text-fill-color: #a8bece; - } - - input[type='radio']:disabled:hover { - cursor: default; - } - - input[type='radio']:disabled::placeholder { - color: #a8bece; - } - - input[type='radio']:disabled:checked::before { - background: #e9eff3; - } - - input[type='radio'] + span { - display: block; - font-weight: normal; - margin-left: 24px; - } - - @keyframes grow { - 0% { - transform: scale( 0.3 ); - } - - 60% { - transform: scale( 1.15 ); - } - - 100% { - transform: scale( 1 ); - } - } - - @keyframes grow { - 0% { - transform: scale( 0.3 ); - } - - 60% { - transform: scale( 1.15 ); - } - - 100% { - transform: scale( 1 ); - } - } - - - /* ========================================================================== - ** Selects - ** ======================================================================== */ - - select { - background: $white url( data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPmFycm93LWRvd248L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJhcnJvdy1kb3duIiBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiBmaWxsPSIjQzhEN0UxIj4gICAgICAgICAgICA8cGF0aCBkPSJNMTUuNSw2IEwxNyw3LjUgTDEwLjI1LDE0LjI1IEwzLjUsNy41IEw1LDYgTDEwLjI1LDExLjI1IEwxNS41LDYgWiIgaWQ9IkRvd24tQXJyb3ciIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg== ) no-repeat right 10px center; - border-color: #c8d7e1; - border-style: solid; - border-radius: 4px; - border-width: 1px 1px 2px; - color: #2e4453; - cursor: pointer; - display: inline-block; - margin: 0; - outline: 0; - overflow: hidden; - font-size: 14px; - line-height: 21px; - font-weight: 600; - text-overflow: ellipsis; - text-decoration: none; - vertical-align: top; - white-space: nowrap; - box-sizing: border-box; - padding: 2px 32px 2px 14px; // Aligns the text to the 8px baseline grid and adds padding on right to allow for the arrow. - appearance: none; - font-family: sans-serif; - } - - select:hover { - background-image: url( data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPmFycm93LWRvd248L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJhcnJvdy1kb3duIiBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiBmaWxsPSIjYThiZWNlIj4gICAgICAgICAgICA8cGF0aCBkPSJNMTUuNSw2IEwxNyw3LjUgTDEwLjI1LDE0LjI1IEwzLjUsNy41IEw1LDYgTDEwLjI1LDExLjI1IEwxNS41LDYgWiIgaWQ9IkRvd24tQXJyb3ciIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg== ); - } - - select:focus { - background-image: url( data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiA8dGl0bGU+YXJyb3ctZG93bjwvdGl0bGU+IDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiA8ZGVmcz48L2RlZnM+IDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPiA8ZyBpZD0iYXJyb3ctZG93biIgc2tldGNoOnR5cGU9Ik1TQXJ0Ym9hcmRHcm91cCIgZmlsbD0iIzJlNDQ1MyI+IDxwYXRoIGQ9Ik0xNS41LDYgTDE3LDcuNSBMMTAuMjUsMTQuMjUgTDMuNSw3LjUgTDUsNiBMMTAuMjUsMTEuMjUgTDE1LjUsNiBaIiBpZD0iRG93bi1BcnJvdyIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiA8L2c+IDwvZz48L3N2Zz4= ); - border-color: #00aadc; - box-shadow: 0 0 0 2px #78dcfa; - outline: 0; - -moz-outline:none; - -moz-user-focus:ignore; - } - - select:disabled, - select:hover:disabled { - background: url( data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPmFycm93LWRvd248L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJhcnJvdy1kb3duIiBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiBmaWxsPSIjZTllZmYzIj4gICAgICAgICAgICA8cGF0aCBkPSJNMTUuNSw2IEwxNyw3LjUgTDEwLjI1LDE0LjI1IEwzLjUsNy41IEw1LDYgTDEwLjI1LDExLjI1IEwxNS41LDYgWiIgaWQ9IkRvd24tQXJyb3ciIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg== ) no-repeat right 10px center;; - } - - select.is-compact { - min-width: 0; - padding: 0 20px 2px 6px; - margin: 0 4px; - background-position: right 5px center; - background-size: 12px 12px; - } - - /* Make it display:block when it follows a label */ - label select, - label + select { - display: block; - min-width: 200px; - } - - label select.is-compact, - label + select.is-compact { - display: inline-block; - min-width: 0; - } - - /* IE: Remove the default arrow */ - select::-ms-expand { - display: none; - } - - /* IE: Remove default background and color styles on focus */ - select::-ms-value { - background: none; - color: #2e4453; - } - - /* Firefox: Remove the focus outline, see http://stackoverflow.com/questions/3773430/remove-outline-from-select-box-in-ff/18853002#18853002 */ - select:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 #2e4453; - } - - - /* ========================================================================== - ** Buttons - ** ======================================================================== */ - - input[type='submit'] { - padding: 0; - font-size: 14px; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - vertical-align: baseline; - background: $white; - border-color: #c8d7e1; - border-style: solid; - border-width: 1px 1px 2px; - color: #2e4453; - cursor: pointer; - display: inline-block; - margin: 24px 0 0; - outline: 0; - overflow: hidden; - font-weight: 500; - text-overflow: ellipsis; - text-decoration: none; - vertical-align: top; - box-sizing: border-box; - font-size: 14px; - line-height: 21px; - border-radius: 4px; - padding: 7px 14px 9px; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - } - - input[type='submit']:hover { - border-color: #a8bece; - color: #2e4453; - } - - input[type='submit']:active { - border-width: 2px 1px 1px; - } - - input[type='submit']:visited { - color: #2e4453; - } - - input[type='submit']:focus { - border-color: #00aadc; - box-shadow: 0 0 0 2px #78dcfa; - } -} diff --git a/plugins/jetpack/extensions/blocks/contact-form/index.js b/plugins/jetpack/extensions/blocks/contact-form/index.js deleted file mode 100644 index e2a90c89..00000000 --- a/plugins/jetpack/extensions/blocks/contact-form/index.js +++ /dev/null @@ -1,462 +0,0 @@ -/** - * External dependencies - */ -import { __, _x } from '@wordpress/i18n'; -import { getBlockType, createBlock } from '@wordpress/blocks'; -import { Path, Circle } from '@wordpress/components'; -import { Fragment } from '@wordpress/element'; -import { InnerBlocks } from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import './editor.scss'; -import JetpackContactForm from './components/jetpack-contact-form'; -import JetpackField from './components/jetpack-field'; -import JetpackFieldTextarea from './components/jetpack-field-textarea'; -import JetpackFieldCheckbox from './components/jetpack-field-checkbox'; -import JetpackFieldMultiple from './components/jetpack-field-multiple'; -import renderMaterialIcon from '../../shared/render-material-icon'; - -export const name = 'contact-form'; - -export const settings = { - title: __( 'Form', 'jetpack' ), - description: __( 'A simple way to get feedback from folks visiting your site.', 'jetpack' ), - icon: renderMaterialIcon( - <Path d="M13 7.5h5v2h-5zm0 7h5v2h-5zM19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM11 6H6v5h5V6zm-1 4H7V7h3v3zm1 3H6v5h5v-5zm-1 4H7v-3h3v3z" /> - ), - keywords: [ - _x( 'email', 'block search term', 'jetpack' ), - _x( 'feedback', 'block search term', 'jetpack' ), - _x( 'contact', 'block search term', 'jetpack' ), - ], - category: 'jetpack', - supports: { - reusable: false, - html: false, - }, - attributes: { - subject: { - type: 'string', - default: '', - }, - to: { - type: 'string', - default: '', - }, - submitButtonText: { - type: 'string', - default: __( 'Submit', 'jetpack' ), - }, - customBackgroundButtonColor: { type: 'string' }, - customTextButtonColor: { type: 'string' }, - submitButtonClasses: { type: 'string' }, - hasFormSettingsSet: { - type: 'string', - default: null, - }, - - // Deprecated - has_form_settings_set: { - type: 'string', - default: null, - }, - submit_button_text: { - type: 'string', - default: __( 'Submit', 'jetpack' ), - }, - }, - - edit: JetpackContactForm, - save: InnerBlocks.Content, - deprecated: [ - { - attributes: { - subject: { - type: 'string', - default: '', - }, - to: { - type: 'string', - default: '', - }, - submit_button_text: { - type: 'string', - default: __( 'Submit', 'jetpack' ), - }, - has_form_settings_set: { - type: 'string', - default: null, - }, - }, - migrate: attr => { - return { - submitButtonText: attr.submit_button_text, - hasFormSettingsSet: attr.has_form_settings_set, - to: attr.to, - subject: attr.subject, - }; - }, - - isEligible: attr => { - // when the deprecated, snake_case values are default, no need to migrate - if ( ! attr.has_form_settings_set && attr.submit_button_text === 'Submit' ) { - return false; - } - return true; - }, - - save: InnerBlocks.Content, - }, - ], -}; - -const FieldDefaults = { - category: 'jetpack', - parent: [ 'jetpack/contact-form' ], - supports: { - reusable: false, - html: false, - }, - attributes: { - label: { - type: 'string', - default: null, - }, - required: { - type: 'boolean', - default: false, - }, - options: { - type: 'array', - default: [], - }, - defaultValue: { - type: 'string', - default: '', - }, - placeholder: { - type: 'string', - default: '', - }, - id: { - type: 'string', - default: '', - }, - }, - transforms: { - to: [ - { - type: 'block', - blocks: [ 'jetpack/field-text' ], - isMatch: ( { options } ) => ! options.length, - transform: attributes => createBlock( 'jetpack/field-text', attributes ), - }, - { - type: 'block', - blocks: [ 'jetpack/field-name' ], - isMatch: ( { options } ) => ! options.length, - transform: attributes => createBlock( 'jetpack/field-name', attributes ), - }, - { - type: 'block', - blocks: [ 'jetpack/field-email' ], - isMatch: ( { options } ) => ! options.length, - transform: attributes => createBlock( 'jetpack/field-email', attributes ), - }, - { - type: 'block', - blocks: [ 'jetpack/field-url' ], - isMatch: ( { options } ) => ! options.length, - transform: attributes => createBlock( 'jetpack/field-url', attributes ), - }, - { - type: 'block', - blocks: [ 'jetpack/field-date' ], - isMatch: ( { options } ) => ! options.length, - transform: attributes => createBlock( 'jetpack/field-date', attributes ), - }, - { - type: 'block', - blocks: [ 'jetpack/field-telephone' ], - isMatch: ( { options } ) => ! options.length, - transform: attributes => createBlock( 'jetpack/field-telephone', attributes ), - }, - { - type: 'block', - blocks: [ 'jetpack/field-textarea' ], - isMatch: ( { options } ) => ! options.length, - transform: attributes => createBlock( 'jetpack/field-textarea', attributes ), - }, - /* // not yet ready for prime time. - { - type: 'block', - blocks: [ 'jetpack/field-checkbox' ], - isMatch: ( { options } ) => 1 === options.length, - transform: ( attributes )=>createBlock( 'jetpack/field-checkbox', attributes ) - }, - */ - { - type: 'block', - blocks: [ 'jetpack/field-checkbox-multiple' ], - isMatch: ( { options } ) => 1 <= options.length, - transform: attributes => createBlock( 'jetpack/field-checkbox-multiple', attributes ), - }, - { - type: 'block', - blocks: [ 'jetpack/field-radio' ], - isMatch: ( { options } ) => 1 <= options.length, - transform: attributes => createBlock( 'jetpack/field-radio', attributes ), - }, - { - type: 'block', - blocks: [ 'jetpack/field-select' ], - isMatch: ( { options } ) => 1 <= options.length, - transform: attributes => createBlock( 'jetpack/field-select', attributes ), - }, - ], - }, - save: () => null, -}; - -const getFieldLabel = ( { attributes, name: blockName } ) => { - return null === attributes.label ? getBlockType( blockName ).title : attributes.label; -}; - -const editField = type => props => ( - <JetpackField - type={ type } - label={ getFieldLabel( props ) } - required={ props.attributes.required } - setAttributes={ props.setAttributes } - isSelected={ props.isSelected } - defaultValue={ props.attributes.defaultValue } - placeholder={ props.attributes.placeholder } - id={ props.attributes.id } - /> -); - -const editMultiField = type => props => ( - <JetpackFieldMultiple - label={ getFieldLabel( props ) } - required={ props.attributes.required } - options={ props.attributes.options } - setAttributes={ props.setAttributes } - type={ type } - isSelected={ props.isSelected } - id={ props.attributes.id } - /> -); - -export const childBlocks = [ - { - name: 'field-text', - settings: { - ...FieldDefaults, - title: __( 'Text', 'jetpack' ), - description: __( 'When you need just a small amount of text, add a text input.', 'jetpack' ), - icon: renderMaterialIcon( <Path d="M4 9h16v2H4V9zm0 4h10v2H4v-2z" /> ), - edit: editField( 'text' ), - }, - }, - { - name: 'field-name', - settings: { - ...FieldDefaults, - title: __( 'Name', 'jetpack' ), - description: __( - 'Introductions are important. Add an input for folks to add their name.', - 'jetpack' - ), - icon: renderMaterialIcon( - <Path d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" /> - ), - edit: editField( 'text' ), - }, - }, - { - name: 'field-email', - settings: { - ...FieldDefaults, - title: __( 'Email', 'jetpack' ), - keywords: [ __( 'e-mail', 'jetpack' ), __( 'mail', 'jetpack' ), 'email' ], - description: __( 'Want to reply to folks? Add an email address input.', 'jetpack' ), - icon: renderMaterialIcon( - <Path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z" /> - ), - edit: editField( 'email' ), - }, - }, - - { - name: 'field-url', - settings: { - ...FieldDefaults, - title: __( 'Website', 'jetpack' ), - keywords: [ 'url', __( 'internet page', 'jetpack' ), 'link' ], - description: __( 'Add an address input for a website.', 'jetpack' ), - icon: renderMaterialIcon( - <Path d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z" /> - ), - edit: editField( 'url' ), - }, - }, - - { - name: 'field-date', - settings: { - ...FieldDefaults, - title: __( 'Date Picker', 'jetpack' ), - keywords: [ - __( 'Calendar', 'jetpack' ), - __( 'day month year', 'block search term', 'jetpack' ), - ], - description: __( 'The best way to set a date. Add a date picker.', 'jetpack' ), - icon: renderMaterialIcon( - <Path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zm0-12H5V5h14v2zM7 11h5v5H7z" /> - ), - edit: editField( 'text' ), - }, - }, - { - name: 'field-telephone', - settings: { - ...FieldDefaults, - title: __( 'Telephone', 'jetpack' ), - keywords: [ - __( 'Phone', 'jetpack' ), - __( 'Cellular phone', 'jetpack' ), - __( 'Mobile', 'jetpack' ), - ], - description: __( 'Add a phone number input.', 'jetpack' ), - icon: renderMaterialIcon( - <Path d="M6.54 5c.06.89.21 1.76.45 2.59l-1.2 1.2c-.41-1.2-.67-2.47-.76-3.79h1.51m9.86 12.02c.85.24 1.72.39 2.6.45v1.49c-1.32-.09-2.59-.35-3.8-.75l1.2-1.19M7.5 3H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.49c0-.55-.45-1-1-1-1.24 0-2.45-.2-3.57-.57-.1-.04-.21-.05-.31-.05-.26 0-.51.1-.71.29l-2.2 2.2c-2.83-1.45-5.15-3.76-6.59-6.59l2.2-2.2c.28-.28.36-.67.25-1.02C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1z" /> - ), - edit: editField( 'tel' ), - }, - }, - { - name: 'field-textarea', - settings: { - ...FieldDefaults, - title: __( 'Message', 'jetpack' ), - keywords: [ __( 'Textarea', 'jetpack' ), 'textarea', __( 'Multiline text', 'jetpack' ) ], - description: __( - 'Let folks speak their mind. This text box is great for longer responses.', - 'jetpack' - ), - icon: renderMaterialIcon( <Path d="M21 11.01L3 11v2h18zM3 16h12v2H3zM21 6H3v2.01L21 8z" /> ), - edit: props => ( - <JetpackFieldTextarea - label={ getFieldLabel( props ) } - required={ props.attributes.required } - setAttributes={ props.setAttributes } - isSelected={ props.isSelected } - defaultValue={ props.attributes.defaultValue } - placeholder={ props.attributes.placeholder } - id={ props.attributes.id } - /> - ), - }, - }, - { - name: 'field-checkbox', - settings: { - ...FieldDefaults, - title: __( 'Checkbox', 'jetpack' ), - keywords: [ __( 'Confirm', 'jetpack' ), __( 'Accept', 'jetpack' ) ], - description: __( 'Add a single checkbox.', 'jetpack' ), - icon: renderMaterialIcon( - <Path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM17.99 9l-1.41-1.42-6.59 6.59-2.58-2.57-1.42 1.41 4 3.99z" /> - ), - edit: props => ( - <JetpackFieldCheckbox - label={ props.attributes.label } // label intentinally left blank - required={ props.attributes.required } - setAttributes={ props.setAttributes } - isSelected={ props.isSelected } - defaultValue={ props.attributes.defaultValue } - id={ props.attributes.id } - /> - ), - attributes: { - ...FieldDefaults.attributes, - label: { - type: 'string', - default: '', - }, - }, - }, - }, - { - name: 'field-checkbox-multiple', - settings: { - ...FieldDefaults, - title: __( 'Checkbox Group', 'jetpack' ), - keywords: [ __( 'Choose Multiple', 'jetpack' ), __( 'Option', 'jetpack' ) ], - description: __( 'People love options. Add several checkbox items.', 'jetpack' ), - icon: renderMaterialIcon( - <Path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z" /> - ), - edit: editMultiField( 'checkbox' ), - attributes: { - ...FieldDefaults.attributes, - label: { - type: 'string', - default: 'Choose several', - }, - }, - }, - }, - { - name: 'field-radio', - settings: { - ...FieldDefaults, - title: __( 'Radio', 'jetpack' ), - keywords: [ __( 'Choose', 'jetpack' ), __( 'Select', 'jetpack' ), __( 'Option', 'jetpack' ) ], - description: __( - 'Inspired by radios, only one radio item can be selected at a time. Add several radio button items.', - 'jetpack' - ), - icon: renderMaterialIcon( - <Fragment> - <Path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" /> - <Circle cx="12" cy="12" r="5" /> - </Fragment> - ), - edit: editMultiField( 'radio' ), - attributes: { - ...FieldDefaults.attributes, - label: { - type: 'string', - default: 'Choose one', - }, - }, - }, - }, - { - name: 'field-select', - settings: { - ...FieldDefaults, - title: __( 'Select', 'jetpack' ), - keywords: [ - __( 'Choose', 'jetpack' ), - __( 'Dropdown', 'jetpack' ), - __( 'Option', 'jetpack' ), - ], - description: __( 'Compact, but powerful. Add a select box with several items.', 'jetpack' ), - icon: renderMaterialIcon( - <Path d="M3 17h18v2H3zm16-5v1H5v-1h14m2-2H3v5h18v-5zM3 6h18v2H3z" /> - ), - edit: editMultiField( 'select' ), - attributes: { - ...FieldDefaults.attributes, - label: { - type: 'string', - default: 'Select one', - }, - }, - }, - }, -]; |