Blocks: Add Facebook and Instagram Embed block variations (#17192)

Co-authored-by: Jeremy Herve <[email protected]>

extensions/editor.js

@@ -6,8 +6,8 @@ import './shared/block-category';
 import './shared/plan-upgrade-notification';
 import './shared/stripe-connection-notification';
 import './shared/external-media';
-import './extended-blocks/paid-blocks';
 import './extended-blocks/core-embed';
+import './extended-blocks/paid-blocks';
 
 import analytics from '../_inc/client/lib/analytics';
 

extensions/extended-blocks/core-embed/facebook.js

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { getIconColor } from '../../shared/block-icons';
+
+const facebookVariation = {
+	name: 'facebook',
+	title: 'Facebook',
+	icon: {
+		src: 'facebook',
+		foreground: getIconColor(),
+	},
+	keywords: [ _x( 'social', 'block search term', 'jetpack' ) ],
+	description: __( 'Embed a Facebook post.', 'jetpack' ),
+	patterns: [ /^https?:\/\/www\.facebook.com\/.+/i ],
+	attributes: {
+		providerNameSlug: 'facebook',
+		previewable: false,
+		responsive: true,
+	},
+};
+
+/**
+ * Re-enable the Facebook embed block variation by making it appear in the inserter
+ * and its URL pattern parseable again.
+ *
+ * Relevant for Gutenberg >= 9.0, where the aforementioned block was deprecated*[0] because
+ * they do not support the oEmbed changes that Facebook is going to implement on Oct. 24th, 2020,
+ * and Core has currently no plans to support it.
+ *
+ * However, we do plan on keeping support for these embeds in Jetpack and WordPress.com by sending an
+ * access token alongside the oEmbed API request.
+ *
+ * Our goal is for this go unnoticed by our end-users, as this is only an implementation detail.
+ *
+ * *[0] https://github.com/WordPress/gutenberg/pull/24472.
+ *
+ * @param {object} settings - Block settings object.
+ * @param {string} name - The block name
+ * @returns {object} The settings for the given block with the patched variations.
+ */
+function reactivateFacebookEmbedBlockVariation( settings, name ) {
+	if ( name !== 'core/embed' || ! settings.variations ) {
+		return settings;
+	}
+
+	// Remove potentially existing variation.
+	const variations = settings.variations.filter(
+		variation => variation.name !== facebookVariation.name
+	);
+	// Add 'our' variation.
+	settings.variations = [ ...variations, facebookVariation ];
+
+	return settings;
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'reactivateFacebookEmbedBlockVariation',
+	reactivateFacebookEmbedBlockVariation
+);

extensions/extended-blocks/core-embed/index.js

@@ -1,5 +1,6 @@
-
 /**
  * Internal dependencies
  */
-import './variations';
+import './facebook';
+import './instagram';
+import './loom';

extensions/extended-blocks/core-embed/instagram.js

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { getIconColor } from '../../shared/block-icons';
+import isActive from '../../shared/is-active';
+
+const instagramVariation = {
+	name: 'instagram',
+	title: 'Instagram',
+	icon: {
+		src: 'instagram',
+		foreground: getIconColor(),
+	},
+	keywords: [
+		_x( 'image', 'block search term', 'jetpack' ),
+		_x( 'social', 'block search term', 'jetpack' ),
+	],
+	description: __( 'Embed an Instagram post.', 'jetpack' ),
+	patterns: [ /^https?:\/\/(www\.)?instagr(\.am|am\.com)\/.+/i ],
+	attributes: { providerNameSlug: 'instagram', responsive: true },
+};
+
+/**
+ * Re-enable the Instagram embed block variation by making it appear in the inserter
+ * and its URL pattern parseable again.
+ *
+ * Relevant for Gutenberg >= 9.0, where the aforementioned block was deprecated*[0] because
+ * they do not support the oEmbed changes that Facebook is going to implement on Oct. 24th, 2020,
+ * and Core has currently no plans to support it.
+ *
+ * However, we do plan on keeping support for these embeds in Jetpack and WordPress.com by sending an
+ * access token alongside the oEmbed API request.
+ *
+ * Our goal is for this go unnoticed by our end-users, as this is only an implementation detail.
+ *
+ * *[0] https://github.com/WordPress/gutenberg/pull/24472.
+ *
+ * @param {object} settings - Block settings object.
+ * @param {string} name - The block name
+ * @returns {object} The settings for the given block with the patched variations.
+ */
+function reactivateInstagramEmbedBlockVariation( settings, name ) {
+	if ( name !== 'core/embed' || ! settings.variations || ! isActive() ) {
+		return settings;
+	}
+
+	// Remove potentially existing variation.
+	const variations = settings.variations.filter(
+		variation => variation.name !== instagramVariation.name
+	);
+	// Add 'our' variation.
+	settings.variations = [ ...variations, instagramVariation ];
+
+	return settings;
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'reactivateInstagramEmbedBlockVariation',
+	reactivateInstagramEmbedBlockVariation
+);

extensions/shared/icons.js

@@ -9,7 +9,7 @@ import { colors as PALETTE } from '@automattic/color-studio';
  * Internal dependencies
  */
 import './icons.scss';
-import { getIconColor } from "./block-icons";
+import { getIconColor } from './block-icons';
 
 /**
  * Constants

extensions/shared/is-active.js

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import getJetpackData from './get-jetpack-data';
+
+/**
+ * Return whether Jetpack is connected to WP.com.
+ *
+ * @returns {boolean} Whether Jetpack is connected to WP.com
+ */
+export default function isActive() {
+	return get( getJetpackData(), [ 'jetpack', 'is_active' ], false );
+}