Feat: New help tooltips (phase 1)

.config/rules.js

@@ -54,7 +54,7 @@ module.exports = [
 	},
 	// Help video snippets
 	{
-		test: /help\/videos\/[\w\d-_]+\.(mp4)$/,
+		test: /videos\/[\w\d-_]+\.(mp4)$/,
 		use: [
 			{
 				loader: 'file-loader',
@@ -69,7 +69,7 @@ module.exports = [
 	},
 	{
 		test: /\.(mp4)$/,
-		exclude: /(help\/videos)/,
+		exclude: /(help\/videos|help-tooltip\/videos)/,
 		use: [
 			{
 				loader: 'file-loader',

plugin.php

@@ -183,7 +183,6 @@ function stackable_deactivation_cleanup() {
 require_once( plugin_dir_path( __FILE__ ) . 'src/icons.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/block/posts/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/pro.php' );
-require_once( plugin_dir_path( __FILE__ ) . 'src/help/help-tooltip.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/help/welcome-tutorial-video.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/jetpack.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/multisite.php' );

src/block-components/advanced/edit.js

@@ -96,7 +96,10 @@ export const Edit = () => {
 						step={ 0.1 }
 						allowReset={ true }
 						placeholder="1"
-						className="ugb--help-tip-advanced-opacity"
+						helpTooltip={ {
+							video: 'advanced-opacity',
+							description: __( 'Adjusts the transparency of the entire block', i18n ),
+						} }
 					/>
 					<AdvancedRangeControl
 						label={ __( 'Z-Index', i18n ) }
@@ -106,7 +109,11 @@ export const Edit = () => {
 						sliderMax={ 10 }
 						allowReset={ true }
 						placeholder="1"
-						className="ugb--help-tip-advanced-zindex"
+						helpTooltip={ {
+							video: 'advanced-zindex',
+							description: __( 'Sets the stack order of different blocks to make one appear in front of another. A block with a higher z-index will show up on top of another block with a lower z-index.', i18n ),
+
+						} }
 					/>
 					<AdvancedSelectControl
 						label={ __( 'Position', i18n ) }
@@ -136,7 +143,6 @@ export const Edit = () => {
 						hasLock={ false }
 						sliderMin={ -100 }
 						sliderMax={ 100 }
-						className="ugb--help-tip-advanced-block-paddings"
 					/>
 				</PanelAdvancedSettings>
 			</InspectorAdvancedControls>

src/block-components/alignment/edit.js

@@ -120,6 +120,11 @@ export const Edit = props => {
 				attribute="containerHorizontalAlign"
 				responsive="all"
 				controls="horizontal"
+				helpTooltip={ {
+					video: 'content-horizontal-align',
+					description: __( 'Sets the placement of the column container to left, center or right. Not available when block width is set to full width.', i18n ),
+
+				} }
 				visualGuide={ { selector: '.stk-%s-container', highlight: 'outline' } }
 			/>
 		}
@@ -142,6 +147,10 @@ export const Edit = props => {
 					attribute="contentAlign"
 					responsive="all"
 					justified={ props.hasContentJustify }
+					helpTooltip={ {
+						video: 'alignment-all',
+						description: __( 'Adjusts the placement of all content in the block to align left, center or right', i18n ),
+					} }
 				/>
 				{ props.hasColumnJustify &&
 					<AdvancedToolbarControl
@@ -151,6 +160,10 @@ export const Edit = props => {
 						controls="flex-horizontal"
 						disableTablet={ ! columnJustify }
 						disableMobile={ ! columnJustify }
+						helpTooltip={ {
+							video: 'content-horizontal-align',
+							description: __( 'Sets the horizontal position and spacing of the inner columns.', i18n ),
+						} }
 						visualGuide={ {
 							selector: '.stk-%s-column > * > * > [data-type]',
 							highlight: 'outline',
@@ -164,6 +177,10 @@ export const Edit = props => {
 						attribute="columnAlign"
 						responsive="all"
 						controls="flex-vertical"
+						helpTooltip={ {
+							video: 'column-vertical-align',
+							description: __( 'Sets the vertical position of the inner columns relative to the columns block.', i18n ),
+						} }
 						visualGuide={ {
 							// The 2nd selector (after the comma) is to select
 							// the parent Columns block where this Inner Column
@@ -179,6 +196,10 @@ export const Edit = props => {
 						attribute="rowAlign"
 						responsive="all"
 						controls="flex-vertical"
+						helpTooltip={ {
+							video: 'column-vertical-align',
+							description: __( 'Sets the vertical position of the inner columns relative to the columns block.', i18n ),
+						} }
 						visualGuide={ { selector: '.stk-%s-column > * > * > [data-type]', highlight: 'outline' } }
 					/>
 				}
@@ -221,6 +242,10 @@ export const Edit = props => {
 							selector: '.stk-%s-container, .stk-%s-container > * > .block-editor-block-list__layout > [data-type]',
 							highlight: 'outline-first-offset',
 						} }
+						helpTooltip={ {
+							// TODO: Add a working video
+							description: __( 'Sets the horizontal/vertical position and spacing of the inner blocks.', i18n ),
+						} }
 					/>
 				}
 				{ ( props.hasColumnAlignment || props.hasBlockAlignment ) &&
@@ -234,6 +259,10 @@ export const Edit = props => {
 							selector: '.stk-%s-container, .stk-%s-container > * > .block-editor-block-list__layout > [data-type]',
 							highlight: 'outline-first-offset',
 						} }
+						helpTooltip={ {
+							// TODO: Add a working video
+							description: __( 'Aligns the horizontal/vertical position of the inner blocks.', i18n ),
+						} }
 						help={ __( 'Set Content Min. Height for alignment to display properly', i18n ) }
 					/>
 				}
@@ -264,6 +293,10 @@ export const Edit = props => {
 						sliderMax={ 100 }
 						placeholder="24"
 						attribute="innerBlockColumnGap"
+						helpTooltip={ {
+							// TODO: Add a working video
+							description: __( 'Sets the gap between the columns of inner blocks.', i18n ),
+						} }
 						visualGuide={
 							innerBlockWrap !== 'wrap'
 								? {
@@ -283,6 +316,10 @@ export const Edit = props => {
 						sliderMax={ 100 }
 						placeholder="0"
 						attribute="innerBlockRowGap"
+						helpTooltip={ {
+							// TODO: Add a working video
+							description: __( 'Sets the gap between inner blocks.', i18n ),
+						} }
 						visualGuide={ {
 							selector: '.stk-%s-container > * > .block-editor-block-list__layout',
 							highlight: 'row-gap',
@@ -298,6 +335,10 @@ export const Edit = props => {
 						sliderMax={ 100 }
 						placeholder="0"
 						attribute="innerBlockRowGap"
+						helpTooltip={ {
+							// TODO: Add a working video
+							description: __( 'Sets the gap between the rows of inner blocks.', i18n ),
+						} }
 					/>
 				}
 			</InspectorLayoutControls>

src/block-components/button/edit.js

@@ -95,6 +95,11 @@ export const HoverEffects = () => {
 			attribute="buttonHoverEffect"
 			options={ HOVER_OPTIONS }
 			default="darken"
+			helpTooltip={ {
+				video: 'button-hover-effect',
+				title: __( 'Hover effect', i18n ),
+				description: __( 'Triggers animation or effects when you mouse over', i18n ),
+			} }
 		/>
 	)
 }
@@ -234,6 +239,11 @@ export const Size = props => {
 					sliderMin={ [ 0, 0 ] }
 					sliderMax={ [ 40, 100 ] }
 					vhMode={ true }
+					helpTooltip={ {
+						// TODO: Add a working video
+						title: __( 'Button padding', i18n ),
+						description: __( 'Adjusts the space between the button text and button borders', i18n ),
+					} }
 				/>
 			</PanelAdvancedSettings>
 		</InspectorStyleControls>

src/block-components/columns/edit.js

@@ -163,6 +163,11 @@ export const Controls = props => {
 							highlight: 'column-spacing',
 							defaultValue: '12px',
 						} }
+						// TODO: Sample of how to use the new helpTooltip
+						helpTooltip={ {
+							// Add a working video
+							description: __( 'Sets column paddings, the space inside the block between the block elements and the column container border', i18n ),
+						} }
 					/>
 					<AdvancedRangeControl
 						label={ __( 'Column Gap', i18n ) }
@@ -176,6 +181,10 @@ export const Controls = props => {
 							highlight: 'columns:column-gap',
 							responsive: [ 'desktop' ],
 						} }
+						helpTooltip={ {
+							video: 'column-gap',
+							description: __( 'Sets the distance between two or more columns', i18n ),
+						} }
 					/>
 					<AdvancedRangeControl
 						label={ __( 'Row Gap', i18n ) }
@@ -184,6 +193,10 @@ export const Controls = props => {
 						min={ 0 }
 						sliderMax={ 100 }
 						placeholder="0"
+						helpTooltip={ {
+							// TODO: Add a working video
+							description: __( 'Sets the distance between two or more columns', i18n ),
+						} }
 					/>
 				</>
 			) }

src/block-components/helpers/backgrounds/edit.js

@@ -106,7 +106,10 @@ export const BackgroundControls = props => {
 					step={ 0.1 }
 					allowReset={ true }
 					placeholder="1.0"
-					className="ugb--help-tip-background-color-opacity"
+					helpTooltip={ {
+						video: 'background-color-opacity',
+						description: __( 'Adjusts the transparency of the background color', i18n ),
+					} }
 				/>
 			) }
 			{ getAttribute( 'backgroundColorType' ) === 'gradient' && (
@@ -142,7 +145,10 @@ export const BackgroundControls = props => {
 						step={ 10 }
 						allowReset={ true }
 						placeholder="90"
-						className="ugb--help-tip-gradient-direction"
+						helpTooltip={ {
+							// TODO: Add a working video
+							description: __( 'Sets the direction (in degrees) of the colors', i18n ),
+						} }
 					/>
 
 					<AdvancedRangeControl
@@ -153,7 +159,10 @@ export const BackgroundControls = props => {
 						step={ 1 }
 						allowReset={ true }
 						placeholder="0"
-						className="ugb--help-tip-gradient-location"
+						helpTooltip={ {
+							video: 'gradient-location',
+							description: __( 'Sets the placement of each color in relation to the other color', i18n ),
+						} }
 					/>
 
 					<AdvancedRangeControl
@@ -164,14 +173,20 @@ export const BackgroundControls = props => {
 						step={ 1 }
 						allowReset={ true }
 						placeholder="100"
-						className="ugb--help-tip-gradient-location"
+						helpTooltip={ {
+							video: 'gradient-location',
+							description: __( 'Sets the placement of each color in relation to the other color', i18n ),
+						} }
 					/>
 
 					{ props.hasBackgroundGradientBlendMode &&
 						<BlendModeControl
 							label={ __( 'Background Gradient Blend Mode', i18n ) }
 							attribute={ getAttrName( 'backgroundGradientBlendMode' ) }
-							className="ugb--help-tip-background-blend-mode"
+							helpTooltip={ {
+								video: 'background-blend-mode',
+								description: __( 'Sets how this background gradient/image blends into the other background', i18n ),
+							} }
 						/>
 					}
 				</ButtonIconPopoverControl>
@@ -223,15 +238,21 @@ export const BackgroundControls = props => {
 					step={ 1 }
 					allowReset={ true }
 					placeholder={ getAttribute( 'backgroundColor' ) ? '5' : '0' }
-					className="ugb--help-tip-background-tint"
+					helpTooltip={ {
+						video: 'background-tint',
+						description: __( 'Adjusts the intensity of the background media tint', i18n ),
+					} }
 				/>
 			}
 
 			{ hasBackgroundMedia && ! isBackgroundVideo() &&
 				<AdvancedToggleControl
 					label={ __( 'Fixed Background', i18n ) }
 					attribute={ getAttrName( 'fixedBackground' ) }
-					className="ugb--help-tip-background-fixed"
+					helpTooltip={ {
+						video: 'background-fixed',
+						description: __( 'Keeps the background image fixed in place while scrolling', i18n ),
+					} }
 				/>
 			}
 
@@ -281,7 +302,10 @@ export const BackgroundControls = props => {
 							{ label: __( 'Bottom Center', i18n ), value: 'bottom center' },
 							{ label: __( 'Bottom Right', i18n ), value: 'bottom right' },
 						] }
-						className="ugb--help-tip-background-image-position"
+						helpTooltip={ {
+							video: 'background-image-position',
+							description: __( 'Chooses which part of the background image will be the focal point', i18n ),
+						} }
 						responsive="all"
 					/>
 
@@ -295,7 +319,10 @@ export const BackgroundControls = props => {
 							{ label: __( 'Repeat-X', i18n ), value: 'repeat-x' },
 							{ label: __( 'Repeat-Y', i18n ), value: 'repeat-y' },
 						] }
-						className="ugb--help-tip-background-image-repeat"
+						helpTooltip={ {
+							video: 'background-image-repeat',
+							description: __( 'Covers the background with tiled images', i18n ),
+						} }
 						responsive="all"
 					/>
 
@@ -309,7 +336,10 @@ export const BackgroundControls = props => {
 							{ label: __( 'Contain', i18n ), value: 'contain' },
 							{ label: __( 'Custom', i18n ), value: 'custom' },
 						] }
-						className="ugb--help-tip-background-image-size"
+						helpTooltip={ {
+							video: 'background-image-size',
+							description: __( 'Sets the display image size', i18n ),
+						} }
 						responsive="all"
 					/>
 
@@ -327,6 +357,10 @@ export const BackgroundControls = props => {
 					<BlendModeControl
 						label={ __( 'Image Blend Mode', i18n ) }
 						attribute={ getAttrName( 'backgroundImageBlendMode' ) }
+						helpTooltip={ {
+							video: 'background-blend-mode',
+							description: __( 'Sets how this background gradient/image blends into the other background', i18n ),
+						} }
 					/>
 				</ButtonIconPopoverControl>
 			}

src/block-components/helpers/borders/edit.js

@@ -13,9 +13,7 @@ import {
 /**
  * WordPress dependencies
  */
-import {
-	Fragment,
-} from '@wordpress/element'
+import { Fragment } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 import { useAttributeEditHandlers } from '~stackable/hooks'
 
@@ -85,7 +83,10 @@ export const BorderControls = props => {
 				attribute={ getAttrName( 'borderRadius' ) }
 				responsive="all"
 				hover={ props.hasBorderRadiusHover }
-				className="ugb--help-tip-general-border-radius"
+				helpTooltip={ {
+					video: 'general-border-radius',
+					description: __( 'Adjusts the radius of block corners to make them more rounded', i18n ),
+				} }
 				min={ 0 }
 				sliderMax={ props.borderSliderMax }
 				placeholderRender={ props.borderRadiusPlaceholder }