From 69d09889ae186be7230654d8b97a84b9f5c577c9 Mon Sep 17 00:00:00 2001
From: Nicola Heald <nicola@notnowlewis.com>
Date: Wed, 24 Oct 2018 14:08:10 +0100
Subject: [PATCH] Do not make WordPress embeds responsive (block opt-out of
 responsiveness) (#10985)

---
 packages/block-library/src/embed/core-embeds.js | 1 +
 packages/block-library/src/embed/edit.js        | 5 +++--
 packages/block-library/src/embed/index.js       | 2 ++
 packages/block-library/src/embed/settings.js    | 4 ++--
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/embed/core-embeds.js b/packages/block-library/src/embed/core-embeds.js
index e851873efeda0..004166d227c2f 100644
--- a/packages/block-library/src/embed/core-embeds.js
+++ b/packages/block-library/src/embed/core-embeds.js
@@ -66,6 +66,7 @@ export const common = [
 			title: 'WordPress',
 			icon: embedWordPressIcon,
 			keywords: [ __( 'post' ), __( 'blog' ) ],
+			responsive: false,
 		},
 	},
 	{
diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js
index 5dfffc7d3db2e..07cef07a26a5b 100644
--- a/packages/block-library/src/embed/edit.js
+++ b/packages/block-library/src/embed/edit.js
@@ -28,7 +28,7 @@ import {
 import { createBlock } from '@wordpress/blocks';
 import { RichText, BlockControls, BlockIcon, InspectorControls } from '@wordpress/editor';
 
-export function getEmbedEditComponent( title, icon ) {
+export function getEmbedEditComponent( title, icon, responsive = true ) {
 	return class extends Component {
 		constructor() {
 			super( ...arguments );
@@ -168,7 +168,8 @@ export function getEmbedEditComponent( title, icon ) {
 			previewDocument.body.innerHTML = html;
 			const iframe = previewDocument.body.querySelector( 'iframe' );
 
-			if ( iframe && iframe.height && iframe.width ) {
+			// If we have a fixed aspect iframe, and it's a responsive embed block.
+			if ( responsive && iframe && iframe.height && iframe.width ) {
 				const aspectRatio = ( iframe.width / iframe.height ).toFixed( 2 );
 				// Given the actual aspect ratio, find the widest ratio to support it.
 				for ( let ratioIndex = 0; ratioIndex < ASPECT_RATIOS.length; ratioIndex++ ) {
diff --git a/packages/block-library/src/embed/index.js b/packages/block-library/src/embed/index.js
index bb3dfe1f35194..61e1036bbaf75 100644
--- a/packages/block-library/src/embed/index.js
+++ b/packages/block-library/src/embed/index.js
@@ -17,6 +17,8 @@ export const settings = getEmbedBlockSettings( {
 	title: __( 'Embed' ),
 	description: __( 'The Embed block allows you to easily add videos, images, tweets, audio, and other content to your post or page.' ),
 	icon: embedContentIcon,
+	// Unknown embeds should not be responsive by default.
+	responsive: false,
 	transforms: {
 		from: [
 			{
diff --git a/packages/block-library/src/embed/settings.js b/packages/block-library/src/embed/settings.js
index 53a68ff31ca3a..78d8397a71859 100644
--- a/packages/block-library/src/embed/settings.js
+++ b/packages/block-library/src/embed/settings.js
@@ -36,10 +36,10 @@ const embedAttributes = {
 	},
 };
 
-export function getEmbedBlockSettings( { title, description, icon, category = 'embed', transforms, keywords = [], supports = {} } ) {
+export function getEmbedBlockSettings( { title, description, icon, category = 'embed', transforms, keywords = [], supports = {}, responsive = true } ) {
 	// translators: %s: Name of service (e.g. VideoPress, YouTube)
 	const blockDescription = description || sprintf( __( 'Add a block that displays content pulled from other sites, like Twitter, Instagram or YouTube.' ), title );
-	const edit = getEmbedEditComponent( title, icon );
+	const edit = getEmbedEditComponent( title, icon, responsive );
 	return {
 		title,
 		description: blockDescription,