Try using the @wordpress/embed-block library.

Automattic · Feb 12, 2020 · b4a7f2d · b4a7f2d
1 parent 1d185ab
commit b4a7f2d
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 336 deletions.
diff --git a/extensions/blocks/pinterest/edit.js b/extensions/blocks/pinterest/edit.js
diff --git a/extensions/blocks/pinterest/index.js b/extensions/blocks/pinterest/index.js
@@ -3,20 +3,10 @@
  */
 import { __ } from '@wordpress/i18n';
 import { G, Path, Rect, SVG } from '@wordpress/components';
-import { createBlock } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import edit from './edit';
-import { pinType } from './utils';
-
-export const URL_REGEX = /^\s*https?:\/\/(?:www\.)?(?:[a-z]{2}\.)?(?:pinterest\.[a-z.]+|pin\.it)\/([^/]+)(\/[^/]+)?/i;
 
 export const name = 'pinterest';
-export const title = __( 'Pinterest', 'jetpack' );
 
-export const icon = (
+const icon = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Rect x="0" fill="none" width="24" height="24" />
 		<G>
@@ -26,60 +16,17 @@ export const icon = (
 );
 
 export const settings = {
-	title,
-
-	description: __( 'Embed a Pinterest pin, board, or user.', 'jetpack' ),
-
-	icon,
-
-	category: 'jetpack',
-
-	supports: {
-		align: false,
-		html: false,
-	},
-
-	attributes: {
-		url: {
-			type: 'string',
-		},
-	},
-
-	edit,
-
-	save: ( { attributes, className } ) => {
-		const { url } = attributes;
-
-		const type = pinType( url );
-
-		if ( ! type ) {
-			return null;
-		}
-
-		return (
-			<div className={ className }>
-				<a data-pin-do={ pinType( url ) } href={ url } />
-			</div>
-		);
-	},
-
-	transforms: {
-		from: [
-			{
-				type: 'raw',
-				isMatch: node => node.nodeName === 'P' && URL_REGEX.test( node.textContent ),
-				transform: node => {
-					return createBlock( 'jetpack/pinterest', {
-						url: node.textContent.trim(),
-					} );
-				},
+	settings: {
+		title: __( 'Pinterest', 'jetpack' ),
+		icon,
+		description: __( 'Embed a Pinterest pin, board, or user.', 'jetpack' ),
+		example: {
+			attributes: {
+				url: 'https://pinterest.com/anapinskywalker/',
 			},
-		],
-	},
-
-	example: {
-		attributes: {
-			url: 'https://pinterest.com/anapinskywalker/',
 		},
 	},
+	patterns: [
+		/^\s*https?:\/\/(?:www\.)?(?:[a-z]{2}\.)?(?:pinterest\.[a-z.]+|pin\.it)\/([^/]+)(\/[^/]+)?/i,
+	],
 };
diff --git a/extensions/blocks/pinterest/utils.js b/extensions/blocks/pinterest/utils.js
diff --git a/extensions/shared/register-jetpack-block.js b/extensions/shared/register-jetpack-block.js
@@ -3,6 +3,7 @@
  */
 import { addFilter } from '@wordpress/hooks';
 import { registerBlockType } from '@wordpress/blocks';
+import { getEmbedBlockSettings } from '@wordpress/embed-block';
 
 /**
  * Internal dependencies
@@ -44,6 +45,19 @@ export default function registerJetpackBlock( name, settings, childBlocks = [] )
 		return false;
 	}
 
+	if ( settings.settings ) {
+		settings = {
+			name: `jetpack/${ name }`,
+			...getEmbedBlockSettings( {
+				title: betaExtensions.includes( name )
+					? `${ settings.settings.title } (beta)`
+					: settings.settings.title,
+				example: requiredPlan ? undefined : settings.settings.example,
+				...settings.settings,
+			} ),
+		};
+	}
+
 	const result = registerBlockType( `jetpack/${ name }`, {
 		...settings,
 		title: betaExtensions.includes( name ) ? `${ settings.title } (beta)` : settings.title,