Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Jetpack Blocks: add index.js for each block #29298

Merged
merged 14 commits into from
Dec 11, 2018
Merged

Jetpack Blocks: add index.js for each block #29298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
18292f6
Update Map Block
enejb Dec 11, 2018
e78297d
Update Markdown Block
enejb Dec 11, 2018
44a32b8
Update Publicize block
enejb Dec 11, 2018
740d226
Update simple payment block
enejb Dec 11, 2018
585c333
Update contact form block more the editor.js export to be an array
enejb Dec 11, 2018
df769db
Update the VR block
enejb Dec 11, 2018
98b294f
Update the related posts block
enejb Dec 11, 2018
1c0c13f
Update the Tile Galleries block
enejb Dec 11, 2018
af06199
Functions args typo
ockham Dec 11, 2018
3fc38b7
Use forEach instead of map
ockham Dec 11, 2018
620e727
Named imports
ockham Dec 11, 2018
f545cab
import from '.'
ockham Dec 11, 2018
402679f
Remove obsolete require
ockham Dec 11, 2018
79b7b5f
Tiled gallery: Moar beautiful default imports
ockham Dec 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion client/gutenberg/editor/init.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ const WPCOM_UNSUPPORTED_CORE_BLOCKS = [
const loadA8CExtensions = () => {
// This will also load required TinyMCE plugins via Calypso's TinyMCE component
require( '../extensions/classic-block/editor' );
require( 'gutenberg/extensions/presets/jetpack/editor.js' );
Copy link
Contributor

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.

};

// We need to ensure that his function is executed only once to avoid duplicate
Expand Down
359 changes: 2 additions & 357 deletions client/gutenberg/extensions/contact-form/editor.js
View file
Open in desktop
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 ) );
Loading