Improve gutenberg compatibility for tooltips

inc/classes/admin/script/loader.class.php

@@ -539,12 +539,21 @@ public static function get_gutenberg_compat_scripts() {
 			[
 				'id'       => 'tsf-gbc',
 				'type'     => 'js',
-				'deps'     => [ 'jquery', 'tsf', 'tsf-utils', 'wp-editor', 'wp-data', 'react' ],
+				'deps'     => [ 'jquery', 'tsf', 'tsf-utils', 'wp-editor', 'wp-data', 'react', 'wp-element', 'wp-components' ],
 				'autoload' => true,
 				'name'     => 'gbc',
 				'base'     => \THE_SEO_FRAMEWORK_DIR_URL . 'lib/js/',
 				'ver'      => \THE_SEO_FRAMEWORK_VERSION,
 			],
+			[
+				'id'       => 'tsf-gbc',
+				'type'     => 'css',
+				'deps'     => [ 'wp-components' ],
+				'autoload' => true,
+				'name'     => 'gbc',
+				'base'     => \THE_SEO_FRAMEWORK_DIR_URL . 'lib/css/',
+				'ver'      => \THE_SEO_FRAMEWORK_VERSION,
+			],
 		];
 	}
 

lib/css/gbc.css

@@ -0,0 +1,53 @@
+:root {
+	/* Prevents a shift from the scrollbar gutter being added (although visually imperceptible)
+	   that happens when the popover containing the tooltip causes overflow. The shift causes the
+	   wrap element’s rectangle to be read at the shifted position but by the next aniation frame
+	   it’s different since the popover has repositioned itself to not overflow. This seems safe
+	   to add and although ideally Gutenberg might add this itself. */
+	overflow-x: hidden;
+}
+
+.tsf-gbc-tooltip-root {
+	.tsf-gbc-tooltip-popover {
+		pointer-events: none;
+		filter: drop-shadow(0 0 1px rgba( 0, 0, 0, .6 ) );
+
+		& > .components-popover__content {
+			/* Unset the Gutenberg popover’s min-content width that would otherwise require
+			   setting width or min-width on either the tooltip or its content. */
+			width: unset;
+		}
+		.tsf-tooltip-arrow {
+			/* Hide our arrow in Gutenberg (to use theirs instead). */
+			display: none;
+		}
+		& > .components-popover__arrow {
+			width: 16px;
+			height: 16px;
+
+			&:before {
+				/* Hide Gutenberg’s arrow’s before pseudo because it’s only used to whiteout their
+				   popover’s border where the arrow sits. */
+				display: none;
+			}
+			.components-popover__triangle-bg {
+				fill: var(--wp-admin-theme-color);
+			}
+			.components-popover__triangle-border {
+				/* Hide the arrow stroke/border */
+				display: none;
+			}
+		}
+	}
+	.tsf-tooltip {
+		/* The popover component needs this to not be absolutely positioned so that the parent
+		   element has size. */
+		position: unset;
+	}
+	.tsf-tooltip-text-wrap {
+		background: var(--wp-admin-theme-color);
+		flex-shrink: 1;
+		max-width: 23em;
+		box-shadow: none;
+	}
+}

lib/css/media.css

@@ -1,6 +1,12 @@
 .tsf-image-notifications {
 	line-height: 1;
 	vertical-align: bottom;
+
+	> .tsf-tooltip-wrap {
+		/* In gutenberg, this ensures the wrap has the size of its contents, not sure why it’s
+		   not required in the classic editor. */
+		display: inline-block;
+	}
 }
 
 .tsf-set-image-button.button,

lib/css/post.css

@@ -218,18 +218,6 @@ body.js .tsf-flex-tab-content.tsf-flex-tab-content-active {
 	line-height: 1em;
 }
 
-/* Fix tooltip overflow blocking in the main tooltip area */
-.edit-post-meta-boxes-main,
-.edit-post-meta-boxes-main .edit-post-meta-boxes-main__liner {
-	overflow: unset;
-	isolation: unset;
-}
-
-/* Fix tooltip overflow blocking in the sidebar */
-.interface-complementary-area .components-panel {
-	position: unset;
-}
-
 /**
  * Start override
  */

lib/css/tt.css

