From 7dc62e76fa27a0f1357a79b0eef2e7635fc2a97f Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 20 Jul 2020 10:58:39 +0300 Subject: [PATCH 01/48] add embed variations + blocks.json --- packages/block-library/src/embed/block.json | 33 ++ .../block-library/src/embed/variations.js | 394 ++++++++++++++++++ 2 files changed, 427 insertions(+) create mode 100644 packages/block-library/src/embed/block.json create mode 100644 packages/block-library/src/embed/variations.js diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json new file mode 100644 index 0000000000000..308fdbe65a1b9 --- /dev/null +++ b/packages/block-library/src/embed/block.json @@ -0,0 +1,33 @@ +{ + "name": "core/embed", + "category": "embed", + "attributes": { + "url": { + "type": "string" + }, + "caption": { + "type": "string", + "source": "html", + "selector": "figcaption" + }, + "type": { + "type": "string" + }, + "providerNameSlug": { + "type": "string" + }, + "allowResponsive": { + "type": "boolean", + "default": true + }, + "common": { + "type": "boolean", + "default": false + } + }, + "supports": { + "align": true, + "reusable": false, + "html": false + } +} diff --git a/packages/block-library/src/embed/variations.js b/packages/block-library/src/embed/variations.js new file mode 100644 index 0000000000000..d14832946032d --- /dev/null +++ b/packages/block-library/src/embed/variations.js @@ -0,0 +1,394 @@ +/** + * WordPress dependencies + */ +import { __, _x } from '@wordpress/i18n'; +import { createBlock } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { + embedContentIcon, + embedAudioIcon, + embedPhotoIcon, + embedVideoIcon, + embedTwitterIcon, + embedYouTubeIcon, + embedFacebookIcon, + embedInstagramIcon, + embedWordPressIcon, + embedSpotifyIcon, + embedFlickrIcon, + embedVimeoIcon, + embedRedditIcon, + embedTumblrIcon, + embedAmazonIcon, + embedAnimotoIcon, + embedDailymotionIcon, +} from './icons'; + +/** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */ + +/** + * Template option choices for predefined columns layouts. + * + * @type {WPBlockVariation[]} + */ +const variations = [ + { + isDefault: true, + name: 'embed', + title: _x( 'Embed', 'block title' ), + icon: embedContentIcon, + description: __( + 'Embed videos, images, tweets, audio, and other content from external sources.' + ), + attributes: { providerNameSlug: '' }, // todo ts check this + }, + { + name: 'twitter', + title: 'Twitter', + icon: embedTwitterIcon, + keywords: [ 'tweet', __( 'social' ) ], + description: __( 'Embed a tweet.' ), + patterns: [ /^https?:\/\/(www\.)?twitter\.com\/.+/i ], // todo ts - create util for basic RegEx + common: true, + attributes: { providerNameSlug: 'twitter' }, + }, + { + name: 'youtube', + title: 'YouTube', + icon: embedYouTubeIcon, + keywords: [ __( 'music' ), __( 'video' ) ], + description: __( 'Embed a YouTube video.' ), + patterns: [ + /^https?:\/\/((m|www)\.)?youtube\.com\/.+/i, + /^https?:\/\/youtu\.be\/.+/i, + ], + common: true, + attributes: { providerNameSlug: 'youtube' }, + }, + { + name: 'facebook', + title: 'Facebook', + icon: embedFacebookIcon, + keywords: [ __( 'social' ) ], + description: __( 'Embed a Facebook post.' ), + previewable: false, + patterns: [ /^https?:\/\/www\.facebook.com\/.+/i ], + common: true, + attributes: { providerNameSlug: 'facebook' }, + }, + { + name: 'instagram', + title: 'Instagram', + icon: embedInstagramIcon, + keywords: [ __( 'image' ), __( 'social' ) ], + description: __( 'Embed an Instagram post.' ), + patterns: [ /^https?:\/\/(www\.)?instagr(\.am|am\.com)\/.+/i ], + common: true, + attributes: { providerNameSlug: 'instagram' }, + }, + { + name: 'wordpress', + title: 'WordPress', + icon: embedWordPressIcon, + keywords: [ __( 'post' ), __( 'blog' ) ], + responsive: false, + description: __( 'Embed a WordPress post.' ), + common: true, + attributes: { providerNameSlug: 'wordpress' }, + }, + { + name: 'soundcloud', + title: 'SoundCloud', + icon: embedAudioIcon, + keywords: [ __( 'music' ), __( 'audio' ) ], + description: __( 'Embed SoundCloud content.' ), + patterns: [ /^https?:\/\/(www\.)?soundcloud\.com\/.+/i ], + common: true, + attributes: { providerNameSlug: 'soundcloud' }, + }, + { + name: 'spotify', + title: 'Spotify', + icon: embedSpotifyIcon, + keywords: [ __( 'music' ), __( 'audio' ) ], + description: __( 'Embed Spotify content.' ), + patterns: [ /^https?:\/\/(open|play)\.spotify\.com\/.+/i ], + common: true, + attributes: { providerNameSlug: 'spotify' }, + }, + { + name: 'flickr', + title: 'Flickr', + icon: embedFlickrIcon, + keywords: [ __( 'image' ) ], + description: __( 'Embed Flickr content.' ), + patterns: [ + /^https?:\/\/(www\.)?flickr\.com\/.+/i, + /^https?:\/\/flic\.kr\/.+/i, + ], + common: true, + attributes: { providerNameSlug: 'flickr' }, + }, + { + name: 'vimeo', + title: 'Vimeo', + icon: embedVimeoIcon, + keywords: [ __( 'video' ) ], + description: __( 'Embed a Vimeo video.' ), + patterns: [ /^https?:\/\/(www\.)?vimeo\.com\/.+/i ], + common: true, + attributes: { providerNameSlug: 'vimeo' }, + }, + { + name: 'animoto', + title: 'Animoto', + icon: embedAnimotoIcon, + description: __( 'Embed an Animoto video.' ), + patterns: [ /^https?:\/\/(www\.)?(animoto|video214)\.com\/.+/i ], + attributes: { providerNameSlug: 'animoto' }, + }, + { + name: 'cloudup', + title: 'Cloudup', + icon: embedContentIcon, + description: __( 'Embed Cloudup content.' ), + patterns: [ /^https?:\/\/cloudup\.com\/.+/i ], + attributes: { providerNameSlug: 'cloudup' }, + }, + { + // Deprecated since CollegeHumor content is now powered by YouTube + name: 'collegehumor', + title: 'CollegeHumor', + icon: embedVideoIcon, + description: __( 'Embed CollegeHumor content.' ), + supports: { inserter: false }, + patterns: [], + attributes: { providerNameSlug: 'collegehumor' }, + }, + { + name: 'crowdsignal', + title: 'Crowdsignal', + icon: embedContentIcon, + keywords: [ 'polldaddy', __( 'survey' ) ], + transform: [ + { + type: 'block', + blocks: [ 'polldaddy' ], + transform: ( content ) => + createBlock( 'crowdsignal', { + content, + } ), + }, + ], + description: __( 'Embed Crowdsignal (formerly Polldaddy) content.' ), + patterns: [ + /^https?:\/\/((.+\.)?polldaddy\.com|poll\.fm|.+\.survey\.fm)\/.+/i, + ], + attributes: { providerNameSlug: 'crowdsignal' }, + }, + { + name: 'dailymotion', + title: 'Dailymotion', + icon: embedDailymotionIcon, + keywords: [ __( 'video' ) ], + description: __( 'Embed a Dailymotion video.' ), + patterns: [ /^https?:\/\/(www\.)?dailymotion\.com\/.+/i ], + attributes: { providerNameSlug: 'dailymotion' }, + }, + { + name: 'imgur', + title: 'Imgur', + icon: embedPhotoIcon, + description: __( 'Embed Imgur content.' ), + patterns: [ /^https?:\/\/(.+\.)?imgur\.com\/.+/i ], + attributes: { providerNameSlug: 'imgur' }, + }, + { + name: 'issuu', + title: 'Issuu', + icon: embedContentIcon, + description: __( 'Embed Issuu content.' ), + patterns: [ /^https?:\/\/(www\.)?issuu\.com\/.+/i ], + attributes: { providerNameSlug: 'issuu' }, + }, + { + name: 'kickstarter', + title: 'Kickstarter', + icon: embedContentIcon, + description: __( 'Embed Kickstarter content.' ), + patterns: [ + /^https?:\/\/(www\.)?kickstarter\.com\/.+/i, + /^https?:\/\/kck\.st\/.+/i, + ], + attributes: { providerNameSlug: 'kickstarter' }, + }, + { + name: 'meetup-com', + title: 'Meetup.com', + icon: embedContentIcon, + description: __( 'Embed Meetup.com content.' ), + patterns: [ /^https?:\/\/(www\.)?meetu(\.ps|p\.com)\/.+/i ], + attributes: { providerNameSlug: 'meetup-com' }, + }, + { + name: 'mixcloud', + title: 'Mixcloud', + icon: embedAudioIcon, + keywords: [ __( 'music' ), __( 'audio' ) ], + description: __( 'Embed Mixcloud content.' ), + patterns: [ /^https?:\/\/(www\.)?mixcloud\.com\/.+/i ], + attributes: { providerNameSlug: 'mixcloud' }, + }, + { + // Deprecated in favour of the crowdsignal block + name: 'polldaddy', + title: 'Polldaddy', + icon: embedContentIcon, + description: __( 'Embed Polldaddy content.' ), + supports: { + inserter: false, + }, + patterns: [], + attributes: { providerNameSlug: 'polldaddy' }, + }, + { + name: 'reddit', + title: 'Reddit', + icon: embedRedditIcon, + description: __( 'Embed a Reddit thread.' ), + patterns: [ /^https?:\/\/(www\.)?reddit\.com\/.+/i ], + attributes: { providerNameSlug: 'reddit' }, + }, + { + name: 'reverbnation', + title: 'ReverbNation', + icon: embedAudioIcon, + description: __( 'Embed ReverbNation content.' ), + patterns: [ /^https?:\/\/(www\.)?reverbnation\.com\/.+/i ], + attributes: { providerNameSlug: 'reverbnation' }, + }, + { + name: 'screencast', + title: 'Screencast', + icon: embedVideoIcon, + description: __( 'Embed Screencast content.' ), + patterns: [ /^https?:\/\/(www\.)?screencast\.com\/.+/i ], + attributes: { providerNameSlug: 'screencast' }, + }, + { + name: 'scribd', + title: 'Scribd', + icon: embedContentIcon, + description: __( 'Embed Scribd content.' ), + patterns: [ /^https?:\/\/(www\.)?scribd\.com\/.+/i ], + attributes: { providerNameSlug: 'scribd' }, + }, + { + name: 'slideshare', + title: 'Slideshare', + icon: embedContentIcon, + description: __( 'Embed Slideshare content.' ), + patterns: [ /^https?:\/\/(.+?\.)?slideshare\.net\/.+/i ], + attributes: { providerNameSlug: 'slideshare' }, + }, + { + name: 'smugmug', + title: 'SmugMug', + icon: embedPhotoIcon, + description: __( 'Embed SmugMug content.' ), + previewable: false, + patterns: [ /^https?:\/\/(.+\.)?smugmug\.com\/.*/i ], + attributes: { providerNameSlug: 'smugmug' }, + }, + { + // Deprecated in favour of the speaker-deck block. + name: 'speaker', + title: 'Speaker', + icon: embedAudioIcon, + supports: { + inserter: false, + }, + patterns: [], + attributes: { providerNameSlug: 'speaker' }, + }, + { + name: 'speaker-deck', + title: 'Speaker Deck', + icon: embedContentIcon, + transform: [ + { + type: 'block', + blocks: [ 'speaker' ], + transform: ( content ) => { + return createBlock( 'speaker-deck', { + content, + } ); + }, + }, + ], + description: __( 'Embed Speaker Deck content.' ), + patterns: [ /^https?:\/\/(www\.)?speakerdeck\.com\/.+/i ], + attributes: { providerNameSlug: 'speaker-deck' }, + }, + { + name: 'tiktok', + title: 'TikTok', + icon: embedVideoIcon, + keywords: [ __( 'video' ) ], + description: __( 'Embed a TikTok video.' ), + patterns: [ /^https?:\/\/(www\.)?tiktok\.com\/.+/i ], + attributes: { providerNameSlug: 'tiktok' }, + }, + { + name: 'ted', + title: 'TED', + icon: embedVideoIcon, + description: __( 'Embed a TED video.' ), + patterns: [ /^https?:\/\/(www\.|embed\.)?ted\.com\/.+/i ], + attributes: { providerNameSlug: 'ted' }, + }, + { + name: 'tumblr', + title: 'Tumblr', + icon: embedTumblrIcon, + keywords: [ __( 'social' ) ], + description: __( 'Embed a Tumblr post.' ), + patterns: [ /^https?:\/\/(www\.)?tumblr\.com\/.+/i ], + attributes: { providerNameSlug: 'tumblr' }, + }, + { + name: 'videopress', + title: 'VideoPress', + icon: embedVideoIcon, + keywords: [ __( 'video' ) ], + description: __( 'Embed a VideoPress video.' ), + patterns: [ /^https?:\/\/videopress\.com\/.+/i ], + attributes: { providerNameSlug: 'videopress' }, + }, + { + name: 'wordpress-tv', + title: 'WordPress.tv', + icon: embedVideoIcon, + description: __( 'Embed a WordPress.tv video.' ), + patterns: [ /^https?:\/\/wordpress\.tv\/.+/i ], + attributes: { providerNameSlug: 'wordpress-tv' }, + }, + { + name: 'amazon-kindle', + title: 'Amazon Kindle', + icon: embedAmazonIcon, + keywords: [ __( 'ebook' ) ], + responsive: false, + description: __( 'Embed Amazon Kindle content.' ), + patterns: [ + /^https?:\/\/([a-z0-9-]+\.)?(amazon|amzn)(\.[a-z]{2,4})+\/.+/i, + /^https?:\/\/(www\.)?(a\.co|z\.cn)\/.+/i, + ], + attributes: { providerNameSlug: 'amazon-kindle' }, + }, +]; + +export default variations; From 3f9c058b03feff5dd4706109b3472c762400e9e0 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 20 Jul 2020 10:59:36 +0300 Subject: [PATCH 02/48] remove core-embeds --- .../block-library/src/embed/core-embeds.js | 408 ------------------ packages/block-library/src/index.js | 2 - packages/block-library/src/index.native.js | 2 - 3 files changed, 412 deletions(-) delete mode 100644 packages/block-library/src/embed/core-embeds.js diff --git a/packages/block-library/src/embed/core-embeds.js b/packages/block-library/src/embed/core-embeds.js deleted file mode 100644 index e03ded6d0dbf6..0000000000000 --- a/packages/block-library/src/embed/core-embeds.js +++ /dev/null @@ -1,408 +0,0 @@ -/** - * Internal dependencies - */ -import { - embedContentIcon, - embedAudioIcon, - embedPhotoIcon, - embedVideoIcon, - embedTwitterIcon, - embedYouTubeIcon, - embedFacebookIcon, - embedInstagramIcon, - embedWordPressIcon, - embedSpotifyIcon, - embedFlickrIcon, - embedVimeoIcon, - embedRedditIcon, - embedTumblrIcon, - embedAmazonIcon, - embedAnimotoIcon, - embedDailymotionIcon, -} from './icons'; - -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { createBlock } from '@wordpress/blocks'; - -export const common = [ - { - name: 'core-embed/twitter', - settings: { - title: 'Twitter', - icon: embedTwitterIcon, - keywords: [ 'tweet', __( 'social' ) ], - description: __( 'Embed a tweet.' ), - }, - patterns: [ /^https?:\/\/(www\.)?twitter\.com\/.+/i ], - }, - { - name: 'core-embed/youtube', - settings: { - title: 'YouTube', - icon: embedYouTubeIcon, - keywords: [ __( 'music' ), __( 'video' ) ], - description: __( 'Embed a YouTube video.' ), - }, - patterns: [ - /^https?:\/\/((m|www)\.)?youtube\.com\/.+/i, - /^https?:\/\/youtu\.be\/.+/i, - ], - }, - { - name: 'core-embed/facebook', - settings: { - title: 'Facebook', - icon: embedFacebookIcon, - keywords: [ __( 'social' ) ], - description: __( 'Embed a Facebook post.' ), - previewable: false, - }, - patterns: [ /^https?:\/\/www\.facebook.com\/.+/i ], - }, - { - name: 'core-embed/instagram', - settings: { - title: 'Instagram', - icon: embedInstagramIcon, - keywords: [ __( 'image' ), __( 'social' ) ], - description: __( 'Embed an Instagram post.' ), - }, - patterns: [ /^https?:\/\/(www\.)?instagr(\.am|am\.com)\/.+/i ], - }, - { - name: 'core-embed/wordpress', - settings: { - title: 'WordPress', - icon: embedWordPressIcon, - keywords: [ __( 'post' ), __( 'blog' ) ], - responsive: false, - description: __( 'Embed a WordPress post.' ), - }, - }, - { - name: 'core-embed/soundcloud', - settings: { - title: 'SoundCloud', - icon: embedAudioIcon, - keywords: [ __( 'music' ), __( 'audio' ) ], - description: __( 'Embed SoundCloud content.' ), - }, - patterns: [ /^https?:\/\/(www\.)?soundcloud\.com\/.+/i ], - }, - { - name: 'core-embed/spotify', - settings: { - title: 'Spotify', - icon: embedSpotifyIcon, - keywords: [ __( 'music' ), __( 'audio' ) ], - description: __( 'Embed Spotify content.' ), - }, - patterns: [ /^https?:\/\/(open|play)\.spotify\.com\/.+/i ], - }, - { - name: 'core-embed/flickr', - settings: { - title: 'Flickr', - icon: embedFlickrIcon, - keywords: [ __( 'image' ) ], - description: __( 'Embed Flickr content.' ), - }, - patterns: [ - /^https?:\/\/(www\.)?flickr\.com\/.+/i, - /^https?:\/\/flic\.kr\/.+/i, - ], - }, - { - name: 'core-embed/vimeo', - settings: { - title: 'Vimeo', - icon: embedVimeoIcon, - keywords: [ __( 'video' ) ], - description: __( 'Embed a Vimeo video.' ), - }, - patterns: [ /^https?:\/\/(www\.)?vimeo\.com\/.+/i ], - }, -]; - -export const others = [ - { - name: 'core-embed/animoto', - settings: { - title: 'Animoto', - icon: embedAnimotoIcon, - description: __( 'Embed an Animoto video.' ), - }, - patterns: [ /^https?:\/\/(www\.)?(animoto|video214)\.com\/.+/i ], - }, - { - name: 'core-embed/cloudup', - settings: { - title: 'Cloudup', - icon: embedContentIcon, - description: __( 'Embed Cloudup content.' ), - }, - patterns: [ /^https?:\/\/cloudup\.com\/.+/i ], - }, - { - // Deprecated since CollegeHumor content is now powered by YouTube - name: 'core-embed/collegehumor', - settings: { - title: 'CollegeHumor', - icon: embedVideoIcon, - description: __( 'Embed CollegeHumor content.' ), - supports: { - inserter: false, - }, - }, - patterns: [], - }, - { - name: 'core-embed/crowdsignal', - settings: { - title: 'Crowdsignal', - icon: embedContentIcon, - keywords: [ 'polldaddy', __( 'survey' ) ], - transform: [ - { - type: 'block', - blocks: [ 'core-embed/polldaddy' ], - transform: ( content ) => { - return createBlock( 'core-embed/crowdsignal', { - content, - } ); - }, - }, - ], - description: __( - 'Embed Crowdsignal (formerly Polldaddy) content.' - ), - }, - patterns: [ - /^https?:\/\/((.+\.)?polldaddy\.com|poll\.fm|.+\.survey\.fm)\/.+/i, - ], - }, - { - name: 'core-embed/dailymotion', - settings: { - title: 'Dailymotion', - icon: embedDailymotionIcon, - keywords: [ __( 'video' ) ], - description: __( 'Embed a Dailymotion video.' ), - }, - patterns: [ /^https?:\/\/(www\.)?dailymotion\.com\/.+/i ], - }, - { - name: 'core-embed/imgur', - settings: { - title: 'Imgur', - icon: embedPhotoIcon, - description: __( 'Embed Imgur content.' ), - }, - patterns: [ /^https?:\/\/(.+\.)?imgur\.com\/.+/i ], - }, - { - name: 'core-embed/issuu', - settings: { - title: 'Issuu', - icon: embedContentIcon, - description: __( 'Embed Issuu content.' ), - }, - patterns: [ /^https?:\/\/(www\.)?issuu\.com\/.+/i ], - }, - { - name: 'core-embed/kickstarter', - settings: { - title: 'Kickstarter', - icon: embedContentIcon, - description: __( 'Embed Kickstarter content.' ), - }, - patterns: [ - /^https?:\/\/(www\.)?kickstarter\.com\/.+/i, - /^https?:\/\/kck\.st\/.+/i, - ], - }, - { - name: 'core-embed/meetup-com', - settings: { - title: 'Meetup.com', - icon: embedContentIcon, - description: __( 'Embed Meetup.com content.' ), - }, - patterns: [ /^https?:\/\/(www\.)?meetu(\.ps|p\.com)\/.+/i ], - }, - { - name: 'core-embed/mixcloud', - settings: { - title: 'Mixcloud', - icon: embedAudioIcon, - keywords: [ __( 'music' ), __( 'audio' ) ], - description: __( 'Embed Mixcloud content.' ), - }, - patterns: [ /^https?:\/\/(www\.)?mixcloud\.com\/.+/i ], - }, - { - // Deprecated in favour of the core-embed/crowdsignal block - name: 'core-embed/polldaddy', - settings: { - title: 'Polldaddy', - icon: embedContentIcon, - description: __( 'Embed Polldaddy content.' ), - supports: { - inserter: false, - }, - }, - patterns: [], - }, - { - name: 'core-embed/reddit', - settings: { - title: 'Reddit', - icon: embedRedditIcon, - description: __( 'Embed a Reddit thread.' ), - }, - patterns: [ /^https?:\/\/(www\.)?reddit\.com\/.+/i ], - }, - { - name: 'core-embed/reverbnation', - settings: { - title: 'ReverbNation', - icon: embedAudioIcon, - description: __( 'Embed ReverbNation content.' ), - }, - patterns: [ /^https?:\/\/(www\.)?reverbnation\.com\/.+/i ], - }, - { - name: 'core-embed/screencast', - settings: { - title: 'Screencast', - icon: embedVideoIcon, - description: __( 'Embed Screencast content.' ), - }, - patterns: [ /^https?:\/\/(www\.)?screencast\.com\/.+/i ], - }, - { - name: 'core-embed/scribd', - settings: { - title: 'Scribd', - icon: embedContentIcon, - description: __( 'Embed Scribd content.' ), - }, - patterns: [ /^https?:\/\/(www\.)?scribd\.com\/.+/i ], - }, - { - name: 'core-embed/slideshare', - settings: { - title: 'Slideshare', - icon: embedContentIcon, - description: __( 'Embed Slideshare content.' ), - }, - patterns: [ /^https?:\/\/(.+?\.)?slideshare\.net\/.+/i ], - }, - { - name: 'core-embed/smugmug', - settings: { - title: 'SmugMug', - icon: embedPhotoIcon, - description: __( 'Embed SmugMug content.' ), - previewable: false, - }, - patterns: [ /^https?:\/\/(.+\.)?smugmug\.com\/.*/i ], - }, - { - // Deprecated in favour of the core-embed/speaker-deck block. - name: 'core-embed/speaker', - settings: { - title: 'Speaker', - icon: embedAudioIcon, - supports: { - inserter: false, - }, - }, - patterns: [], - }, - { - name: 'core-embed/speaker-deck', - settings: { - title: 'Speaker Deck', - icon: embedContentIcon, - transform: [ - { - type: 'block', - blocks: [ 'core-embed/speaker' ], - transform: ( content ) => { - return createBlock( 'core-embed/speaker-deck', { - content, - } ); - }, - }, - ], - description: __( 'Embed Speaker Deck content.' ), - }, - patterns: [ /^https?:\/\/(www\.)?speakerdeck\.com\/.+/i ], - }, - { - name: 'core-embed/tiktok', - settings: { - title: 'TikTok', - icon: embedVideoIcon, - keywords: [ __( 'video' ) ], - description: __( 'Embed a TikTok video.' ), - }, - patterns: [ /^https?:\/\/(www\.)?tiktok\.com\/.+/i ], - }, - { - name: 'core-embed/ted', - settings: { - title: 'TED', - icon: embedVideoIcon, - description: __( 'Embed a TED video.' ), - }, - patterns: [ /^https?:\/\/(www\.|embed\.)?ted\.com\/.+/i ], - }, - { - name: 'core-embed/tumblr', - settings: { - title: 'Tumblr', - icon: embedTumblrIcon, - keywords: [ __( 'social' ) ], - description: __( 'Embed a Tumblr post.' ), - }, - patterns: [ /^https?:\/\/(www\.)?tumblr\.com\/.+/i ], - }, - { - name: 'core-embed/videopress', - settings: { - title: 'VideoPress', - icon: embedVideoIcon, - keywords: [ __( 'video' ) ], - description: __( 'Embed a VideoPress video.' ), - }, - patterns: [ /^https?:\/\/videopress\.com\/.+/i ], - }, - { - name: 'core-embed/wordpress-tv', - settings: { - title: 'WordPress.tv', - icon: embedVideoIcon, - description: __( 'Embed a WordPress.tv video.' ), - }, - patterns: [ /^https?:\/\/wordpress\.tv\/.+/i ], - }, - { - name: 'core-embed/amazon-kindle', - settings: { - title: 'Amazon Kindle', - icon: embedAmazonIcon, - keywords: [ __( 'ebook' ) ], - responsive: false, - description: __( 'Embed Amazon Kindle content.' ), - }, - patterns: [ - /^https?:\/\/([a-z0-9-]+\.)?(amazon|amzn)(\.[a-z]{2,4})+\/.+/i, - /^https?:\/\/(www\.)?(a\.co|z\.cn)\/.+/i, - ], - }, -]; diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index c962c8172dec6..d92ab8f3a0542 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -134,8 +134,6 @@ export const registerCoreBlocks = () => { column, cover, embed, - ...embed.common, - ...embed.others, file, group, window.wp && window.wp.oldEditor ? classic : null, // Only add the classic block in WP Context diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js index f06eb84359035..9405fe952a53c 100644 --- a/packages/block-library/src/index.native.js +++ b/packages/block-library/src/index.native.js @@ -86,8 +86,6 @@ export const coreBlocks = [ column, cover, embed, - ...embed.common, - ...embed.others, file, html, mediaText, From c9071fa596341ead78740c90e02ee7fe4bee0a2f Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 20 Jul 2020 11:11:57 +0300 Subject: [PATCH 03/48] minor refactorings --- .../block-library/src/embed/embed-controls.js | 81 +++++++++---------- .../src/embed/embed-placeholder.js | 21 +++-- 2 files changed, 49 insertions(+), 53 deletions(-) diff --git a/packages/block-library/src/embed/embed-controls.js b/packages/block-library/src/embed/embed-controls.js index eb98bf4f120be..5d2c6c85f7bdb 100644 --- a/packages/block-library/src/embed/embed-controls.js +++ b/packages/block-library/src/embed/embed-controls.js @@ -11,47 +11,44 @@ import { import { BlockControls, InspectorControls } from '@wordpress/block-editor'; import { pencil } from '@wordpress/icons'; -const EmbedControls = ( props ) => { - const { - blockSupportsResponsive, - showEditButton, - themeSupportsResponsive, - allowResponsive, - getResponsiveHelp, - toggleResponsive, - switchBackToURLInput, - } = props; - return ( - <> - - - { showEditButton && ( - - ) } - - - { themeSupportsResponsive && blockSupportsResponsive && ( - - - - - - ) } - - ); -}; +const EmbedControls = ( { + blockSupportsResponsive, + showEditButton, + themeSupportsResponsive, + allowResponsive, + getResponsiveHelp, + toggleResponsive, + switchBackToURLInput, +} ) => ( + <> + + + { showEditButton && ( + + ) } + + + { themeSupportsResponsive && blockSupportsResponsive && ( + + + + + + ) } + +); export default EmbedControls; diff --git a/packages/block-library/src/embed/embed-placeholder.js b/packages/block-library/src/embed/embed-placeholder.js index bb418f487c4f7..f12f23eee4c73 100644 --- a/packages/block-library/src/embed/embed-placeholder.js +++ b/packages/block-library/src/embed/embed-placeholder.js @@ -5,17 +5,16 @@ import { __, _x } from '@wordpress/i18n'; import { Button, Placeholder, ExternalLink } from '@wordpress/components'; import { BlockIcon } from '@wordpress/block-editor'; -const EmbedPlaceholder = ( props ) => { - const { - icon, - label, - value, - onSubmit, - onChange, - cannotEmbed, - fallback, - tryAgain, - } = props; +const EmbedPlaceholder = ( { + icon, + label, + value, + onSubmit, + onChange, + cannotEmbed, + fallback, + tryAgain, +} ) => { return ( } From 878db03ecedde7e0f1a61241a19c268274c70a57 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 20 Jul 2020 13:27:53 +0300 Subject: [PATCH 04/48] add block attributes --- packages/block-library/src/embed/block.json | 8 ++++ .../block-library/src/embed/variations.js | 43 ++++++++----------- 2 files changed, 27 insertions(+), 24 deletions(-) diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json index 308fdbe65a1b9..d31afb79925bd 100644 --- a/packages/block-library/src/embed/block.json +++ b/packages/block-library/src/embed/block.json @@ -20,6 +20,14 @@ "type": "boolean", "default": true }, + "responsive": { + "type": "boolean", + "default": true + }, + "previewable": { + "type": "boolean", + "defautl": true + }, "common": { "type": "boolean", "default": false diff --git a/packages/block-library/src/embed/variations.js b/packages/block-library/src/embed/variations.js index d14832946032d..93303fef7d45f 100644 --- a/packages/block-library/src/embed/variations.js +++ b/packages/block-library/src/embed/variations.js @@ -52,8 +52,7 @@ const variations = [ keywords: [ 'tweet', __( 'social' ) ], description: __( 'Embed a tweet.' ), patterns: [ /^https?:\/\/(www\.)?twitter\.com\/.+/i ], // todo ts - create util for basic RegEx - common: true, - attributes: { providerNameSlug: 'twitter' }, + attributes: { providerNameSlug: 'twitter', common: true }, }, { name: 'youtube', @@ -65,8 +64,7 @@ const variations = [ /^https?:\/\/((m|www)\.)?youtube\.com\/.+/i, /^https?:\/\/youtu\.be\/.+/i, ], - common: true, - attributes: { providerNameSlug: 'youtube' }, + attributes: { providerNameSlug: 'youtube', common: true }, }, { name: 'facebook', @@ -74,10 +72,12 @@ const variations = [ icon: embedFacebookIcon, keywords: [ __( 'social' ) ], description: __( 'Embed a Facebook post.' ), - previewable: false, patterns: [ /^https?:\/\/www\.facebook.com\/.+/i ], - common: true, - attributes: { providerNameSlug: 'facebook' }, + attributes: { + providerNameSlug: 'facebook', + previewable: false, + common: true, + }, }, { name: 'instagram', @@ -86,18 +86,19 @@ const variations = [ keywords: [ __( 'image' ), __( 'social' ) ], description: __( 'Embed an Instagram post.' ), patterns: [ /^https?:\/\/(www\.)?instagr(\.am|am\.com)\/.+/i ], - common: true, - attributes: { providerNameSlug: 'instagram' }, + attributes: { providerNameSlug: 'instagram', common: true }, }, { name: 'wordpress', title: 'WordPress', icon: embedWordPressIcon, keywords: [ __( 'post' ), __( 'blog' ) ], - responsive: false, description: __( 'Embed a WordPress post.' ), - common: true, - attributes: { providerNameSlug: 'wordpress' }, + attributes: { + providerNameSlug: 'wordpress', + responsive: false, + common: true, + }, }, { name: 'soundcloud', @@ -106,8 +107,7 @@ const variations = [ keywords: [ __( 'music' ), __( 'audio' ) ], description: __( 'Embed SoundCloud content.' ), patterns: [ /^https?:\/\/(www\.)?soundcloud\.com\/.+/i ], - common: true, - attributes: { providerNameSlug: 'soundcloud' }, + attributes: { providerNameSlug: 'soundcloud', common: true }, }, { name: 'spotify', @@ -116,8 +116,7 @@ const variations = [ keywords: [ __( 'music' ), __( 'audio' ) ], description: __( 'Embed Spotify content.' ), patterns: [ /^https?:\/\/(open|play)\.spotify\.com\/.+/i ], - common: true, - attributes: { providerNameSlug: 'spotify' }, + attributes: { providerNameSlug: 'spotify', common: true }, }, { name: 'flickr', @@ -129,8 +128,7 @@ const variations = [ /^https?:\/\/(www\.)?flickr\.com\/.+/i, /^https?:\/\/flic\.kr\/.+/i, ], - common: true, - attributes: { providerNameSlug: 'flickr' }, + attributes: { providerNameSlug: 'flickr', common: true }, }, { name: 'vimeo', @@ -139,8 +137,7 @@ const variations = [ keywords: [ __( 'video' ) ], description: __( 'Embed a Vimeo video.' ), patterns: [ /^https?:\/\/(www\.)?vimeo\.com\/.+/i ], - common: true, - attributes: { providerNameSlug: 'vimeo' }, + attributes: { providerNameSlug: 'vimeo', common: true }, }, { name: 'animoto', @@ -299,9 +296,8 @@ const variations = [ title: 'SmugMug', icon: embedPhotoIcon, description: __( 'Embed SmugMug content.' ), - previewable: false, patterns: [ /^https?:\/\/(.+\.)?smugmug\.com\/.*/i ], - attributes: { providerNameSlug: 'smugmug' }, + attributes: { providerNameSlug: 'smugmug', previewable: false }, }, { // Deprecated in favour of the speaker-deck block. @@ -381,13 +377,12 @@ const variations = [ title: 'Amazon Kindle', icon: embedAmazonIcon, keywords: [ __( 'ebook' ) ], - responsive: false, description: __( 'Embed Amazon Kindle content.' ), patterns: [ /^https?:\/\/([a-z0-9-]+\.)?(amazon|amzn)(\.[a-z]{2,4})+\/.+/i, /^https?:\/\/(www\.)?(a\.co|z\.cn)\/.+/i, ], - attributes: { providerNameSlug: 'amazon-kindle' }, + attributes: { providerNameSlug: 'amazon-kindle', responsive: false }, }, ]; From ad8c2a637b492c793fd3a9809a0231734fb63200 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 20 Jul 2020 13:28:56 +0300 Subject: [PATCH 05/48] add deprecated + save files --- .../block-library/src/embed/deprecated.js | 48 +++++++++++++++++++ packages/block-library/src/embed/save.js | 33 +++++++++++++ 2 files changed, 81 insertions(+) create mode 100644 packages/block-library/src/embed/deprecated.js create mode 100644 packages/block-library/src/embed/save.js diff --git a/packages/block-library/src/embed/deprecated.js b/packages/block-library/src/embed/deprecated.js new file mode 100644 index 0000000000000..7199dfacb4b46 --- /dev/null +++ b/packages/block-library/src/embed/deprecated.js @@ -0,0 +1,48 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; + +/** + * WordPress dependencies + */ +import { RichText } from '@wordpress/block-editor'; + +const { attributes: blockAttributes } = metadata; + +const deprecated = [ + { + attributes: blockAttributes, + save( { attributes } ) { + const { url, caption, type, providerNameSlug } = attributes; + + if ( ! url ) { + return null; + } + + const embedClassName = classnames( 'wp-block-embed', { + [ `is-type-${ type }` ]: type, + [ `is-provider-${ providerNameSlug }` ]: providerNameSlug, + } ); + + return ( +
+ { `\n${ url }\n` /* URL needs to be on its own line. */ } + { ! RichText.isEmpty( caption ) && ( + + ) } +
+ ); + }, + }, +]; + +export default deprecated; diff --git a/packages/block-library/src/embed/save.js b/packages/block-library/src/embed/save.js new file mode 100644 index 0000000000000..2816e3e9c0f93 --- /dev/null +++ b/packages/block-library/src/embed/save.js @@ -0,0 +1,33 @@ +/** + * External dependencies + */ +import classnames from 'classnames/dedupe'; + +/** + * WordPress dependencies + */ +import { RichText } from '@wordpress/block-editor'; + +export default function save( { attributes } ) { + const { url, caption, type, providerNameSlug } = attributes; + + if ( ! url ) { + return null; + } + + const embedClassName = classnames( 'wp-block-embed', { + [ `is-type-${ type }` ]: type, + [ `is-provider-${ providerNameSlug }` ]: providerNameSlug, + } ); + + return ( +
+
+ { `\n${ url }\n` /* URL needs to be on its own line. */ } +
+ { ! RichText.isEmpty( caption ) && ( + + ) } +
+ ); +} From 300e31052e9840ff10f9ba0fe6f8e6b81c42ab1d Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 20 Jul 2020 13:31:22 +0300 Subject: [PATCH 06/48] remove settings file and change utils --- packages/block-library/src/embed/settings.js | 186 ------------------- packages/block-library/src/embed/util.js | 78 ++++---- 2 files changed, 47 insertions(+), 217 deletions(-) delete mode 100644 packages/block-library/src/embed/settings.js diff --git a/packages/block-library/src/embed/settings.js b/packages/block-library/src/embed/settings.js deleted file mode 100644 index 86c928623df4d..0000000000000 --- a/packages/block-library/src/embed/settings.js +++ /dev/null @@ -1,186 +0,0 @@ -/** - * Internal dependencies - */ -import { getEmbedEditComponent } from './edit'; - -/** - * External dependencies - */ -import classnames from 'classnames/dedupe'; - -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { compose } from '@wordpress/compose'; -import { RichText } from '@wordpress/block-editor'; -import { withSelect, withDispatch } from '@wordpress/data'; - -const embedAttributes = { - url: { - type: 'string', - }, - caption: { - type: 'string', - source: 'html', - selector: 'figcaption', - }, - type: { - type: 'string', - }, - providerNameSlug: { - type: 'string', - }, - allowResponsive: { - type: 'boolean', - default: true, - }, -}; - -export function getEmbedBlockSettings( { - title, - description, - icon, - category = 'embed', - transforms, - keywords = [], - supports = {}, - responsive = true, - previewable = true, -} ) { - const blockDescription = - description || - __( - 'Add a block that displays content pulled from other sites, like Twitter, Instagram or YouTube.' - ); - const edit = getEmbedEditComponent( title, icon, responsive, previewable ); - return { - title, - description: blockDescription, - icon, - category, - keywords, - attributes: embedAttributes, - - supports: { - align: true, - ...supports, - }, - - transforms, - - edit: compose( - withSelect( ( select, ownProps ) => { - const { url } = ownProps.attributes; - const core = select( 'core' ); - const { - getEmbedPreview, - isPreviewEmbedFallback, - isRequestingEmbedPreview, - getThemeSupports, - } = core; - const preview = undefined !== url && getEmbedPreview( url ); - const previewIsFallback = - undefined !== url && isPreviewEmbedFallback( url ); - const fetching = - undefined !== url && isRequestingEmbedPreview( url ); - const themeSupports = getThemeSupports(); - // The external oEmbed provider does not exist. We got no type info and no html. - const badEmbedProvider = - !! preview && - undefined === preview.type && - false === preview.html; - // Some WordPress URLs that can't be embedded will cause the API to return - // a valid JSON response with no HTML and `data.status` set to 404, rather - // than generating a fallback response as other embeds do. - const wordpressCantEmbed = - !! preview && preview.data && preview.data.status === 404; - const validPreview = - !! preview && ! badEmbedProvider && ! wordpressCantEmbed; - const cannotEmbed = - undefined !== url && - ( ! validPreview || previewIsFallback ); - return { - preview: validPreview ? preview : undefined, - fetching, - themeSupportsResponsive: - themeSupports[ 'responsive-embeds' ], - cannotEmbed, - }; - } ), - withDispatch( ( dispatch, ownProps ) => { - const { url } = ownProps.attributes; - const coreData = dispatch( 'core/data' ); - const tryAgain = () => { - coreData.invalidateResolution( 'core', 'getEmbedPreview', [ - url, - ] ); - }; - return { - tryAgain, - }; - } ) - )( edit ), - - save( { attributes } ) { - const { url, caption, type, providerNameSlug } = attributes; - - if ( ! url ) { - return null; - } - - const embedClassName = classnames( 'wp-block-embed', { - [ `is-type-${ type }` ]: type, - [ `is-provider-${ providerNameSlug }` ]: providerNameSlug, - } ); - - return ( -
-
- { - `\n${ url }\n` /* URL needs to be on its own line. */ - } -
- { ! RichText.isEmpty( caption ) && ( - - ) } -
- ); - }, - - deprecated: [ - { - attributes: embedAttributes, - save( { attributes } ) { - const { url, caption, type, providerNameSlug } = attributes; - - if ( ! url ) { - return null; - } - - const embedClassName = classnames( 'wp-block-embed', { - [ `is-type-${ type }` ]: type, - [ `is-provider-${ providerNameSlug }` ]: providerNameSlug, - } ); - - return ( -
- { - `\n${ url }\n` /* URL needs to be on its own line. */ - } - { ! RichText.isEmpty( caption ) && ( - - ) } -
- ); - }, - }, - ], - }; -} diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js index 071eee0980b6f..5cc505be84050 100644 --- a/packages/block-library/src/embed/util.js +++ b/packages/block-library/src/embed/util.js @@ -1,7 +1,6 @@ /** * Internal dependencies */ -import { common, others } from './core-embeds'; import { DEFAULT_EMBED_BLOCK, WORDPRESS_EMBED_BLOCK, @@ -11,7 +10,7 @@ import { /** * External dependencies */ -import { includes, kebabCase, toLower } from 'lodash'; +import { kebabCase } from 'lodash'; import classnames from 'classnames/dedupe'; import memoize from 'memize'; @@ -20,6 +19,26 @@ import memoize from 'memize'; */ import { renderToString } from '@wordpress/element'; import { createBlock, getBlockType } from '@wordpress/blocks'; +import { _x } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import variations from './variations'; +import { embedContentIcon } from './icons'; + +// todo ts jsdoc +// todo ts tests +export const getEmbedInfoByProvider = ( provider ) => { + const defaultEmbedInfo = { + title: _x( 'Embed', 'block title' ), + icon: embedContentIcon, + }; + const { title, icon } = + variations.find( ( { name } ) => name === provider ) || + defaultEmbedInfo; + return { title, icon }; +}; /** * Returns true if any of the regular expressions match the URL. @@ -28,11 +47,8 @@ import { createBlock, getBlockType } from '@wordpress/blocks'; * @param {Array} patterns The list of regular expressions to test agains. * @return {boolean} True if any of the regular expressions match the URL. */ -export const matchesPatterns = ( url, patterns = [] ) => { - return patterns.some( ( pattern ) => { - return url.match( pattern ); - } ); -}; +export const matchesPatterns = ( url, patterns = [] ) => + patterns.some( ( pattern ) => url.match( pattern ) ); /** * Finds the block name that should be used for the URL, based on the @@ -42,7 +58,7 @@ export const matchesPatterns = ( url, patterns = [] ) => { * @return {string} The name of the block that should be used for this URL, e.g. core-embed/twitter */ export const findBlock = ( url ) => { - for ( const block of [ ...common, ...others ] ) { + for ( const block of variations ) { if ( matchesPatterns( url, block.patterns ) ) { return block.name; } @@ -50,14 +66,13 @@ export const findBlock = ( url ) => { return DEFAULT_EMBED_BLOCK; }; -export const isFromWordPress = ( html ) => { - return includes( html, 'class="wp-embedded-content"' ); -}; +export const isFromWordPress = ( html ) => + html.includes( 'class="wp-embedded-content"' ); export const getPhotoHtml = ( photo ) => { // 100% width for the preview so it fits nicely into the document, some "thumbnails" are // actually the full size photo. If thumbnails not found, use full image. - const imageUrl = photo.thumbnail_url ? photo.thumbnail_url : photo.url; + const imageUrl = photo.thumbnail_url || photo.url; const photoPreview = (

{ @@ -106,25 +121,26 @@ export const createUpgradedEmbedBlock = ( props, attributesFromPreview ) => { } } - if ( preview ) { - const { html } = preview; + if ( ! preview ) { + return; + } - // We can't match the URL for WordPress embeds, we have to check the HTML instead. - if ( isFromWordPress( html ) ) { - // If this is not the WordPress embed block, transform it into one. - if ( WORDPRESS_EMBED_BLOCK !== name ) { - return createBlock( WORDPRESS_EMBED_BLOCK, { - url, - // By now we have the preview, but when the new block first renders, it - // won't have had all the attributes set, and so won't get the correct - // type and it won't render correctly. So, we pass through the current attributes - // here so that the initial render works when we switch to the WordPress - // block. This only affects the WordPress block because it can't be - // rendered in the usual Sandbox (it has a sandbox of its own) and it - // relies on the preview to set the correct render type. - ...attributesFromPreview, - } ); - } + const { html } = preview; + // We can't match the URL for WordPress embeds, we have to check the HTML instead. + if ( isFromWordPress( html ) ) { + // If this is not the WordPress embed block, transform it into one. + if ( WORDPRESS_EMBED_BLOCK !== name ) { + return createBlock( WORDPRESS_EMBED_BLOCK, { + url, + // By now we have the preview, but when the new block first renders, it + // won't have had all the attributes set, and so won't get the correct + // type and it won't render correctly. So, we pass through the current attributes + // here so that the initial render works when we switch to the WordPress + // block. This only affects the WordPress block because it can't be + // rendered in the usual Sandbox (it has a sandbox of its own) and it + // relies on the preview to set the correct render type. + ...attributesFromPreview, + } ); } } }; @@ -227,7 +243,7 @@ export const getAttributesFromPreview = memoize( // because not all embed code gives us a provider name. const { html, provider_name: providerName } = preview; const providerNameSlug = kebabCase( - toLower( '' !== providerName ? providerName : title ) + ( providerName ?? title ).toLowerCase() ); if ( isFromWordPress( html ) ) { From 0b07b316352112a7938c8bf119f82fb20ac36461 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 20 Jul 2020 13:34:26 +0300 Subject: [PATCH 07/48] index + edit draft --- packages/block-library/src/embed/edit.js | 361 ++++++++++++---------- packages/block-library/src/embed/index.js | 46 +-- 2 files changed, 215 insertions(+), 192 deletions(-) diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index 7156b155ede8b..e3e6159aab8b6 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -6,6 +6,7 @@ import { getClassNames, fallback, getAttributesFromPreview, + getEmbedInfoByProvider, } from './util'; import EmbedControls from './embed-controls'; import EmbedLoading from './embed-loading'; @@ -22,6 +23,8 @@ import classnames from 'classnames'; */ import { __, sprintf } from '@wordpress/i18n'; import { useState, useEffect } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; +import { withSelect, withDispatch } from '@wordpress/data'; function getResponsiveHelp( checked ) { return checked @@ -33,181 +36,217 @@ function getResponsiveHelp( checked ) { ); } -export function getEmbedEditComponent( - title, - icon, - responsive = true, - previewable = true -) { - return function EmbedEditComponent( props ) { - const { - attributes, - cannotEmbed, - fetching, - isSelected, - onReplace, - preview, - setAttributes, - themeSupportsResponsive, - tryAgain, - insertBlocksAfter, - } = props; - - const [ url, setURL ] = useState( attributes.url ); - const [ isEditingURL, setIsEditingURL ] = useState( false ); - - /** - * @return {Object} Attributes derived from the preview, merged with the current attributes. - */ - const getMergedAttributes = () => { - const { className, allowResponsive } = attributes; - return { - ...attributes, - ...getAttributesFromPreview( - preview, - title, - className, - responsive, - allowResponsive - ), - }; - }; - - const handleIncomingPreview = () => { - setAttributes( getMergedAttributes() ); - if ( onReplace ) { - const upgradedBlock = createUpgradedEmbedBlock( - props, - getMergedAttributes() - ); - - if ( upgradedBlock ) { - onReplace( upgradedBlock ); - } - } +const EmbedEdit = ( props ) => { + const { + // todo check if I need to set defaults since are in block.json + attributes: { providerNameSlug, previewable = true, responsive = true }, + attributes, + cannotEmbed, + fetching, + isSelected, + onReplace, + preview, + setAttributes, + themeSupportsResponsive, + tryAgain, + insertBlocksAfter, + } = props; + + const { icon, title } = getEmbedInfoByProvider( providerNameSlug ); + const [ url, setURL ] = useState( attributes.url ); + const [ isEditingURL, setIsEditingURL ] = useState( false ); + + /** + * @return {Object} Attributes derived from the preview, merged with the current attributes. + */ + const getMergedAttributes = () => { + return { + ...attributes, + ...getAttributesFromPreview( + preview, + title, + className, + responsive, + allowResponsive + ), }; + }; - const toggleResponsive = () => { - const { allowResponsive, className } = attributes; - const { html } = preview; - const newAllowResponsive = ! allowResponsive; - - setAttributes( { - allowResponsive: newAllowResponsive, - className: getClassNames( - html, - className, - responsive && newAllowResponsive - ), - } ); - }; + const handleIncomingPreview = () => { + setAttributes( getMergedAttributes() ); + if ( onReplace ) { + const upgradedBlock = createUpgradedEmbedBlock( + props, + getMergedAttributes() + ); - useEffect( () => { - if ( ! preview?.html ) { - return; + if ( upgradedBlock ) { + onReplace( upgradedBlock ); } + } + }; - // If we can embed the url, bail early. - if ( ! cannotEmbed ) { - return; - } + const toggleResponsive = () => { + const { html } = preview; + const newAllowResponsive = ! allowResponsive; + + setAttributes( { + allowResponsive: newAllowResponsive, + className: getClassNames( + html, + attributes.className, + responsive && newAllowResponsive + ), + } ); + }; - // At this stage, we either have a new preview or a new URL, but we can't embed it. - // If we are already fetching the preview, bail early. - if ( fetching ) { - return; - } + useEffect( () => { + if ( ! preview?.html ) { + return; + } - // At this stage, we're not fetching the preview, so we know it can't be embedded, so try - // removing any trailing slash, and resubmit. - const newURL = attributes.url.replace( /\/$/, '' ); - setURL( newURL ); - setIsEditingURL( false ); - setAttributes( { url: newURL } ); - }, [ preview?.html, attributes.url ] ); - - useEffect( () => { - if ( preview && ! isEditingURL ) { - handleIncomingPreview(); - } - }, [ preview, isEditingURL ] ); + // If we can embed the url, bail early. + if ( ! cannotEmbed ) { + return; + } + // At this stage, we either have a new preview or a new URL, but we can't embed it. + // If we are already fetching the preview, bail early. if ( fetching ) { - return ; + return; } - // translators: %s: type of embed e.g: "YouTube", "Twitter", etc. "Embed" is used when no specific type exists - const label = sprintf( __( '%s URL' ), title ); - - // No preview, or we can't embed the current URL, or we've clicked the edit button. - if ( ! preview || cannotEmbed || isEditingURL ) { - return ( - { - if ( event ) { - event.preventDefault(); - } - - setIsEditingURL( false ); - setAttributes( { url } ); - } } - value={ url } - cannotEmbed={ cannotEmbed } - onChange={ ( event ) => setURL( event.target.value ) } - fallback={ () => fallback( url, onReplace ) } - tryAgain={ tryAgain } - /> - ); + // At this stage, we're not fetching the preview, so we know it can't be embedded, so try + // removing any trailing slash, and resubmit. + const newURL = attributes.url.replace( /\/$/, '' ); + setURL( newURL ); + setIsEditingURL( false ); + setAttributes( { url: newURL } ); + }, [ preview?.html, attributes.url ] ); + + useEffect( () => { + if ( preview && ! isEditingURL ) { + handleIncomingPreview(); } + }, [ preview, isEditingURL ] ); - // Even though we set attributes that get derived from the preview, - // we don't access them directly because for the initial render, - // the `setAttributes` call will not have taken effect. If we're - // rendering responsive content, setting the responsive classes - // after the preview has been rendered can result in unwanted - // clipping or scrollbars. The `getAttributesFromPreview` function - // that `getMergedAttributes` uses is memoized so that we're not - // calculating them on every render. - const previewAttributes = getMergedAttributes( - props, - title, - responsive - ); - const { caption, type, allowResponsive } = previewAttributes; - const className = classnames( - previewAttributes.className, - props.className - ); + if ( fetching ) { + return ; + } + // translators: %s: type of embed e.g: "YouTube", "Twitter", etc. "Embed" is used when no specific type exists + const label = sprintf( __( '%s URL' ), title ); + + // No preview, or we can't embed the current URL, or we've clicked the edit button. + if ( ! preview || cannotEmbed || isEditingURL ) { return ( - <> - setIsEditingURL( true ) } - /> - - setAttributes( { caption: value } ) + { + if ( event ) { + event.preventDefault(); } - isSelected={ isSelected } - icon={ icon } - label={ label } - insertBlocksAfter={ insertBlocksAfter } - /> - + + setIsEditingURL( false ); + setAttributes( { url } ); + } } + value={ url } + cannotEmbed={ cannotEmbed } + onChange={ ( event ) => setURL( event.target.value ) } + fallback={ () => fallback( url, onReplace ) } + tryAgain={ tryAgain } + /> ); - }; -} + } + + // Even though we set attributes that get derived from the preview, + // we don't access them directly because for the initial render, + // the `setAttributes` call will not have taken effect. If we're + // rendering responsive content, setting the responsive classes + // after the preview has been rendered can result in unwanted + // clipping or scrollbars. The `getAttributesFromPreview` function + // that `getMergedAttributes` uses is memoized so that we're not + // calculating them on every render. + const previewAttributes = getMergedAttributes( props, title, responsive ); + const { caption, type, allowResponsive } = previewAttributes; + const className = classnames( + previewAttributes.className, + props.className + ); + + return ( + <> + setIsEditingURL( true ) } + /> + + setAttributes( { caption: value } ) + } + isSelected={ isSelected } + icon={ icon } + label={ label } + insertBlocksAfter={ insertBlocksAfter } + /> + + ); +}; + +export default compose( + withSelect( ( select, ownProps ) => { + const { url } = ownProps.attributes; + const core = select( 'core' ); + const { + getEmbedPreview, + isPreviewEmbedFallback, + isRequestingEmbedPreview, + getThemeSupports, + } = core; + const preview = undefined !== url && getEmbedPreview( url ); + const previewIsFallback = + undefined !== url && isPreviewEmbedFallback( url ); + const fetching = undefined !== url && isRequestingEmbedPreview( url ); + const themeSupports = getThemeSupports(); + // The external oEmbed provider does not exist. We got no type info and no html. + const badEmbedProvider = + !! preview && undefined === preview.type && false === preview.html; + // Some WordPress URLs that can't be embedded will cause the API to return + // a valid JSON response with no HTML and `data.status` set to 404, rather + // than generating a fallback response as other embeds do. + const wordpressCantEmbed = + !! preview && preview.data && preview.data.status === 404; + const validPreview = + !! preview && ! badEmbedProvider && ! wordpressCantEmbed; + const cannotEmbed = + undefined !== url && ( ! validPreview || previewIsFallback ); + return { + preview: validPreview ? preview : undefined, + fetching, + themeSupportsResponsive: themeSupports[ 'responsive-embeds' ], + cannotEmbed, + }; + } ), + withDispatch( ( dispatch, ownProps ) => { + const { url } = ownProps.attributes; + const coreData = dispatch( 'core/data' ); + const tryAgain = () => { + coreData.invalidateResolution( 'core', 'getEmbedPreview', [ url ] ); + }; + return { + tryAgain, + }; + } ) +)( EmbedEdit ); diff --git a/packages/block-library/src/embed/index.js b/packages/block-library/src/embed/index.js index 76cb6e86e8828..f9452b3f94e08 100644 --- a/packages/block-library/src/embed/index.js +++ b/packages/block-library/src/embed/index.js @@ -1,47 +1,31 @@ /** * Internal dependencies */ -import { common as commonEmbeds, others as otherEmbeds } from './core-embeds'; -import { embedContentIcon } from './icons'; -import { getEmbedBlockSettings } from './settings'; +import edit from './edit'; +// import save from './save'; +import metadata from './block.json'; import transforms from './transforms'; +import variations from './variations'; +import deprecated from './deprecated'; /** * WordPress dependencies */ import { __, _x } from '@wordpress/i18n'; -export const name = 'core/embed'; +const { name } = metadata; +export { metadata, name }; -export const settings = getEmbedBlockSettings( { +export const settings = { title: _x( 'Embed', 'block title' ), description: __( - 'Embed videos, images, tweets, audio, and other content from external sources.' + 'Add a block that displays content pulled from other sites, like Twitter, Instagram or YouTube.' ), - icon: embedContentIcon, + edit, + // save, // Unknown embeds should not be responsive by default. - responsive: false, + responsive: false, // todo ts check this... transforms, -} ); - -export const common = commonEmbeds.map( ( embedDefinition ) => { - const embedSettings = getEmbedBlockSettings( embedDefinition.settings ); - return { - ...embedDefinition, - settings: { - ...embedSettings, - transforms, - }, - }; -} ); - -export const others = otherEmbeds.map( ( embedDefinition ) => { - const embedSettings = getEmbedBlockSettings( embedDefinition.settings ); - return { - ...embedDefinition, - settings: { - ...embedSettings, - transforms, - }, - }; -} ); + variations, + deprecated, +}; From 128bccc02cebcd88f50d5d2987d168d6fc3a2e59 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 20 Jul 2020 13:51:02 +0300 Subject: [PATCH 08/48] add responsive false to unknown embeds --- packages/block-library/src/embed/index.js | 2 -- packages/block-library/src/embed/variations.js | 3 ++- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/embed/index.js b/packages/block-library/src/embed/index.js index f9452b3f94e08..1f0dc6b2c9b94 100644 --- a/packages/block-library/src/embed/index.js +++ b/packages/block-library/src/embed/index.js @@ -23,8 +23,6 @@ export const settings = { ), edit, // save, - // Unknown embeds should not be responsive by default. - responsive: false, // todo ts check this... transforms, variations, deprecated, diff --git a/packages/block-library/src/embed/variations.js b/packages/block-library/src/embed/variations.js index 93303fef7d45f..da89f576c5884 100644 --- a/packages/block-library/src/embed/variations.js +++ b/packages/block-library/src/embed/variations.js @@ -43,7 +43,8 @@ const variations = [ description: __( 'Embed videos, images, tweets, audio, and other content from external sources.' ), - attributes: { providerNameSlug: '' }, // todo ts check this + // Unknown embeds should not be responsive by default. + attributes: { responsive: false }, }, { name: 'twitter', From e90de91044afd0337a58808c37286528c77a7b35 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 20 Jul 2020 16:35:17 +0300 Subject: [PATCH 09/48] add save function --- packages/block-library/src/embed/deprecated.js | 4 +--- packages/block-library/src/embed/edit.js | 1 + packages/block-library/src/embed/index.js | 4 ++-- packages/block-library/src/embed/util.js | 4 ++-- packages/block-library/src/embed/variations.js | 3 ++- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/embed/deprecated.js b/packages/block-library/src/embed/deprecated.js index 7199dfacb4b46..7673943c70e6a 100644 --- a/packages/block-library/src/embed/deprecated.js +++ b/packages/block-library/src/embed/deprecated.js @@ -18,9 +18,7 @@ const { attributes: blockAttributes } = metadata; const deprecated = [ { attributes: blockAttributes, - save( { attributes } ) { - const { url, caption, type, providerNameSlug } = attributes; - + save( { attributes: { url, caption, type, providerNameSlug } } ) { if ( ! url ) { return null; } diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index e3e6159aab8b6..5493d12a9811b 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -123,6 +123,7 @@ const EmbedEdit = ( props ) => { setIsEditingURL( false ); setAttributes( { url: newURL } ); }, [ preview?.html, attributes.url ] ); + // TODO if we need above attributes as dependecies for useEffect ( cannotEmbed, fetchin etc..) useEffect( () => { if ( preview && ! isEditingURL ) { diff --git a/packages/block-library/src/embed/index.js b/packages/block-library/src/embed/index.js index 1f0dc6b2c9b94..af492ee387446 100644 --- a/packages/block-library/src/embed/index.js +++ b/packages/block-library/src/embed/index.js @@ -2,7 +2,7 @@ * Internal dependencies */ import edit from './edit'; -// import save from './save'; +import save from './save'; import metadata from './block.json'; import transforms from './transforms'; import variations from './variations'; @@ -22,7 +22,7 @@ export const settings = { 'Add a block that displays content pulled from other sites, like Twitter, Instagram or YouTube.' ), edit, - // save, + save, transforms, variations, deprecated, diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js index 5cc505be84050..a572b267f4781 100644 --- a/packages/block-library/src/embed/util.js +++ b/packages/block-library/src/embed/util.js @@ -27,8 +27,8 @@ import { _x } from '@wordpress/i18n'; import variations from './variations'; import { embedContentIcon } from './icons'; -// todo ts jsdoc -// todo ts tests +// TODO jsdoc +// TODO tests export const getEmbedInfoByProvider = ( provider ) => { const defaultEmbedInfo = { title: _x( 'Embed', 'block title' ), diff --git a/packages/block-library/src/embed/variations.js b/packages/block-library/src/embed/variations.js index da89f576c5884..38cc2984a7977 100644 --- a/packages/block-library/src/embed/variations.js +++ b/packages/block-library/src/embed/variations.js @@ -52,7 +52,8 @@ const variations = [ icon: embedTwitterIcon, keywords: [ 'tweet', __( 'social' ) ], description: __( 'Embed a tweet.' ), - patterns: [ /^https?:\/\/(www\.)?twitter\.com\/.+/i ], // todo ts - create util for basic RegEx + patterns: [ /^https?:\/\/(www\.)?twitter\.com\/.+/i ], + // TODO - create util for basic RegEx attributes: { providerNameSlug: 'twitter', common: true }, }, { From 1d32d561c124c70ad81b319e7302ca141f0e0cc0 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 20 Jul 2020 18:21:36 +0300 Subject: [PATCH 10/48] get className from attributes --- packages/block-library/src/embed/block.json | 2 +- packages/block-library/src/embed/constants.js | 1 + packages/block-library/src/embed/edit.js | 9 ++++----- post-content.php | 1 + 4 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json index d31afb79925bd..b3245f2cb1070 100644 --- a/packages/block-library/src/embed/block.json +++ b/packages/block-library/src/embed/block.json @@ -26,7 +26,7 @@ }, "previewable": { "type": "boolean", - "defautl": true + "default": true }, "common": { "type": "boolean", diff --git a/packages/block-library/src/embed/constants.js b/packages/block-library/src/embed/constants.js index 24ef9ccd40c9c..10a84613cb6dd 100644 --- a/packages/block-library/src/embed/constants.js +++ b/packages/block-library/src/embed/constants.js @@ -12,3 +12,4 @@ export const ASPECT_RATIOS = [ export const DEFAULT_EMBED_BLOCK = 'core/embed'; export const WORDPRESS_EMBED_BLOCK = 'core-embed/wordpress'; +// TODO check about above WP block diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index 5493d12a9811b..a5bb665595fe6 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -38,8 +38,7 @@ function getResponsiveHelp( checked ) { const EmbedEdit = ( props ) => { const { - // todo check if I need to set defaults since are in block.json - attributes: { providerNameSlug, previewable = true, responsive = true }, + attributes: { providerNameSlug, previewable, responsive }, attributes, cannotEmbed, fetching, @@ -60,6 +59,7 @@ const EmbedEdit = ( props ) => { * @return {Object} Attributes derived from the preview, merged with the current attributes. */ const getMergedAttributes = () => { + const { className, allowResponsive } = attributes; return { ...attributes, ...getAttributesFromPreview( @@ -169,7 +169,7 @@ const EmbedEdit = ( props ) => { // clipping or scrollbars. The `getAttributesFromPreview` function // that `getMergedAttributes` uses is memoized so that we're not // calculating them on every render. - const previewAttributes = getMergedAttributes( props, title, responsive ); + const previewAttributes = getMergedAttributes(); const { caption, type, allowResponsive } = previewAttributes; const className = classnames( previewAttributes.className, @@ -209,13 +209,12 @@ const EmbedEdit = ( props ) => { export default compose( withSelect( ( select, ownProps ) => { const { url } = ownProps.attributes; - const core = select( 'core' ); const { getEmbedPreview, isPreviewEmbedFallback, isRequestingEmbedPreview, getThemeSupports, - } = core; + } = select( 'core' ); const preview = undefined !== url && getEmbedPreview( url ); const previewIsFallback = undefined !== url && isPreviewEmbedFallback( url ); diff --git a/post-content.php b/post-content.php index f286c181f5dbb..da1cd54d60a40 100644 --- a/post-content.php +++ b/post-content.php @@ -145,6 +145,7 @@

+// TODO change all previous references of core-embed...
https://vimeo.com/22439234 From 0235c38984f383773aeb9a70a6bbbd85e7c11d9c Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 21 Jul 2020 13:49:16 +0300 Subject: [PATCH 11/48] use `useSelect` and `useDispatch` hooks --- packages/block-library/src/embed/edit.js | 132 ++++++++---------- packages/block-library/src/embed/util.js | 21 +-- .../block-library/src/embed/variations.js | 17 ++- 3 files changed, 82 insertions(+), 88 deletions(-) diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index a5bb665595fe6..424053d204c20 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -23,8 +23,7 @@ import classnames from 'classnames'; */ import { __, sprintf } from '@wordpress/i18n'; import { useState, useEffect } from '@wordpress/element'; -import { compose } from '@wordpress/compose'; -import { withSelect, withDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; function getResponsiveHelp( checked ) { return checked @@ -38,26 +37,71 @@ function getResponsiveHelp( checked ) { const EmbedEdit = ( props ) => { const { - attributes: { providerNameSlug, previewable, responsive }, + attributes: { + providerNameSlug, + previewable, + responsive, + url: attributesUrl, + }, attributes, - cannotEmbed, - fetching, isSelected, onReplace, - preview, setAttributes, - themeSupportsResponsive, - tryAgain, insertBlocksAfter, } = props; const { icon, title } = getEmbedInfoByProvider( providerNameSlug ); - const [ url, setURL ] = useState( attributes.url ); + const [ url, setURL ] = useState( attributesUrl ); const [ isEditingURL, setIsEditingURL ] = useState( false ); + const { invalidateResolution } = useDispatch( 'core/data' ); + + const { + preview, + fetching, + themeSupportsResponsive, + cannotEmbed, + } = useSelect( + ( select ) => { + const { + getEmbedPreview, + isPreviewEmbedFallback, + isRequestingEmbedPreview, + getThemeSupports, + } = select( 'core' ); + if ( attributesUrl === undefined ) { + // TODO check if url is also empty... ?? + return { fetching: false, cannotEmbed: true }; + } + + const embedPreview = getEmbedPreview( attributesUrl ); + const previewIsFallback = isPreviewEmbedFallback( attributesUrl ); + + // The external oEmbed provider does not exist. We got no type info and no html. + const badEmbedProvider = + embedPreview?.html === false && + embedPreview?.type === undefined; + // Some WordPress URLs that can't be embedded will cause the API to return + // a valid JSON response with no HTML and `data.status` set to 404, rather + // than generating a fallback response as other embeds do. + const wordpressCantEmbed = embedPreview?.data?.status === 404; + const validPreview = + !! embedPreview && ! badEmbedProvider && ! wordpressCantEmbed; + return { + preview: validPreview ? embedPreview : undefined, + fetching: isRequestingEmbedPreview( attributesUrl ), + themeSupportsResponsive: getThemeSupports()[ + 'responsive-embeds' + ], + cannotEmbed: ! validPreview || previewIsFallback, + }; + }, + [ attributes.url ] + ); /** * @return {Object} Attributes derived from the preview, merged with the current attributes. */ + // TODO maybe use `useCallback` ?? const getMergedAttributes = () => { const { className, allowResponsive } = attributes; return { @@ -101,28 +145,16 @@ const EmbedEdit = ( props ) => { }; useEffect( () => { - if ( ! preview?.html ) { + if ( ! preview?.html || ! cannotEmbed || fetching ) { return; } - - // If we can embed the url, bail early. - if ( ! cannotEmbed ) { - return; - } - - // At this stage, we either have a new preview or a new URL, but we can't embed it. - // If we are already fetching the preview, bail early. - if ( fetching ) { - return; - } - // At this stage, we're not fetching the preview, so we know it can't be embedded, so try // removing any trailing slash, and resubmit. - const newURL = attributes.url.replace( /\/$/, '' ); + const newURL = attributesUrl.replace( /\/$/, '' ); setURL( newURL ); setIsEditingURL( false ); setAttributes( { url: newURL } ); - }, [ preview?.html, attributes.url ] ); + }, [ preview?.html, attributesUrl ] ); // TODO if we need above attributes as dependecies for useEffect ( cannotEmbed, fetchin etc..) useEffect( () => { @@ -139,7 +171,8 @@ const EmbedEdit = ( props ) => { const label = sprintf( __( '%s URL' ), title ); // No preview, or we can't embed the current URL, or we've clicked the edit button. - if ( ! preview || cannotEmbed || isEditingURL ) { + const showEmbedPlacholder = ! preview || cannotEmbed || isEditingURL; + if ( showEmbedPlacholder ) { return ( { cannotEmbed={ cannotEmbed } onChange={ ( event ) => setURL( event.target.value ) } fallback={ () => fallback( url, onReplace ) } - tryAgain={ tryAgain } + tryAgain={ () => { + invalidateResolution( 'core', 'getEmbedPreview', [ url ] ); + } } /> ); } @@ -206,47 +241,4 @@ const EmbedEdit = ( props ) => { ); }; -export default compose( - withSelect( ( select, ownProps ) => { - const { url } = ownProps.attributes; - const { - getEmbedPreview, - isPreviewEmbedFallback, - isRequestingEmbedPreview, - getThemeSupports, - } = select( 'core' ); - const preview = undefined !== url && getEmbedPreview( url ); - const previewIsFallback = - undefined !== url && isPreviewEmbedFallback( url ); - const fetching = undefined !== url && isRequestingEmbedPreview( url ); - const themeSupports = getThemeSupports(); - // The external oEmbed provider does not exist. We got no type info and no html. - const badEmbedProvider = - !! preview && undefined === preview.type && false === preview.html; - // Some WordPress URLs that can't be embedded will cause the API to return - // a valid JSON response with no HTML and `data.status` set to 404, rather - // than generating a fallback response as other embeds do. - const wordpressCantEmbed = - !! preview && preview.data && preview.data.status === 404; - const validPreview = - !! preview && ! badEmbedProvider && ! wordpressCantEmbed; - const cannotEmbed = - undefined !== url && ( ! validPreview || previewIsFallback ); - return { - preview: validPreview ? preview : undefined, - fetching, - themeSupportsResponsive: themeSupports[ 'responsive-embeds' ], - cannotEmbed, - }; - } ), - withDispatch( ( dispatch, ownProps ) => { - const { url } = ownProps.attributes; - const coreData = dispatch( 'core/data' ); - const tryAgain = () => { - coreData.invalidateResolution( 'core', 'getEmbedPreview', [ url ] ); - }; - return { - tryAgain, - }; - } ) -)( EmbedEdit ); +export default EmbedEdit; diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js index a572b267f4781..b95e27af2e060 100644 --- a/packages/block-library/src/embed/util.js +++ b/packages/block-library/src/embed/util.js @@ -58,12 +58,11 @@ export const matchesPatterns = ( url, patterns = [] ) => * @return {string} The name of the block that should be used for this URL, e.g. core-embed/twitter */ export const findBlock = ( url ) => { - for ( const block of variations ) { - if ( matchesPatterns( url, block.patterns ) ) { - return block.name; - } - } - return DEFAULT_EMBED_BLOCK; + const match = variations.some( ( { patterns } ) => + matchesPatterns( url, patterns ) + ); + return match?.name || DEFAULT_EMBED_BLOCK; + // TODO check if get by selector }; export const isFromWordPress = ( html ) => @@ -96,8 +95,11 @@ export const getPhotoHtml = ( photo ) => { * @return {Object|undefined} A more suitable embed block if one exists. */ export const createUpgradedEmbedBlock = ( props, attributesFromPreview ) => { - const { preview, name } = props; - const { url } = props.attributes; + const { + preview, + name, + attributes: { url }, + } = props; if ( ! url ) { return; @@ -108,7 +110,7 @@ export const createUpgradedEmbedBlock = ( props, attributesFromPreview ) => { if ( ! getBlockType( matchingBlock ) ) { return; } - + // TODO check for WP block by provider // WordPress blocks can work on multiple sites, and so don't have patterns, // so if we're in a WordPress block, assume the user has chosen it for a WordPress URL. if ( @@ -117,6 +119,7 @@ export const createUpgradedEmbedBlock = ( props, attributesFromPreview ) => { ) { // At this point, we have discovered a more suitable block for this url, so transform it. if ( name !== matchingBlock ) { + // TODO maybe pass here more attributes, like provider?? return createBlock( matchingBlock, { url } ); } } diff --git a/packages/block-library/src/embed/variations.js b/packages/block-library/src/embed/variations.js index 38cc2984a7977..55d6ea0467f96 100644 --- a/packages/block-library/src/embed/variations.js +++ b/packages/block-library/src/embed/variations.js @@ -44,6 +44,7 @@ const variations = [ 'Embed videos, images, tweets, audio, and other content from external sources.' ), // Unknown embeds should not be responsive by default. + // TODO check when transforms to other embed by pattern... attributes: { responsive: false }, }, { @@ -54,7 +55,7 @@ const variations = [ description: __( 'Embed a tweet.' ), patterns: [ /^https?:\/\/(www\.)?twitter\.com\/.+/i ], // TODO - create util for basic RegEx - attributes: { providerNameSlug: 'twitter', common: true }, + attributes: { providerNameSlug: 'twitter' }, }, { name: 'youtube', @@ -66,7 +67,7 @@ const variations = [ /^https?:\/\/((m|www)\.)?youtube\.com\/.+/i, /^https?:\/\/youtu\.be\/.+/i, ], - attributes: { providerNameSlug: 'youtube', common: true }, + attributes: { providerNameSlug: 'youtube' }, }, { name: 'facebook', @@ -78,7 +79,6 @@ const variations = [ attributes: { providerNameSlug: 'facebook', previewable: false, - common: true, }, }, { @@ -88,7 +88,7 @@ const variations = [ keywords: [ __( 'image' ), __( 'social' ) ], description: __( 'Embed an Instagram post.' ), patterns: [ /^https?:\/\/(www\.)?instagr(\.am|am\.com)\/.+/i ], - attributes: { providerNameSlug: 'instagram', common: true }, + attributes: { providerNameSlug: 'instagram' }, }, { name: 'wordpress', @@ -99,7 +99,6 @@ const variations = [ attributes: { providerNameSlug: 'wordpress', responsive: false, - common: true, }, }, { @@ -109,7 +108,7 @@ const variations = [ keywords: [ __( 'music' ), __( 'audio' ) ], description: __( 'Embed SoundCloud content.' ), patterns: [ /^https?:\/\/(www\.)?soundcloud\.com\/.+/i ], - attributes: { providerNameSlug: 'soundcloud', common: true }, + attributes: { providerNameSlug: 'soundcloud' }, }, { name: 'spotify', @@ -118,7 +117,7 @@ const variations = [ keywords: [ __( 'music' ), __( 'audio' ) ], description: __( 'Embed Spotify content.' ), patterns: [ /^https?:\/\/(open|play)\.spotify\.com\/.+/i ], - attributes: { providerNameSlug: 'spotify', common: true }, + attributes: { providerNameSlug: 'spotify' }, }, { name: 'flickr', @@ -130,7 +129,7 @@ const variations = [ /^https?:\/\/(www\.)?flickr\.com\/.+/i, /^https?:\/\/flic\.kr\/.+/i, ], - attributes: { providerNameSlug: 'flickr', common: true }, + attributes: { providerNameSlug: 'flickr' }, }, { name: 'vimeo', @@ -139,7 +138,7 @@ const variations = [ keywords: [ __( 'video' ) ], description: __( 'Embed a Vimeo video.' ), patterns: [ /^https?:\/\/(www\.)?vimeo\.com\/.+/i ], - attributes: { providerNameSlug: 'vimeo', common: true }, + attributes: { providerNameSlug: 'vimeo' }, }, { name: 'animoto', From 4108e667ce64135cd67cf4ff22ebcd96e42d0534 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 21 Jul 2020 15:48:43 +0300 Subject: [PATCH 12/48] remove common prop from attributes --- packages/block-library/src/embed/block.json | 4 ---- packages/block-library/src/embed/edit.js | 19 ++++++++++++------- packages/block-library/src/embed/util.js | 2 +- 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json index b3245f2cb1070..1d7e604747ef7 100644 --- a/packages/block-library/src/embed/block.json +++ b/packages/block-library/src/embed/block.json @@ -27,10 +27,6 @@ "previewable": { "type": "boolean", "default": true - }, - "common": { - "type": "boolean", - "default": false } }, "supports": { diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index 424053d204c20..f6716dc80fa62 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -41,6 +41,8 @@ const EmbedEdit = ( props ) => { providerNameSlug, previewable, responsive, + allowResponsive, + caption, url: attributesUrl, }, attributes, @@ -53,6 +55,7 @@ const EmbedEdit = ( props ) => { const { icon, title } = getEmbedInfoByProvider( providerNameSlug ); const [ url, setURL ] = useState( attributesUrl ); const [ isEditingURL, setIsEditingURL ] = useState( false ); + // const [ mergedAttributes, setMergedAttributes ] = useState( attributes ); const { invalidateResolution } = useDispatch( 'core/data' ); const { @@ -101,9 +104,9 @@ const EmbedEdit = ( props ) => { /** * @return {Object} Attributes derived from the preview, merged with the current attributes. */ - // TODO maybe use `useCallback` ?? + // TODO maybe use `useCallback` ?? or even better useMemo // or state? with mergedAttributes? const getMergedAttributes = () => { - const { className, allowResponsive } = attributes; + const { className } = attributes; return { ...attributes, ...getAttributesFromPreview( @@ -117,11 +120,12 @@ const EmbedEdit = ( props ) => { }; const handleIncomingPreview = () => { - setAttributes( getMergedAttributes() ); + const mergedAttributes = getMergedAttributes(); + setAttributes( mergedAttributes ); if ( onReplace ) { const upgradedBlock = createUpgradedEmbedBlock( props, - getMergedAttributes() + mergedAttributes ); if ( upgradedBlock ) { @@ -159,6 +163,7 @@ const EmbedEdit = ( props ) => { useEffect( () => { if ( preview && ! isEditingURL ) { + // setMergedAttributes( getMergedAttributes ); handleIncomingPreview(); } }, [ preview, isEditingURL ] ); @@ -205,10 +210,10 @@ const EmbedEdit = ( props ) => { // that `getMergedAttributes` uses is memoized so that we're not // calculating them on every render. const previewAttributes = getMergedAttributes(); - const { caption, type, allowResponsive } = previewAttributes; + const { type } = previewAttributes; const className = classnames( previewAttributes.className, - props.className + props.className // why props here?? ); return ( @@ -217,7 +222,7 @@ const EmbedEdit = ( props ) => { showEditButton={ preview && ! cannotEmbed } themeSupportsResponsive={ themeSupportsResponsive } blockSupportsResponsive={ responsive } - allowResponsive={ allowResponsive } + allowResponsive={ previewAttributes.allowResponsive } getResponsiveHelp={ getResponsiveHelp } toggleResponsive={ toggleResponsive } switchBackToURLInput={ () => setIsEditingURL( true ) } diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js index b95e27af2e060..86fcfb9a40fb8 100644 --- a/packages/block-library/src/embed/util.js +++ b/packages/block-library/src/embed/util.js @@ -233,7 +233,7 @@ export const getAttributesFromPreview = memoize( title, currentClassNames, isResponsive, - allowResponsive = true + allowResponsive = true // is the default needed ) => { if ( ! preview ) { return {}; From 87b0ae103b708308c6b4c1c59b195d6313a34c73 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 21 Jul 2020 18:11:02 +0300 Subject: [PATCH 13/48] minor changes --- packages/block-library/src/embed/edit.js | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index f6716dc80fa62..f47541d779461 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -43,6 +43,7 @@ const EmbedEdit = ( props ) => { responsive, allowResponsive, caption, + className, url: attributesUrl, }, attributes, @@ -71,8 +72,7 @@ const EmbedEdit = ( props ) => { isRequestingEmbedPreview, getThemeSupports, } = select( 'core' ); - if ( attributesUrl === undefined ) { - // TODO check if url is also empty... ?? + if ( ! attributesUrl ) { return { fetching: false, cannotEmbed: true }; } @@ -98,7 +98,7 @@ const EmbedEdit = ( props ) => { cannotEmbed: ! validPreview || previewIsFallback, }; }, - [ attributes.url ] + [ attributesUrl ] ); /** @@ -106,7 +106,6 @@ const EmbedEdit = ( props ) => { */ // TODO maybe use `useCallback` ?? or even better useMemo // or state? with mergedAttributes? const getMergedAttributes = () => { - const { className } = attributes; return { ...attributes, ...getAttributesFromPreview( @@ -142,7 +141,7 @@ const EmbedEdit = ( props ) => { allowResponsive: newAllowResponsive, className: getClassNames( html, - attributes.className, + className, responsive && newAllowResponsive ), } ); @@ -152,18 +151,16 @@ const EmbedEdit = ( props ) => { if ( ! preview?.html || ! cannotEmbed || fetching ) { return; } - // At this stage, we're not fetching the preview, so we know it can't be embedded, so try - // removing any trailing slash, and resubmit. + // At this stage, we're not fetching the preview and know it can't be embedded, + // so try removing any trailing slash, and resubmit. const newURL = attributesUrl.replace( /\/$/, '' ); setURL( newURL ); setIsEditingURL( false ); setAttributes( { url: newURL } ); }, [ preview?.html, attributesUrl ] ); - // TODO if we need above attributes as dependecies for useEffect ( cannotEmbed, fetchin etc..) useEffect( () => { if ( preview && ! isEditingURL ) { - // setMergedAttributes( getMergedAttributes ); handleIncomingPreview(); } }, [ preview, isEditingURL ] ); @@ -210,10 +207,9 @@ const EmbedEdit = ( props ) => { // that `getMergedAttributes` uses is memoized so that we're not // calculating them on every render. const previewAttributes = getMergedAttributes(); - const { type } = previewAttributes; - const className = classnames( + const finalClassName = classnames( previewAttributes.className, - props.className // why props here?? + props.className // TODO why props here?? ); return ( @@ -230,9 +226,9 @@ const EmbedEdit = ( props ) => { setAttributes( { caption: value } ) From 4a769857a08fbc05ca527275daeca38c2af3ab81 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 21 Jul 2020 18:27:07 +0300 Subject: [PATCH 14/48] convert supports to scope in variations --- packages/block-library/src/embed/variations.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/embed/variations.js b/packages/block-library/src/embed/variations.js index 55d6ea0467f96..5d3c6b030667b 100644 --- a/packages/block-library/src/embed/variations.js +++ b/packages/block-library/src/embed/variations.js @@ -162,7 +162,7 @@ const variations = [ title: 'CollegeHumor', icon: embedVideoIcon, description: __( 'Embed CollegeHumor content.' ), - supports: { inserter: false }, + scope: [ 'block' ], patterns: [], attributes: { providerNameSlug: 'collegehumor' }, }, @@ -246,9 +246,7 @@ const variations = [ title: 'Polldaddy', icon: embedContentIcon, description: __( 'Embed Polldaddy content.' ), - supports: { - inserter: false, - }, + scope: [ 'block' ], patterns: [], attributes: { providerNameSlug: 'polldaddy' }, }, @@ -305,9 +303,7 @@ const variations = [ name: 'speaker', title: 'Speaker', icon: embedAudioIcon, - supports: { - inserter: false, - }, + scope: [ 'block' ], patterns: [], attributes: { providerNameSlug: 'speaker' }, }, From 881142556d9861838cbe5a1b8346eea83a2a8b69 Mon Sep 17 00:00:00 2001 From: Miguel Fonseca Date: Tue, 21 Jul 2020 17:52:07 +0100 Subject: [PATCH 15/48] Inline the handleIncomingPreview effect --- packages/block-library/src/embed/edit.js | 29 +++++++++++------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index f47541d779461..eb6b39bf90a29 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -118,21 +118,6 @@ const EmbedEdit = ( props ) => { }; }; - const handleIncomingPreview = () => { - const mergedAttributes = getMergedAttributes(); - setAttributes( mergedAttributes ); - if ( onReplace ) { - const upgradedBlock = createUpgradedEmbedBlock( - props, - mergedAttributes - ); - - if ( upgradedBlock ) { - onReplace( upgradedBlock ); - } - } - }; - const toggleResponsive = () => { const { html } = preview; const newAllowResponsive = ! allowResponsive; @@ -159,9 +144,21 @@ const EmbedEdit = ( props ) => { setAttributes( { url: newURL } ); }, [ preview?.html, attributesUrl ] ); + // Handle incoming preview useEffect( () => { if ( preview && ! isEditingURL ) { - handleIncomingPreview(); + const mergedAttributes = getMergedAttributes(); + setAttributes( mergedAttributes ); + if ( onReplace ) { + const upgradedBlock = createUpgradedEmbedBlock( + props, + mergedAttributes + ); + + if ( upgradedBlock ) { + onReplace( upgradedBlock ); + } + } } }, [ preview, isEditingURL ] ); From 16e9d6f77d5d583ce23440b1e0e7d522353bfc03 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 21 Jul 2020 19:02:27 +0300 Subject: [PATCH 16/48] add getEmbedInfoByProvider unit tests --- .../block-library/src/embed/test/index.js | 129 +++++++++++------- 1 file changed, 78 insertions(+), 51 deletions(-) diff --git a/packages/block-library/src/embed/test/index.js b/packages/block-library/src/embed/test/index.js index 2f1e8546b770f..7fea8e223eacd 100644 --- a/packages/block-library/src/embed/test/index.js +++ b/packages/block-library/src/embed/test/index.js @@ -12,7 +12,13 @@ import { registerBlockType, unregisterBlockType } from '@wordpress/blocks'; * Internal dependencies */ import { getEmbedEditComponent } from '../edit'; -import { findBlock, getClassNames, createUpgradedEmbedBlock } from '../util'; +import { + findBlock, + getClassNames, + createUpgradedEmbedBlock, + getEmbedInfoByProvider, +} from '../util'; +import { embedContentIcon, embedInstagramIcon } from '../icons'; describe( 'core/embed', () => { test( 'block edit matches snapshot', () => { @@ -21,65 +27,86 @@ describe( 'core/embed', () => { expect( wrapper ).toMatchSnapshot(); } ); - - test( 'findBlock matches a URL to a block name', () => { - const twitterURL = 'https://twitter.com/notnownikki'; - const youtubeURL = 'https://www.youtube.com/watch?v=bNnfuvC1LlU'; - const unknownURL = 'https://example.com/'; - - expect( findBlock( twitterURL ) ).toEqual( 'core-embed/twitter' ); - expect( findBlock( youtubeURL ) ).toEqual( 'core-embed/youtube' ); - expect( findBlock( unknownURL ) ).toEqual( 'core/embed' ); - } ); - - test( 'getClassNames returns aspect ratio class names for iframes with width and height', () => { - const html = ''; - const expected = 'wp-embed-aspect-16-9 wp-has-aspect-ratio'; - expect( getClassNames( html ) ).toEqual( expected ); - } ); - - test( 'getClassNames does not return aspect ratio class names if we do not allow responsive', () => { - const html = ''; - const expected = ''; - expect( getClassNames( html, '', false ) ).toEqual( expected ); + describe( 'findBlock', () => { + test( 'findBlock matches a URL to a block name', () => { + const twitterURL = 'https://twitter.com/notnownikki'; + const youtubeURL = 'https://www.youtube.com/watch?v=bNnfuvC1LlU'; + const unknownURL = 'https://example.com/'; + + expect( findBlock( twitterURL ) ).toEqual( 'core-embed/twitter' ); + expect( findBlock( youtubeURL ) ).toEqual( 'core-embed/youtube' ); + expect( findBlock( unknownURL ) ).toEqual( 'core/embed' ); + } ); } ); - test( 'getClassNames preserves exsiting class names when removing responsive classes', () => { - const html = ''; - const expected = 'lovely'; - expect( - getClassNames( - html, - 'lovely wp-embed-aspect-16-9 wp-has-aspect-ratio', - false - ) - ).toEqual( expected ); - } ); + describe( 'getClassNames', () => { + test( 'getClassNames returns aspect ratio class names for iframes with width and height', () => { + const html = ''; + const expected = 'wp-embed-aspect-16-9 wp-has-aspect-ratio'; + expect( getClassNames( html ) ).toEqual( expected ); + } ); - test( 'createUpgradedEmbedBlock bails early when block type does not exist', () => { - const youtubeURL = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'; + test( 'getClassNames does not return aspect ratio class names if we do not allow responsive', () => { + const html = ''; + const expected = ''; + expect( getClassNames( html, '', false ) ).toEqual( expected ); + } ); - expect( - createUpgradedEmbedBlock( { attributes: { url: youtubeURL } }, {} ) - ).toBeUndefined(); + test( 'getClassNames preserves exsiting class names when removing responsive classes', () => { + const html = ''; + const expected = 'lovely'; + expect( + getClassNames( + html, + 'lovely wp-embed-aspect-16-9 wp-has-aspect-ratio', + false + ) + ).toEqual( expected ); + } ); } ); + describe( 'createUpgradedEmbedBlock', () => { + test( 'createUpgradedEmbedBlock bails early when block type does not exist', () => { + const youtubeURL = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'; + + expect( + createUpgradedEmbedBlock( + { attributes: { url: youtubeURL } }, + {} + ) + ).toBeUndefined(); + } ); - test( 'createUpgradedEmbedBlock returns a YouTube embed block when given a YouTube URL', () => { - const youtubeURL = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'; + test( 'createUpgradedEmbedBlock returns a YouTube embed block when given a YouTube URL', () => { + const youtubeURL = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'; - registerBlockType( 'core-embed/youtube', { - title: 'YouTube', - category: 'embed', - } ); + registerBlockType( 'core-embed/youtube', { + title: 'YouTube', + category: 'embed', + } ); - const result = createUpgradedEmbedBlock( - { attributes: { url: youtubeURL } }, - {} - ); + const result = createUpgradedEmbedBlock( + { attributes: { url: youtubeURL } }, + {} + ); - unregisterBlockType( 'core-embed/youtube' ); + unregisterBlockType( 'core-embed/youtube' ); - expect( result ).not.toBeUndefined(); - expect( result.name ).toBe( 'core-embed/youtube' ); + expect( result ).not.toBeUndefined(); + expect( result.name ).toBe( 'core-embed/youtube' ); + } ); + } ); + describe( 'getEmbedInfoByProvider', () => { + it( 'should return embed info from existent variation', () => { + expect( getEmbedInfoByProvider( 'instagram' ) ).toEqual( { + icon: embedInstagramIcon, + title: 'Instagram', + } ); + } ); + it( 'should return default information if not found in variations', () => { + expect( getEmbedInfoByProvider( 'i do not exist' ) ).toEqual( { + icon: embedContentIcon, + title: 'Embed', + } ); + } ); } ); } ); From 5b6eb42528b4d3ff95083f6021bc1f99e773443a Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 22 Jul 2020 10:42:53 +0300 Subject: [PATCH 17/48] add getEmbedInfoByProvider jsdoc --- packages/block-library/src/embed/util.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js index 86fcfb9a40fb8..93cf6d8425320 100644 --- a/packages/block-library/src/embed/util.js +++ b/packages/block-library/src/embed/util.js @@ -27,8 +27,18 @@ import { _x } from '@wordpress/i18n'; import variations from './variations'; import { embedContentIcon } from './icons'; -// TODO jsdoc -// TODO tests +/** + * @typedef {Object} EmbedInformation + * @property {string} title The embed block's title + * @property {WPComponent} icon The embed block's icon + */ + +/** + * Returns the embed block's information by matching the provided service provider + * + * @param {string} provider The embed block's provider + * @return {EmbedInformation} The embed block's information + */ export const getEmbedInfoByProvider = ( provider ) => { const defaultEmbedInfo = { title: _x( 'Embed', 'block title' ), From 66d0f8634235fd732dd8c550d40053b203abc7a2 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Wed, 22 Jul 2020 11:21:05 +0300 Subject: [PATCH 18/48] fix variable typo Co-authored-by: Miguel Fonseca --- packages/block-library/src/embed/edit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index eb6b39bf90a29..7e3417dd86f5e 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -170,8 +170,8 @@ const EmbedEdit = ( props ) => { const label = sprintf( __( '%s URL' ), title ); // No preview, or we can't embed the current URL, or we've clicked the edit button. - const showEmbedPlacholder = ! preview || cannotEmbed || isEditingURL; - if ( showEmbedPlacholder ) { + const showEmbedPlaceholder = ! preview || cannotEmbed || isEditingURL; + if ( showEmbedPlaceholder ) { return ( Date: Wed, 22 Jul 2020 11:59:29 +0300 Subject: [PATCH 19/48] small util refactorings --- packages/block-library/src/embed/util.js | 21 +++++---------------- 1 file changed, 5 insertions(+), 16 deletions(-) diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js index 93cf6d8425320..ac63876b8f1ac 100644 --- a/packages/block-library/src/embed/util.js +++ b/packages/block-library/src/embed/util.js @@ -176,14 +176,9 @@ export function getClassNames( const aspectRatioClassNames = { 'wp-has-aspect-ratio': false, }; - for ( - let ratioIndex = 0; - ratioIndex < ASPECT_RATIOS.length; - ratioIndex++ - ) { - const aspectRatioToRemove = ASPECT_RATIOS[ ratioIndex ]; - aspectRatioClassNames[ aspectRatioToRemove.className ] = false; - } + ASPECT_RATIOS.forEach( ( { className } ) => { + aspectRatioClassNames[ className ] = false; + } ); return classnames( existingClassNames, aspectRatioClassNames ); } @@ -238,13 +233,7 @@ export function fallback( url, onReplace ) { * @return {Object} Attributes and values. */ export const getAttributesFromPreview = memoize( - ( - preview, - title, - currentClassNames, - isResponsive, - allowResponsive = true // is the default needed - ) => { + ( preview, title, currentClassNames, isResponsive, allowResponsive ) => { if ( ! preview ) { return {}; } @@ -256,7 +245,7 @@ export const getAttributesFromPreview = memoize( // because not all embed code gives us a provider name. const { html, provider_name: providerName } = preview; const providerNameSlug = kebabCase( - ( providerName ?? title ).toLowerCase() + ( providerName || title ).toLowerCase() ); if ( isFromWordPress( html ) ) { From c7fb1dcfaf3d4bd8887fe1bcd389d61dc18eae47 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 22 Jul 2020 17:51:12 +0300 Subject: [PATCH 20/48] change utils --- packages/block-library/src/embed/constants.js | 4 - packages/block-library/src/embed/edit.js | 2 +- packages/block-library/src/embed/util.js | 106 +++++++++--------- 3 files changed, 53 insertions(+), 59 deletions(-) diff --git a/packages/block-library/src/embed/constants.js b/packages/block-library/src/embed/constants.js index 10a84613cb6dd..7db135a4a1b75 100644 --- a/packages/block-library/src/embed/constants.js +++ b/packages/block-library/src/embed/constants.js @@ -9,7 +9,3 @@ export const ASPECT_RATIOS = [ { ratio: '0.56', className: 'wp-embed-aspect-9-16' }, { ratio: '0.50', className: 'wp-embed-aspect-1-2' }, ]; - -export const DEFAULT_EMBED_BLOCK = 'core/embed'; -export const WORDPRESS_EMBED_BLOCK = 'core-embed/wordpress'; -// TODO check about above WP block diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index 7e3417dd86f5e..b6d364d37b563 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -73,7 +73,7 @@ const EmbedEdit = ( props ) => { getThemeSupports, } = select( 'core' ); if ( ! attributesUrl ) { - return { fetching: false, cannotEmbed: true }; + return { fetching: false, cannotEmbed: false }; } const embedPreview = getEmbedPreview( attributesUrl ); diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js index ac63876b8f1ac..c18dc306fa982 100644 --- a/packages/block-library/src/embed/util.js +++ b/packages/block-library/src/embed/util.js @@ -1,11 +1,7 @@ /** * Internal dependencies */ -import { - DEFAULT_EMBED_BLOCK, - WORDPRESS_EMBED_BLOCK, - ASPECT_RATIOS, -} from './constants'; +import { ASPECT_RATIOS } from './constants'; /** * External dependencies @@ -18,7 +14,7 @@ import memoize from 'memize'; * WordPress dependencies */ import { renderToString } from '@wordpress/element'; -import { createBlock, getBlockType } from '@wordpress/blocks'; +import { createBlock } from '@wordpress/blocks'; import { _x } from '@wordpress/i18n'; /** @@ -26,6 +22,12 @@ import { _x } from '@wordpress/i18n'; */ import variations from './variations'; import { embedContentIcon } from './icons'; +import metadata from './block.json'; + +const { name: DEFAULT_EMBED_BLOCK } = metadata; +const WP_VARIATION = variations.find( ( { name } ) => name === 'wordpress' ); + +/** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */ /** * @typedef {Object} EmbedInformation @@ -61,19 +63,14 @@ export const matchesPatterns = ( url, patterns = [] ) => patterns.some( ( pattern ) => url.match( pattern ) ); /** - * Finds the block name that should be used for the URL, based on the - * structure of the URL. + * Finds the block variation that should be used for the URL, + * based on the provided URL and the variation's patterns. * * @param {string} url The URL to test. - * @return {string} The name of the block that should be used for this URL, e.g. core-embed/twitter + * @return {WPBlockVariation} The block variation that should be used for this URL */ -export const findBlock = ( url ) => { - const match = variations.some( ( { patterns } ) => - matchesPatterns( url, patterns ) - ); - return match?.name || DEFAULT_EMBED_BLOCK; - // TODO check if get by selector -}; +export const findMoreSuitableBlock = ( url ) => + variations.find( ( { patterns } ) => matchesPatterns( url, patterns ) ); export const isFromWordPress = ( html ) => html.includes( 'class="wp-embedded-content"' ); @@ -107,55 +104,56 @@ export const getPhotoHtml = ( photo ) => { export const createUpgradedEmbedBlock = ( props, attributesFromPreview ) => { const { preview, - name, - attributes: { url }, + // name, + attributes: { url, providerNameSlug }, } = props; - if ( ! url ) { - return; - } + if ( ! url ) return; - const matchingBlock = findBlock( url ); + const matchedBlock = findMoreSuitableBlock( url ); + + // TODO as we only have variations of core/embed we only have to check for core/embed + // but this is used by [image,video,audio], check better when it will be their time to handle in this PR + // if ( ! getBlockType( matchedBlockName ) ) { + // return; + // } - if ( ! getBlockType( matchingBlock ) ) { - return; - } - // TODO check for WP block by provider // WordPress blocks can work on multiple sites, and so don't have patterns, // so if we're in a WordPress block, assume the user has chosen it for a WordPress URL. - if ( - WORDPRESS_EMBED_BLOCK !== name && - DEFAULT_EMBED_BLOCK !== matchingBlock - ) { - // At this point, we have discovered a more suitable block for this url, so transform it. - if ( name !== matchingBlock ) { - // TODO maybe pass here more attributes, like provider?? - return createBlock( matchingBlock, { url } ); - } - } - if ( ! preview ) { - return; + const isCurrentBlockWP = + providerNameSlug === WP_VARIATION.attributes.providerNameSlug; + // if current block is not WordPress and a more suitable block found + // that is different from the current one, create the new matched block + const shouldCreateNewBlock = + ! isCurrentBlockWP && + matchedBlock && + ( matchedBlock.attributes.providerNameSlug !== providerNameSlug || + ! providerNameSlug ); // this is here as audio,image,video don't provide this any prop besides url (handle differently??) + if ( shouldCreateNewBlock ) { + return createBlock( DEFAULT_EMBED_BLOCK, { + url, + ...matchedBlock.attributes, + } ); } - const { html } = preview; // We can't match the URL for WordPress embeds, we have to check the HTML instead. - if ( isFromWordPress( html ) ) { - // If this is not the WordPress embed block, transform it into one. - if ( WORDPRESS_EMBED_BLOCK !== name ) { - return createBlock( WORDPRESS_EMBED_BLOCK, { - url, - // By now we have the preview, but when the new block first renders, it - // won't have had all the attributes set, and so won't get the correct - // type and it won't render correctly. So, we pass through the current attributes - // here so that the initial render works when we switch to the WordPress - // block. This only affects the WordPress block because it can't be - // rendered in the usual Sandbox (it has a sandbox of its own) and it - // relies on the preview to set the correct render type. - ...attributesFromPreview, - } ); - } + if ( ! preview || ! isFromWordPress( preview.html ) || isCurrentBlockWP ) { + return; } + // This is not the WordPress embed block so transform it into one. + return createBlock( DEFAULT_EMBED_BLOCK, { + url, + ...WP_VARIATION.attributes, + // By now we have the preview, but when the new block first renders, it + // won't have had all the attributes set, and so won't get the correct + // type and it won't render correctly. So, we pass through the current attributes + // here so that the initial render works when we switch to the WordPress + // block. This only affects the WordPress block because it can't be + // rendered in the usual Sandbox (it has a sandbox of its own) and it + // relies on the preview to set the correct render type. + ...attributesFromPreview, + } ); }; /** From 1b3d8b1234583d673635408b65948bfe5d1bd993 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 23 Jul 2020 11:37:37 +0300 Subject: [PATCH 21/48] change findMoreSuitableBlock tests --- .../block-library/src/embed/test/index.js | 21 +++++++++++-------- packages/block-library/src/embed/util.js | 4 ++-- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/embed/test/index.js b/packages/block-library/src/embed/test/index.js index 7fea8e223eacd..7cb0dcfdca3ab 100644 --- a/packages/block-library/src/embed/test/index.js +++ b/packages/block-library/src/embed/test/index.js @@ -11,9 +11,9 @@ import { registerBlockType, unregisterBlockType } from '@wordpress/blocks'; /** * Internal dependencies */ -import { getEmbedEditComponent } from '../edit'; +import { EmbedEdit } from '../edit'; import { - findBlock, + findMoreSuitableBlock, getClassNames, createUpgradedEmbedBlock, getEmbedInfoByProvider, @@ -22,23 +22,26 @@ import { embedContentIcon, embedInstagramIcon } from '../icons'; describe( 'core/embed', () => { test( 'block edit matches snapshot', () => { - const EmbedEdit = getEmbedEditComponent( 'Embed', 'embed-generic' ); + // const EmbedEditTest = EmbedEdit( 'Embed', 'embed-generic' ); const wrapper = render( ); expect( wrapper ).toMatchSnapshot(); } ); - describe( 'findBlock', () => { - test( 'findBlock matches a URL to a block name', () => { + describe( 'findMoreSuitableBlock', () => { + test( 'findMoreSuitableBlock matches a URL to a block name', () => { const twitterURL = 'https://twitter.com/notnownikki'; const youtubeURL = 'https://www.youtube.com/watch?v=bNnfuvC1LlU'; const unknownURL = 'https://example.com/'; - expect( findBlock( twitterURL ) ).toEqual( 'core-embed/twitter' ); - expect( findBlock( youtubeURL ) ).toEqual( 'core-embed/youtube' ); - expect( findBlock( unknownURL ) ).toEqual( 'core/embed' ); + expect( findMoreSuitableBlock( twitterURL ) ).toEqual( + expect.objectContaining( { name: 'twitter' } ) + ); + expect( findMoreSuitableBlock( youtubeURL ) ).toEqual( + expect.objectContaining( { name: 'youtube' } ) + ); + expect( findMoreSuitableBlock( unknownURL ) ).toBeUndefined(); } ); } ); - describe( 'getClassNames', () => { test( 'getClassNames returns aspect ratio class names for iframes with width and height', () => { const html = ''; diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js index c18dc306fa982..0060349bb3d5a 100644 --- a/packages/block-library/src/embed/util.js +++ b/packages/block-library/src/embed/util.js @@ -105,7 +105,7 @@ export const createUpgradedEmbedBlock = ( props, attributesFromPreview ) => { const { preview, // name, - attributes: { url, providerNameSlug }, + attributes: { url, providerNameSlug } = {}, } = props; if ( ! url ) return; @@ -120,7 +120,7 @@ export const createUpgradedEmbedBlock = ( props, attributesFromPreview ) => { // WordPress blocks can work on multiple sites, and so don't have patterns, // so if we're in a WordPress block, assume the user has chosen it for a WordPress URL. - + // TODO WP provider is `wordpress` ?? const isCurrentBlockWP = providerNameSlug === WP_VARIATION.attributes.providerNameSlug; // if current block is not WordPress and a more suitable block found From f15b79a1293792f4b3b33a4f1c9a9cb77364c06c Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 23 Jul 2020 11:59:17 +0300 Subject: [PATCH 22/48] use state variable for mergedAttributes --- packages/block-library/src/embed/edit.js | 11 +++++------ packages/block-library/src/embed/util.js | 2 +- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index b6d364d37b563..834620e3c1fea 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -56,7 +56,7 @@ const EmbedEdit = ( props ) => { const { icon, title } = getEmbedInfoByProvider( providerNameSlug ); const [ url, setURL ] = useState( attributesUrl ); const [ isEditingURL, setIsEditingURL ] = useState( false ); - // const [ mergedAttributes, setMergedAttributes ] = useState( attributes ); + const [ mergedAttributes, setMergedAttributes ] = useState( attributes ); const { invalidateResolution } = useDispatch( 'core/data' ); const { @@ -147,7 +147,7 @@ const EmbedEdit = ( props ) => { // Handle incoming preview useEffect( () => { if ( preview && ! isEditingURL ) { - const mergedAttributes = getMergedAttributes(); + setMergedAttributes( getMergedAttributes() ); setAttributes( mergedAttributes ); if ( onReplace ) { const upgradedBlock = createUpgradedEmbedBlock( @@ -203,9 +203,8 @@ const EmbedEdit = ( props ) => { // clipping or scrollbars. The `getAttributesFromPreview` function // that `getMergedAttributes` uses is memoized so that we're not // calculating them on every render. - const previewAttributes = getMergedAttributes(); const finalClassName = classnames( - previewAttributes.className, + mergedAttributes.className, props.className // TODO why props here?? ); @@ -215,7 +214,7 @@ const EmbedEdit = ( props ) => { showEditButton={ preview && ! cannotEmbed } themeSupportsResponsive={ themeSupportsResponsive } blockSupportsResponsive={ responsive } - allowResponsive={ previewAttributes.allowResponsive } + allowResponsive={ allowResponsive } getResponsiveHelp={ getResponsiveHelp } toggleResponsive={ toggleResponsive } switchBackToURLInput={ () => setIsEditingURL( true ) } @@ -225,7 +224,7 @@ const EmbedEdit = ( props ) => { previewable={ previewable } className={ finalClassName } url={ url } - type={ previewAttributes.type } + type={ mergedAttributes.type } caption={ caption } onCaptionChange={ ( value ) => setAttributes( { caption: value } ) diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js index 0060349bb3d5a..e443820f8842c 100644 --- a/packages/block-library/src/embed/util.js +++ b/packages/block-library/src/embed/util.js @@ -114,7 +114,7 @@ export const createUpgradedEmbedBlock = ( props, attributesFromPreview ) => { // TODO as we only have variations of core/embed we only have to check for core/embed // but this is used by [image,video,audio], check better when it will be their time to handle in this PR - // if ( ! getBlockType( matchedBlockName ) ) { + // if ( ! getBlockType( DEFAULT_EMBED_BLOCK ) ) { // return; // } From 4533cdef3620989e238f93739b8c770eb687951c Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 23 Jul 2020 13:05:21 +0300 Subject: [PATCH 23/48] small changes --- packages/block-library/src/embed/edit.js | 27 +++++++++++------------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index 834620e3c1fea..0cc68f79cedc5 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -104,7 +104,6 @@ const EmbedEdit = ( props ) => { /** * @return {Object} Attributes derived from the preview, merged with the current attributes. */ - // TODO maybe use `useCallback` ?? or even better useMemo // or state? with mergedAttributes? const getMergedAttributes = () => { return { ...attributes, @@ -147,6 +146,14 @@ const EmbedEdit = ( props ) => { // Handle incoming preview useEffect( () => { if ( preview && ! isEditingURL ) { + // Even though we set attributes that get derived from the preview, + // we don't access them directly because for the initial render, + // the `setAttributes` call will not have taken effect. If we're + // rendering responsive content, setting the responsive classes + // after the preview has been rendered can result in unwanted + // clipping or scrollbars. The `getAttributesFromPreview` function + // that `getMergedAttributes` uses is memoized so that we're not + // calculating them on every render. setMergedAttributes( getMergedAttributes() ); setAttributes( mergedAttributes ); if ( onReplace ) { @@ -195,19 +202,6 @@ const EmbedEdit = ( props ) => { ); } - // Even though we set attributes that get derived from the preview, - // we don't access them directly because for the initial render, - // the `setAttributes` call will not have taken effect. If we're - // rendering responsive content, setting the responsive classes - // after the preview has been rendered can result in unwanted - // clipping or scrollbars. The `getAttributesFromPreview` function - // that `getMergedAttributes` uses is memoized so that we're not - // calculating them on every render. - const finalClassName = classnames( - mergedAttributes.className, - props.className // TODO why props here?? - ); - return ( <> { Date: Thu, 23 Jul 2020 15:18:12 +0300 Subject: [PATCH 24/48] change responsive default attribute --- packages/block-library/src/embed/index.js | 2 + .../block-library/src/embed/variations.js | 85 +++++++++---------- 2 files changed, 40 insertions(+), 47 deletions(-) diff --git a/packages/block-library/src/embed/index.js b/packages/block-library/src/embed/index.js index af492ee387446..3b1ed4d9bdb9c 100644 --- a/packages/block-library/src/embed/index.js +++ b/packages/block-library/src/embed/index.js @@ -7,6 +7,7 @@ import metadata from './block.json'; import transforms from './transforms'; import variations from './variations'; import deprecated from './deprecated'; +import { embedContentIcon } from './icons'; /** * WordPress dependencies @@ -21,6 +22,7 @@ export const settings = { description: __( 'Add a block that displays content pulled from other sites, like Twitter, Instagram or YouTube.' ), + icon: embedContentIcon, edit, save, transforms, diff --git a/packages/block-library/src/embed/variations.js b/packages/block-library/src/embed/variations.js index 5d3c6b030667b..cd50ad3602240 100644 --- a/packages/block-library/src/embed/variations.js +++ b/packages/block-library/src/embed/variations.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { createBlock } from '@wordpress/blocks'; /** @@ -35,18 +35,6 @@ import { * @type {WPBlockVariation[]} */ const variations = [ - { - isDefault: true, - name: 'embed', - title: _x( 'Embed', 'block title' ), - icon: embedContentIcon, - description: __( - 'Embed videos, images, tweets, audio, and other content from external sources.' - ), - // Unknown embeds should not be responsive by default. - // TODO check when transforms to other embed by pattern... - attributes: { responsive: false }, - }, { name: 'twitter', title: 'Twitter', @@ -54,8 +42,7 @@ const variations = [ keywords: [ 'tweet', __( 'social' ) ], description: __( 'Embed a tweet.' ), patterns: [ /^https?:\/\/(www\.)?twitter\.com\/.+/i ], - // TODO - create util for basic RegEx - attributes: { providerNameSlug: 'twitter' }, + attributes: { providerNameSlug: 'twitter', responsive: true }, }, { name: 'youtube', @@ -67,7 +54,7 @@ const variations = [ /^https?:\/\/((m|www)\.)?youtube\.com\/.+/i, /^https?:\/\/youtu\.be\/.+/i, ], - attributes: { providerNameSlug: 'youtube' }, + attributes: { providerNameSlug: 'youtube', responsive: true }, }, { name: 'facebook', @@ -79,6 +66,7 @@ const variations = [ attributes: { providerNameSlug: 'facebook', previewable: false, + responsive: true, }, }, { @@ -88,7 +76,7 @@ const variations = [ keywords: [ __( 'image' ), __( 'social' ) ], description: __( 'Embed an Instagram post.' ), patterns: [ /^https?:\/\/(www\.)?instagr(\.am|am\.com)\/.+/i ], - attributes: { providerNameSlug: 'instagram' }, + attributes: { providerNameSlug: 'instagram', responsive: true }, }, { name: 'wordpress', @@ -98,7 +86,6 @@ const variations = [ description: __( 'Embed a WordPress post.' ), attributes: { providerNameSlug: 'wordpress', - responsive: false, }, }, { @@ -108,7 +95,7 @@ const variations = [ keywords: [ __( 'music' ), __( 'audio' ) ], description: __( 'Embed SoundCloud content.' ), patterns: [ /^https?:\/\/(www\.)?soundcloud\.com\/.+/i ], - attributes: { providerNameSlug: 'soundcloud' }, + attributes: { providerNameSlug: 'soundcloud', responsive: true }, }, { name: 'spotify', @@ -117,7 +104,7 @@ const variations = [ keywords: [ __( 'music' ), __( 'audio' ) ], description: __( 'Embed Spotify content.' ), patterns: [ /^https?:\/\/(open|play)\.spotify\.com\/.+/i ], - attributes: { providerNameSlug: 'spotify' }, + attributes: { providerNameSlug: 'spotify', responsive: true }, }, { name: 'flickr', @@ -129,7 +116,7 @@ const variations = [ /^https?:\/\/(www\.)?flickr\.com\/.+/i, /^https?:\/\/flic\.kr\/.+/i, ], - attributes: { providerNameSlug: 'flickr' }, + attributes: { providerNameSlug: 'flickr', responsive: true }, }, { name: 'vimeo', @@ -138,7 +125,7 @@ const variations = [ keywords: [ __( 'video' ) ], description: __( 'Embed a Vimeo video.' ), patterns: [ /^https?:\/\/(www\.)?vimeo\.com\/.+/i ], - attributes: { providerNameSlug: 'vimeo' }, + attributes: { providerNameSlug: 'vimeo', responsive: true }, }, { name: 'animoto', @@ -146,7 +133,7 @@ const variations = [ icon: embedAnimotoIcon, description: __( 'Embed an Animoto video.' ), patterns: [ /^https?:\/\/(www\.)?(animoto|video214)\.com\/.+/i ], - attributes: { providerNameSlug: 'animoto' }, + attributes: { providerNameSlug: 'animoto', responsive: true }, }, { name: 'cloudup', @@ -154,7 +141,7 @@ const variations = [ icon: embedContentIcon, description: __( 'Embed Cloudup content.' ), patterns: [ /^https?:\/\/cloudup\.com\/.+/i ], - attributes: { providerNameSlug: 'cloudup' }, + attributes: { providerNameSlug: 'cloudup', responsive: true }, }, { // Deprecated since CollegeHumor content is now powered by YouTube @@ -164,7 +151,7 @@ const variations = [ description: __( 'Embed CollegeHumor content.' ), scope: [ 'block' ], patterns: [], - attributes: { providerNameSlug: 'collegehumor' }, + attributes: { providerNameSlug: 'collegehumor', responsive: true }, }, { name: 'crowdsignal', @@ -185,7 +172,7 @@ const variations = [ patterns: [ /^https?:\/\/((.+\.)?polldaddy\.com|poll\.fm|.+\.survey\.fm)\/.+/i, ], - attributes: { providerNameSlug: 'crowdsignal' }, + attributes: { providerNameSlug: 'crowdsignal', responsive: true }, }, { name: 'dailymotion', @@ -194,7 +181,7 @@ const variations = [ keywords: [ __( 'video' ) ], description: __( 'Embed a Dailymotion video.' ), patterns: [ /^https?:\/\/(www\.)?dailymotion\.com\/.+/i ], - attributes: { providerNameSlug: 'dailymotion' }, + attributes: { providerNameSlug: 'dailymotion', responsive: true }, }, { name: 'imgur', @@ -202,7 +189,7 @@ const variations = [ icon: embedPhotoIcon, description: __( 'Embed Imgur content.' ), patterns: [ /^https?:\/\/(.+\.)?imgur\.com\/.+/i ], - attributes: { providerNameSlug: 'imgur' }, + attributes: { providerNameSlug: 'imgur', responsive: true }, }, { name: 'issuu', @@ -210,7 +197,7 @@ const variations = [ icon: embedContentIcon, description: __( 'Embed Issuu content.' ), patterns: [ /^https?:\/\/(www\.)?issuu\.com\/.+/i ], - attributes: { providerNameSlug: 'issuu' }, + attributes: { providerNameSlug: 'issuu', responsive: true }, }, { name: 'kickstarter', @@ -221,7 +208,7 @@ const variations = [ /^https?:\/\/(www\.)?kickstarter\.com\/.+/i, /^https?:\/\/kck\.st\/.+/i, ], - attributes: { providerNameSlug: 'kickstarter' }, + attributes: { providerNameSlug: 'kickstarter', responsive: true }, }, { name: 'meetup-com', @@ -229,7 +216,7 @@ const variations = [ icon: embedContentIcon, description: __( 'Embed Meetup.com content.' ), patterns: [ /^https?:\/\/(www\.)?meetu(\.ps|p\.com)\/.+/i ], - attributes: { providerNameSlug: 'meetup-com' }, + attributes: { providerNameSlug: 'meetup-com', responsive: true }, }, { name: 'mixcloud', @@ -238,7 +225,7 @@ const variations = [ keywords: [ __( 'music' ), __( 'audio' ) ], description: __( 'Embed Mixcloud content.' ), patterns: [ /^https?:\/\/(www\.)?mixcloud\.com\/.+/i ], - attributes: { providerNameSlug: 'mixcloud' }, + attributes: { providerNameSlug: 'mixcloud', responsive: true }, }, { // Deprecated in favour of the crowdsignal block @@ -248,7 +235,7 @@ const variations = [ description: __( 'Embed Polldaddy content.' ), scope: [ 'block' ], patterns: [], - attributes: { providerNameSlug: 'polldaddy' }, + attributes: { providerNameSlug: 'polldaddy', responsive: true }, }, { name: 'reddit', @@ -256,7 +243,7 @@ const variations = [ icon: embedRedditIcon, description: __( 'Embed a Reddit thread.' ), patterns: [ /^https?:\/\/(www\.)?reddit\.com\/.+/i ], - attributes: { providerNameSlug: 'reddit' }, + attributes: { providerNameSlug: 'reddit', responsive: true }, }, { name: 'reverbnation', @@ -264,7 +251,7 @@ const variations = [ icon: embedAudioIcon, description: __( 'Embed ReverbNation content.' ), patterns: [ /^https?:\/\/(www\.)?reverbnation\.com\/.+/i ], - attributes: { providerNameSlug: 'reverbnation' }, + attributes: { providerNameSlug: 'reverbnation', responsive: true }, }, { name: 'screencast', @@ -272,7 +259,7 @@ const variations = [ icon: embedVideoIcon, description: __( 'Embed Screencast content.' ), patterns: [ /^https?:\/\/(www\.)?screencast\.com\/.+/i ], - attributes: { providerNameSlug: 'screencast' }, + attributes: { providerNameSlug: 'screencast', responsive: true }, }, { name: 'scribd', @@ -280,7 +267,7 @@ const variations = [ icon: embedContentIcon, description: __( 'Embed Scribd content.' ), patterns: [ /^https?:\/\/(www\.)?scribd\.com\/.+/i ], - attributes: { providerNameSlug: 'scribd' }, + attributes: { providerNameSlug: 'scribd', responsive: true }, }, { name: 'slideshare', @@ -288,7 +275,7 @@ const variations = [ icon: embedContentIcon, description: __( 'Embed Slideshare content.' ), patterns: [ /^https?:\/\/(.+?\.)?slideshare\.net\/.+/i ], - attributes: { providerNameSlug: 'slideshare' }, + attributes: { providerNameSlug: 'slideshare', responsive: true }, }, { name: 'smugmug', @@ -296,7 +283,11 @@ const variations = [ icon: embedPhotoIcon, description: __( 'Embed SmugMug content.' ), patterns: [ /^https?:\/\/(.+\.)?smugmug\.com\/.*/i ], - attributes: { providerNameSlug: 'smugmug', previewable: false }, + attributes: { + providerNameSlug: 'smugmug', + previewable: false, + responsive: true, + }, }, { // Deprecated in favour of the speaker-deck block. @@ -305,7 +296,7 @@ const variations = [ icon: embedAudioIcon, scope: [ 'block' ], patterns: [], - attributes: { providerNameSlug: 'speaker' }, + attributes: { providerNameSlug: 'speaker', responsive: true }, }, { name: 'speaker-deck', @@ -324,7 +315,7 @@ const variations = [ ], description: __( 'Embed Speaker Deck content.' ), patterns: [ /^https?:\/\/(www\.)?speakerdeck\.com\/.+/i ], - attributes: { providerNameSlug: 'speaker-deck' }, + attributes: { providerNameSlug: 'speaker-deck', responsive: true }, }, { name: 'tiktok', @@ -333,7 +324,7 @@ const variations = [ keywords: [ __( 'video' ) ], description: __( 'Embed a TikTok video.' ), patterns: [ /^https?:\/\/(www\.)?tiktok\.com\/.+/i ], - attributes: { providerNameSlug: 'tiktok' }, + attributes: { providerNameSlug: 'tiktok', responsive: true }, }, { name: 'ted', @@ -341,7 +332,7 @@ const variations = [ icon: embedVideoIcon, description: __( 'Embed a TED video.' ), patterns: [ /^https?:\/\/(www\.|embed\.)?ted\.com\/.+/i ], - attributes: { providerNameSlug: 'ted' }, + attributes: { providerNameSlug: 'ted', responsive: true }, }, { name: 'tumblr', @@ -350,7 +341,7 @@ const variations = [ keywords: [ __( 'social' ) ], description: __( 'Embed a Tumblr post.' ), patterns: [ /^https?:\/\/(www\.)?tumblr\.com\/.+/i ], - attributes: { providerNameSlug: 'tumblr' }, + attributes: { providerNameSlug: 'tumblr', responsive: true }, }, { name: 'videopress', @@ -359,7 +350,7 @@ const variations = [ keywords: [ __( 'video' ) ], description: __( 'Embed a VideoPress video.' ), patterns: [ /^https?:\/\/videopress\.com\/.+/i ], - attributes: { providerNameSlug: 'videopress' }, + attributes: { providerNameSlug: 'videopress', responsive: true }, }, { name: 'wordpress-tv', @@ -367,7 +358,7 @@ const variations = [ icon: embedVideoIcon, description: __( 'Embed a WordPress.tv video.' ), patterns: [ /^https?:\/\/wordpress\.tv\/.+/i ], - attributes: { providerNameSlug: 'wordpress-tv' }, + attributes: { providerNameSlug: 'wordpress-tv', responsive: true }, }, { name: 'amazon-kindle', @@ -379,7 +370,7 @@ const variations = [ /^https?:\/\/([a-z0-9-]+\.)?(amazon|amzn)(\.[a-z]{2,4})+\/.+/i, /^https?:\/\/(www\.)?(a\.co|z\.cn)\/.+/i, ], - attributes: { providerNameSlug: 'amazon-kindle', responsive: false }, + attributes: { providerNameSlug: 'amazon-kindle' }, }, ]; From 566c34ea49e23fa5ce502391ecd1ab8d61e5fb67 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Thu, 23 Jul 2020 16:49:40 +0300 Subject: [PATCH 25/48] change default value of responsive Co-authored-by: Miguel Fonseca --- packages/block-library/src/embed/block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json index 1d7e604747ef7..34d8838770346 100644 --- a/packages/block-library/src/embed/block.json +++ b/packages/block-library/src/embed/block.json @@ -22,7 +22,7 @@ }, "responsive": { "type": "boolean", - "default": true + "default": false }, "previewable": { "type": "boolean", From 302bb3d6ebb3b67ecf91f7142596bf0ce75ac8fe Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 23 Jul 2020 18:39:54 +0300 Subject: [PATCH 26/48] change getEmbedInfoByProvider to just search variations --- packages/block-library/src/embed/edit.js | 9 +++++++- .../block-library/src/embed/test/index.js | 21 +++++++++--------- packages/block-library/src/embed/util.js | 22 +++---------------- 3 files changed, 22 insertions(+), 30 deletions(-) diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index 0cc68f79cedc5..6b5627f06e982 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -8,6 +8,7 @@ import { getAttributesFromPreview, getEmbedInfoByProvider, } from './util'; +import { settings } from './index'; import EmbedControls from './embed-controls'; import EmbedLoading from './embed-loading'; import EmbedPlaceholder from './embed-placeholder'; @@ -53,7 +54,13 @@ const EmbedEdit = ( props ) => { insertBlocksAfter, } = props; - const { icon, title } = getEmbedInfoByProvider( providerNameSlug ); + const defaultEmbedInfo = { + title: settings.title, + icon: settings.icon, + }; + const { icon, title } = + getEmbedInfoByProvider( providerNameSlug ) || defaultEmbedInfo; + const [ url, setURL ] = useState( attributesUrl ); const [ isEditingURL, setIsEditingURL ] = useState( false ); const [ mergedAttributes, setMergedAttributes ] = useState( attributes ); diff --git a/packages/block-library/src/embed/test/index.js b/packages/block-library/src/embed/test/index.js index 7cb0dcfdca3ab..47635b9b86bb1 100644 --- a/packages/block-library/src/embed/test/index.js +++ b/packages/block-library/src/embed/test/index.js @@ -18,7 +18,7 @@ import { createUpgradedEmbedBlock, getEmbedInfoByProvider, } from '../util'; -import { embedContentIcon, embedInstagramIcon } from '../icons'; +import { embedInstagramIcon } from '../icons'; describe( 'core/embed', () => { test( 'block edit matches snapshot', () => { @@ -100,16 +100,17 @@ describe( 'core/embed', () => { } ); describe( 'getEmbedInfoByProvider', () => { it( 'should return embed info from existent variation', () => { - expect( getEmbedInfoByProvider( 'instagram' ) ).toEqual( { - icon: embedInstagramIcon, - title: 'Instagram', - } ); + expect( getEmbedInfoByProvider( 'instagram' ) ).toEqual( + expect.objectContaining( { + icon: embedInstagramIcon, + title: 'Instagram', + } ) + ); } ); - it( 'should return default information if not found in variations', () => { - expect( getEmbedInfoByProvider( 'i do not exist' ) ).toEqual( { - icon: embedContentIcon, - title: 'Embed', - } ); + it( 'should return undefined if not found in variations', () => { + expect( + getEmbedInfoByProvider( 'i do not exist' ) + ).toBeUndefined(); } ); } ); } ); diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js index e443820f8842c..e963e739d018f 100644 --- a/packages/block-library/src/embed/util.js +++ b/packages/block-library/src/embed/util.js @@ -15,13 +15,11 @@ import memoize from 'memize'; */ import { renderToString } from '@wordpress/element'; import { createBlock } from '@wordpress/blocks'; -import { _x } from '@wordpress/i18n'; /** * Internal dependencies */ import variations from './variations'; -import { embedContentIcon } from './icons'; import metadata from './block.json'; const { name: DEFAULT_EMBED_BLOCK } = metadata; @@ -29,28 +27,14 @@ const WP_VARIATION = variations.find( ( { name } ) => name === 'wordpress' ); /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */ -/** - * @typedef {Object} EmbedInformation - * @property {string} title The embed block's title - * @property {WPComponent} icon The embed block's icon - */ - /** * Returns the embed block's information by matching the provided service provider * * @param {string} provider The embed block's provider - * @return {EmbedInformation} The embed block's information + * @return {WPBlockVariation} The embed block's information */ -export const getEmbedInfoByProvider = ( provider ) => { - const defaultEmbedInfo = { - title: _x( 'Embed', 'block title' ), - icon: embedContentIcon, - }; - const { title, icon } = - variations.find( ( { name } ) => name === provider ) || - defaultEmbedInfo; - return { title, icon }; -}; +export const getEmbedInfoByProvider = ( provider ) => + variations.find( ( { name } ) => name === provider ); /** * Returns true if any of the regular expressions match the URL. From b916a2b63b653c5ab6e34800fce17a38521588ad Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 23 Jul 2020 19:01:44 +0300 Subject: [PATCH 27/48] fix block test --- .../src/embed/test/__snapshots__/index.js.snap | 9 ++++----- packages/block-library/src/embed/test/index.js | 7 +++++-- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap index cd54f37827706..3d64e7ecc7252 100644 --- a/packages/block-library/src/embed/test/__snapshots__/index.js.snap +++ b/packages/block-library/src/embed/test/__snapshots__/index.js.snap @@ -12,16 +12,15 @@ exports[`core/embed block edit matches snapshot 1`] = ` > diff --git a/packages/block-library/src/embed/test/index.js b/packages/block-library/src/embed/test/index.js index 47635b9b86bb1..edb23706fc602 100644 --- a/packages/block-library/src/embed/test/index.js +++ b/packages/block-library/src/embed/test/index.js @@ -11,7 +11,7 @@ import { registerBlockType, unregisterBlockType } from '@wordpress/blocks'; /** * Internal dependencies */ -import { EmbedEdit } from '../edit'; +import EmbedEdit from '../edit'; import { findMoreSuitableBlock, getClassNames, @@ -20,13 +20,16 @@ import { } from '../util'; import { embedInstagramIcon } from '../icons'; +jest.mock( '@wordpress/data/src/components/use-select', () => () => ( {} ) ); + describe( 'core/embed', () => { test( 'block edit matches snapshot', () => { - // const EmbedEditTest = EmbedEdit( 'Embed', 'embed-generic' ); const wrapper = render( ); expect( wrapper ).toMatchSnapshot(); } ); +} ); +describe( 'utils', () => { describe( 'findMoreSuitableBlock', () => { test( 'findMoreSuitableBlock matches a URL to a block name', () => { const twitterURL = 'https://twitter.com/notnownikki'; From 89c6f3e9c51d64d298fdef8a3e7f385764bc00a1 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 27 Jul 2020 11:31:33 +0300 Subject: [PATCH 28/48] add check for registered default embed block + tests --- .../block-library/src/embed/test/index.js | 55 ++++++++++++------- packages/block-library/src/embed/util.js | 25 +++------ 2 files changed, 44 insertions(+), 36 deletions(-) diff --git a/packages/block-library/src/embed/test/index.js b/packages/block-library/src/embed/test/index.js index edb23706fc602..c6185a596dfb8 100644 --- a/packages/block-library/src/embed/test/index.js +++ b/packages/block-library/src/embed/test/index.js @@ -19,13 +19,16 @@ import { getEmbedInfoByProvider, } from '../util'; import { embedInstagramIcon } from '../icons'; +import variations from '../variations'; +import metadata from '../block.json'; + +const { name: DEFAULT_EMBED_BLOCK, attributes } = metadata; jest.mock( '@wordpress/data/src/components/use-select', () => () => ( {} ) ); describe( 'core/embed', () => { test( 'block edit matches snapshot', () => { const wrapper = render( ); - expect( wrapper ).toMatchSnapshot(); } ); } ); @@ -71,34 +74,46 @@ describe( 'utils', () => { } ); } ); describe( 'createUpgradedEmbedBlock', () => { - test( 'createUpgradedEmbedBlock bails early when block type does not exist', () => { - const youtubeURL = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'; - - expect( - createUpgradedEmbedBlock( - { attributes: { url: youtubeURL } }, - {} - ) - ).toBeUndefined(); + describe( 'do not create new block', () => { + it( 'when block type does not exist', () => { + const youtubeURL = 'https://www.youtube.com/watch?v=dQw4w'; + expect( + createUpgradedEmbedBlock( { + attributes: { url: youtubeURL }, + } ) + ).toBeUndefined(); + } ); + it( 'when no url provided', () => { + expect( + createUpgradedEmbedBlock( { name: 'some name' } ) + ).toBeUndefined(); + } ); } ); - test( 'createUpgradedEmbedBlock returns a YouTube embed block when given a YouTube URL', () => { + it( 'should return a YouTube embed block when given a YouTube URL', () => { const youtubeURL = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'; - registerBlockType( 'core-embed/youtube', { - title: 'YouTube', + registerBlockType( DEFAULT_EMBED_BLOCK, { + title: 'Embed', category: 'embed', + attributes, + variations, } ); - const result = createUpgradedEmbedBlock( - { attributes: { url: youtubeURL } }, - {} - ); + const result = createUpgradedEmbedBlock( { + attributes: { url: youtubeURL }, + } ); - unregisterBlockType( 'core-embed/youtube' ); + unregisterBlockType( DEFAULT_EMBED_BLOCK ); - expect( result ).not.toBeUndefined(); - expect( result.name ).toBe( 'core-embed/youtube' ); + expect( result ).toEqual( + expect.objectContaining( { + name: DEFAULT_EMBED_BLOCK, + attributes: expect.objectContaining( { + providerNameSlug: 'youtube', + } ), + } ) + ); } ); } ); describe( 'getEmbedInfoByProvider', () => { diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js index e963e739d018f..134a14aa835da 100644 --- a/packages/block-library/src/embed/util.js +++ b/packages/block-library/src/embed/util.js @@ -14,7 +14,7 @@ import memoize from 'memize'; * WordPress dependencies */ import { renderToString } from '@wordpress/element'; -import { createBlock } from '@wordpress/blocks'; +import { createBlock, getBlockType } from '@wordpress/blocks'; /** * Internal dependencies @@ -82,26 +82,19 @@ export const getPhotoHtml = ( photo ) => { * See `getAttributesFromPreview` in the generated embed edit component. * * @param {Object} props The block's props. - * @param {Object} attributesFromPreview Attributes generated from the block's most up to date preview. + * @param {Object} [attributesFromPreview] Attributes generated from the block's most up to date preview. * @return {Object|undefined} A more suitable embed block if one exists. */ -export const createUpgradedEmbedBlock = ( props, attributesFromPreview ) => { - const { - preview, - // name, - attributes: { url, providerNameSlug } = {}, - } = props; +export const createUpgradedEmbedBlock = ( + props, + attributesFromPreview = {} +) => { + const { preview, attributes: { url, providerNameSlug } = {} } = props; - if ( ! url ) return; + if ( ! url || ! getBlockType( DEFAULT_EMBED_BLOCK ) ) return; const matchedBlock = findMoreSuitableBlock( url ); - // TODO as we only have variations of core/embed we only have to check for core/embed - // but this is used by [image,video,audio], check better when it will be their time to handle in this PR - // if ( ! getBlockType( DEFAULT_EMBED_BLOCK ) ) { - // return; - // } - // WordPress blocks can work on multiple sites, and so don't have patterns, // so if we're in a WordPress block, assume the user has chosen it for a WordPress URL. // TODO WP provider is `wordpress` ?? @@ -113,7 +106,7 @@ export const createUpgradedEmbedBlock = ( props, attributesFromPreview ) => { ! isCurrentBlockWP && matchedBlock && ( matchedBlock.attributes.providerNameSlug !== providerNameSlug || - ! providerNameSlug ); // this is here as audio,image,video don't provide this any prop besides url (handle differently??) + ! providerNameSlug ); if ( shouldCreateNewBlock ) { return createBlock( DEFAULT_EMBED_BLOCK, { url, From 803cca5b546b6e364ebfe8884b05801c6da0aae3 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 27 Jul 2020 16:12:26 +0300 Subject: [PATCH 29/48] add support for old embed blocks --- packages/blocks/src/api/parser.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/blocks/src/api/parser.js b/packages/blocks/src/api/parser.js index 34b86fa724a4f..a3e1bb0e9893a 100644 --- a/packages/blocks/src/api/parser.js +++ b/packages/blocks/src/api/parser.js @@ -438,6 +438,14 @@ export function createBlockWithFallback( blockNode ) { name = Platform.OS === 'web' ? 'core/social-link' : name; } + // Convert derivative blocks such as 'core-embed/instagram' to the + // canonical form 'core/embed'. + if ( name && name.indexOf( 'core-embed/' ) === 0 ) { + // Capture `core-embed/instagram` into `{"providerNameSlug":"instagram"}` + attributes.providerNameSlug = name.substring( 11 ); + name = 'core/embed'; + } + // Fallback content may be upgraded from classic editor expecting implicit // automatic paragraphs, so preserve them. Assumes wpautop is idempotent, // meaning there are no negative consequences to repeated autop calls. From 0af7734dfe5f023abdea988bdd88e7a73cb75c3d Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 27 Jul 2020 16:25:22 +0300 Subject: [PATCH 30/48] support deprecated transforms in parser --- .../block-library/src/embed/variations.js | 40 ------------------- packages/blocks/src/api/parser.js | 11 ++++- 2 files changed, 10 insertions(+), 41 deletions(-) diff --git a/packages/block-library/src/embed/variations.js b/packages/block-library/src/embed/variations.js index cd50ad3602240..0ef3a7ee450ca 100644 --- a/packages/block-library/src/embed/variations.js +++ b/packages/block-library/src/embed/variations.js @@ -158,16 +158,6 @@ const variations = [ title: 'Crowdsignal', icon: embedContentIcon, keywords: [ 'polldaddy', __( 'survey' ) ], - transform: [ - { - type: 'block', - blocks: [ 'polldaddy' ], - transform: ( content ) => - createBlock( 'crowdsignal', { - content, - } ), - }, - ], description: __( 'Embed Crowdsignal (formerly Polldaddy) content.' ), patterns: [ /^https?:\/\/((.+\.)?polldaddy\.com|poll\.fm|.+\.survey\.fm)\/.+/i, @@ -227,16 +217,6 @@ const variations = [ patterns: [ /^https?:\/\/(www\.)?mixcloud\.com\/.+/i ], attributes: { providerNameSlug: 'mixcloud', responsive: true }, }, - { - // Deprecated in favour of the crowdsignal block - name: 'polldaddy', - title: 'Polldaddy', - icon: embedContentIcon, - description: __( 'Embed Polldaddy content.' ), - scope: [ 'block' ], - patterns: [], - attributes: { providerNameSlug: 'polldaddy', responsive: true }, - }, { name: 'reddit', title: 'Reddit', @@ -289,30 +269,10 @@ const variations = [ responsive: true, }, }, - { - // Deprecated in favour of the speaker-deck block. - name: 'speaker', - title: 'Speaker', - icon: embedAudioIcon, - scope: [ 'block' ], - patterns: [], - attributes: { providerNameSlug: 'speaker', responsive: true }, - }, { name: 'speaker-deck', title: 'Speaker Deck', icon: embedContentIcon, - transform: [ - { - type: 'block', - blocks: [ 'speaker' ], - transform: ( content ) => { - return createBlock( 'speaker-deck', { - content, - } ); - }, - }, - ], description: __( 'Embed Speaker Deck content.' ), patterns: [ /^https?:\/\/(www\.)?speakerdeck\.com\/.+/i ], attributes: { providerNameSlug: 'speaker-deck', responsive: true }, diff --git a/packages/blocks/src/api/parser.js b/packages/blocks/src/api/parser.js index a3e1bb0e9893a..eb5417ee7516e 100644 --- a/packages/blocks/src/api/parser.js +++ b/packages/blocks/src/api/parser.js @@ -442,7 +442,16 @@ export function createBlockWithFallback( blockNode ) { // canonical form 'core/embed'. if ( name && name.indexOf( 'core-embed/' ) === 0 ) { // Capture `core-embed/instagram` into `{"providerNameSlug":"instagram"}` - attributes.providerNameSlug = name.substring( 11 ); + const providerSlug = name.substring( 11 ); + const deprecated = { + speaker: 'speaker-deck', + polldaddy: 'crowdsignal', + }; + attributes.providerNameSlug = Object.keys( deprecated ).includes( + providerSlug + ) + ? deprecated[ providerSlug ] + : providerSlug; name = 'core/embed'; } From 3c688a9767ebc313a3fef3eee2549566091ce558 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 27 Jul 2020 16:28:34 +0300 Subject: [PATCH 31/48] support deprecated transforms in parser --- packages/block-library/src/embed/variations.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/embed/variations.js b/packages/block-library/src/embed/variations.js index 0ef3a7ee450ca..ded1ea232074f 100644 --- a/packages/block-library/src/embed/variations.js +++ b/packages/block-library/src/embed/variations.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { createBlock } from '@wordpress/blocks'; /** * Internal dependencies From 956dd64d89884cd6d74a94a92bcda5cbe9ef25c8 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 27 Jul 2020 17:19:42 +0300 Subject: [PATCH 32/48] fix full-content tests --- packages/e2e-tests/fixtures/blocks/core__embed.html | 4 ++-- packages/e2e-tests/fixtures/blocks/core__embed.json | 4 +++- test/integration/full-content/full-content.test.js | 4 +--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/e2e-tests/fixtures/blocks/core__embed.html b/packages/e2e-tests/fixtures/blocks/core__embed.html index 211e9e114ec54..f9a539f22a0c9 100644 --- a/packages/e2e-tests/fixtures/blocks/core__embed.html +++ b/packages/e2e-tests/fixtures/blocks/core__embed.html @@ -1,8 +1,8 @@ - +
https://example.com/
Embedded content from an example URL
- + diff --git a/packages/e2e-tests/fixtures/blocks/core__embed.json b/packages/e2e-tests/fixtures/blocks/core__embed.json index 916935db4c4c3..4903ba90e8c4d 100644 --- a/packages/e2e-tests/fixtures/blocks/core__embed.json +++ b/packages/e2e-tests/fixtures/blocks/core__embed.json @@ -6,7 +6,9 @@ "attributes": { "url": "https://example.com/", "caption": "Embedded content from an example URL", - "allowResponsive": true + "allowResponsive": true, + "responsive": false, + "previewable": true }, "innerBlocks": [], "originalContent": "
\n
\n https://example.com/\n
\n
Embedded content from an example URL
\n
" diff --git a/test/integration/full-content/full-content.test.js b/test/integration/full-content/full-content.test.js index 008239bd612b6..02f638691a663 100644 --- a/test/integration/full-content/full-content.test.js +++ b/test/integration/full-content/full-content.test.js @@ -217,9 +217,7 @@ describe( 'full post content fixture', () => { // `save` functions and attributes. // The `core/template` is not worth testing here because it's never saved, it's covered better in e2e tests. .filter( - ( name ) => - name.indexOf( 'core-embed' ) !== 0 && - name !== 'core/template' + ( name ) => ! [ 'core/embed', 'core/template' ].includes( name ) ) .forEach( ( name ) => { const nameToFilename = blockNameToFixtureBasename( name ); From 1b0d6a38a61167c8503a732a33ec7c516713d862 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 28 Jul 2020 12:51:08 +0300 Subject: [PATCH 33/48] revert previewAttributes handling react lifecycle doesn't play well with the previous change - using megedAttributes as a local state var --- packages/block-library/src/embed/edit.js | 33 +++++++++++++++--------- packages/block-library/src/embed/util.js | 8 +++++- 2 files changed, 28 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index 6b5627f06e982..314d56d1bfab7 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -42,9 +42,6 @@ const EmbedEdit = ( props ) => { providerNameSlug, previewable, responsive, - allowResponsive, - caption, - className, url: attributesUrl, }, attributes, @@ -63,7 +60,6 @@ const EmbedEdit = ( props ) => { const [ url, setURL ] = useState( attributesUrl ); const [ isEditingURL, setIsEditingURL ] = useState( false ); - const [ mergedAttributes, setMergedAttributes ] = useState( attributes ); const { invalidateResolution } = useDispatch( 'core/data' ); const { @@ -112,6 +108,7 @@ const EmbedEdit = ( props ) => { * @return {Object} Attributes derived from the preview, merged with the current attributes. */ const getMergedAttributes = () => { + const { allowResponsive, className } = attributes; return { ...attributes, ...getAttributesFromPreview( @@ -125,6 +122,7 @@ const EmbedEdit = ( props ) => { }; const toggleResponsive = () => { + const { allowResponsive, className } = attributes; const { html } = preview; const newAllowResponsive = ! allowResponsive; @@ -161,12 +159,11 @@ const EmbedEdit = ( props ) => { // clipping or scrollbars. The `getAttributesFromPreview` function // that `getMergedAttributes` uses is memoized so that we're not // calculating them on every render. - setMergedAttributes( getMergedAttributes() ); - setAttributes( mergedAttributes ); + setAttributes( getMergedAttributes() ); if ( onReplace ) { const upgradedBlock = createUpgradedEmbedBlock( props, - mergedAttributes + getMergedAttributes() ); if ( upgradedBlock ) { @@ -209,6 +206,21 @@ const EmbedEdit = ( props ) => { ); } + // Even though we set attributes that get derived from the preview, + // we don't access them directly because for the initial render, + // the `setAttributes` call will not have taken effect. If we're + // rendering responsive content, setting the responsive classes + // after the preview has been rendered can result in unwanted + // clipping or scrollbars. The `getAttributesFromPreview` function + // that `getMergedAttributes` uses is memoized so that we're not + const { + caption, + type, + allowResponsive, + className: classFromPreview, + } = getMergedAttributes(); + const className = classnames( classFromPreview, props.className ); + return ( <> { setAttributes( { caption: value } ) diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js index 134a14aa835da..f1e178f806f7c 100644 --- a/packages/block-library/src/embed/util.js +++ b/packages/block-library/src/embed/util.js @@ -208,7 +208,13 @@ export function fallback( url, onReplace ) { * @return {Object} Attributes and values. */ export const getAttributesFromPreview = memoize( - ( preview, title, currentClassNames, isResponsive, allowResponsive ) => { + ( + preview, + title, + currentClassNames, + isResponsive, + allowResponsive = true + ) => { if ( ! preview ) { return {}; } From 8f48b3a0321e0d1ad14ac32b8601c587d1a21cc3 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 28 Jul 2020 14:27:50 +0300 Subject: [PATCH 34/48] fix e2e tests --- .../e2e-tests/specs/editor/various/embedding.test.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/embedding.test.js b/packages/e2e-tests/specs/editor/various/embedding.test.js index f81b756a7a373..787f7f6ca703c 100644 --- a/packages/e2e-tests/specs/editor/various/embedding.test.js +++ b/packages/e2e-tests/specs/editor/various/embedding.test.js @@ -171,7 +171,7 @@ describe( 'Embedding content', () => { it( 'should render embeds in the correct state', async () => { // Valid embed. Should render valid figure element. await insertEmbed( 'https://twitter.com/notnownikki' ); - await page.waitForSelector( 'figure.wp-block-embed-twitter' ); + await page.waitForSelector( 'figure.wp-block-embed' ); // Valid provider; invalid content. Should render failed, edit state. await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' ); @@ -197,13 +197,13 @@ describe( 'Embedding content', () => { await insertEmbed( 'https://wordpress.org/gutenberg/handbook/block-api/attributes/' ); - await page.waitForSelector( 'figure.wp-block-embed-wordpress' ); + await page.waitForSelector( 'figure.wp-block-embed' ); // Video content. Should render valid figure element, and include the // aspect ratio class. await insertEmbed( 'https://www.youtube.com/watch?v=lXMskKTw3Bc' ); await page.waitForSelector( - 'figure.wp-block-embed-youtube.wp-embed-aspect-16-9' + 'figure.wp-block-embed.is-type-video.wp-embed-aspect-16-9' ); // Photo content. Should render valid figure element. @@ -229,7 +229,7 @@ describe( 'Embedding content', () => { it( 'should retry embeds that could not be embedded with trailing slashes, without the trailing slashes', async () => { await insertEmbed( 'https://twitter.com/notnownikki/' ); // The twitter block should appear correctly. - await page.waitForSelector( 'figure.wp-block-embed-twitter' ); + await page.waitForSelector( 'figure.wp-block-embed' ); } ); it( 'should allow the user to try embedding a failed URL again', async () => { @@ -256,7 +256,7 @@ describe( 'Embedding content', () => { }, ] ); await clickButton( 'Try again' ); - await page.waitForSelector( 'figure.wp-block-embed-twitter' ); + await page.waitForSelector( 'figure.wp-block-embed' ); } ); it( 'should switch to the WordPress block correctly', async () => { @@ -278,6 +278,6 @@ describe( 'Embedding content', () => { await insertEmbed( postUrl ); // Check the block has become a WordPress block. - await page.waitForSelector( '.wp-block-embed-wordpress' ); + await page.waitForSelector( 'figure.wp-block-embed' ); } ); } ); From c3da25ab827d5b8a9804442ecb7f60bcea0f172f Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 28 Jul 2020 16:23:08 +0300 Subject: [PATCH 35/48] fix unit tests --- packages/block-library/src/embed/transforms.js | 9 ++++++++- test/integration/blocks-raw-handling.test.js | 4 ++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/embed/transforms.js b/packages/block-library/src/embed/transforms.js index 42a73167ad47b..1709d0ffc0893 100644 --- a/packages/block-library/src/embed/transforms.js +++ b/packages/block-library/src/embed/transforms.js @@ -4,6 +4,13 @@ import { renderToString } from '@wordpress/element'; import { createBlock } from '@wordpress/blocks'; +/** + * Internal dependencies + */ +import metadata from './block.json'; + +const { name: EMBED_BLOCK } = metadata; + /** * Default transforms for generic embeds. */ @@ -15,7 +22,7 @@ const transforms = { node.nodeName === 'P' && /^\s*(https?:\/\/\S+)\s*$/i.test( node.textContent ), transform: ( node ) => { - return createBlock( 'core/embed', { + return createBlock( EMBED_BLOCK, { url: node.textContent.trim(), } ); }, diff --git a/test/integration/blocks-raw-handling.test.js b/test/integration/blocks-raw-handling.test.js index f3ae6e3b2d6ca..4c5129648bb30 100644 --- a/test/integration/blocks-raw-handling.test.js +++ b/test/integration/blocks-raw-handling.test.js @@ -77,7 +77,7 @@ describe( 'Blocks raw handling', () => { ); }, transform: () => { - return createBlock( 'core-embed/youtube', { + return createBlock( 'core/embed', { url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', } ); @@ -200,7 +200,7 @@ describe( 'Blocks raw handling', () => { } ); expect( filtered ).toHaveLength( 1 ); - expect( filtered[ 0 ].name ).toBe( 'core-embed/youtube' ); + expect( filtered[ 0 ].name ).toBe( 'core/embed' ); expect( console ).toHaveLogged(); } ); From bfee4047d51ef48136e802dfc0cd653c76d2fbf4 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 28 Jul 2020 18:09:42 +0300 Subject: [PATCH 36/48] change all references to old core-embed block --- .../inserter/test/fixtures/index.js | 4 +- .../block-editor/src/store/test/reducer.js | 16 ++-- packages/block-library/src/embed/style.scss | 4 +- packages/blocks/src/api/serializer.js | 2 +- packages/editor/src/store/selectors.js | 25 +++--- packages/editor/src/store/test/selectors.js | 79 ++++++++++++++++++- post-content.php | 7 +- 7 files changed, 107 insertions(+), 30 deletions(-) diff --git a/packages/block-editor/src/components/inserter/test/fixtures/index.js b/packages/block-editor/src/components/inserter/test/fixtures/index.js index 267fed50f36aa..a67bd3e42fb9d 100644 --- a/packages/block-editor/src/components/inserter/test/fixtures/index.js +++ b/packages/block-editor/src/components/inserter/test/fixtures/index.js @@ -81,8 +81,8 @@ export const moreItem = { }; export const youtubeItem = { - id: 'core-embed/youtube', - name: 'core-embed/youtube', + id: 'core/embed', + name: 'core/embed', initialAttributes: {}, title: 'YouTube', category: 'embed', diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index 2d4a9c8ca7c05..397a384eb059b 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/packages/block-editor/src/store/test/reducer.js @@ -2404,7 +2404,7 @@ describe( 'state', () => { blocks: [ { clientId: 'bacon', - name: 'core-embed/twitter', + name: 'core/embed', }, ], time: 123456, @@ -2412,10 +2412,10 @@ describe( 'state', () => { expect( state ).toEqual( { insertUsage: { - 'core-embed/twitter': { + 'core/embed': { time: 123456, count: 1, - insert: { name: 'core-embed/twitter' }, + insert: { name: 'core/embed' }, }, }, } ); @@ -2423,10 +2423,10 @@ describe( 'state', () => { const twoRecentBlocks = preferences( deepFreeze( { insertUsage: { - 'core-embed/twitter': { + 'core/embed': { time: 123456, count: 1, - insert: { name: 'core-embed/twitter' }, + insert: { name: 'core/embed' }, }, }, } ), @@ -2435,7 +2435,7 @@ describe( 'state', () => { blocks: [ { clientId: 'eggs', - name: 'core-embed/twitter', + name: 'core/embed', }, { clientId: 'bacon', @@ -2449,10 +2449,10 @@ describe( 'state', () => { expect( twoRecentBlocks ).toEqual( { insertUsage: { - 'core-embed/twitter': { + 'core/embed': { time: 123457, count: 2, - insert: { name: 'core-embed/twitter' }, + insert: { name: 'core/embed' }, }, 'core/block/123': { time: 123457, diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss index a9a6437fe4a3c..944a7a63ce97a 100644 --- a/packages/block-library/src/embed/style.scss +++ b/packages/block-library/src/embed/style.scss @@ -1,6 +1,6 @@ // Apply max-width to floated items that have no intrinsic width -.wp-block[data-align="left"] > [data-type^="core-embed"], -.wp-block[data-align="right"] > [data-type^="core-embed"], +.wp-block[data-align="left"] > [data-type="core/embed"], +.wp-block[data-align="right"] > [data-type="core/embed"], .wp-block-embed.alignleft, .wp-block-embed.alignright { // Instagram widgets have a min-width of 326px, so go a bit beyond that. diff --git a/packages/blocks/src/api/serializer.js b/packages/blocks/src/api/serializer.js index 394a212dd88e9..f30bada1d4a7b 100644 --- a/packages/blocks/src/api/serializer.js +++ b/packages/blocks/src/api/serializer.js @@ -36,7 +36,7 @@ import BlockContentProvider from '../block-content-provider'; */ export function getBlockDefaultClassName( blockName ) { // Generated HTML classes for blocks follow the `wp-block-{name}` nomenclature. - // Blocks provided by WordPress drop the prefixes 'core/' or 'core-' (used in 'core-embed/'). + // Blocks provided by WordPress drop the prefixes 'core/' or 'core-'. const className = 'wp-block-' + blockName.replace( /\//, '-' ).replace( /^core-/, '' ); diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js index 2b45248bd1aee..5603c4940436e 100644 --- a/packages/editor/src/store/selectors.js +++ b/packages/editor/src/store/selectors.js @@ -891,19 +891,28 @@ export function getEditedPostPreviewLink( state ) { export function getSuggestedPostFormat( state ) { const blocks = getEditorBlocks( state ); + if ( blocks.length > 2 ) return null; + let name; // If there is only one block in the content of the post grab its name // so we can derive a suitable post format from it. if ( blocks.length === 1 ) { name = blocks[ 0 ].name; + // check for core/embed `video` and `audio` eligible suggestions + if ( name === 'core/embed' ) { + const provider = blocks[ 0 ].attributes?.providerNameSlug; + if ( [ 'youtube', 'vimeo' ].includes( provider ) ) { + name = 'core/video'; + } else if ( [ 'spotify', 'soundcloud' ].includes( provider ) ) { + name = 'core/audio'; + } + } } // If there are two blocks in the content and the last one is a text blocks // grab the name of the first one to also suggest a post format from it. - if ( blocks.length === 2 ) { - if ( blocks[ 1 ].name === 'core/paragraph' ) { - name = blocks[ 0 ].name; - } + if ( blocks.length === 2 && blocks[ 1 ].name === 'core/paragraph' ) { + name = blocks[ 0 ].name; } // We only convert to default post formats in core. @@ -916,16 +925,12 @@ export function getSuggestedPostFormat( state ) { case 'core/gallery': return 'gallery'; case 'core/video': - case 'core-embed/youtube': - case 'core-embed/vimeo': return 'video'; case 'core/audio': - case 'core-embed/spotify': - case 'core-embed/soundcloud': return 'audio'; + default: + return null; } - - return null; } /** diff --git a/packages/editor/src/store/test/selectors.js b/packages/editor/src/store/test/selectors.js index c0c37ad182b5d..8fe17171d73bd 100644 --- a/packages/editor/src/store/test/selectors.js +++ b/packages/editor/src/store/test/selectors.js @@ -2116,6 +2116,52 @@ describe( 'selectors', () => { expect( getSuggestedPostFormat( state ) ).toBeNull(); } ); + it( 'return null if only one block of type `core/embed` and provider not matched', () => { + const state = { + editor: { + present: { + blocks: { + value: [ + { + clientId: 567, + name: 'core/embed', + attributes: { + providerNameSlug: 'instagram', + }, + }, + ], + }, + edits: {}, + }, + }, + initialEdits: {}, + currentPost: {}, + }; + expect( getSuggestedPostFormat( state ) ).toBeNull(); + } ); + + it( 'return null if only one block of type `core/embed` and provider not exists', () => { + const state = { + editor: { + present: { + blocks: { + value: [ + { + clientId: 567, + name: 'core/embed', + attributes: {}, + }, + ], + }, + edits: {}, + }, + }, + initialEdits: {}, + currentPost: {}, + }; + expect( getSuggestedPostFormat( state ) ).toBeNull(); + } ); + it( 'returns null if there is more than one block in the post', () => { const state = { editor: { @@ -2190,7 +2236,7 @@ describe( 'selectors', () => { expect( getSuggestedPostFormat( state ) ).toBe( 'quote' ); } ); - it( 'returns Video if the first block is of type `core-embed/youtube`', () => { + it( 'returns Video if the first block is of type `core/embed from youtube`', () => { const state = { editor: { present: { @@ -2198,8 +2244,10 @@ describe( 'selectors', () => { value: [ { clientId: 567, - name: 'core-embed/youtube', - attributes: {}, + name: 'core/embed', + attributes: { + providerNameSlug: 'youtube', + }, }, ], }, @@ -2213,6 +2261,31 @@ describe( 'selectors', () => { expect( getSuggestedPostFormat( state ) ).toBe( 'video' ); } ); + it( 'returns Audio if the first block is of type `core/embed from soundcloud`', () => { + const state = { + editor: { + present: { + blocks: { + value: [ + { + clientId: 567, + name: 'core/embed', + attributes: { + providerNameSlug: 'soundcloud', + }, + }, + ], + }, + edits: {}, + }, + }, + initialEdits: {}, + currentPost: {}, + }; + + expect( getSuggestedPostFormat( state ) ).toBe( 'audio' ); + } ); + it( 'returns Quote if the first block is of type `core/quote` and second is of type `core/paragraph`', () => { const state = { editor: { diff --git a/post-content.php b/post-content.php index da1cd54d60a40..82accebf6f616 100644 --- a/post-content.php +++ b/post-content.php @@ -145,12 +145,11 @@

-// TODO change all previous references of core-embed... - -
+ +
https://vimeo.com/22439234
- +

From 5df70de3d297058fe6c70312c636a24bff39473d Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 28 Jul 2020 19:23:42 +0300 Subject: [PATCH 37/48] add snapshots to e2e tests --- .../__snapshots__/embedding.test.js.snap | 68 +++++++++++++++++++ .../specs/editor/various/embedding.test.js | 4 ++ 2 files changed, 72 insertions(+) diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/embedding.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/embedding.test.js.snap index 9672627058066..2a50fd62306df 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/embedding.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/embedding.test.js.snap @@ -5,3 +5,71 @@ exports[`Embedding content should allow the user to convert unembeddable URLs to

https://twitter.com/wooyaygutenberg123454312

" `; + +exports[`Embedding content should allow the user to try embedding a failed URL again 1`] = ` +" +
+https://twitter.com/wooyaygutenberg123454312 +
+" +`; + +exports[`Embedding content should render embeds in the correct state 1`] = ` +" +
+https://twitter.com/notnownikki +
+ + + +
+https://twitter.com/wooyaygutenberg123454312 +
+ + + +
+https://wordpress.org/gutenberg/handbook/ +
+ + + +
+https://twitter.com/thatbunty +
+ + + +
+https://wordpress.org/gutenberg/handbook/block-api/attributes/ +
+ + + +
+https://www.youtube.com/watch?v=lXMskKTw3Bc +
+ + + +
+https://cloudup.com/cQFlxqtY4ob +
+" +`; + +exports[`Embedding content should retry embeds that could not be embedded with trailing slashes, without the trailing slashes 1`] = ` +" +
+https://twitter.com/notnownikki/ +
+" +`; + +exports[`Embedding content should switch to the WordPress block correctly 1`] = ` +" +
+http://localhost:8889/?p=177 +
+" +`; diff --git a/packages/e2e-tests/specs/editor/various/embedding.test.js b/packages/e2e-tests/specs/editor/various/embedding.test.js index 787f7f6ca703c..5ddf8028b5fc8 100644 --- a/packages/e2e-tests/specs/editor/various/embedding.test.js +++ b/packages/e2e-tests/specs/editor/various/embedding.test.js @@ -208,6 +208,7 @@ describe( 'Embedding content', () => { // Photo content. Should render valid figure element. await insertEmbed( 'https://cloudup.com/cQFlxqtY4ob' ); + expect( await getEditedPostContent() ).toMatchSnapshot(); } ); it( 'should allow the user to convert unembeddable URLs to a paragraph with a link in it', async () => { @@ -230,6 +231,7 @@ describe( 'Embedding content', () => { await insertEmbed( 'https://twitter.com/notnownikki/' ); // The twitter block should appear correctly. await page.waitForSelector( 'figure.wp-block-embed' ); + expect( await getEditedPostContent() ).toMatchSnapshot(); } ); it( 'should allow the user to try embedding a failed URL again', async () => { @@ -257,6 +259,7 @@ describe( 'Embedding content', () => { ] ); await clickButton( 'Try again' ); await page.waitForSelector( 'figure.wp-block-embed' ); + expect( await getEditedPostContent() ).toMatchSnapshot(); } ); it( 'should switch to the WordPress block correctly', async () => { @@ -279,5 +282,6 @@ describe( 'Embedding content', () => { // Check the block has become a WordPress block. await page.waitForSelector( 'figure.wp-block-embed' ); + expect( await getEditedPostContent() ).toMatchSnapshot(); } ); } ); From dbe4db77923d38e320eaaccb85738df1e31f4e77 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 28 Jul 2020 19:28:03 +0300 Subject: [PATCH 38/48] enhance WP embed block matching with WP_EMBED_TYPE --- packages/block-library/src/embed/constants.js | 2 ++ packages/block-library/src/embed/util.js | 10 +++++----- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/embed/constants.js b/packages/block-library/src/embed/constants.js index 7db135a4a1b75..b223da524da3d 100644 --- a/packages/block-library/src/embed/constants.js +++ b/packages/block-library/src/embed/constants.js @@ -9,3 +9,5 @@ export const ASPECT_RATIOS = [ { ratio: '0.56', className: 'wp-embed-aspect-9-16' }, { ratio: '0.50', className: 'wp-embed-aspect-1-2' }, ]; + +export const WP_EMBED_TYPE = 'wp-embed'; diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js index f1e178f806f7c..357cbe086069c 100644 --- a/packages/block-library/src/embed/util.js +++ b/packages/block-library/src/embed/util.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { ASPECT_RATIOS } from './constants'; +import { ASPECT_RATIOS, WP_EMBED_TYPE } from './constants'; /** * External dependencies @@ -89,7 +89,7 @@ export const createUpgradedEmbedBlock = ( props, attributesFromPreview = {} ) => { - const { preview, attributes: { url, providerNameSlug } = {} } = props; + const { preview, attributes: { url, providerNameSlug, type } = {} } = props; if ( ! url || ! getBlockType( DEFAULT_EMBED_BLOCK ) ) return; @@ -97,9 +97,9 @@ export const createUpgradedEmbedBlock = ( // WordPress blocks can work on multiple sites, and so don't have patterns, // so if we're in a WordPress block, assume the user has chosen it for a WordPress URL. - // TODO WP provider is `wordpress` ?? const isCurrentBlockWP = - providerNameSlug === WP_VARIATION.attributes.providerNameSlug; + providerNameSlug === WP_VARIATION.attributes.providerNameSlug || + type === WP_EMBED_TYPE; // if current block is not WordPress and a more suitable block found // that is different from the current one, create the new matched block const shouldCreateNewBlock = @@ -230,7 +230,7 @@ export const getAttributesFromPreview = memoize( ); if ( isFromWordPress( html ) ) { - type = 'wp-embed'; + type = WP_EMBED_TYPE; } if ( html || 'photo' === type ) { From a7b57cad0ab1216edb3b4eb47ce58be6549a497e Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 28 Jul 2020 19:54:36 +0300 Subject: [PATCH 39/48] remove snapshot with publish post --- .../editor/various/__snapshots__/embedding.test.js.snap | 8 -------- packages/e2e-tests/specs/editor/various/embedding.test.js | 1 - 2 files changed, 9 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/embedding.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/embedding.test.js.snap index 2a50fd62306df..05d8d1ab3c2b8 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/embedding.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/embedding.test.js.snap @@ -65,11 +65,3 @@ https://twitter.com/notnownikki/
" `; - -exports[`Embedding content should switch to the WordPress block correctly 1`] = ` -" -
-http://localhost:8889/?p=177 -
-" -`; diff --git a/packages/e2e-tests/specs/editor/various/embedding.test.js b/packages/e2e-tests/specs/editor/various/embedding.test.js index 5ddf8028b5fc8..170965215eceb 100644 --- a/packages/e2e-tests/specs/editor/various/embedding.test.js +++ b/packages/e2e-tests/specs/editor/various/embedding.test.js @@ -282,6 +282,5 @@ describe( 'Embedding content', () => { // Check the block has become a WordPress block. await page.waitForSelector( 'figure.wp-block-embed' ); - expect( await getEditedPostContent() ).toMatchSnapshot(); } ); } ); From 0ee5c3a231edc19bc295811020f4bbde1f18eed6 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 29 Jul 2020 12:30:53 +0300 Subject: [PATCH 40/48] add responsive attribute to demo vimeo block --- packages/block-library/src/embed/util.js | 4 ++-- post-content.php | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js index 357cbe086069c..c690de013e2a4 100644 --- a/packages/block-library/src/embed/util.js +++ b/packages/block-library/src/embed/util.js @@ -173,8 +173,8 @@ export function getClassNames( const potentialRatio = ASPECT_RATIOS[ ratioIndex ]; if ( aspectRatio >= potentialRatio.ratio ) { return classnames( existingClassNames, { - [ potentialRatio.className ]: allowResponsive, - 'wp-has-aspect-ratio': allowResponsive, + [ potentialRatio.className ]: true, + 'wp-has-aspect-ratio': true, } ); } } diff --git a/post-content.php b/post-content.php index 82accebf6f616..de5bc48ecb95e 100644 --- a/post-content.php +++ b/post-content.php @@ -145,7 +145,7 @@

- +
https://vimeo.com/22439234
From 29ed83e6ac91f8d761986c26d0be84e26dbfc73b Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 29 Jul 2020 12:35:18 +0300 Subject: [PATCH 41/48] fix typo --- post-content.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/post-content.php b/post-content.php index de5bc48ecb95e..4a1dc0c2f2d99 100644 --- a/post-content.php +++ b/post-content.php @@ -145,7 +145,7 @@

- +
https://vimeo.com/22439234
From edaa6b7dc8aef11189fa0a695bbb13cde0b74ddf Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 29 Jul 2020 14:45:40 +0300 Subject: [PATCH 42/48] add responsive attribute in old embed blocks in parser --- packages/blocks/src/api/parser.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/blocks/src/api/parser.js b/packages/blocks/src/api/parser.js index eb5417ee7516e..feedef2e72a9b 100644 --- a/packages/blocks/src/api/parser.js +++ b/packages/blocks/src/api/parser.js @@ -452,6 +452,11 @@ export function createBlockWithFallback( blockNode ) { ) ? deprecated[ providerSlug ] : providerSlug; + // this is needed as the `responsive` attribute was passed + // in a different way before the refactoring to block variations + if ( ! [ 'amazon-kindle', 'wordpress' ].includes( providerSlug ) ) { + attributes.responsive = true; + } name = 'core/embed'; } From 5ebb4a5a554268dfeb150e2f5689eeb2f2e9fe0c Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 3 Aug 2020 12:33:59 +0300 Subject: [PATCH 43/48] try to limit BlockTypesList with prop --- .../src/components/block-types-list/index.js | 3 +- .../components/inserter/block-types-tab.js | 1 + .../src/components/inserter/quick-inserter.js | 1 + .../src/components/inserter/utils.js | 94 ++++++++++++------- 4 files changed, 64 insertions(+), 35 deletions(-) diff --git a/packages/block-editor/src/components/block-types-list/index.js b/packages/block-editor/src/components/block-types-list/index.js index a6b6b734bc1bc..e4e0251d23d5f 100644 --- a/packages/block-editor/src/components/block-types-list/index.js +++ b/packages/block-editor/src/components/block-types-list/index.js @@ -21,9 +21,10 @@ function BlockTypesList( { onHover = () => {}, children, label, + limit, } ) { const composite = useCompositeState(); - const normalizedItems = includeVariationsInInserterItems( items ); + const normalizedItems = includeVariationsInInserterItems( items, limit ); const orderId = normalizedItems.reduce( ( acc, item ) => acc + '--' + item.id, '' diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js index e6b7c630bad37..c0cc74399ae52 100644 --- a/packages/block-editor/src/components/inserter/block-types-tab.js +++ b/packages/block-editor/src/components/inserter/block-types-tab.js @@ -147,6 +147,7 @@ export function BlockTypesTab( { onSelect={ onSelectItem } onHover={ onHover } label={ _x( 'Most used', 'blocks' ) } + limit={ MAX_SUGGESTED_ITEMS } /> ) } diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index 456fb533ac467..1d274b73484b8 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -80,6 +80,7 @@ function QuickInserterList( { onSelect={ onSelectBlockType } onHover={ onHover } label={ __( 'Blocks' ) } + limit={ SHOWN_BLOCK_TYPES } /> ) } diff --git a/packages/block-editor/src/components/inserter/utils.js b/packages/block-editor/src/components/inserter/utils.js index 4e8caf0b68494..4ca0c30aeec9b 100644 --- a/packages/block-editor/src/components/inserter/utils.js +++ b/packages/block-editor/src/components/inserter/utils.js @@ -1,45 +1,71 @@ +// TODO jsdoc + tests +const getVariationMapper = ( item ) => ( variation ) => ( { + ...item, + id: `${ item.id }-${ variation.name }`, + icon: variation.icon || item.icon, + title: variation.title || item.title, + description: variation.description || item.description, + // If `example` is explicitly undefined for the variation, the preview will not be shown. + example: variation.hasOwnProperty( 'example' ) + ? variation.example + : item.example, + initialAttributes: { + ...item.initialAttributes, + ...variation.attributes, + }, + innerBlocks: variation.innerBlocks, +} ); + /** * Normalizes an inserter block types list and includes variations as separate items. * * @param {Array} items Denormalized inserter items + * @param {number} [limit] Limit returned results by a given threshold. If limit===-1 return all * @return {Array} Normalized inserter items. */ -export function includeVariationsInInserterItems( items ) { - return items.reduce( ( result, item ) => { - const { variations = [] } = item; - const hasDefaultVariation = variations.some( - ( { isDefault } ) => isDefault - ); +export function includeVariationsInInserterItems( items, limit = -1 ) { + const itemsLength = items.length; + if ( limit > 0 && itemsLength >= limit ) { + // No need to iterate for variations + return items.slice( 0, limit ); + } + if ( limit < 1 ) { + // Show all available blocks with variations + return items.reduce( ( result, item ) => { + const { variations = [] } = item; + const hasDefaultVariation = variations.some( + ( { isDefault } ) => isDefault + ); - // If there is no default inserter variation provided, - // then default block type is displayed. - if ( ! hasDefaultVariation ) { - result.push( item ); - } + // If there is no default inserter variation provided, + // then default block type is displayed. + if ( ! hasDefaultVariation ) { + result.push( item ); + } - if ( variations.length ) { - result = result.concat( - variations.map( ( variation ) => { - return { - ...item, - id: `${ item.id }-${ variation.name }`, - icon: variation.icon || item.icon, - title: variation.title || item.title, - description: variation.description || item.description, - // If `example` is explicitly undefined for the variation, the preview will not be shown. - example: variation.hasOwnProperty( 'example' ) - ? variation.example - : item.example, - initialAttributes: { - ...item.initialAttributes, - ...variation.attributes, - }, - innerBlocks: variation.innerBlocks, - }; - } ) + if ( variations.length ) { + const variationMapper = getVariationMapper( item ); + result = result.concat( variations.map( variationMapper ) ); + } + + return result; + }, [] ); + } + + // Limit is bigger than items length so we can add variations if exist + let itemsToAdd = limit - itemsLength; + let variationsToAdd = []; + for ( const item of items ) { + const { variations = [] } = item; + const variationsLength = variations.length; + if ( variationsLength ) { + const variationMapper = getVariationMapper( item ); + variationsToAdd = variationsToAdd.concat( + variations.slice( 0, itemsToAdd ).map( variationMapper ) ); + itemsToAdd -= variationsLength; + if ( itemsToAdd < 1 ) break; } - - return result; - }, [] ); + } + return items.concat( variationsToAdd ); } From 575469a6328f94bed9c153ef64f6d40c9b60c5ab Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 5 Aug 2020 12:09:56 +0300 Subject: [PATCH 44/48] review feedback + tests --- .../inserter/test/fixtures/index.js | 15 ++++ .../src/components/inserter/test/utils.js | 55 +++++++++++++++ .../src/components/inserter/utils.js | 69 ++++++++----------- 3 files changed, 97 insertions(+), 42 deletions(-) create mode 100644 packages/block-editor/src/components/inserter/test/utils.js diff --git a/packages/block-editor/src/components/inserter/test/fixtures/index.js b/packages/block-editor/src/components/inserter/test/fixtures/index.js index a67bd3e42fb9d..5d87650bbb077 100644 --- a/packages/block-editor/src/components/inserter/test/fixtures/index.js +++ b/packages/block-editor/src/components/inserter/test/fixtures/index.js @@ -25,6 +25,21 @@ export const paragraphItem = { keywords: [ 'random' ], }; +export const withSingleVariationItem = { + id: 'core/embed', + name: 'core/embed', + description: 'core description', + initialAttributes: {}, + category: 'embed', + variations: [ + { + name: 'youtube', + title: 'YouTube', + description: 'youtube description', + }, + ], +}; + export const withVariationsItem = { id: 'core/block-with-variations', name: 'core/block-with-variations', diff --git a/packages/block-editor/src/components/inserter/test/utils.js b/packages/block-editor/src/components/inserter/test/utils.js new file mode 100644 index 0000000000000..e86bf4afbb105 --- /dev/null +++ b/packages/block-editor/src/components/inserter/test/utils.js @@ -0,0 +1,55 @@ +/** + * Internal dependencies + */ +import { + moreItem, + paragraphItem, + someOtherItem, + withVariationsItem, + withSingleVariationItem, +} from './fixtures'; +import { includeVariationsInInserterItems } from '../utils'; + +describe( 'inserter utils', () => { + describe( 'includeVariationsInInserterItems', () => { + it( 'should return items if limit is equal to items length', () => { + const items = [ moreItem, paragraphItem, someOtherItem ]; + const res = includeVariationsInInserterItems( items, 3 ); + expect( res ).toEqual( items ); + } ); + it( 'should slice items if items are more than provided limit', () => { + const items = [ + moreItem, + paragraphItem, + someOtherItem, + withVariationsItem, + ]; + const res = includeVariationsInInserterItems( items, 2 ); + expect( res ).toEqual( [ moreItem, paragraphItem ] ); + } ); + it( 'should return proper result if no limit provided and block variations do NOT exist', () => { + const items = [ moreItem, paragraphItem, someOtherItem ]; + const res = includeVariationsInInserterItems( items ); + expect( res ).toEqual( items ); + } ); + it( 'should return proper result if no limit provided and block variations exist', () => { + const items = [ + moreItem, + paragraphItem, + someOtherItem, + withSingleVariationItem, + ]; + const expected = [ + ...items, + { + ...withSingleVariationItem, + id: 'core/embed-youtube', + title: 'YouTube', + description: 'youtube description', + }, + ]; + const res = includeVariationsInInserterItems( items ); + expect( res ).toEqual( expected ); + } ); + } ); +} ); diff --git a/packages/block-editor/src/components/inserter/utils.js b/packages/block-editor/src/components/inserter/utils.js index 4ca0c30aeec9b..a30d8a712718b 100644 --- a/packages/block-editor/src/components/inserter/utils.js +++ b/packages/block-editor/src/components/inserter/utils.js @@ -1,5 +1,10 @@ -// TODO jsdoc + tests -const getVariationMapper = ( item ) => ( variation ) => ( { +/** + * Return a function to be used to tranform a block variation to an inserter item + * + * @param {Object} item Denormalized inserter item + * @return {Function} Function to transform a block variation to inserter item + */ +const getItemFromVariation = ( item ) => ( variation ) => ( { ...item, id: `${ item.id }-${ variation.name }`, icon: variation.icon || item.icon, @@ -20,52 +25,32 @@ const getVariationMapper = ( item ) => ( variation ) => ( { * Normalizes an inserter block types list and includes variations as separate items. * * @param {Array} items Denormalized inserter items - * @param {number} [limit] Limit returned results by a given threshold. If limit===-1 return all + * @param {number} [limit=Infinity] Limit returned results by a given threshold. * @return {Array} Normalized inserter items. */ -export function includeVariationsInInserterItems( items, limit = -1 ) { - const itemsLength = items.length; - if ( limit > 0 && itemsLength >= limit ) { +export function includeVariationsInInserterItems( items, limit = Infinity ) { + if ( items.length >= limit ) { // No need to iterate for variations return items.slice( 0, limit ); } - if ( limit < 1 ) { - // Show all available blocks with variations - return items.reduce( ( result, item ) => { - const { variations = [] } = item; - const hasDefaultVariation = variations.some( - ( { isDefault } ) => isDefault - ); - - // If there is no default inserter variation provided, - // then default block type is displayed. - if ( ! hasDefaultVariation ) { - result.push( item ); - } - - if ( variations.length ) { - const variationMapper = getVariationMapper( item ); - result = result.concat( variations.map( variationMapper ) ); - } + // Show all available blocks with variations + return items.reduce( ( result, item ) => { + const { variations = [] } = item; + const hasDefaultVariation = variations.some( + ( { isDefault } ) => isDefault + ); - return result; - }, [] ); - } + // If there is no default inserter variation provided, + // then default block type is displayed. + if ( ! hasDefaultVariation ) { + result.push( item ); + } - // Limit is bigger than items length so we can add variations if exist - let itemsToAdd = limit - itemsLength; - let variationsToAdd = []; - for ( const item of items ) { - const { variations = [] } = item; - const variationsLength = variations.length; - if ( variationsLength ) { - const variationMapper = getVariationMapper( item ); - variationsToAdd = variationsToAdd.concat( - variations.slice( 0, itemsToAdd ).map( variationMapper ) - ); - itemsToAdd -= variationsLength; - if ( itemsToAdd < 1 ) break; + if ( variations.length ) { + const variationMapper = getItemFromVariation( item ); + result.push( ...variations.map( variationMapper ) ); } - } - return items.concat( variationsToAdd ); + + return result; + }, [] ); } From f008ffce37bfc3ea089d6eaa71862692e806e6b2 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 10 Aug 2020 11:22:44 +0300 Subject: [PATCH 45/48] review feedback --- packages/block-library/src/embed/save.js | 1 + packages/blocks/src/api/parser.js | 9 ++++----- packages/blocks/src/api/serializer.js | 4 ++-- packages/e2e-tests/fixtures/blocks/core__embed.json | 6 +++--- post-content.php | 2 +- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/embed/save.js b/packages/block-library/src/embed/save.js index 2816e3e9c0f93..c8dfb38acb145 100644 --- a/packages/block-library/src/embed/save.js +++ b/packages/block-library/src/embed/save.js @@ -18,6 +18,7 @@ export default function save( { attributes } ) { const embedClassName = classnames( 'wp-block-embed', { [ `is-type-${ type }` ]: type, [ `is-provider-${ providerNameSlug }` ]: providerNameSlug, + [ `wp-block-embed-${ providerNameSlug }` ]: providerNameSlug, } ); return ( diff --git a/packages/blocks/src/api/parser.js b/packages/blocks/src/api/parser.js index feedef2e72a9b..93b7880c7b207 100644 --- a/packages/blocks/src/api/parser.js +++ b/packages/blocks/src/api/parser.js @@ -447,11 +447,10 @@ export function createBlockWithFallback( blockNode ) { speaker: 'speaker-deck', polldaddy: 'crowdsignal', }; - attributes.providerNameSlug = Object.keys( deprecated ).includes( - providerSlug - ) - ? deprecated[ providerSlug ] - : providerSlug; + attributes.providerNameSlug = + providerSlug in deprecated + ? deprecated[ providerSlug ] + : providerSlug; // this is needed as the `responsive` attribute was passed // in a different way before the refactoring to block variations if ( ! [ 'amazon-kindle', 'wordpress' ].includes( providerSlug ) ) { diff --git a/packages/blocks/src/api/serializer.js b/packages/blocks/src/api/serializer.js index f30bada1d4a7b..886a1ad69b613 100644 --- a/packages/blocks/src/api/serializer.js +++ b/packages/blocks/src/api/serializer.js @@ -36,7 +36,7 @@ import BlockContentProvider from '../block-content-provider'; */ export function getBlockDefaultClassName( blockName ) { // Generated HTML classes for blocks follow the `wp-block-{name}` nomenclature. - // Blocks provided by WordPress drop the prefixes 'core/' or 'core-'. + // Blocks provided by WordPress drop the prefixes 'core/' or 'core-' (historically used in 'core-embed/'). const className = 'wp-block-' + blockName.replace( /\//, '-' ).replace( /^core-/, '' ); @@ -56,7 +56,7 @@ export function getBlockDefaultClassName( blockName ) { */ export function getBlockMenuDefaultClassName( blockName ) { // Generated HTML classes for blocks follow the `editor-block-list-item-{name}` nomenclature. - // Blocks provided by WordPress drop the prefixes 'core/' or 'core-' (used in 'core-embed/'). + // Blocks provided by WordPress drop the prefixes 'core/' or 'core-' (historically used in 'core-embed/'). const className = 'editor-block-list-item-' + blockName.replace( /\//, '-' ).replace( /^core-/, '' ); diff --git a/packages/e2e-tests/fixtures/blocks/core__embed.json b/packages/e2e-tests/fixtures/blocks/core__embed.json index 4903ba90e8c4d..377f1353db46c 100644 --- a/packages/e2e-tests/fixtures/blocks/core__embed.json +++ b/packages/e2e-tests/fixtures/blocks/core__embed.json @@ -6,9 +6,9 @@ "attributes": { "url": "https://example.com/", "caption": "Embedded content from an example URL", - "allowResponsive": true, - "responsive": false, - "previewable": true + "allowResponsive": true, + "responsive": false, + "previewable": true }, "innerBlocks": [], "originalContent": "
\n
\n https://example.com/\n
\n
Embedded content from an example URL
\n
" diff --git a/post-content.php b/post-content.php index 4a1dc0c2f2d99..8089bec9ea88c 100644 --- a/post-content.php +++ b/post-content.php @@ -146,7 +146,7 @@ -
+
https://vimeo.com/22439234
From 38fdf1aa407ea50387fcd99612faebb1a858a143 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 10 Aug 2020 11:29:10 +0300 Subject: [PATCH 46/48] indentation change to tabs --- .../fixtures/blocks/core__embed.json | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/e2e-tests/fixtures/blocks/core__embed.json b/packages/e2e-tests/fixtures/blocks/core__embed.json index 377f1353db46c..b76699b65e052 100644 --- a/packages/e2e-tests/fixtures/blocks/core__embed.json +++ b/packages/e2e-tests/fixtures/blocks/core__embed.json @@ -1,16 +1,16 @@ [ - { - "clientId": "_clientId_0", - "name": "core/embed", - "isValid": true, - "attributes": { - "url": "https://example.com/", - "caption": "Embedded content from an example URL", - "allowResponsive": true, - "responsive": false, - "previewable": true - }, - "innerBlocks": [], - "originalContent": "
\n
\n https://example.com/\n
\n
Embedded content from an example URL
\n
" - } + { + "clientId": "_clientId_0", + "name": "core/embed", + "isValid": true, + "attributes": { + "url": "https://example.com/", + "caption": "Embedded content from an example URL", + "allowResponsive": true, + "responsive": false, + "previewable": true + }, + "innerBlocks": [], + "originalContent": "
\n
\n https://example.com/\n
\n
Embedded content from an example URL
\n
" + } ] From 6c5b5bc5a915dbbc58128e05c8dc657aa1020eec Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 10 Aug 2020 11:55:51 +0300 Subject: [PATCH 47/48] fix e2e snapshots after adding the `wp-block-embed-{provider}` class --- .../various/__snapshots__/embedding.test.js.snap | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/embedding.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/embedding.test.js.snap index 05d8d1ab3c2b8..f033b781c3dd2 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/embedding.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/embedding.test.js.snap @@ -8,7 +8,7 @@ exports[`Embedding content should allow the user to convert unembeddable URLs to exports[`Embedding content should allow the user to try embedding a failed URL again 1`] = ` " -
+
https://twitter.com/wooyaygutenberg123454312
" @@ -16,13 +16,13 @@ https://twitter.com/wooyaygutenberg123454312 exports[`Embedding content should render embeds in the correct state 1`] = ` " -
+
https://twitter.com/notnownikki
-
+
https://twitter.com/wooyaygutenberg123454312
@@ -40,13 +40,13 @@ https://twitter.com/thatbunty -
+
https://wordpress.org/gutenberg/handbook/block-api/attributes/
-
+
https://www.youtube.com/watch?v=lXMskKTw3Bc
@@ -60,7 +60,7 @@ https://cloudup.com/cQFlxqtY4ob exports[`Embedding content should retry embeds that could not be embedded with trailing slashes, without the trailing slashes 1`] = ` " -
+
https://twitter.com/notnownikki/
" From 0819a142e35453cc96dbca7fa9bf394ef6f98155 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 10 Aug 2020 13:46:02 +0300 Subject: [PATCH 48/48] minor refactor --- packages/block-library/src/embed/util.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js index c690de013e2a4..18c325efa4597 100644 --- a/packages/block-library/src/embed/util.js +++ b/packages/block-library/src/embed/util.js @@ -172,10 +172,11 @@ export function getClassNames( ) { const potentialRatio = ASPECT_RATIOS[ ratioIndex ]; if ( aspectRatio >= potentialRatio.ratio ) { - return classnames( existingClassNames, { - [ potentialRatio.className ]: true, - 'wp-has-aspect-ratio': true, - } ); + return classnames( + existingClassNames, + potentialRatio.className, + 'wp-has-aspect-ratio' + ); } } }