OpenTable Block: CSS Class to counter button padding (#15642)

The opentable button is within an iframe and has default padding. A new CSS class has been added to apply a negative margin to the container matching the default padding. This class can be toggled through a new setting in the block's advanced settings.

Co-authored-by: Ben Dwyer <[email protected]>

Author: aaronrobertshaw

extensions/blocks/opentable/attributes.js

@@ -61,4 +61,8 @@ export const defaultAttributes = {
 		default: false,
 		type: 'boolean',
 	},
+	negativeMargin: {
+		default: false,
+		type: 'boolean',
+	},
 };

extensions/blocks/opentable/edit.js

@@ -56,7 +56,17 @@ function OpenTableEdit( {
 		setAttributes( validatedAttributes );
 	}
 
-	const { align, rid, style, iframe, domain, lang, newtab, __isBlockPreview } = attributes;
+	const {
+		align,
+		rid,
+		style,
+		iframe,
+		domain,
+		lang,
+		newtab,
+		negativeMargin,
+		__isBlockPreview,
+	} = attributes;
 	const isPlaceholder = isEmpty( rid );
 
 	useEffect( () => {
@@ -166,6 +176,13 @@ function OpenTableEdit( {
 					onChange={ () => setAttributes( { iframe: ! iframe } ) }
 					className="is-opentable"
 				/>
+				{ 'button' === style && (
+					<ToggleControl
+						label={ __( 'Remove button margin', 'jetpack' ) }
+						checked={ negativeMargin }
+						onChange={ () => setAttributes( { negativeMargin: ! negativeMargin } ) }
+					/>
+				) }
 			</InspectorAdvancedControls>
 			<BlockStylesSelector
 				clientId={ clientId }
@@ -224,6 +241,7 @@ function OpenTableEdit( {
 		'is-placeholder': isPlaceholder,
 		'is-multi': 'multi' === getTypeAndTheme( style )[ 0 ],
 		[ `align${ align }` ]: align,
+		'has-no-margin': negativeMargin,
 	} );
 
 	return (

extensions/blocks/opentable/editor.scss

@@ -99,6 +99,14 @@
 		}
 	}
 
+	&-theme-button {
+		&.has-no-margin {
+			iframe {
+				margin: -14px;
+			}
+		}
+	}
+
 	.editor-styles-wrapper & .components-form-token-field__suggestions-list {
 		font-family: $default-font;
 		text-align: left;

extensions/blocks/opentable/index.js

@@ -55,6 +55,7 @@ export const settings = {
 			domain: 'com',
 			lang: 'en-US',
 			newtab: false,
+			negativeMargin: false,
 		},
 	},
 	transforms: {

extensions/blocks/opentable/opentable.php

@@ -100,6 +100,9 @@ function load_assets( $attributes ) {
 	if ( array_key_exists( 'rid', $attributes ) && is_array( $attributes['rid'] ) && count( $attributes['rid'] ) > 1 ) {
 		$classes[] = 'is-multi';
 	}
+	if ( array_key_exists( 'negativeMargin', $attributes ) && $attributes['negativeMargin'] ) {
+		$classes[] = 'has-no-margin';
+	}
 	$classes = Jetpack_Gutenberg::block_classes(
 		FEATURE_NAME,
 		$attributes,

extensions/blocks/opentable/view.scss

@@ -40,6 +40,12 @@
 		&.aligncenter iframe {
 			width: 210px !important;
 		}
+
+		&.has-no-margin {
+			> div[id^="ot-widget-container"] {
+				margin: -14px;
+			}
+		}
 	}
 
 	.ot-dtp-picker {