Google Calendar block: Fix full width support (#14835)

Make sure that the Google Calendar block widths match in the editor and front end, and that full and wide widths are supported correctly. Co-authored-by: Copons <Copons@users.noreply.github.com>
Automattic · Mar 18, 2020 · c163451 · c163451
1 parent 6581690
commit c163451
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 14 deletions.
diff --git a/extensions/blocks/google-calendar/edit.js b/extensions/blocks/google-calendar/edit.js
@@ -118,12 +118,12 @@ class GoogleCalendarEdit extends Component {
 	render() {
 		const { attributes, className, name, noticeUI } = this.props;
 		const defaultClassName = getBlockDefaultClassName( name );
-		const { url } = attributes;
+		const { url, height } = attributes;
 		const { editedEmbed, interactive, editingUrl } = this.state;
 
-		const height = this.props.isMobile ? '300' : '500';
+		const iframeHeight = this.props.isMobile ? '300' : height;
 
-		const html = `<iframe src="${ url }" style="border:0" scrolling="no" frameborder="0" width="100%" height=${ height }></iframe>`;
+		const html = `<iframe src="${ url }" style="border:0" scrolling="no" frameborder="0" height="${ iframeHeight }"></iframe>`;
 
 		const permissionsLink = (
 			<ExternalLink href="https://en.support.wordpress.com/google-calendar/">

diff --git a/extensions/blocks/google-calendar/editor.scss b/extensions/blocks/google-calendar/editor.scss
@@ -1,6 +1,7 @@
 /**
  * Editor styles for Google Calendar
  */
+ @import './view.scss';
 
 .wp-block-jetpack-google-calendar {
 	&-embed-form-sidebar {

diff --git a/extensions/blocks/google-calendar/google-calendar.php b/extensions/blocks/google-calendar/google-calendar.php
@@ -35,31 +35,30 @@ function register_block() {
  * @return string
  */
 function load_assets( $attr ) {
-	$width   = isset( $attr['width'] ) ? $attr['width'] : '800';
 	$height  = isset( $attr['height'] ) ? $attr['height'] : '600';
 	$url     = isset( $attr['url'] )
 		? \Jetpack_Gutenberg::validate_block_embed_url( $attr['url'], array( 'calendar.google.com' ) ) :
 		'';
 	$classes = \Jetpack_Gutenberg::block_classes( 'google-calendar', $attr );
 
+	\Jetpack_Gutenberg::load_assets_as_required( 'google-calendar' );
+
 	if ( empty( $url ) ) {
 		return;
 	}
 
 	if ( class_exists( 'Jetpack_AMP_Support' ) && \Jetpack_AMP_Support::is_amp_request() ) {
 		return sprintf(
-			'<div class="%1$s"><amp-iframe src="%2$s" frameborder="0" style="border:0" scrolling="no" width="%3$d" height="%4$d" sandbox="allow-scripts allow-same-origin" layout="responsive"></amp-iframe></div>',
+			'<div class="%1$s"><amp-iframe src="%2$s" frameborder="0" style="border:0" scrolling="no" height="%3$d" sandbox="allow-scripts allow-same-origin" layout="responsive"></amp-iframe></div>',
 			esc_attr( $classes ),
 			esc_url( $url ),
-			absint( $width ),
 			absint( $height )
 		);
 	} else {
 		return sprintf(
-			'<div class="%1$s"><iframe src="%2$s" frameborder="0" style="border:0" scrolling="no" width="%3$d" height="%4$d"></iframe></div>',
+			'<div class="%1$s"><iframe src="%2$s" frameborder="0" style="border:0" scrolling="no" height="%3$d"></iframe></div>',
 			esc_attr( $classes ),
 			esc_url( $url ),
-			absint( $width ),
 			absint( $height )
 		);
 	}

diff --git a/extensions/blocks/google-calendar/index.js b/extensions/blocks/google-calendar/index.js
@@ -35,10 +35,6 @@ export const settings = {
 		url: {
 			type: 'string',
 		},
-		width: {
-			type: 'integer',
-			default: 800,
-		},
 		height: {
 			type: 'integer',
 			default: 600,
@@ -76,8 +72,8 @@ export const settings = {
 				type: 'raw',
 				isMatch: node => node.nodeName === 'FIGURE' && IFRAME_REGEX.test( node.innerHTML ),
 				transform: node => {
-					const { url, width, height } = extractAttributesFromIframe( node.innerHTML.trim() );
-					return createBlock( 'jetpack/google-calendar', { url, width, height } );
+					const { url, height } = extractAttributesFromIframe( node.innerHTML.trim() );
+					return createBlock( 'jetpack/google-calendar', { url, height } );
 				},
 			},
 		],

diff --git a/extensions/blocks/google-calendar/view.js b/extensions/blocks/google-calendar/view.js
@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+import './view.scss';
diff --git a/extensions/blocks/google-calendar/view.scss b/extensions/blocks/google-calendar/view.scss
@@ -0,0 +1,9 @@
+/**
+ * Shared Editor and Front End styles for Google Calendar
+ */
+.wp-block-jetpack-google-calendar {
+	min-width: 420px;
+	iframe {
+		width: 100%;
+	}
+}