Blocks: Add support for Collections (#14454)

* Add Jetpack blocks collection * Add Earn and Grow categories Co-authored-by: Jeremy Herve <[email protected]>
Automattic · Apr 6, 2020 · bc29cd5 · bc29cd5
1 parent 9b42b00
commit bc29cd5
Show file tree

Hide file tree

Showing 29 changed files with 102 additions and 34 deletions.
diff --git a/extensions/blocks/amazon/index.js b/extensions/blocks/amazon/index.js
@@ -14,6 +14,7 @@ import edit from './edit';
  * Style dependencies
  */
 import './editor.scss';
+import { supportsCollections } from '../../shared/block-category';
 
 export const name = 'amazon';
 export const title = __( 'Amazon', 'jetpack' );
@@ -22,7 +23,7 @@ export const settings = {
 	title,
 	description: __( 'Promote Amazon products and earn a commission from sales.', 'jetpack' ),
 	icon,
-	category: 'jetpack',
+	category: supportsCollections() ? 'earn' : 'jetpack',
 	keywords: [ __( 'amazon', 'jetpack' ), __( 'affiliate', 'jetpack' ) ],
 	supports: {
 		align: true,

diff --git a/extensions/blocks/business-hours/index.js b/extensions/blocks/business-hours/index.js
@@ -11,6 +11,7 @@ import './editor.scss';
 import './style.scss';
 import BusinessHours from './edit';
 import renderMaterialIcon from '../../shared/render-material-icon';
+import { supportsCollections } from '../../shared/block-category';
 
 /**
  * Block Registrations:
@@ -82,7 +83,7 @@ export const settings = {
 	title: __( 'Business Hours', 'jetpack' ),
 	description: __( 'Display opening hours for your business.', 'jetpack' ),
 	icon,
-	category: 'jetpack',
+	category: supportsCollections() ? 'grow' : 'jetpack',
 	supports: {
 		html: true,
 	},

diff --git a/extensions/blocks/calendly/index.js b/extensions/blocks/calendly/index.js
@@ -16,6 +16,7 @@ import { getAttributesFromEmbedCode, REGEX } from './utils';
  * Style dependencies
  */
 import './editor.scss';
+import { supportsCollections } from '../../shared/block-category';
 
 export const CALENDLY_EXAMPLE_URL = 'https://calendly.com/wordpresscom/jetpack-block-example';
 
@@ -25,7 +26,7 @@ export const settings = {
 	title,
 	description: __( 'Embed a calendar for customers to schedule appointments', 'jetpack' ),
 	icon,
-	category: 'jetpack',
+	category: supportsCollections() ? 'grow' : 'jetpack',
 	keywords: [
 		_x( 'calendar', 'block search term', 'jetpack' ),
 		_x( 'schedule', 'block search term', 'jetpack' ),

diff --git a/extensions/blocks/contact-form/index.js b/extensions/blocks/contact-form/index.js
@@ -18,6 +18,7 @@ import JetpackFieldCheckbox from './components/jetpack-field-checkbox';
 import JetpackFieldMultiple from './components/jetpack-field-multiple';
 import renderMaterialIcon from '../../shared/render-material-icon';
 import colorValidator from '../../shared/colorValidator';
+import { supportsCollections } from '../../shared/block-category';
 
 export const name = 'contact-form';
 
@@ -32,7 +33,7 @@ export const settings = {
 		_x( 'feedback', 'block search term', 'jetpack' ),
 		_x( 'contact form', 'block search term', 'jetpack' ),
 	],
-	category: 'jetpack',
+	category: supportsCollections() ? 'grow' : 'jetpack',
 	supports: {
 		html: false,
 	},
@@ -174,7 +175,7 @@ export const settings = {
 };
 
 const FieldDefaults = {
-	category: 'jetpack',
+	category: supportsCollections() ? 'grow' : 'jetpack',
 	parent: [ 'jetpack/contact-form' ],
 	supports: {
 		reusable: false,

diff --git a/extensions/blocks/contact-info/address/index.js b/extensions/blocks/contact-info/address/index.js
@@ -11,6 +11,7 @@ import { Path, Circle } from '@wordpress/components';
 import edit from './edit';
 import save from './save';
 import renderMaterialIcon from '../../../shared/render-material-icon';
+import { supportsCollections } from '../../../shared/block-category';
 
 const attributes = {
 	address: {
@@ -63,7 +64,7 @@ export const settings = {
 			<Circle cx="12" cy="9" r="2.5" />
 		</Fragment>
 	),
-	category: 'jetpack',
+	category: supportsCollections() ? 'grow' : 'jetpack',
 	attributes,
 	parent: [ 'jetpack/contact-info' ],
 	edit,

diff --git a/extensions/blocks/contact-info/email/index.js b/extensions/blocks/contact-info/email/index.js
@@ -10,6 +10,7 @@ import { Path } from '@wordpress/components';
 import edit from './edit';
 import renderMaterialIcon from '../../../shared/render-material-icon';
 import save from './save';
+import { supportsCollections } from '../../../shared/block-category';
 
 const attributes = {
 	email: {
@@ -34,7 +35,7 @@ export const settings = {
 	icon: renderMaterialIcon(
 		<Path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z" />
 	),
-	category: 'jetpack',
+	category: supportsCollections() ? 'grow' : 'jetpack',
 	attributes,
 	edit,
 	save,

diff --git a/extensions/blocks/contact-info/index.js b/extensions/blocks/contact-info/index.js
@@ -15,6 +15,7 @@ import './style.scss';
 import { name as addressName, settings as addressSettings } from './address/';
 import { name as emailName, settings as emailSettings } from './email/';
 import { name as phoneName, settings as phoneSettings } from './phone/';
+import { supportsCollections } from '../../shared/block-category';
 
 const attributes = {};
 
@@ -40,7 +41,7 @@ export const settings = {
 	icon: renderMaterialIcon(
 		<Path d="M19 5v14H5V5h14m0-2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 9c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3zm0-4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm6 10H6v-1.53c0-2.5 3.97-3.58 6-3.58s6 1.08 6 3.58V18zm-9.69-2h7.38c-.69-.56-2.38-1.12-3.69-1.12s-3.01.56-3.69 1.12z" />
 	),
-	category: 'jetpack',
+	category: supportsCollections() ? 'grow' : 'jetpack',
 	supports: {
 		align: [ 'wide', 'full' ],
 		html: false,

diff --git a/extensions/blocks/contact-info/phone/index.js b/extensions/blocks/contact-info/phone/index.js
@@ -10,6 +10,7 @@ import { Path } from '@wordpress/components';
 import edit from './edit';
 import renderMaterialIcon from '../../../shared/render-material-icon';
 import save from './save';
+import { supportsCollections } from '../../../shared/block-category';
 
 const attributes = {
 	phone: {
@@ -34,7 +35,7 @@ export const settings = {
 	icon: renderMaterialIcon(
 		<Path d="M6.54 5c.06.89.21 1.76.45 2.59l-1.2 1.2c-.41-1.2-.67-2.47-.76-3.79h1.51m9.86 12.02c.85.24 1.72.39 2.6.45v1.49c-1.32-.09-2.59-.35-3.8-.75l1.2-1.19M7.5 3H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.49c0-.55-.45-1-1-1-1.24 0-2.45-.2-3.57-.57-.1-.04-.21-.05-.31-.05-.26 0-.51.1-.71.29l-2.2 2.2c-2.83-1.45-5.15-3.76-6.59-6.59l2.2-2.2c.28-.28.36-.67.25-1.02C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1z" />
 	),
-	category: 'jetpack',
+	category: supportsCollections() ? 'grow' : 'jetpack',
 	attributes,
 	parent: [ 'jetpack/contact-info' ],
 	edit,

diff --git a/extensions/blocks/eventbrite/index.js b/extensions/blocks/eventbrite/index.js
@@ -12,6 +12,7 @@ import attributes from './attributes';
 import deprecated from './deprecated/v1';
 import edit from './edit';
 import save from './save';
+import { supportsCollections } from '../../shared/block-category';
 
 // Example URLs
 // https://www.eventbrite.com/e/test-event-tickets-123456789
@@ -43,7 +44,7 @@ export const settings = {
 	title,
 	description: __( 'Embed Eventbrite event details and ticket checkout.', 'jetpack' ),
 	icon,
-	category: 'jetpack',
+	category: supportsCollections() ? 'embed' : 'jetpack',
 	keywords: [
 		_x( 'events', 'block search term', 'jetpack' ),
 		_x( 'tickets', 'block search term', 'jetpack' ),

diff --git a/extensions/blocks/gif/index.js b/extensions/blocks/gif/index.js
@@ -12,6 +12,7 @@ import edit from './edit';
 // Ordering is important! Editor overrides style!
 import './style.scss';
 import './editor.scss';
+import { supportsCollections } from '../../shared/block-category';
 
 export const name = 'gif';
 export const title = __( 'GIF', 'jetpack' );
@@ -26,7 +27,7 @@ export const icon = (
 export const settings = {
 	title,
 	icon,
-	category: 'jetpack',
+	category: supportsCollections() ? 'embed' : 'jetpack',
 	keywords: [
 		_x( 'animated', 'block search term', 'jetpack' ),
 		_x( 'giphy', 'block search term', 'jetpack' ),

diff --git a/extensions/blocks/google-calendar/index.js b/extensions/blocks/google-calendar/index.js
@@ -11,6 +11,7 @@ import edit from './edit';
 import { extractAttributesFromIframe, URL_REGEX, IFRAME_REGEX } from './utils';
 import './editor.scss';
 import icon from './icon';
+import { supportsCollections } from '../../shared/block-category';
 
 export const name = 'google-calendar';
 export const title = __( 'Google Calendar', 'jetpack' );
@@ -25,7 +26,7 @@ export const settings = {
 		_x( 'appointments', 'block search term', 'jetpack' ),
 	],
 	icon,
-	category: 'jetpack',
+	category: supportsCollections() ? 'embed' : 'jetpack',
 	supports: {
 		align: true,
 		alignWide: true,

diff --git a/extensions/blocks/instagram-gallery/index.js b/extensions/blocks/instagram-gallery/index.js
@@ -8,14 +8,15 @@ import { __, _x } from '@wordpress/i18n';
  */
 import attributes from './attributes';
 import edit from './edit';
+import { supportsCollections } from '../../shared/block-category';
 
 export const name = 'instagram-gallery';
 
 export const settings = {
 	title: __( 'Instagram Gallery', 'jetpack' ),
 	description: __( 'Embed posts from your Instagram account', 'jetpack' ),
 	icon: 'instagram',
-	category: 'jetpack',
+	category: supportsCollections() ? 'embed' : 'jetpack',
 	keywords: [
 		_x( 'images', 'block search term', 'jetpack' ),
 		_x( 'photos', 'block search term', 'jetpack' ),

diff --git a/extensions/blocks/mailchimp/index.js b/extensions/blocks/mailchimp/index.js
@@ -9,6 +9,7 @@ import { Path, SVG } from '@wordpress/components';
  */
 import edit from './edit';
 import './editor.scss';
+import { supportsCollections } from '../../shared/block-category';
 
 export const name = 'mailchimp';
 
@@ -23,7 +24,7 @@ export const settings = {
 	title: __( 'Mailchimp', 'jetpack' ),
 	icon,
 	description: __( 'A form enabling readers to join a Mailchimp list.', 'jetpack' ),
-	category: 'jetpack',
+	category: supportsCollections() ? 'grow' : 'jetpack',
 	keywords: [
 		_x( 'email', 'block search term', 'jetpack' ),
 		_x( 'subscription', 'block search term', 'jetpack' ),

diff --git a/extensions/blocks/map/settings.js b/extensions/blocks/map/settings.js
@@ -13,6 +13,7 @@ import defaultTheme from './map-theme_default.jpg';
 import blackAndWhiteTheme from './map-theme_black_and_white.jpg';
 import satelliteTheme from './map-theme_satellite.jpg';
 import terrainTheme from './map-theme_terrain.jpg';
+import { supportsCollections } from '../../shared/block-category';
 
 export const settings = {
 	name: 'map',
@@ -33,7 +34,7 @@ export const settings = {
 			<path d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM10 5.47l4 1.4v11.66l-4-1.4V5.47zm-5 .99l3-1.01v11.7l-3 1.16V6.46zm14 11.08l-3 1.01V6.86l3-1.16v11.84z" />
 		</svg>
 	),
-	category: 'jetpack',
+	category: supportsCollections() ? 'embed' : 'jetpack',
 	keywords: [
 		_x( 'maps', 'block search term', 'jetpack' ),
 		_x( 'location', 'block search term', 'jetpack' ),

diff --git a/extensions/blocks/markdown/index.js b/extensions/blocks/markdown/index.js
@@ -12,6 +12,7 @@ import './editor.scss';
 import { isAtomicSite, isSimpleSite } from '../../shared/site-type-utils';
 import edit from './edit';
 import save from './save';
+import { supportsCollections } from '../../shared/block-category';
 
 export const name = 'markdown';
 
@@ -57,7 +58,7 @@ export const settings = {
 		</SVG>
 	),
 
-	category: 'jetpack',
+	category: supportsCollections() ? 'formatting' : 'jetpack',
 
 	keywords: [
 		_x( 'formatting', 'block search term', 'jetpack' ),

diff --git a/extensions/blocks/opentable/index.js b/extensions/blocks/opentable/index.js
@@ -20,12 +20,13 @@ import './view.scss';
 export const name = 'opentable';
 export const title = __( 'OpenTable', 'jetpack' );
 import { getAttributesFromEmbedCode, restRefRegex, ridRegex } from './utils';
+import { supportsCollections } from '../../shared/block-category';
 
 export const settings = {
 	title,
 	description: __( 'Allow visitors to book a reservation with OpenTable', 'jetpack' ),
 	icon,
-	category: 'jetpack',
+	category: supportsCollections() ? 'earn' : 'jetpack',
 	keywords: [
 		_x( 'booking', 'block search term', 'jetpack' ),
 		_x( 'reservation', 'block search term', 'jetpack' ),

diff --git a/extensions/blocks/pinterest/index.js b/extensions/blocks/pinterest/index.js
@@ -10,6 +10,7 @@ import { createBlock } from '@wordpress/blocks';
  */
 import edit from './edit';
 import { pinType } from './utils';
+import { supportsCollections } from '../../shared/block-category';
 
 export const URL_REGEX = /^\s*https?:\/\/(?:www\.)?(?:[a-z]{2}\.)?(?:pinterest\.[a-z.]+|pin\.it)\/([^/]+)(\/[^/]+)?/i;
 
@@ -34,7 +35,7 @@ export const settings = {
 
 	icon,
 
-	category: 'jetpack',
+	category: supportsCollections() ? 'embed' : 'jetpack',
 
 	keywords: [
 		_x( 'social', 'block search term', 'jetpack' ),

diff --git a/extensions/blocks/podcast-player/index.js b/extensions/blocks/podcast-player/index.js
@@ -19,6 +19,7 @@ import { queueMusic } from './icons/';
  */
 import './style.scss';
 import './editor.scss';
+import { supportsCollections } from '../../shared/block-category';
 
 export const name = 'podcast-player';
 export const namespaceName = `jetpack/${ name }`;
@@ -27,7 +28,7 @@ export const settings = {
 	title,
 	description: __( 'Select and play episodes from a single podcast.', 'jetpack' ),
 	icon: queueMusic,
-	category: 'jetpack',
+	category: supportsCollections() ? 'embed' : 'jetpack',
 	keywords: [
 		_x( 'audio', 'block search term', 'jetpack' ),
 		_x( 'embed', 'block search term', 'jetpack' ),

diff --git a/extensions/blocks/rating-star/index.js b/extensions/blocks/rating-star/index.js
@@ -11,6 +11,7 @@ import save from './save';
 import { StarIcon, StarBlockIcon } from './icon';
 import './editor.scss';
 import './style.scss';
+import { supportsCollections } from '../../shared/block-category';
 
 export const name = 'rating-star';
 
@@ -26,7 +27,7 @@ export const settings = {
 		_x( 'rating', 'block search term', 'jetpack' ),
 		_x( 'review', 'block search term', 'jetpack' ),
 	],
-	category: 'jetpack',
+	category: supportsCollections() ? 'formatting' : 'jetpack',
 	example: {},
 	styles: [
 		{

diff --git a/extensions/blocks/recurring-payments/index.js b/extensions/blocks/recurring-payments/index.js
@@ -11,6 +11,7 @@ import { trimEnd } from 'lodash';
 import { __, _x } from '@wordpress/i18n';
 import edit from './edit';
 import './editor.scss';
+import { supportsCollections } from '../../shared/block-category';
 
 export const name = 'recurring-payments';
 
@@ -27,7 +28,7 @@ export const settings = {
 	title: __( 'Recurring Payments', 'jetpack' ),
 	icon,
 	description: __( 'Button allowing you to sell subscription products.', 'jetpack' ),
-	category: 'jetpack',
+	category: supportsCollections() ? 'earn' : 'jetpack',
 	keywords: [
 		_x( 'sell', 'block search term', 'jetpack' ),
 		_x( 'subscriptions', 'block search term', 'jetpack' ),

diff --git a/extensions/blocks/related-posts/index.js b/extensions/blocks/related-posts/index.js
@@ -9,6 +9,7 @@ import { G, Path, SVG } from '@wordpress/components';
  */
 import edit from './edit';
 import './style.scss';
+import { supportsCollections } from '../../shared/block-category';
 
 export const name = 'related-posts';
 
@@ -23,7 +24,7 @@ export const settings = {
 		</SVG>
 	),
 
-	category: 'jetpack',
+	category: supportsCollections() ? 'embed' : 'jetpack',
 
 	keywords: [
 		_x( 'similar content', 'block search term', 'jetpack' ),

diff --git a/extensions/blocks/repeat-visitor/index.js b/extensions/blocks/repeat-visitor/index.js
@@ -12,6 +12,7 @@ import edit from './components/edit';
 import save from './components/save';
 import { CRITERIA_AFTER, DEFAULT_THRESHOLD } from './constants';
 import './editor.scss';
+import { supportsCollections } from '../../shared/block-category';
 
 export const name = 'repeat-visitor';
 export const icon = renderMaterialIcon(
@@ -28,7 +29,7 @@ export const settings = {
 			default: DEFAULT_THRESHOLD,
 		},
 	},
-	category: 'jetpack',
+	category: supportsCollections() ? 'widgets' : 'jetpack',
 	description: __(
 		'Control block visibility based on how often a visitor has viewed the page.',
 		'jetpack'

diff --git a/extensions/blocks/revue/index.js b/extensions/blocks/revue/index.js
@@ -9,14 +9,15 @@ import { __, _x } from '@wordpress/i18n';
 import attributes from './attributes';
 import edit from './edit';
 import icon from './icon';
+import { supportsCollections } from '../../shared/block-category';
 
 export const name = 'revue';
 
 export const settings = {
 	title: __( 'Revue', 'jetpack' ),
 	description: __( 'Add a subscription form for your Revue newsletter.', 'jetpack' ),
 	icon,
-	category: 'jetpack',
+	category: supportsCollections() ? 'grow' : 'jetpack',
 	keywords: [
 		_x( 'email', 'block search term', 'jetpack' ),
 		_x( 'subscription', 'block search term', 'jetpack' ),