Handle offset changes

Author: Nagesh Pai

assets/infotip/infotip-web-component.js

@@ -11,7 +11,7 @@ class BlaBlaBlocksInfotip extends HTMLElement {
 			'icon-color',
 			'icon-type',
 			'offset',
-			'placement',
+			'overlay-placement',
 			'overlay-text-color',
 			'overlay-background-color',
 		];
@@ -48,13 +48,16 @@ class BlaBlaBlocksInfotip extends HTMLElement {
 		const anchorText = this.shadowRoot.querySelector( '.text' );
 		const infotip = this.shadowRoot.querySelector( '.infotip' );
 		const arrow = infotip.querySelector( '.arrow' );
+		const overlayPlacement =
+			this.getAttribute( 'overlay-placement' ) ?? 'top';
+		const offset = this.getAttribute( 'offset' ) ?? 6;
 
 		floatingUIDOM
 			.computePosition( anchorText, infotip, {
-				placement: 'top',
+				placement: overlayPlacement,
 				strategy: 'fixed',
 				middleware: [
-					floatingUIDOM.offset( 6 ),
+					floatingUIDOM.offset( parseInt( offset ) ),
 					floatingUIDOM.flip(),
 					floatingUIDOM.shift( { padding: 5 } ),
 					floatingUIDOM.arrow( { element: arrow } ),
@@ -273,6 +276,11 @@ class BlaBlaBlocksInfotip extends HTMLElement {
 			this.showTooltip();
 		}
 
+		if ( name === 'offset' ) {
+			this.updatePosition();
+			this.showTooltip();
+		}
+
 		const style = shadow.querySelector( 'style' );
 		style.textContent = this.renderStyle();
 	}

src/infotip/index.js

@@ -66,7 +66,7 @@ export const infotip = {
 		'icon-color': 'icon-color',
 		'icon-type': 'icon-type',
 		offset: 'offset',
-		placement: 'placement',
+		'overlay-placement': 'overlay-placement',
 		'overlay-text-color': 'overlay-text-color',
 		'overlay-background-color': 'overlay-background-color',
 	},

src/infotip/inline-ui.js

@@ -123,9 +123,13 @@ function OverlayTabContent( {
 			<NumberControl
 				hideLabelFromVision={ true }
 				label={ __( 'Offset', 'blablablocks-formats' ) }
-				value={ 6 }
+				value={ activeAttributes.offset || 6 }
 				__next40pxDefaultSize={ true }
-				onChange={ () => {} }
+				onChange={ ( newValue ) => {
+					updateAttributes( {
+						offset: newValue || 6,
+					} );
+				} }
 				style={ { width: '5rem' } }
 				min={ 6 }
 				max={ 20 }
@@ -135,11 +139,13 @@ function OverlayTabContent( {
 				className="overlay-tab-label"
 				style={ { alignSelf: 'flex-start', paddingTop: '0.5rem' } }
 			>
-				{ __( 'Position', 'blablablocks-formats' ) }
+				{ __( 'Placement', 'blablablocks-formats' ) }
 			</div>
 			<AlignmentMatrixControl
 				hideLabelFromVision={ true }
-				label={ __( 'Position', 'blablablocks-formats' ) }
+				label={ __( 'Placement', 'blablablocks-formats' ) }
+				value={ activeAttributes[ 'overlay-placement' ] || 'top' }
+				onChange={ () => {} }
 			/>
 
 			<div
@@ -157,10 +163,10 @@ function OverlayTabContent( {
 						value:
 							activeAttributes[ 'overlay-background-color' ] ||
 							'#222222',
-						onChange: ( newValue ) => {
+						onChange: ( newColor ) => {
 							updateAttributes( {
 								'overlay-background-color':
-									newValue || '#222222',
+									newColor || '#222222',
 							} );
 						},
 					},
@@ -169,9 +175,9 @@ function OverlayTabContent( {
 						value:
 							activeAttributes[ 'overlay-text-color' ] ||
 							'#FFFFFF',
-						onChange: ( newValue ) => {
+						onChange: ( newColor ) => {
 							updateAttributes( {
-								'overlay-text-color': newValue || '#FFFFFF',
+								'overlay-text-color': newColor || '#FFFFFF',
 							} );
 						},
 					},