From 1dba135d32629facea34b06c787cf6260954c28e Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Wed, 30 Sep 2020 18:12:47 +0200 Subject: [PATCH] Blocks: Add Facebook and Instagram Embed block variations (#17192) Co-authored-by: Jeremy Herve --- extensions/editor.js | 2 +- .../extended-blocks/core-embed/facebook.js | 67 +++++++++++++++++++ .../extended-blocks/core-embed/index.js | 5 +- .../extended-blocks/core-embed/instagram.js | 67 +++++++++++++++++++ .../core-embed/{variations.js => loom.js} | 0 extensions/shared/icons.js | 2 +- extensions/shared/is-active.js | 18 +++++ 7 files changed, 157 insertions(+), 4 deletions(-) create mode 100644 extensions/extended-blocks/core-embed/facebook.js create mode 100644 extensions/extended-blocks/core-embed/instagram.js rename extensions/extended-blocks/core-embed/{variations.js => loom.js} (100%) create mode 100644 extensions/shared/is-active.js diff --git a/extensions/editor.js b/extensions/editor.js index be860d708ec16..6df7a969dc8e2 100644 --- a/extensions/editor.js +++ b/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'; diff --git a/extensions/extended-blocks/core-embed/facebook.js b/extensions/extended-blocks/core-embed/facebook.js new file mode 100644 index 0000000000000..c9eafc6689edb --- /dev/null +++ b/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 +); diff --git a/extensions/extended-blocks/core-embed/index.js b/extensions/extended-blocks/core-embed/index.js index 572a18878f206..ecc4468eaa9fe 100644 --- a/extensions/extended-blocks/core-embed/index.js +++ b/extensions/extended-blocks/core-embed/index.js @@ -1,5 +1,6 @@ - /** * Internal dependencies */ -import './variations'; +import './facebook'; +import './instagram'; +import './loom'; diff --git a/extensions/extended-blocks/core-embed/instagram.js b/extensions/extended-blocks/core-embed/instagram.js new file mode 100644 index 0000000000000..6dc700c67b87f --- /dev/null +++ b/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 +); diff --git a/extensions/extended-blocks/core-embed/variations.js b/extensions/extended-blocks/core-embed/loom.js similarity index 100% rename from extensions/extended-blocks/core-embed/variations.js rename to extensions/extended-blocks/core-embed/loom.js diff --git a/extensions/shared/icons.js b/extensions/shared/icons.js index 4d9426971329a..cd6b58742955c 100644 --- a/extensions/shared/icons.js +++ b/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 diff --git a/extensions/shared/is-active.js b/extensions/shared/is-active.js new file mode 100644 index 0000000000000..e656634bd54be --- /dev/null +++ b/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 ); +}