(wip) Extensions: organize blocks adding new categories

extensions/blocks/amazon/index.js

@@ -30,7 +30,7 @@ export const settings = {
 	icon: renderMaterialIcon(
 		<Path d="M9 15h2V9H9v6zm1-10c-.5 0-1 .5-1 1s.5 1 1 1 1-.5 1-1-.5-1-1-1zm0-4c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 16c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z" />
 	),
-	category: 'jetpack',
+	category: 'earn',
 	keywords: [],
 	supports: {
 		// Support for block's alignment (left, center, right, wide, full). When true, it adds block controls to change block’s alignment.

extensions/blocks/business-hours/index.js

@@ -82,7 +82,7 @@ export const settings = {
 	title: __( 'Business Hours', 'jetpack' ),
 	description: __( 'Display opening hours for your business.', 'jetpack' ),
 	icon,
-	category: 'jetpack',
+	category: 'marketing',
 	supports: {
 		html: true,
 	},

extensions/blocks/calendly/index.js

@@ -23,7 +23,7 @@ export const settings = {
 	title,
 	description: __( 'Embed a calendar for customers to schedule appointments', 'jetpack' ),
 	icon,
-	category: 'jetpack',
+	category: 'marketing',
 	keywords: [
 		__( 'calendar', 'jetpack' ),
 		__( 'schedule', 'jetpack' ),

extensions/blocks/contact-form/index.js

@@ -31,7 +31,7 @@ export const settings = {
 		_x( 'feedback', 'block search term', 'jetpack' ),
 		_x( 'contact form', 'block search term', 'jetpack' ),
 	],
-	category: 'jetpack',
+	category: 'marketing',
 	supports: {
 		html: false,
 	},

extensions/blocks/contact-info/address/index.js

@@ -63,7 +63,7 @@ export const settings = {
 			<Circle cx="12" cy="9" r="2.5" />
 		</Fragment>
 	),
-	category: 'jetpack',
+	category: 'marketing',
 	attributes,
 	parent: [ 'jetpack/contact-info' ],
 	edit,

extensions/blocks/contact-info/email/index.js

@@ -34,7 +34,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: 'marketing',
 	attributes,
 	edit,
 	save,

extensions/blocks/contact-info/index.js

@@ -40,7 +40,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: 'marketing',
 	supports: {
 		align: [ 'wide', 'full' ],
 		html: false,

extensions/blocks/contact-info/phone/index.js

@@ -34,7 +34,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: 'marketing',
 	attributes,
 	parent: [ 'jetpack/contact-info' ],
 	edit,

extensions/blocks/eventbrite/index.js

@@ -40,7 +40,7 @@ export const settings = {
 	title,
 	description: __( 'Embed Eventbrite event details and ticket checkout.', 'jetpack' ),
 	icon,
-	category: 'jetpack',
+	category: 'embed',
 	keywords: [ __( 'events', 'jetpack' ), __( 'tickets', 'jetpack' ) ],
 	supports: {
 		html: false,

extensions/blocks/gif/index.js

@@ -26,7 +26,7 @@ export const icon = (
 export const settings = {
 	title,
 	icon,
-	category: 'jetpack',
+	category: 'embed',
 	keywords: [
 		_x( 'animated', 'block search term', 'jetpack' ),
 		_x( 'giphy', 'block search term', 'jetpack' ),

extensions/blocks/mailchimp/index.js

@@ -23,7 +23,7 @@ export const settings = {
 	title: __( 'Mailchimp', 'jetpack' ),
 	icon,
 	description: __( 'A form enabling readers to join a Mailchimp list.', 'jetpack' ),
-	category: 'jetpack',
+	category: 'marketing',
 	keywords: [
 		_x( 'email', 'block search term', 'jetpack' ),
 		_x( 'subscription', 'block search term', 'jetpack' ),

extensions/blocks/map/settings.js

@@ -24,7 +24,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: 'embed',
 	keywords: [
 		_x( 'map', 'block search term', 'jetpack' ),
 		_x( 'maps', 'block search term', 'jetpack' ),

extensions/blocks/markdown/index.js

@@ -57,7 +57,7 @@ export const settings = {
 		</SVG>
 	),
 
-	category: 'jetpack',
+	category: 'formatting',
 
 	keywords: [
 		_x( 'formatting', 'block search term', 'jetpack' ),

extensions/blocks/opentable/index.js

@@ -25,7 +25,7 @@ export const settings = {
 	title,
 	description: __( 'Allow visitors to book a reservation with OpenTable', 'jetpack' ),
 	icon,
-	category: 'jetpack',
+	category: 'earn',
 	keywords: [
 		__( 'opentable', 'jetpack' ),
 		__( 'reservation', 'jetpack' ),

extensions/blocks/pinterest/index.js

@@ -32,7 +32,7 @@ export const settings = {
 
 	icon,
 
-	category: 'jetpack',
+	category: 'social',
 
 	keywords: [ _x( 'social', 'block search term', 'jetpack' ) ],
 

extensions/blocks/recurring-payments/index.js

@@ -25,7 +25,7 @@ export const settings = {
 	title: __( 'Recurring Payments button', 'jetpack' ),
 	icon,
 	description: __( 'Button allowing you to sell subscription products.', 'jetpack' ),
-	category: 'jetpack',
+	category: 'earn',
 	keywords: [
 		_x( 'sell', 'block search term', 'jetpack' ),
 		_x( 'subscription', 'block search term', 'jetpack' ),

extensions/blocks/related-posts/index.js

@@ -23,7 +23,7 @@ export const settings = {
 		</SVG>
 	),
 
-	category: 'jetpack',
+	category: 'blog',
 
 	keywords: [
 		_x( 'Similar content', 'block search term', 'jetpack' ),

extensions/blocks/repeat-visitor/index.js

@@ -28,7 +28,7 @@ export const settings = {
 			default: DEFAULT_THRESHOLD,
 		},
 	},
-	category: 'jetpack',
+	category: 'widget',
 	description: __(
 		'Control block visibility based on how often a visitor has viewed the page.',
 		'jetpack'

extensions/blocks/simple-payments/index.js

@@ -42,10 +42,7 @@ export const settings = {
 				) }
 			</p>
 			<p>
-				{ __(
-					'Good for collecting donations or payments for products and services.',
-					'jetpack'
-				) }
+				{ __( 'Good for collecting donations or payments for products and services.', 'jetpack' ) }
 			</p>
 			<ExternalLink href={ supportLink }>{ __( 'Support reference', 'jetpack' ) }</ExternalLink>
 		</Fragment>
@@ -58,7 +55,7 @@ export const settings = {
 		</SVG>
 	),
 
-	category: 'jetpack',
+	category: 'earn',
 
 	keywords: [
 		_x( 'shop', 'block search term', 'jetpack' ),

extensions/blocks/slideshow/index.js

@@ -111,7 +111,7 @@ export const name = 'slideshow';
 
 export const settings = {
 	title: __( 'Slideshow', 'jetpack' ),
-	category: 'jetpack',
+	category: 'layout',
 	keywords: [
 		_x( 'image', 'block search term', 'jetpack' ),
 		_x( 'gallery', 'block search term', 'jetpack' ),

extensions/blocks/subscriptions/index.js

@@ -28,7 +28,7 @@ export const settings = {
 	icon: renderMaterialIcon(
 		<Path d="M23 16v2h-3v3h-2v-3h-3v-2h3v-3h2v3h3zM20 2v9h-4v3h-3v4H4c-1.1 0-2-.9-2-2V2h18zM8 13v-1H4v1h4zm3-3H4v1h7v-1zm0-2H4v1h7V8zm7-4H4v2h14V4z" />
 	),
-	category: 'jetpack',
+	category: 'marketing',
 
 	keywords: [
 		_x( 'subscribe', 'block search term', 'jetpack' ),

extensions/blocks/tiled-gallery/index.js

@@ -197,7 +197,7 @@ export const icon = (
 
 export const settings = {
 	attributes: blockAttributes,
-	category: 'jetpack',
+	category: 'layout',
 	description:
 		__( 'Display multiple images in an elegantly organized tiled layout.', 'jetpack' ) +
 		( ! isSimpleSite()

extensions/blocks/wordads/index.js

@@ -56,7 +56,7 @@ export const settings = {
 		attributes: {},
 	},
 
-	category: 'jetpack',
+	category: 'earn',
 
 	keywords: [ __( 'ads', 'jetpack' ), 'WordAds', __( 'Advertisement', 'jetpack' ) ],
 

extensions/shared/block-category.js

@@ -1,19 +1,44 @@
 /**
  * External dependencies
  */
+import { map, includes } from 'lodash';
 import { getCategories, setCategories } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import JetpackLogo from '../shared/jetpack-logo';
 
-setCategories( [
-	...getCategories().filter( ( { slug } ) => slug !== 'jetpack' ),
-	// Add a Jetpack block category
+/**
+ * Add custom categories, checking that the new category
+ * doesn't already exist.
+ */
+const categories = getCategories();
+const customCategories = [
 	{
 		slug: 'jetpack',
 		title: 'Jetpack',
 		icon: <JetpackLogo />,
 	},
+	{
+		slug: 'earn',
+		title: 'Earn',
+	},
+	{
+		slug: 'marketing',
+		title: 'Marketing',
+	},
+	{
+		slug: 'social',
+		title: 'Social',
+	},
+	{
+		slug: 'widget',
+		title: 'Widget',
+	},
+];
+
+setCategories( [
+	...categories,
+	...customCategories.filter( ( { slug } ) => ! includes( map( categories, 'slug' ), slug ) ),
 ] );