From 18292f6e5c7a1f1d601f1dc682cedb2b110a2134 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Mon, 10 Dec 2018 16:18:55 -0800 Subject: [PATCH 01/14] Update Map Block --- client/gutenberg/extensions/map/editor.js | 28 ++--------------- client/gutenberg/extensions/map/index.js | 30 +++++++++++++++++++ .../extensions/presets/jetpack/editor.js | 2 +- 3 files changed, 33 insertions(+), 27 deletions(-) create mode 100644 client/gutenberg/extensions/map/index.js diff --git a/client/gutenberg/extensions/map/editor.js b/client/gutenberg/extensions/map/editor.js index 6a6345eeb2422..e693d8133ba1d 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 * as block from './index.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, -}; - -registerJetpackBlock( name, settings ); +registerJetpackBlock( block.name, block.settings ); diff --git a/client/gutenberg/extensions/map/index.js b/client/gutenberg/extensions/map/index.js new file mode 100644 index 0000000000000..ca751c562c7e5 --- /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/presets/jetpack/editor.js b/client/gutenberg/extensions/presets/jetpack/editor.js index 681f1731faa1a..a8aaf0fc7ca02 100644 --- a/client/gutenberg/extensions/presets/jetpack/editor.js +++ b/client/gutenberg/extensions/presets/jetpack/editor.js @@ -10,7 +10,7 @@ import './editor-shared/block-category'; // Register the Jetpack category // 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 MapBlock from 'gutenberg/extensions/map'; import * as PublicizeBlock from 'gutenberg/extensions/publicize/editor'; import * as SimplePaymentsBlock from 'gutenberg/extensions/simple-payments/editor'; From e78297d1e670faa599a1598159585cf1b1bd0c15 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Mon, 10 Dec 2018 16:22:38 -0800 Subject: [PATCH 02/14] Update Markdown Block --- .../gutenberg/extensions/markdown/editor.js | 61 +----------------- client/gutenberg/extensions/markdown/index.js | 63 +++++++++++++++++++ .../extensions/presets/jetpack/editor.js | 2 +- 3 files changed, 66 insertions(+), 60 deletions(-) create mode 100644 client/gutenberg/extensions/markdown/index.js diff --git a/client/gutenberg/extensions/markdown/editor.js b/client/gutenberg/extensions/markdown/editor.js index 9d4b53258bdf9..e693d8133ba1d 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 * as block from './index.js'; 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, -}; - -registerJetpackBlock( name, settings ); +registerJetpackBlock( block.name, block.settings ); diff --git a/client/gutenberg/extensions/markdown/index.js b/client/gutenberg/extensions/markdown/index.js new file mode 100644 index 0000000000000..af3e5b383f0f7 --- /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 a8aaf0fc7ca02..89fef95858eaf 100644 --- a/client/gutenberg/extensions/presets/jetpack/editor.js +++ b/client/gutenberg/extensions/presets/jetpack/editor.js @@ -9,7 +9,7 @@ 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 MarkdownBlock from 'gutenberg/extensions/markdown'; import * as MapBlock from 'gutenberg/extensions/map'; import * as PublicizeBlock from 'gutenberg/extensions/publicize/editor'; import * as SimplePaymentsBlock from 'gutenberg/extensions/simple-payments/editor'; From 44a32b8727be93a6c194519ae35e059b22193d55 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Mon, 10 Dec 2018 16:58:56 -0800 Subject: [PATCH 03/14] Update Publicize block --- .../extensions/presets/jetpack/editor.js | 2 +- .../jetpack/utils/refresh-registrations.js | 2 +- .../gutenberg/extensions/publicize/editor.js | 49 +----------------- .../gutenberg/extensions/publicize/index.js | 51 +++++++++++++++++++ 4 files changed, 55 insertions(+), 49 deletions(-) create mode 100644 client/gutenberg/extensions/publicize/index.js diff --git a/client/gutenberg/extensions/presets/jetpack/editor.js b/client/gutenberg/extensions/presets/jetpack/editor.js index 89fef95858eaf..fc1d5807d5e28 100644 --- a/client/gutenberg/extensions/presets/jetpack/editor.js +++ b/client/gutenberg/extensions/presets/jetpack/editor.js @@ -11,7 +11,7 @@ import './editor-shared/block-category'; // Register the Jetpack category import * as ContactFormBlock from 'gutenberg/extensions/contact-form/editor'; import * as MarkdownBlock from 'gutenberg/extensions/markdown'; import * as MapBlock from 'gutenberg/extensions/map'; -import * as PublicizeBlock from 'gutenberg/extensions/publicize/editor'; +import * as PublicizeBlock from 'gutenberg/extensions/publicize'; import * as SimplePaymentsBlock from 'gutenberg/extensions/simple-payments/editor'; export default { diff --git a/client/gutenberg/extensions/presets/jetpack/utils/refresh-registrations.js b/client/gutenberg/extensions/presets/jetpack/utils/refresh-registrations.js index d7f97b58b1901..b7e1bb35fcbc5 100644 --- a/client/gutenberg/extensions/presets/jetpack/utils/refresh-registrations.js +++ b/client/gutenberg/extensions/presets/jetpack/utils/refresh-registrations.js @@ -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 6850ce3c36c21..956b84d960e4d 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 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' ) } - - } - > - - - - ), -}; +import * as plugin from './index'; -registerJetpackPlugin( name, settings ); +registerJetpackPlugin( plugin.name, plugin.settings ); diff --git a/client/gutenberg/extensions/publicize/index.js b/client/gutenberg/extensions/publicize/index.js new file mode 100644 index 0000000000000..3772a63efdbbb --- /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' ) } + + } + > + + + + ), +}; From 740d2262bc1c460201e659f15962775b0c6bf996 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Mon, 10 Dec 2018 17:08:37 -0800 Subject: [PATCH 04/14] Update simple payment block --- .../extensions/presets/jetpack/editor.js | 2 +- .../extensions/simple-payments/editor.js | 113 +---------------- .../extensions/simple-payments/index.js | 114 ++++++++++++++++++ 3 files changed, 117 insertions(+), 112 deletions(-) create mode 100644 client/gutenberg/extensions/simple-payments/index.js diff --git a/client/gutenberg/extensions/presets/jetpack/editor.js b/client/gutenberg/extensions/presets/jetpack/editor.js index fc1d5807d5e28..4e3e698863aad 100644 --- a/client/gutenberg/extensions/presets/jetpack/editor.js +++ b/client/gutenberg/extensions/presets/jetpack/editor.js @@ -12,7 +12,7 @@ import * as ContactFormBlock from 'gutenberg/extensions/contact-form/editor'; 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/editor'; +import * as SimplePaymentsBlock from 'gutenberg/extensions/simple-payments'; export default { [ ContactFormBlock.name ]: ContactFormBlock.settings, diff --git a/client/gutenberg/extensions/simple-payments/editor.js b/client/gutenberg/extensions/simple-payments/editor.js index 4f6cebed2bb2d..c5ea70058ec9b 100644 --- a/client/gutenberg/extensions/simple-payments/editor.js +++ b/client/gutenberg/extensions/simple-payments/editor.js @@ -1,117 +1,8 @@ /** @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 * as block from './index'; 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, - }, -}; - -registerJetpackBlock( name, settings ); +registerJetpackBlock( block.name, block.settings ); diff --git a/client/gutenberg/extensions/simple-payments/index.js b/client/gutenberg/extensions/simple-payments/index.js new file mode 100644 index 0000000000000..932c8729dca71 --- /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, + }, +}; From 585c3330c70d55ee9b5adba2805dbd7eb32e23f5 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Mon, 10 Dec 2018 17:38:18 -0800 Subject: [PATCH 05/14] Update contact form block more the editor.js export to be an array --- .../extensions/contact-form/editor.js | 361 +--------------- .../extensions/contact-form/index.js | 388 ++++++++++++++++++ .../extensions/presets/jetpack/editor.js | 17 +- .../jetpack/utils/refresh-registrations.js | 6 +- 4 files changed, 403 insertions(+), 369 deletions(-) create mode 100644 client/gutenberg/extensions/contact-form/index.js diff --git a/client/gutenberg/extensions/contact-form/editor.js b/client/gutenberg/extensions/contact-form/editor.js index 407f4ee9fe52e..a104018197ce9 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 * as form from './index'; import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; -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', - }, - }, -} ); +registerJetpackBlock( form.name, form.settings ); +form.fields.map( 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 0000000000000..47774ac450b5b --- /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/presets/jetpack/editor.js b/client/gutenberg/extensions/presets/jetpack/editor.js index 4e3e698863aad..c88bedb5a726d 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 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 b7e1bb35fcbc5..5c8a19d048c3a 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' ] ) ) { From df769db9e6560caedc2527bc4a05ef3b9f0eb8bb Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Mon, 10 Dec 2018 17:55:40 -0800 Subject: [PATCH 06/14] Update the VR block --- client/gutenberg/extensions/vr/editor.js | 31 +++--------------------- client/gutenberg/extensions/vr/index.js | 31 ++++++++++++++++++++++++ 2 files changed, 34 insertions(+), 28 deletions(-) create mode 100644 client/gutenberg/extensions/vr/index.js diff --git a/client/gutenberg/extensions/vr/editor.js b/client/gutenberg/extensions/vr/editor.js index 17fc84847d587..e693d8133ba1d 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 * as block from './index.js'; +import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; -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( block.name, block.settings ); diff --git a/client/gutenberg/extensions/vr/index.js b/client/gutenberg/extensions/vr/index.js new file mode 100644 index 0000000000000..c748466f9f8ed --- /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, +}; From 98b294f6e4832e8b0ac5a7f389dcdb1e8eebb700 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Mon, 10 Dec 2018 17:58:56 -0800 Subject: [PATCH 07/14] Update the related posts block --- .../extensions/related-posts/editor.js | 93 +----------------- .../extensions/related-posts/index.js | 95 +++++++++++++++++++ 2 files changed, 97 insertions(+), 91 deletions(-) create mode 100644 client/gutenberg/extensions/related-posts/index.js diff --git a/client/gutenberg/extensions/related-posts/editor.js b/client/gutenberg/extensions/related-posts/editor.js index 7dfd2ce79ac07..f71567c51949e 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 * as block from './index'; 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, -}; - -registerJetpackBlock( name, settings ); +registerJetpackBlock( block.name, block.settings ); diff --git a/client/gutenberg/extensions/related-posts/index.js b/client/gutenberg/extensions/related-posts/index.js new file mode 100644 index 0000000000000..2cc41070ae3ba --- /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, +}; From 1c0c13f1b1e5adb5558aa578dc09a6c218db39c0 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Mon, 10 Dec 2018 18:01:50 -0800 Subject: [PATCH 08/14] Update the Tile Galleries block --- .../extensions/tiled-gallery/editor.js | 185 +---------------- .../extensions/tiled-gallery/index.js | 186 ++++++++++++++++++ 2 files changed, 189 insertions(+), 182 deletions(-) create mode 100644 client/gutenberg/extensions/tiled-gallery/index.js diff --git a/client/gutenberg/extensions/tiled-gallery/editor.js b/client/gutenberg/extensions/tiled-gallery/editor.js index 3f26eaa7fbedf..e693d8133ba1d 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 * as block from './index.js'; +import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; -registerBlockType( name, settings ); +registerJetpackBlock( block.name, block.settings ); diff --git a/client/gutenberg/extensions/tiled-gallery/index.js b/client/gutenberg/extensions/tiled-gallery/index.js new file mode 100644 index 0000000000000..e7429989df6a3 --- /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 { 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 = '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, +}; From af061994c8eb927ccdd0e12ff00867b4d70c77c7 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Tue, 11 Dec 2018 12:39:08 +0100 Subject: [PATCH 09/14] Functions args typo --- client/gutenberg/extensions/contact-form/editor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/gutenberg/extensions/contact-form/editor.js b/client/gutenberg/extensions/contact-form/editor.js index a104018197ce9..65f0561f4d98f 100644 --- a/client/gutenberg/extensions/contact-form/editor.js +++ b/client/gutenberg/extensions/contact-form/editor.js @@ -7,4 +7,4 @@ import * as form from './index'; import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; registerJetpackBlock( form.name, form.settings ); -form.fields.map( field => registerJetpackBlock( field.name.field.settings ) ); +form.fields.map( field => registerJetpackBlock( field.name, field.settings ) ); From 3fc38b7938c9b443158b29cbe8f72a4d6a4f7120 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Tue, 11 Dec 2018 12:39:32 +0100 Subject: [PATCH 10/14] Use forEach instead of map --- client/gutenberg/extensions/contact-form/editor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/gutenberg/extensions/contact-form/editor.js b/client/gutenberg/extensions/contact-form/editor.js index 65f0561f4d98f..845d0f664e027 100644 --- a/client/gutenberg/extensions/contact-form/editor.js +++ b/client/gutenberg/extensions/contact-form/editor.js @@ -7,4 +7,4 @@ import * as form from './index'; import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; registerJetpackBlock( form.name, form.settings ); -form.fields.map( field => registerJetpackBlock( field.name, field.settings ) ); +form.fields.forEach( field => registerJetpackBlock( field.name, field.settings ) ); From 620e7272de558d04c184c2d1bf4a5919aa70265a Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Tue, 11 Dec 2018 12:51:56 +0100 Subject: [PATCH 11/14] Named imports --- client/gutenberg/extensions/contact-form/editor.js | 6 +++--- client/gutenberg/extensions/map/editor.js | 4 ++-- client/gutenberg/extensions/markdown/editor.js | 4 ++-- client/gutenberg/extensions/publicize/editor.js | 4 ++-- client/gutenberg/extensions/related-posts/editor.js | 4 ++-- client/gutenberg/extensions/simple-payments/editor.js | 5 +++-- client/gutenberg/extensions/tiled-gallery/editor.js | 4 ++-- client/gutenberg/extensions/vr/editor.js | 4 ++-- 8 files changed, 18 insertions(+), 17 deletions(-) diff --git a/client/gutenberg/extensions/contact-form/editor.js b/client/gutenberg/extensions/contact-form/editor.js index 845d0f664e027..2caf651194c27 100644 --- a/client/gutenberg/extensions/contact-form/editor.js +++ b/client/gutenberg/extensions/contact-form/editor.js @@ -3,8 +3,8 @@ /** * Internal dependencies */ -import * as form from './index'; import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; +import { fields, name, settings } from './index'; -registerJetpackBlock( form.name, form.settings ); -form.fields.forEach( field => registerJetpackBlock( field.name, field.settings ) ); +registerJetpackBlock( name, settings ); +fields.forEach( field => registerJetpackBlock( field.name, field.settings ) ); diff --git a/client/gutenberg/extensions/map/editor.js b/client/gutenberg/extensions/map/editor.js index e693d8133ba1d..d1c015f96ca67 100644 --- a/client/gutenberg/extensions/map/editor.js +++ b/client/gutenberg/extensions/map/editor.js @@ -3,7 +3,7 @@ /** * Internal dependencies */ -import * as block from './index.js'; import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; +import { name, settings } from './index.js'; -registerJetpackBlock( block.name, block.settings ); +registerJetpackBlock( name, settings ); diff --git a/client/gutenberg/extensions/markdown/editor.js b/client/gutenberg/extensions/markdown/editor.js index e693d8133ba1d..d1c015f96ca67 100644 --- a/client/gutenberg/extensions/markdown/editor.js +++ b/client/gutenberg/extensions/markdown/editor.js @@ -3,7 +3,7 @@ /** * Internal dependencies */ -import * as block from './index.js'; import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; +import { name, settings } from './index.js'; -registerJetpackBlock( block.name, block.settings ); +registerJetpackBlock( name, settings ); diff --git a/client/gutenberg/extensions/publicize/editor.js b/client/gutenberg/extensions/publicize/editor.js index 956b84d960e4d..5b5d5871d944b 100644 --- a/client/gutenberg/extensions/publicize/editor.js +++ b/client/gutenberg/extensions/publicize/editor.js @@ -3,7 +3,7 @@ /** * Internal dependencies */ +import { name, settings } from './index.js'; import registerJetpackPlugin from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-plugin'; -import * as plugin from './index'; -registerJetpackPlugin( plugin.name, plugin.settings ); +registerJetpackPlugin( name, settings ); diff --git a/client/gutenberg/extensions/related-posts/editor.js b/client/gutenberg/extensions/related-posts/editor.js index f71567c51949e..d1c015f96ca67 100644 --- a/client/gutenberg/extensions/related-posts/editor.js +++ b/client/gutenberg/extensions/related-posts/editor.js @@ -3,7 +3,7 @@ /** * Internal dependencies */ -import * as block from './index'; import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; +import { name, settings } from './index.js'; -registerJetpackBlock( block.name, block.settings ); +registerJetpackBlock( name, settings ); diff --git a/client/gutenberg/extensions/simple-payments/editor.js b/client/gutenberg/extensions/simple-payments/editor.js index c5ea70058ec9b..d1c015f96ca67 100644 --- a/client/gutenberg/extensions/simple-payments/editor.js +++ b/client/gutenberg/extensions/simple-payments/editor.js @@ -1,8 +1,9 @@ /** @format */ + /** * Internal dependencies */ -import * as block from './index'; import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; +import { name, settings } from './index.js'; -registerJetpackBlock( block.name, block.settings ); +registerJetpackBlock( name, settings ); diff --git a/client/gutenberg/extensions/tiled-gallery/editor.js b/client/gutenberg/extensions/tiled-gallery/editor.js index e693d8133ba1d..d1c015f96ca67 100644 --- a/client/gutenberg/extensions/tiled-gallery/editor.js +++ b/client/gutenberg/extensions/tiled-gallery/editor.js @@ -3,7 +3,7 @@ /** * Internal dependencies */ -import * as block from './index.js'; import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; +import { name, settings } from './index.js'; -registerJetpackBlock( block.name, block.settings ); +registerJetpackBlock( name, settings ); diff --git a/client/gutenberg/extensions/vr/editor.js b/client/gutenberg/extensions/vr/editor.js index e693d8133ba1d..d1c015f96ca67 100644 --- a/client/gutenberg/extensions/vr/editor.js +++ b/client/gutenberg/extensions/vr/editor.js @@ -3,7 +3,7 @@ /** * Internal dependencies */ -import * as block from './index.js'; import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; +import { name, settings } from './index.js'; -registerJetpackBlock( block.name, block.settings ); +registerJetpackBlock( name, settings ); From f545cab8986705ccd3330807f049302df2f90de8 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Tue, 11 Dec 2018 12:53:59 +0100 Subject: [PATCH 12/14] import from '.' --- client/gutenberg/extensions/contact-form/editor.js | 2 +- client/gutenberg/extensions/map/editor.js | 2 +- client/gutenberg/extensions/markdown/editor.js | 2 +- client/gutenberg/extensions/publicize/editor.js | 2 +- client/gutenberg/extensions/related-posts/editor.js | 2 +- client/gutenberg/extensions/simple-payments/editor.js | 2 +- client/gutenberg/extensions/tiled-gallery/editor.js | 2 +- client/gutenberg/extensions/vr/editor.js | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/client/gutenberg/extensions/contact-form/editor.js b/client/gutenberg/extensions/contact-form/editor.js index 2caf651194c27..a5859d07be38a 100644 --- a/client/gutenberg/extensions/contact-form/editor.js +++ b/client/gutenberg/extensions/contact-form/editor.js @@ -4,7 +4,7 @@ * Internal dependencies */ import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; -import { fields, name, settings } from './index'; +import { fields, name, settings } from '.'; registerJetpackBlock( name, settings ); fields.forEach( field => registerJetpackBlock( field.name, field.settings ) ); diff --git a/client/gutenberg/extensions/map/editor.js b/client/gutenberg/extensions/map/editor.js index d1c015f96ca67..b167dc5cca783 100644 --- a/client/gutenberg/extensions/map/editor.js +++ b/client/gutenberg/extensions/map/editor.js @@ -4,6 +4,6 @@ * Internal dependencies */ import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; -import { name, settings } from './index.js'; +import { name, settings } from '.'; registerJetpackBlock( name, settings ); diff --git a/client/gutenberg/extensions/markdown/editor.js b/client/gutenberg/extensions/markdown/editor.js index d1c015f96ca67..b167dc5cca783 100644 --- a/client/gutenberg/extensions/markdown/editor.js +++ b/client/gutenberg/extensions/markdown/editor.js @@ -4,6 +4,6 @@ * Internal dependencies */ import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; -import { name, settings } from './index.js'; +import { name, settings } from '.'; registerJetpackBlock( name, settings ); diff --git a/client/gutenberg/extensions/publicize/editor.js b/client/gutenberg/extensions/publicize/editor.js index 5b5d5871d944b..aceaa3f6b9190 100644 --- a/client/gutenberg/extensions/publicize/editor.js +++ b/client/gutenberg/extensions/publicize/editor.js @@ -3,7 +3,7 @@ /** * Internal dependencies */ -import { name, settings } from './index.js'; +import { name, settings } from '.'; import registerJetpackPlugin from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-plugin'; registerJetpackPlugin( name, settings ); diff --git a/client/gutenberg/extensions/related-posts/editor.js b/client/gutenberg/extensions/related-posts/editor.js index d1c015f96ca67..b167dc5cca783 100644 --- a/client/gutenberg/extensions/related-posts/editor.js +++ b/client/gutenberg/extensions/related-posts/editor.js @@ -4,6 +4,6 @@ * Internal dependencies */ import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; -import { name, settings } from './index.js'; +import { name, settings } from '.'; registerJetpackBlock( name, settings ); diff --git a/client/gutenberg/extensions/simple-payments/editor.js b/client/gutenberg/extensions/simple-payments/editor.js index d1c015f96ca67..b167dc5cca783 100644 --- a/client/gutenberg/extensions/simple-payments/editor.js +++ b/client/gutenberg/extensions/simple-payments/editor.js @@ -4,6 +4,6 @@ * Internal dependencies */ import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; -import { name, settings } from './index.js'; +import { name, settings } from '.'; registerJetpackBlock( name, settings ); diff --git a/client/gutenberg/extensions/tiled-gallery/editor.js b/client/gutenberg/extensions/tiled-gallery/editor.js index d1c015f96ca67..b167dc5cca783 100644 --- a/client/gutenberg/extensions/tiled-gallery/editor.js +++ b/client/gutenberg/extensions/tiled-gallery/editor.js @@ -4,6 +4,6 @@ * Internal dependencies */ import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; -import { name, settings } from './index.js'; +import { name, settings } from '.'; registerJetpackBlock( name, settings ); diff --git a/client/gutenberg/extensions/vr/editor.js b/client/gutenberg/extensions/vr/editor.js index d1c015f96ca67..b167dc5cca783 100644 --- a/client/gutenberg/extensions/vr/editor.js +++ b/client/gutenberg/extensions/vr/editor.js @@ -4,6 +4,6 @@ * Internal dependencies */ import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block'; -import { name, settings } from './index.js'; +import { name, settings } from '.'; registerJetpackBlock( name, settings ); From 402679fab0f390c1af1743feb2d4f101f16384a2 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Tue, 11 Dec 2018 13:11:24 +0100 Subject: [PATCH 13/14] Remove obsolete require --- client/gutenberg/editor/init.js | 1 - 1 file changed, 1 deletion(-) diff --git a/client/gutenberg/editor/init.js b/client/gutenberg/editor/init.js index 087063d7b69ba..7931f02b24197 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 From 79b7b5fa0d0a800225f63a52c3a94926eb47df55 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Tue, 11 Dec 2018 13:58:01 +0100 Subject: [PATCH 14/14] Tiled gallery: Moar beautiful default imports --- client/gutenberg/extensions/tiled-gallery/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/gutenberg/extensions/tiled-gallery/index.js b/client/gutenberg/extensions/tiled-gallery/index.js index e7429989df6a3..49ac85595e66a 100644 --- a/client/gutenberg/extensions/tiled-gallery/index.js +++ b/client/gutenberg/extensions/tiled-gallery/index.js @@ -11,8 +11,8 @@ 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 edit from './edit'; +import save from './save'; import { DEFAULT_COLUMNS, DEFAULT_LAYOUT, LAYOUT_STYLES, LAYOUTS } from './constants'; /**