Handle color changes

Author: Nagesh Pai

assets/infotip/infotip-web-component.js

@@ -10,6 +10,10 @@ class BlaBlaBlocksInfotip extends HTMLElement {
 			'icon-position',
 			'icon-color',
 			'icon-type',
+			'offset',
+			'placement',
+			'overlay-text-color',
+			'overlay-background-color',
 		];
 	}
 
@@ -106,6 +110,10 @@ class BlaBlaBlocksInfotip extends HTMLElement {
 		const iconEnabled = this.getAttribute( 'icon-enabled' ) === 'true';
 		const iconPosition = this.getAttribute( 'icon-position' ) ?? 'left';
 		const iconColor = this.getAttribute( 'icon-color' ) ?? 'currentColor';
+		const overlayTextColor =
+			this.getAttribute( 'overlay-text-color' ) ?? '#FFFFFF';
+		const overlayBackgroundColor =
+			this.getAttribute( 'overlay-background-color' ) ?? '#222';
 
 		let style = `
 			.wrapper {
@@ -125,15 +133,15 @@ class BlaBlaBlocksInfotip extends HTMLElement {
 				position: fixed;
 				top: 0px;
 				left: 0px;
-				background: #222;
-				color: white;
+				background: ${ overlayBackgroundColor };
+				color: ${ overlayTextColor };
 				padding: 10px;
 				border-radius: 4px;
 				font-size: 90%;
 			}
 			.infotip .arrow {
 				position: absolute;
-				background: #222;
+				background: ${ overlayBackgroundColor };
 				width: 8px;
 				height: 8px;
 				transform: rotate(45deg);
@@ -258,6 +266,13 @@ class BlaBlaBlocksInfotip extends HTMLElement {
 			this.updatePosition();
 		}
 
+		if (
+			name === 'overlay-text-color' ||
+			name === 'overlay-background-color'
+		) {
+			this.showTooltip();
+		}
+
 		const style = shadow.querySelector( 'style' );
 		style.textContent = this.renderStyle();
 	}

src/infotip/index.js

@@ -65,5 +65,9 @@ export const infotip = {
 		'icon-position': 'icon-position',
 		'icon-color': 'icon-color',
 		'icon-type': 'icon-type',
+		offset: 'offset',
+		placement: 'placement',
+		'overlay-text-color': 'overlay-text-color',
+		'overlay-background-color': 'overlay-background-color',
 	},
 };

src/infotip/inline-ui.js

@@ -110,32 +110,42 @@ function TextTabContent( {
  *
  * @return {JSX.Element} - The rendered overlay tab content.
  */
-function OverlayTabContent() {
+function OverlayTabContent( {
+	activeAttributes,
+	updateAttributes,
+	removeAttributes,
+} ) {
 	return (
 		<Grid columns={ 2 } templateColumns="3fr 7fr" alignment="center">
-			{ /* row 1 - Offset */ }
 			<div className="overlay-tab-label">
 				{ __( 'Offset', 'blablablocks-formats' ) }
 			</div>
 			<NumberControl
 				hideLabelFromVision={ true }
 				label={ __( 'Offset', 'blablablocks-formats' ) }
-				value={ 0 }
+				value={ 6 }
 				__next40pxDefaultSize={ true }
 				onChange={ () => {} }
+				style={ { width: '5rem' } }
+				min={ 6 }
+				max={ 20 }
 			/>
 
-			{ /* row 2 - Position */ }
-			<div className="overlay-tab-label">
+			<div
+				className="overlay-tab-label"
+				style={ { alignSelf: 'flex-start', paddingTop: '0.5rem' } }
+			>
 				{ __( 'Position', 'blablablocks-formats' ) }
 			</div>
 			<AlignmentMatrixControl
 				hideLabelFromVision={ true }
 				label={ __( 'Position', 'blablablocks-formats' ) }
 			/>
 
-			{ /* row 3 - Colors */ }
-			<div className="overlay-tab-label">
+			<div
+				className="overlay-tab-label"
+				style={ { alignSelf: 'flex-start' } }
+			>
 				{ __( 'Colors', 'blablablocks-formats' ) }
 			</div>
 			<PanelColorSettings
@@ -144,13 +154,25 @@ function OverlayTabContent() {
 				colorSettings={ [
 					{
 						label: __( 'Background', 'blablablocks-formats' ),
-						value: '#000000',
-						onChange: () => {},
+						value:
+							activeAttributes[ 'overlay-background-color' ] ||
+							'#222',
+						onChange: ( newValue ) => {
+							updateAttributes( {
+								'overlay-background-color': newValue,
+							} );
+						},
 					},
 					{
 						label: __( 'Text', 'blablablocks-formats' ),
-						value: '#FFFFFF',
-						onChange: () => {},
+						value:
+							activeAttributes[ 'overlay-text-color' ] ||
+							'#FFFFFF',
+						onChange: ( newValue ) => {
+							updateAttributes( {
+								'overlay-text-color': newValue,
+							} );
+						},
 					},
 				] }
 			/>
@@ -450,7 +472,13 @@ export function InlineUI( {
 					{
 						name: 'overlay',
 						title: __( 'Overlay', 'blablablocks-formats' ),
-						content: <OverlayTabContent />,
+						content: (
+							<OverlayTabContent
+								activeAttributes={ activeAttributes }
+								updateAttributes={ updateAttributes }
+								removeAttributes={ removeAttributes }
+							/>
+						),
 						disabled: ! activeAttributes.content,
 					},
 					{