-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Jetpack Blocks: add index.js for each block #29298
Merged
Merged
Changes from all commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
18292f6
Update Map Block
enejb e78297d
Update Markdown Block
enejb 44a32b8
Update Publicize block
enejb 740d226
Update simple payment block
enejb 585c333
Update contact form block more the editor.js export to be an array
enejb df769db
Update the VR block
enejb 98b294f
Update the related posts block
enejb 1c0c13f
Update the Tile Galleries block
enejb af06199
Functions args typo
ockham 3fc38b7
Use forEach instead of map
ockham 620e727
Named imports
ockham f545cab
import from '.'
ockham 402679f
Remove obsolete require
ockham 79b7b5f
Tiled gallery: Moar beautiful default imports
ockham File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,365 +1,10 @@ | ||
/** @format */ | ||
|
||
/** | ||
* External dependencies | ||
*/ | ||
import { getBlockType, createBlock } from '@wordpress/blocks'; | ||
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 { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n'; | ||
import renderMaterialIcon from 'gutenberg/extensions/presets/jetpack/utils/render-material-icon'; | ||
import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; | ||
import { fields, name, settings } from '.'; | ||
|
||
export const name = 'contact-form'; | ||
|
||
export const settings = { | ||
title: __( 'Form' ), | ||
description: __( 'A simple way to get feedback from folks visiting your site.' ), | ||
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: [ __( 'email' ), __( 'feedback' ), __( 'contact' ) ], | ||
category: 'jetpack', | ||
supports: { | ||
reusable: false, | ||
html: false, | ||
}, | ||
attributes: { | ||
subject: { | ||
type: 'string', | ||
default: '', | ||
}, | ||
to: { | ||
type: 'string', | ||
default: '', | ||
}, | ||
submit_button_text: { | ||
type: 'string', | ||
default: __( 'Submit' ), | ||
}, | ||
has_form_settings_set: { | ||
type: 'string', | ||
default: null, | ||
}, | ||
}, | ||
|
||
edit: JetpackContactForm, | ||
save: InnerBlocks.Content, | ||
}; | ||
|
||
/** | ||
* Block Registrations: | ||
*/ | ||
registerJetpackBlock( name, settings ); | ||
|
||
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 } | ||
/> | ||
); | ||
|
||
registerJetpackBlock( 'field-text', { | ||
...FieldDefaults, | ||
title: __( 'Text' ), | ||
description: __( 'When you need just a small amount of text, add a text input.' ), | ||
icon: renderMaterialIcon( <path d="M4 9h16v2H4V9zm0 4h10v2H4v-2z" /> ), | ||
edit: editField( 'text' ), | ||
} ); | ||
|
||
registerJetpackBlock( 'field-name', { | ||
...FieldDefaults, | ||
title: __( 'Name' ), | ||
description: __( 'Introductions are important. Add an input for folks to add their name.' ), | ||
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' ), | ||
} ); | ||
|
||
registerJetpackBlock( 'field-email', { | ||
...FieldDefaults, | ||
title: __( 'Email' ), | ||
keywords: [ __( 'e-mail' ), __( 'mail' ), 'email' ], | ||
description: __( 'Want to reply to folks? Add an email address input.' ), | ||
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' ), | ||
} ); | ||
|
||
registerJetpackBlock( 'field-url', { | ||
...FieldDefaults, | ||
title: __( 'Website' ), | ||
keywords: [ 'url', __( 'internet page' ), 'link' ], | ||
description: __( 'Add an address input for a website.' ), | ||
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' ), | ||
} ); | ||
|
||
registerJetpackBlock( 'field-date', { | ||
...FieldDefaults, | ||
title: __( 'Date Picker' ), | ||
keywords: [ __( 'Calendar' ), __( 'day month year', 'block search term' ) ], | ||
description: __( 'The best way to set a date. Add a date picker.' ), | ||
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' ), | ||
} ); | ||
|
||
registerJetpackBlock( 'field-telephone', { | ||
...FieldDefaults, | ||
title: __( 'Telephone' ), | ||
keywords: [ __( 'Phone' ), __( 'Cellular phone' ), __( 'Mobile' ) ], | ||
description: __( 'Add a phone number input.' ), | ||
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' ), | ||
} ); | ||
|
||
registerJetpackBlock( 'field-textarea', { | ||
...FieldDefaults, | ||
title: __( 'Message' ), | ||
keywords: [ __( 'Textarea' ), 'textarea', __( 'Multiline text' ) ], | ||
description: __( 'Let folks speak their mind. This text box is great for longer responses.' ), | ||
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 } | ||
/> | ||
), | ||
} ); | ||
|
||
registerJetpackBlock( 'field-checkbox', { | ||
...FieldDefaults, | ||
title: __( 'Checkbox' ), | ||
keywords: [ __( 'Confirm' ), __( 'Accept' ) ], | ||
description: __( 'Add a single checkbox.' ), | ||
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: '', | ||
}, | ||
}, | ||
} ); | ||
|
||
registerJetpackBlock( 'field-checkbox-multiple', { | ||
...FieldDefaults, | ||
title: __( 'Checkbox group' ), | ||
keywords: [ __( 'Choose Multiple' ), __( 'Option' ) ], | ||
description: __( 'People love options. Add several checkbox items.' ), | ||
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', | ||
}, | ||
}, | ||
} ); | ||
|
||
registerJetpackBlock( 'field-radio', { | ||
...FieldDefaults, | ||
title: __( 'Radio' ), | ||
keywords: [ __( 'Choose' ), __( 'Select' ), __( 'Option' ) ], | ||
description: __( | ||
'Inpsired by radios, only one radio item can be selected at a time. Add several radio button items.' | ||
), | ||
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', | ||
}, | ||
}, | ||
} ); | ||
|
||
registerJetpackBlock( 'field-select', { | ||
...FieldDefaults, | ||
title: __( 'Select' ), | ||
keywords: [ __( 'Choose' ), __( 'Dropdown' ), __( 'Option' ) ], | ||
description: __( 'Compact, but powerful. Add a select box with several items.' ), | ||
icon: renderMaterialIcon( <path d="M3 17h18v2H3zm16-5v1H5v-1h14m2-2H3v5h18v-5zM3 6h18v2H3z" /> ), | ||
edit: editMultiField( 'select' ), | ||
attributes: { | ||
...FieldDefaults.attributes, | ||
label: { | ||
type: 'string', | ||
default: 'Select one', | ||
}, | ||
}, | ||
} ); | ||
fields.forEach( field => registerJetpackBlock( field.name, field.settings ) ); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is obsolete, since block registration/unregistration in Calypso is handled by
refreshRegistrations()
in the route handler.