Do not make WordPress embeds responsive (block opt-out of responsiven…

…ess) (#10985)
WordPress · Oct 24, 2018 · 69d0988 · 69d0988
1 parent 9c303cc
commit 69d0988
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,