@@ -26,7 +26,7 @@ a.tsf-tooltip-item {
 	pointer-events: none;
 	box-sizing: border-box;
 	display: flex;
-	flex: 1 1 auto;
+/*	flex: 1 1 auto;*/ /* Is this ever in a flex-container? */
 	flex-flow: row wrap;
 	justify-content: flex-start;
 	direction: ltr;

lib/js/gbc.js

@@ -293,6 +293,79 @@ window.tsfGBC = function( $ ) {
 		);
 	}
 
+	function GBCTooltip( { element, desc, setTooltip, tt } ) {
+		const { createElement } = wp.element;
+		const { ttNames, ttSelectors } = tt;
+
+		if ( ! desc ) return;
+
+		const __html = `<span class=${ttNames.textWrap}><span class=${ttNames.text}>${desc}</span></span><div class=${ttNames.arrow} style=will-change:left></div>`
+		const hoverItemSuperWrap = element.closest( ttSelectors.superWrap ),
+			  hoverItemWrap      = element.closest( ttSelectors.wrap ) || element.parentElement;
+
+		return createElement( wp.components.Popover,
+			{
+				// Key to force recreating the popover. Otherwise the popover’s
+				// rectangle is stale if an adjacent tooltip was displayed.
+				key: desc,
+				ref: ( popover ) => {
+					if ( ! popover ) return; // The element unmounted.
+
+					setTooltip( popover );
+					// Wait a frame so the rectangle of the popover is available.
+					requestAnimationFrame( () => {
+						const { x: popoverX } = popover.getBoundingClientRect();
+						const { x: referenceX } = hoverItemWrap.getBoundingClientRect();
+						const relativeX = popoverX - referenceX;
+						popover.dataset.adjust = relativeX;
+					} );
+				},
+				className: 'tsf-gbc-tooltip-popover',
+				anchor: hoverItemSuperWrap || hoverItemWrap,
+				animate: false,
+				shift: true,
+				resize: false,
+				variant: 'unstyled',
+				placement: 'top',
+				inline: true,
+				noArrow: false,
+				offset: 8,
+			},
+			createElement( 'div', {
+				className: ttNames.base,
+				dangerouslySetInnerHTML: { __html },
+			} )
+		);
+	}
+
+	function overrideTooltip( base ) {
+		const rootNode = document.createElement( 'div' );
+		rootNode.classList.add( 'tsf-gbc-tooltip-root' );
+		const root = wp.element.createRoot(
+			document.body.appendChild( rootNode )
+		);
+		base.ttSelectors.arrow = '.components-popover__arrow';
+		return {
+			_renderTooltip: async ( _event, element, desc ) => {
+				element.dataset.hasTooltip = 1;
+				const tooltipPromise = new Promise( ( resolve ) => {
+					const setTooltip = ( tooltip ) => resolve( tooltip );
+					root.render(
+						wp.element.createElement(
+							GBCTooltip,
+							{ element, desc, setTooltip, tt: base }
+						)
+					);
+				} );
+				return await tooltipPromise;
+			},
+			removeTooltip: ( element ) => {
+				root.render( null );
+				base.removeTooltip( element );
+			}
+		};
+	}
+
 	/**
 	 * Initializes Gutenberg's compatibility and dispatches event hooks.
 	 *
@@ -309,6 +382,9 @@ window.tsfGBC = function( $ ) {
 		subscribe( saveDispatcher );
 
 		document.dispatchEvent( new CustomEvent( 'tsf-subscribed-to-gutenberg' ) );
+		document.dispatchEvent(
+			new CustomEvent( 'tsf-gutenberg-tt', { detail: overrideTooltip } )
+		);
 	}
 
 	return Object.assign( {

lib/js/media.js

@@ -687,9 +687,10 @@ window.tsfMedia = function () {
 
 				if ( preview ) {
 					if ( success ) {
-						// 250px is the max width for tooltips; we subtract 24 for padding, and 1 for subpixel rounding errors.
-						// We set min-height and width as that will prevent jumping. Also, those are the absolute-minimum for sharing/schema images.
-						imageObject.style    = "max-width:225px;max-height:225px;min-width:60px;min-height:60px;border-radius:3px;display:block;";
+						imageObject.style    = "max-width:100%;max-height:100%;object-fit:contain;aspect-ratio:1.91;height:auto;border-radius:3px;display:block;";
+						// Add dimensions to prevent jumping.
+						imageObject.width    = imageObject.naturalWidth;
+						imageObject.height   = imageObject.naturalHeight;
 						preview.dataset.desc = imageObject.outerHTML;
 
 						showElement( preview );