Block: OpenTable: Add a warning if width is set to anything other than wide or full if style is wide (#15323)

Author: glendaviesnz

extensions/blocks/opentable/edit.js

@@ -19,6 +19,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { getBlockDefaultClassName } from '@wordpress/blocks';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -55,7 +56,29 @@ function OpenTableEdit( {
 		setAttributes( validatedAttributes );
 	}
 
-	const { align, rid, style, iframe, domain, lang, newtab } = attributes;
+	const { align, rid, style, iframe, domain, lang, newtab, __isBlockPreview } = attributes;
+	const isPlaceholder = isEmpty( rid );
+
+	useEffect( () => {
+		noticeOperations.removeAllNotices();
+		if (
+			! isPlaceholder &&
+			! __isBlockPreview &&
+			'wide' === style &&
+			'wide' !== align &&
+			'full' !== align
+		) {
+			const content = (
+				<>
+					{ __(
+						'With the OpenTable block you may encounter display issues if you use its "wide" style with anything other than "wide" or "full" alignment. The wide display style may also not work well on smaller screens.',
+						'jetpack'
+					) }
+				</>
+			);
+			noticeOperations.createNotice( { status: 'warning', content } );
+		}
+	}, [ __isBlockPreview, align, isPlaceholder, noticeOperations, rid, style ] );
 
 	const parseEmbedCode = embedCode => {
 		const newAttributes = getAttributesFromEmbedCode( embedCode );
@@ -197,17 +220,20 @@ function OpenTableEdit( {
 	);
 
 	const editClasses = classnames( className, {
-		[ `${ defaultClassName }-theme-${ style }` ]: ! isEmpty( rid ) && styleValues.includes( style ),
-		'is-placeholder': isEmpty( rid ),
+		[ `${ defaultClassName }-theme-${ style }` ]: ! isPlaceholder && styleValues.includes( style ),
+		'is-placeholder': isPlaceholder,
 		'is-multi': 'multi' === getTypeAndTheme( style )[ 0 ],
 		[ `align${ align }` ]: align,
 	} );
 
 	return (
-		<div className={ editClasses }>
-			{ ! isEmpty( rid ) && inspectorControls }
-			{ ! isEmpty( rid ) ? blockPreview() : blockPlaceholder }
-		</div>
+		<>
+			{ noticeUI }
+			<div className={ editClasses }>
+				{ ! isPlaceholder && inspectorControls }
+				{ ! isPlaceholder ? blockPreview() : blockPlaceholder }
+			</div>
+		</>
 	);
 }
 

extensions/blocks/opentable/editor.scss

@@ -107,6 +107,12 @@
 	}
 }
 
+.wp-block[data-type="jetpack/opentable"] {
+	.components-notice__content {
+		text-align: left;
+	}
+}
+
 .components-toggle-control.is-opentable {
 	padding-top: 6px;
 }