diff --git a/client/gutenberg/editor/init.js b/client/gutenberg/editor/init.js
index 087063d7b69bae..7931f02b241973 100644
--- a/client/gutenberg/editor/init.js
+++ b/client/gutenberg/editor/init.js
@@ -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' );
};
// We need to ensure that his function is executed only once to avoid duplicate
diff --git a/client/gutenberg/extensions/contact-form/editor.js b/client/gutenberg/extensions/contact-form/editor.js
index 407f4ee9fe52e9..a5859d07be38a9 100644
--- a/client/gutenberg/extensions/contact-form/editor.js
+++ b/client/gutenberg/extensions/contact-form/editor.js
@@ -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(
-
- ),
- 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 => (
-
-);
-
-const editMultiField = type => props => (
-
-);
-
-registerJetpackBlock( 'field-text', {
- ...FieldDefaults,
- title: __( 'Text' ),
- description: __( 'When you need just a small amount of text, add a text input.' ),
- icon: renderMaterialIcon( ),
- edit: editField( 'text' ),
-} );
-
-registerJetpackBlock( 'field-name', {
- ...FieldDefaults,
- title: __( 'Name' ),
- description: __( 'Introductions are important. Add an input for folks to add their name.' ),
- icon: renderMaterialIcon(
-
- ),
- 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(
-
- ),
- edit: editField( 'email' ),
-} );
-
-registerJetpackBlock( 'field-url', {
- ...FieldDefaults,
- title: __( 'Website' ),
- keywords: [ 'url', __( 'internet page' ), 'link' ],
- description: __( 'Add an address input for a website.' ),
- icon: renderMaterialIcon(
-
- ),
- 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(
-
- ),
- edit: editField( 'text' ),
-} );
-
-registerJetpackBlock( 'field-telephone', {
- ...FieldDefaults,
- title: __( 'Telephone' ),
- keywords: [ __( 'Phone' ), __( 'Cellular phone' ), __( 'Mobile' ) ],
- description: __( 'Add a phone number input.' ),
- icon: renderMaterialIcon(
-
- ),
- 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( ),
- edit: props => (
-
- ),
-} );
-
-registerJetpackBlock( 'field-checkbox', {
- ...FieldDefaults,
- title: __( 'Checkbox' ),
- keywords: [ __( 'Confirm' ), __( 'Accept' ) ],
- description: __( 'Add a single checkbox.' ),
- icon: renderMaterialIcon(
-
- ),
- edit: props => (
-
- ),
- 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(
-
- ),
- 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(
-
-
-
-
- ),
- 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( ),
- edit: editMultiField( 'select' ),
- attributes: {
- ...FieldDefaults.attributes,
- label: {
- type: 'string',
- default: 'Select one',
- },
- },
-} );
+fields.forEach( field => registerJetpackBlock( field.name, field.settings ) );
diff --git a/client/gutenberg/extensions/contact-form/index.js b/client/gutenberg/extensions/contact-form/index.js
new file mode 100644
index 00000000000000..47774ac450b5b2
--- /dev/null
+++ b/client/gutenberg/extensions/contact-form/index.js
@@ -0,0 +1,388 @@
+/** @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';
+
+export const name = 'contact-form';
+
+export const settings = {
+ title: __( 'Form' ),
+ description: __( 'A simple way to get feedback from folks visiting your site.' ),
+ icon: renderMaterialIcon(
+
+ ),
+ 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,
+};
+
+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 => (
+
+);
+
+const editMultiField = type => props => (
+
+);
+
+export const fields = [
+ {
+ name: 'field-text',
+ settings: {
+ ...FieldDefaults,
+ title: __( 'Text' ),
+ description: __( 'When you need just a small amount of text, add a text input.' ),
+ icon: renderMaterialIcon( ),
+ edit: editField( 'text' ),
+ },
+ },
+ {
+ name: 'field-name',
+ settings: {
+ ...FieldDefaults,
+ title: __( 'Name' ),
+ description: __( 'Introductions are important. Add an input for folks to add their name.' ),
+ icon: renderMaterialIcon(
+
+ ),
+ edit: editField( 'text' ),
+ },
+ },
+ {
+ name: 'field-email',
+ settings: {
+ ...FieldDefaults,
+ title: __( 'Email' ),
+ keywords: [ __( 'e-mail' ), __( 'mail' ), 'email' ],
+ description: __( 'Want to reply to folks? Add an email address input.' ),
+ icon: renderMaterialIcon(
+
+ ),
+ edit: editField( 'email' ),
+ },
+ },
+
+ {
+ name: 'field-url',
+ settings: {
+ ...FieldDefaults,
+ title: __( 'Website' ),
+ keywords: [ 'url', __( 'internet page' ), 'link' ],
+ description: __( 'Add an address input for a website.' ),
+ icon: renderMaterialIcon(
+
+ ),
+ edit: editField( 'url' ),
+ },
+ },
+
+ {
+ name: 'field-date',
+ settings: {
+ ...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(
+
+ ),
+ edit: editField( 'text' ),
+ },
+ },
+ {
+ name: 'field-telephone',
+ settings: {
+ ...FieldDefaults,
+ title: __( 'Telephone' ),
+ keywords: [ __( 'Phone' ), __( 'Cellular phone' ), __( 'Mobile' ) ],
+ description: __( 'Add a phone number input.' ),
+ icon: renderMaterialIcon(
+
+ ),
+ edit: editField( 'tel' ),
+ },
+ },
+ {
+ name: 'field-textarea',
+ settings: {
+ ...FieldDefaults,
+ title: __( 'Message' ),
+ keywords: [ __( 'Textarea' ), 'textarea', __( 'Multiline text' ) ],
+ description: __( 'Let folks speak their mind. This text box is great for longer responses.' ),
+ icon: renderMaterialIcon( ),
+ edit: props => (
+
+ ),
+ },
+ },
+ {
+ name: 'field-checkbox',
+ settings: {
+ ...FieldDefaults,
+ title: __( 'Checkbox' ),
+ keywords: [ __( 'Confirm' ), __( 'Accept' ) ],
+ description: __( 'Add a single checkbox.' ),
+ icon: renderMaterialIcon(
+
+ ),
+ edit: props => (
+
+ ),
+ attributes: {
+ ...FieldDefaults.attributes,
+ label: {
+ type: 'string',
+ default: '',
+ },
+ },
+ },
+ },
+ {
+ name: 'field-checkbox-multiple',
+ settings: {
+ ...FieldDefaults,
+ title: __( 'Checkbox group' ),
+ keywords: [ __( 'Choose Multiple' ), __( 'Option' ) ],
+ description: __( 'People love options. Add several checkbox items.' ),
+ icon: renderMaterialIcon(
+
+ ),
+ edit: editMultiField( 'checkbox' ),
+ attributes: {
+ ...FieldDefaults.attributes,
+ label: {
+ type: 'string',
+ default: 'Choose several',
+ },
+ },
+ },
+ },
+ {
+ name: 'field-radio',
+ settings: {
+ ...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(
+
+
+
+
+ ),
+ edit: editMultiField( 'radio' ),
+ attributes: {
+ ...FieldDefaults.attributes,
+ label: {
+ type: 'string',
+ default: 'Choose one',
+ },
+ },
+ },
+ },
+ {
+ name: 'field-select',
+ settings: {
+ ...FieldDefaults,
+ title: __( 'Select' ),
+ keywords: [ __( 'Choose' ), __( 'Dropdown' ), __( 'Option' ) ],
+ description: __( 'Compact, but powerful. Add a select box with several items.' ),
+ icon: renderMaterialIcon(
+
+ ),
+ edit: editMultiField( 'select' ),
+ attributes: {
+ ...FieldDefaults.attributes,
+ label: {
+ type: 'string',
+ default: 'Select one',
+ },
+ },
+ },
+ },
+];
diff --git a/client/gutenberg/extensions/map/editor.js b/client/gutenberg/extensions/map/editor.js
index 6a6345eeb24226..b167dc5cca783d 100644
--- a/client/gutenberg/extensions/map/editor.js
+++ b/client/gutenberg/extensions/map/editor.js
@@ -3,31 +3,7 @@
/**
* Internal dependencies
*/
-import { settings as mapSettings } from './settings.js';
import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block';
-import edit from './edit';
-import save from './save';
-import './style.scss';
-import './editor.scss';
-
-export const { name } = mapSettings;
-
-export const settings = {
- title: mapSettings.title,
- icon: mapSettings.icon,
- category: mapSettings.category,
- keywords: mapSettings.keywords,
- description: mapSettings.description,
- attributes: mapSettings.attributes,
- supports: mapSettings.supports,
- getEditWrapperProps( attributes ) {
- const { align } = attributes;
- if ( -1 !== mapSettings.validAlignments.indexOf( align ) ) {
- return { 'data-align': align };
- }
- },
- edit,
- save,
-};
+import { name, settings } from '.';
registerJetpackBlock( name, settings );
diff --git a/client/gutenberg/extensions/map/index.js b/client/gutenberg/extensions/map/index.js
new file mode 100644
index 00000000000000..ca751c562c7e5c
--- /dev/null
+++ b/client/gutenberg/extensions/map/index.js
@@ -0,0 +1,30 @@
+/** @format */
+
+/**
+ * Internal dependencies
+ */
+import { settings as mapSettings } from './settings.js';
+import edit from './edit';
+import save from './save';
+import './style.scss';
+import './editor.scss';
+
+export const { name } = mapSettings;
+
+export const settings = {
+ title: mapSettings.title,
+ icon: mapSettings.icon,
+ category: mapSettings.category,
+ keywords: mapSettings.keywords,
+ description: mapSettings.description,
+ attributes: mapSettings.attributes,
+ supports: mapSettings.supports,
+ getEditWrapperProps( attributes ) {
+ const { align } = attributes;
+ if ( -1 !== mapSettings.validAlignments.indexOf( align ) ) {
+ return { 'data-align': align };
+ }
+ },
+ edit,
+ save,
+};
diff --git a/client/gutenberg/extensions/markdown/editor.js b/client/gutenberg/extensions/markdown/editor.js
index 9d4b53258bdf94..b167dc5cca783d 100644
--- a/client/gutenberg/extensions/markdown/editor.js
+++ b/client/gutenberg/extensions/markdown/editor.js
@@ -1,66 +1,9 @@
/** @format */
-/**
- * External dependencies
- */
-import { ExternalLink } from '@wordpress/components';
-import { Fragment } from '@wordpress/element';
-
/**
* Internal dependencies
*/
-import './editor.scss';
-import edit from './edit';
-import save from './save';
-import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block';
-
-export const name = 'markdown';
-
-export const settings = {
- title: __( 'Markdown' ),
-
- description: (
-
- { __( 'Use regular characters and punctuation to style text, links, and lists.' ) }
-
- { __( 'Support reference' ) }
-
-
- ),
-
- icon: (
-
- ),
-
- category: 'jetpack',
-
- keywords: [ __( 'formatting' ), __( 'syntax' ), __( 'markup' ) ],
-
- attributes: {
- //The Markdown source is saved in the block content comments delimiter
- source: { type: 'string' },
- },
-
- supports: {
- html: false,
- },
-
- edit,
-
- save,
-};
+import { name, settings } from '.';
registerJetpackBlock( name, settings );
diff --git a/client/gutenberg/extensions/markdown/index.js b/client/gutenberg/extensions/markdown/index.js
new file mode 100644
index 00000000000000..af3e5b383f0f79
--- /dev/null
+++ b/client/gutenberg/extensions/markdown/index.js
@@ -0,0 +1,63 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import { ExternalLink } from '@wordpress/components';
+import { Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+import edit from './edit';
+import save from './save';
+import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
+
+export const name = 'markdown';
+
+export const settings = {
+ title: __( 'Markdown' ),
+
+ description: (
+
+ { __( 'Use regular characters and punctuation to style text, links, and lists.' ) }
+
+ { __( 'Support reference' ) }
+
+
+ ),
+
+ icon: (
+
+ ),
+
+ category: 'jetpack',
+
+ keywords: [ __( 'formatting' ), __( 'syntax' ), __( 'markup' ) ],
+
+ attributes: {
+ //The Markdown source is saved in the block content comments delimiter
+ source: { type: 'string' },
+ },
+
+ supports: {
+ html: false,
+ },
+
+ edit,
+
+ save,
+};
diff --git a/client/gutenberg/extensions/presets/jetpack/editor.js b/client/gutenberg/extensions/presets/jetpack/editor.js
index 681f1731faa1a7..c88bedb5a726dc 100644
--- a/client/gutenberg/extensions/presets/jetpack/editor.js
+++ b/client/gutenberg/extensions/presets/jetpack/editor.js
@@ -8,16 +8,17 @@ import './editor-shared/block-category'; // Register the Jetpack category
// TODO: Generate dyanmically from index.json
// Appending `Block` to the names to keep `Map` from colliding with JS' Map
-import * as ContactFormBlock from 'gutenberg/extensions/contact-form/editor';
-import * as MarkdownBlock from 'gutenberg/extensions/markdown/editor';
-import * as MapBlock from 'gutenberg/extensions/map/editor';
-import * as PublicizeBlock from 'gutenberg/extensions/publicize/editor';
-import * as SimplePaymentsBlock from 'gutenberg/extensions/simple-payments/editor';
+import * as ContactFormBlock from 'gutenberg/extensions/contact-form';
+import * as MarkdownBlock from 'gutenberg/extensions/markdown';
+import * as MapBlock from 'gutenberg/extensions/map';
+import * as PublicizeBlock from 'gutenberg/extensions/publicize';
+import * as SimplePaymentsBlock from 'gutenberg/extensions/simple-payments';
-export default {
- [ ContactFormBlock.name ]: ContactFormBlock.settings,
- [ MarkdownBlock.name ]: MarkdownBlock.settings,
- [ MapBlock.name ]: MapBlock.settings,
- [ PublicizeBlock.name ]: PublicizeBlock.settings,
- [ SimplePaymentsBlock.name ]: SimplePaymentsBlock.settings,
-};
+export default [
+ { name: ContactFormBlock.name, settings: ContactFormBlock.settings },
+ ...ContactFormBlock.fields,
+ MarkdownBlock,
+ MapBlock,
+ PublicizeBlock,
+ SimplePaymentsBlock,
+];
diff --git a/client/gutenberg/extensions/presets/jetpack/utils/refresh-registrations.js b/client/gutenberg/extensions/presets/jetpack/utils/refresh-registrations.js
index d7f97b58b19015..5c8a19d048c3a4 100644
--- a/client/gutenberg/extensions/presets/jetpack/utils/refresh-registrations.js
+++ b/client/gutenberg/extensions/presets/jetpack/utils/refresh-registrations.js
@@ -2,7 +2,7 @@
/**
* External dependencies
*/
-import { forEach, get, has } from 'lodash';
+import { get, has } from 'lodash';
import { getBlockType, registerBlockType, unregisterBlockType } from '@wordpress/blocks';
import { getPlugin, registerPlugin, unregisterPlugin } from '@wordpress/plugins';
@@ -26,8 +26,8 @@ export default function refreshRegistrations() {
if ( ! extensionAvailability ) {
return;
}
-
- forEach( extensions, ( settings, name ) => {
+ extensions.forEach( extension => {
+ const { name, settings } = extension;
const available = get( extensionAvailability, [ name, 'available' ] );
if ( has( settings, [ 'render' ] ) ) {
@@ -36,7 +36,7 @@ export default function refreshRegistrations() {
const registered = getPlugin( pluginName );
if ( available && ! registered ) {
- registerPlugin( pluginName );
+ registerPlugin( pluginName, settings );
} else if ( ! available && registered ) {
unregisterPlugin( pluginName );
}
diff --git a/client/gutenberg/extensions/publicize/editor.js b/client/gutenberg/extensions/publicize/editor.js
index 6850ce3c36c21a..aceaa3f6b91901 100644
--- a/client/gutenberg/extensions/publicize/editor.js
+++ b/client/gutenberg/extensions/publicize/editor.js
@@ -1,54 +1,9 @@
/** @format */
-/**
- * Top-level Publicize plugin for Gutenberg editor.
- *
- * Hooks into Gutenberg's PluginPrePublishPanel
- * to display Jetpack's Publicize UI in the pre-publish flow.
- *
- * It also hooks into our dedicated Jetpack plugin sidebar and
- * displays the Publicize UI there.
- */
-
-/**
- * External dependencies
- */
-import { PanelBody } from '@wordpress/components';
-import { PluginPrePublishPanel } from '@wordpress/edit-post';
-import { PostTypeSupportCheck } from '@wordpress/editor';
-
/**
* Internal dependencies
*/
-import './editor.scss';
-import JetpackPluginSidebar from 'gutenberg/extensions/presets/jetpack/editor-shared/jetpack-plugin-sidebar';
-import PublicizePanel from './panel';
+import { name, settings } from '.';
import registerJetpackPlugin from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-plugin';
-import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
-
-export const name = 'publicize';
-
-export const settings = {
- render: () => (
-
-
-
-
-
-
-
- { __( 'Share this post' ) }
-
- }
- >
-
-
-
- ),
-};
registerJetpackPlugin( name, settings );
diff --git a/client/gutenberg/extensions/publicize/index.js b/client/gutenberg/extensions/publicize/index.js
new file mode 100644
index 00000000000000..3772a63efdbbbd
--- /dev/null
+++ b/client/gutenberg/extensions/publicize/index.js
@@ -0,0 +1,51 @@
+/** @format */
+
+/**
+ * Top-level Publicize plugin for Gutenberg editor.
+ *
+ * Hooks into Gutenberg's PluginPrePublishPanel
+ * to display Jetpack's Publicize UI in the pre-publish flow.
+ *
+ * It also hooks into our dedicated Jetpack plugin sidebar and
+ * displays the Publicize UI there.
+ */
+
+/**
+ * External dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+import { PluginPrePublishPanel } from '@wordpress/edit-post';
+import { PostTypeSupportCheck } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+import JetpackPluginSidebar from 'gutenberg/extensions/presets/jetpack/editor-shared/jetpack-plugin-sidebar';
+import PublicizePanel from './panel';
+import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
+
+export const name = 'publicize';
+
+export const settings = {
+ render: () => (
+
+
+
+
+
+
+
+ { __( 'Share this post' ) }
+
+ }
+ >
+
+
+
+ ),
+};
diff --git a/client/gutenberg/extensions/related-posts/editor.js b/client/gutenberg/extensions/related-posts/editor.js
index 7dfd2ce79ac07e..b167dc5cca783d 100644
--- a/client/gutenberg/extensions/related-posts/editor.js
+++ b/client/gutenberg/extensions/related-posts/editor.js
@@ -1,98 +1,9 @@
/** @format */
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
-
/**
* Internal dependencies
*/
-import './style.scss';
-import edit from './edit';
-import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
-import { ALIGNMENT_OPTIONS, MAX_POSTS_TO_SHOW } from './constants';
import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block';
-
-export const name = 'related-posts';
-
-export const settings = {
- title: __( 'Related Posts' ),
-
- icon: (
-
- ),
-
- category: 'jetpack',
-
- keywords: [ __( 'similar' ), __( 'linked' ), __( 'connected' ) ],
-
- attributes: {
- align: {
- type: 'string',
- default: '',
- },
- postLayout: {
- type: 'string',
- default: 'grid',
- },
- displayDate: {
- type: 'boolean',
- default: true,
- },
- displayThumbnails: {
- type: 'boolean',
- default: false,
- },
- displayContext: {
- type: 'boolean',
- default: false,
- },
- postsToShow: {
- type: 'number',
- default: MAX_POSTS_TO_SHOW,
- },
- },
-
- getEditWrapperProps: attributes => {
- const { align } = attributes;
-
- if ( includes( ALIGNMENT_OPTIONS, align ) ) {
- return { 'data-align': align };
- }
- },
-
- supports: {
- html: false,
- },
-
- transforms: {
- from: [
- {
- type: 'shortcode',
- tag: 'jetpack-related-posts',
- },
- ],
- },
-
- edit,
-
- save: () => null,
-};
+import { name, settings } from '.';
registerJetpackBlock( name, settings );
diff --git a/client/gutenberg/extensions/related-posts/index.js b/client/gutenberg/extensions/related-posts/index.js
new file mode 100644
index 00000000000000..2cc41070ae3ba7
--- /dev/null
+++ b/client/gutenberg/extensions/related-posts/index.js
@@ -0,0 +1,95 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import { includes } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import edit from './edit';
+import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
+import { ALIGNMENT_OPTIONS, MAX_POSTS_TO_SHOW } from './constants';
+
+export const name = 'related-posts';
+
+export const settings = {
+ title: __( 'Related Posts' ),
+
+ icon: (
+
+ ),
+
+ category: 'jetpack',
+
+ keywords: [ __( 'similar' ), __( 'linked' ), __( 'connected' ) ],
+
+ attributes: {
+ align: {
+ type: 'string',
+ default: '',
+ },
+ postLayout: {
+ type: 'string',
+ default: 'grid',
+ },
+ displayDate: {
+ type: 'boolean',
+ default: true,
+ },
+ displayThumbnails: {
+ type: 'boolean',
+ default: false,
+ },
+ displayContext: {
+ type: 'boolean',
+ default: false,
+ },
+ postsToShow: {
+ type: 'number',
+ default: MAX_POSTS_TO_SHOW,
+ },
+ },
+
+ getEditWrapperProps: attributes => {
+ const { align } = attributes;
+
+ if ( includes( ALIGNMENT_OPTIONS, align ) ) {
+ return { 'data-align': align };
+ }
+ },
+
+ supports: {
+ html: false,
+ },
+
+ transforms: {
+ from: [
+ {
+ type: 'shortcode',
+ tag: 'jetpack-related-posts',
+ },
+ ],
+ },
+
+ edit,
+
+ save: () => null,
+};
diff --git a/client/gutenberg/extensions/simple-payments/editor.js b/client/gutenberg/extensions/simple-payments/editor.js
index 4f6cebed2bb2d1..b167dc5cca783d 100644
--- a/client/gutenberg/extensions/simple-payments/editor.js
+++ b/client/gutenberg/extensions/simple-payments/editor.js
@@ -1,117 +1,9 @@
/** @format */
-/**
- * External dependencies
- */
-import { ExternalLink, Path, SVG } from '@wordpress/components';
-import { Fragment } from '@wordpress/element';
-
/**
* Internal dependencies
*/
-import edit from './edit';
-import save from './save';
-import { DEFAULT_CURRENCY } from 'lib/simple-payments/constants';
-import { __, _x } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block';
-
-/**
- * Styles
- */
-import './editor.scss';
-
-export const name = 'simple-payments';
-
-export const settings = {
- title: __( 'Simple Payments button' ),
-
- description: (
-
-
- { __(
- 'Lets you create and embed credit and debit card payment buttons with minimal setup.'
- ) }
-
-
- { __( 'Support reference' ) }
-
-
- ),
-
- icon: (
-
- ),
-
- category: 'jetpack',
-
- keywords: [ _x( 'shop', 'block search term' ), _x( 'sell', 'block search term' ), 'PayPal' ],
-
- attributes: {
- currency: {
- type: 'string',
- default: DEFAULT_CURRENCY,
- },
- content: {
- type: 'string',
- default: '',
- },
- email: {
- type: 'string',
- default: '',
- },
- multiple: {
- type: 'boolean',
- default: false,
- },
- price: {
- type: 'number',
- },
- productId: {
- type: 'number',
- },
- title: {
- type: 'string',
- default: '',
- },
- },
-
- transforms: {
- from: [
- {
- type: 'shortcode',
- tag: 'simple-payment',
- attributes: {
- productId: {
- type: 'number',
- shortcode: ( { named: { id } } ) => {
- if ( ! id ) {
- return;
- }
-
- const result = parseInt( id, 10 );
- if ( result ) {
- return result;
- }
- },
- },
- },
- },
- ],
- },
-
- edit,
-
- save,
-
- supports: {
- className: false,
- customClassName: false,
- html: false,
- reusable: false,
- },
-};
+import { name, settings } from '.';
registerJetpackBlock( name, settings );
diff --git a/client/gutenberg/extensions/simple-payments/index.js b/client/gutenberg/extensions/simple-payments/index.js
new file mode 100644
index 00000000000000..932c8729dca717
--- /dev/null
+++ b/client/gutenberg/extensions/simple-payments/index.js
@@ -0,0 +1,114 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import { ExternalLink, Path, SVG } from '@wordpress/components';
+import { Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+import { DEFAULT_CURRENCY } from 'lib/simple-payments/constants';
+import { __, _x } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
+
+/**
+ * Styles
+ */
+import './editor.scss';
+
+export const name = 'simple-payments';
+
+export const settings = {
+ title: __( 'Simple Payments button' ),
+
+ description: (
+
+
+ { __(
+ 'Lets you create and embed credit and debit card payment buttons with minimal setup.'
+ ) }
+
+
+ { __( 'Support reference' ) }
+
+
+ ),
+
+ icon: (
+
+ ),
+
+ category: 'jetpack',
+
+ keywords: [ _x( 'shop', 'block search term' ), _x( 'sell', 'block search term' ), 'PayPal' ],
+
+ attributes: {
+ currency: {
+ type: 'string',
+ default: DEFAULT_CURRENCY,
+ },
+ content: {
+ type: 'string',
+ default: '',
+ },
+ email: {
+ type: 'string',
+ default: '',
+ },
+ multiple: {
+ type: 'boolean',
+ default: false,
+ },
+ price: {
+ type: 'number',
+ },
+ productId: {
+ type: 'number',
+ },
+ title: {
+ type: 'string',
+ default: '',
+ },
+ },
+
+ transforms: {
+ from: [
+ {
+ type: 'shortcode',
+ tag: 'simple-payment',
+ attributes: {
+ productId: {
+ type: 'number',
+ shortcode: ( { named: { id } } ) => {
+ if ( ! id ) {
+ return;
+ }
+
+ const result = parseInt( id, 10 );
+ if ( result ) {
+ return result;
+ }
+ },
+ },
+ },
+ },
+ ],
+ },
+
+ edit,
+
+ save,
+
+ supports: {
+ className: false,
+ customClassName: false,
+ html: false,
+ reusable: false,
+ },
+};
diff --git a/client/gutenberg/extensions/tiled-gallery/editor.js b/client/gutenberg/extensions/tiled-gallery/editor.js
index 3f26eaa7fbedff..b167dc5cca783d 100644
--- a/client/gutenberg/extensions/tiled-gallery/editor.js
+++ b/client/gutenberg/extensions/tiled-gallery/editor.js
@@ -1,188 +1,9 @@
/** @format */
-/**
- * External dependencies
- */
-import { createBlock, registerBlockType } from '@wordpress/blocks';
-import { filter } from 'lodash';
-import { Rect, SVG } from '@wordpress/components';
-
/**
* Internal dependencies
*/
-import { __, _x } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
-import { default as edit } from './edit';
-import { default as save } from './save';
-import { DEFAULT_COLUMNS, DEFAULT_LAYOUT, LAYOUT_STYLES, LAYOUTS } from './constants';
-
-/**
- * Style dependencies
- */
-import './editor.scss';
-
-const blockAttributes = {
- images: {
- type: 'array',
- default: [],
- source: 'query',
- selector: '.wp-block-jetpack-tiled-gallery .tiled-gallery__item',
- query: {
- url: {
- source: 'attribute',
- selector: 'img',
- attribute: 'src',
- },
- link: {
- source: 'attribute',
- selector: 'img',
- attribute: 'data-link',
- },
- alt: {
- source: 'attribute',
- selector: 'img',
- attribute: 'alt',
- default: '',
- },
- id: {
- source: 'attribute',
- selector: 'img',
- attribute: 'data-id',
- },
- caption: {
- source: 'html',
- selector: 'figcaption',
- },
- },
- },
- columns: {
- type: 'number',
- default: DEFAULT_COLUMNS,
- },
- imageCrop: {
- type: 'boolean',
- default: true,
- },
- linkTo: {
- type: 'string',
- default: 'none',
- },
-};
-
-export const name = 'jetpack/tiled-gallery';
-
-export const settings = {
- attributes: blockAttributes,
- category: 'jetpack',
- description: __( 'Display multiple images in an elegantly organized tiled layout.' ),
- icon: (
-
- ),
- keywords: [
- _x( 'images', 'block search term' ),
- _x( 'photos', 'block search term' ),
- _x( 'masonry', 'block search term' ),
- ],
- styles: LAYOUT_STYLES,
- supports: {
- align: true,
- html: false,
- },
- title: __( 'Tiled gallery' ),
- transforms: {
- from: [
- {
- type: 'block',
- blocks: [ 'core/gallery' ],
- transform: attributes => {
- const validImages = filter( attributes.images, ( { id, url } ) => id && url );
- if ( validImages.length > 0 ) {
- return createBlock( name, {
- images: validImages.map( ( { id, url, alt, caption } ) => ( {
- id,
- url,
- alt,
- caption,
- } ) ),
- } );
- }
- return createBlock( name );
- },
- },
- {
- type: 'shortcode',
- tag: 'gallery',
- attributes: {
- // @TODO: other params: https://en.support.wordpress.com/gallery/#gallery-shortcode
- images: {
- type: 'array',
- shortcode: ( { named: { ids } } ) => {
- if ( ! ids ) {
- return [];
- }
-
- return ids.split( ',' ).map( id => ( {
- id: parseInt( id, 10 ),
- } ) );
- },
- },
- columns: {
- type: 'number',
- shortcode: ( { named: { columns = 3 } } ) => {
- if ( ! columns ) {
- return;
- }
-
- const result = parseInt( columns, 10 );
- if ( result ) {
- return result;
- }
- },
- },
- linkTo: {
- type: 'string',
- shortcode: ( { named: { link = 'attachment' } } ) => {
- return link === 'file' ? 'media' : link;
- },
- },
- layout: {
- type: 'string',
- shortcode: ( { named: { type = DEFAULT_LAYOUT } } ) => {
- // @TODO: if `type=slideshow`, return a slideshow block
- return LAYOUTS.indexOf( type ) > -1 ? type : DEFAULT_LAYOUT;
- },
- },
- },
- },
- ],
- to: [
- {
- type: 'block',
- blocks: [ 'core/gallery' ],
- transform: ( { images, columns, imageCrop, linkTo } ) =>
- createBlock( 'core/gallery', { images, columns, imageCrop, linkTo } ),
- },
- {
- type: 'block',
- blocks: [ 'core/image' ],
- transform: ( { images } ) => {
- if ( images.length > 0 ) {
- return images.map( ( { id, url, alt, caption } ) =>
- createBlock( 'core/image', { id, url, alt, caption } )
- );
- }
- return createBlock( 'core/image' );
- },
- },
- ],
- },
- edit,
- save,
-};
+import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block';
+import { name, settings } from '.';
-registerBlockType( name, settings );
+registerJetpackBlock( name, settings );
diff --git a/client/gutenberg/extensions/tiled-gallery/index.js b/client/gutenberg/extensions/tiled-gallery/index.js
new file mode 100644
index 00000000000000..49ac85595e66a2
--- /dev/null
+++ b/client/gutenberg/extensions/tiled-gallery/index.js
@@ -0,0 +1,186 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import { filter } from 'lodash';
+import { Rect, SVG } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { __, _x } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
+import edit from './edit';
+import save from './save';
+import { DEFAULT_COLUMNS, DEFAULT_LAYOUT, LAYOUT_STYLES, LAYOUTS } from './constants';
+
+/**
+ * Style dependencies
+ */
+import './editor.scss';
+
+const blockAttributes = {
+ images: {
+ type: 'array',
+ default: [],
+ source: 'query',
+ selector: '.wp-block-jetpack-tiled-gallery .tiled-gallery__item',
+ query: {
+ url: {
+ source: 'attribute',
+ selector: 'img',
+ attribute: 'src',
+ },
+ link: {
+ source: 'attribute',
+ selector: 'img',
+ attribute: 'data-link',
+ },
+ alt: {
+ source: 'attribute',
+ selector: 'img',
+ attribute: 'alt',
+ default: '',
+ },
+ id: {
+ source: 'attribute',
+ selector: 'img',
+ attribute: 'data-id',
+ },
+ caption: {
+ source: 'html',
+ selector: 'figcaption',
+ },
+ },
+ },
+ columns: {
+ type: 'number',
+ default: DEFAULT_COLUMNS,
+ },
+ imageCrop: {
+ type: 'boolean',
+ default: true,
+ },
+ linkTo: {
+ type: 'string',
+ default: 'none',
+ },
+};
+
+export const name = 'tiled-gallery';
+
+export const settings = {
+ attributes: blockAttributes,
+ category: 'jetpack',
+ description: __( 'Display multiple images in an elegantly organized tiled layout.' ),
+ icon: (
+
+ ),
+ keywords: [
+ _x( 'images', 'block search term' ),
+ _x( 'photos', 'block search term' ),
+ _x( 'masonry', 'block search term' ),
+ ],
+ styles: LAYOUT_STYLES,
+ supports: {
+ align: true,
+ html: false,
+ },
+ title: __( 'Tiled gallery' ),
+ transforms: {
+ from: [
+ {
+ type: 'block',
+ blocks: [ 'core/gallery' ],
+ transform: attributes => {
+ const validImages = filter( attributes.images, ( { id, url } ) => id && url );
+ if ( validImages.length > 0 ) {
+ return createBlock( name, {
+ images: validImages.map( ( { id, url, alt, caption } ) => ( {
+ id,
+ url,
+ alt,
+ caption,
+ } ) ),
+ } );
+ }
+ return createBlock( name );
+ },
+ },
+ {
+ type: 'shortcode',
+ tag: 'gallery',
+ attributes: {
+ // @TODO: other params: https://en.support.wordpress.com/gallery/#gallery-shortcode
+ images: {
+ type: 'array',
+ shortcode: ( { named: { ids } } ) => {
+ if ( ! ids ) {
+ return [];
+ }
+
+ return ids.split( ',' ).map( id => ( {
+ id: parseInt( id, 10 ),
+ } ) );
+ },
+ },
+ columns: {
+ type: 'number',
+ shortcode: ( { named: { columns = 3 } } ) => {
+ if ( ! columns ) {
+ return;
+ }
+
+ const result = parseInt( columns, 10 );
+ if ( result ) {
+ return result;
+ }
+ },
+ },
+ linkTo: {
+ type: 'string',
+ shortcode: ( { named: { link = 'attachment' } } ) => {
+ return link === 'file' ? 'media' : link;
+ },
+ },
+ layout: {
+ type: 'string',
+ shortcode: ( { named: { type = DEFAULT_LAYOUT } } ) => {
+ // @TODO: if `type=slideshow`, return a slideshow block
+ return LAYOUTS.indexOf( type ) > -1 ? type : DEFAULT_LAYOUT;
+ },
+ },
+ },
+ },
+ ],
+ to: [
+ {
+ type: 'block',
+ blocks: [ 'core/gallery' ],
+ transform: ( { images, columns, imageCrop, linkTo } ) =>
+ createBlock( 'core/gallery', { images, columns, imageCrop, linkTo } ),
+ },
+ {
+ type: 'block',
+ blocks: [ 'core/image' ],
+ transform: ( { images } ) => {
+ if ( images.length > 0 ) {
+ return images.map( ( { id, url, alt, caption } ) =>
+ createBlock( 'core/image', { id, url, alt, caption } )
+ );
+ }
+ return createBlock( 'core/image' );
+ },
+ },
+ ],
+ },
+ edit,
+ save,
+};
diff --git a/client/gutenberg/extensions/vr/editor.js b/client/gutenberg/extensions/vr/editor.js
index 17fc84847d5870..b167dc5cca783d 100644
--- a/client/gutenberg/extensions/vr/editor.js
+++ b/client/gutenberg/extensions/vr/editor.js
@@ -1,34 +1,9 @@
/** @format */
-/**
- * External dependencies
- */
-import { registerBlockType } from '@wordpress/blocks';
/**
* Internal dependencies
*/
-import './editor.scss';
-import VRImageEdit from './edit';
-import VRImageSave from './save';
-import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
+import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block';
+import { name, settings } from '.';
-registerBlockType( 'jetpack/vr', {
- title: __( 'VR Image' ),
- description: __( 'Embed 360° photos and Virtual Reality (VR) content' ),
- icon: 'embed-photo',
- category: 'jetpack',
- keywords: [ __( 'vr' ), __( 'panorama' ), __( '360' ) ],
- supports: {
- html: false,
- },
- attributes: {
- url: {
- type: 'string',
- },
- view: {
- type: 'string',
- },
- },
- edit: VRImageEdit,
- save: VRImageSave,
-} );
+registerJetpackBlock( name, settings );
diff --git a/client/gutenberg/extensions/vr/index.js b/client/gutenberg/extensions/vr/index.js
new file mode 100644
index 00000000000000..c748466f9f8ed2
--- /dev/null
+++ b/client/gutenberg/extensions/vr/index.js
@@ -0,0 +1,31 @@
+/** @format */
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+import VRImageEdit from './edit';
+import VRImageSave from './save';
+import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
+
+export const name = 'vr';
+
+export const settings = {
+ title: __( 'VR Image' ),
+ description: __( 'Embed 360° photos and Virtual Reality (VR) content' ),
+ icon: 'embed-photo',
+ category: 'jetpack',
+ keywords: [ __( 'vr' ), __( 'panorama' ), __( '360' ) ],
+ supports: {
+ html: false,
+ },
+ attributes: {
+ url: {
+ type: 'string',
+ },
+ view: {
+ type: 'string',
+ },
+ },
+ edit: VRImageEdit,
+ save: VRImageSave,
+};