Tooltip: Don't render buttons tooltip when show button text labels is…

… enabled (#55842) * Don't render Preview button tooltip when show text labels is enabled. * Don't render View button tooltip when show text labels is enabled. * Fix comment block. * Don't render View Post button tooltip when show text labels is enabled.
WordPress · Nov 23, 2023 · a7d76c3 · a7d76c3
1 parent 130a145
commit a7d76c3
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 27 deletions.
diff --git a/packages/block-editor/src/components/preview-options/index.js b/packages/block-editor/src/components/preview-options/index.js
@@ -19,6 +19,7 @@ export default function PreviewOptions( {
 	deviceType,
 	setDeviceType,
 	label,
+	showIconLabels,
 } ) {
 	const isMobile = useViewportMatch( 'small', '<' );
 	if ( isMobile ) return null;
@@ -35,6 +36,7 @@ export default function PreviewOptions( {
 		disabled: ! isEnabled,
 		__experimentalIsFocusable: ! isEnabled,
 		children: viewLabel,
+		showTooltip: ! showIconLabels,
 	};
 	const menuProps = {
 		'aria-label': __( 'View options' ),

diff --git a/packages/edit-post/src/components/device-preview/index.js b/packages/edit-post/src/components/device-preview/index.js
@@ -15,22 +15,27 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editPostStore } from '../../store';
 
 export default function DevicePreview() {
-	const { hasActiveMetaboxes, isPostSaveable, isViewable, deviceType } =
-		useSelect( ( select ) => {
-			const { getEditedPostAttribute } = select( editorStore );
-			const { getPostType } = select( coreStore );
-			const postType = getPostType( getEditedPostAttribute( 'type' ) );
+	const {
+		hasActiveMetaboxes,
+		isPostSaveable,
+		isViewable,
+		deviceType,
+		showIconLabels,
+	} = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const { getPostType } = select( coreStore );
+		const postType = getPostType( getEditedPostAttribute( 'type' ) );
 
-			return {
-				hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-				isPostSaveable: select( editorStore ).isEditedPostSaveable(),
-				isViewable: postType?.viewable ?? false,
-				deviceType:
-					select(
-						editPostStore
-					).__experimentalGetPreviewDeviceType(),
-			};
-		}, [] );
+		return {
+			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
+			isPostSaveable: select( editorStore ).isEditedPostSaveable(),
+			isViewable: postType?.viewable ?? false,
+			deviceType:
+				select( editPostStore ).__experimentalGetPreviewDeviceType(),
+			showIconLabels:
+				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
+		};
+	}, [] );
 	const { __experimentalSetPreviewDeviceType: setPreviewDeviceType } =
 		useDispatch( editPostStore );
 
@@ -41,6 +46,7 @@ export default function DevicePreview() {
 			deviceType={ deviceType }
 			setDeviceType={ setPreviewDeviceType }
 			label={ __( 'Preview' ) }
+			showIconLabels={ showIconLabels }
 		>
 			{ ( { onClose } ) =>
 				isViewable && (

diff --git a/packages/edit-post/src/components/view-link/index.js b/packages/edit-post/src/components/view-link/index.js
@@ -8,18 +8,28 @@ import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../store';
+
 export default function ViewLink() {
-	const { permalink, isPublished, label } = useSelect( ( select ) => {
-		// Grab post type to retrieve the view_item label.
-		const postTypeSlug = select( editorStore ).getCurrentPostType();
-		const postType = select( coreStore ).getPostType( postTypeSlug );
+	const { permalink, isPublished, label, showIconLabels } = useSelect(
+		( select ) => {
+			// Grab post type to retrieve the view_item label.
+			const postTypeSlug = select( editorStore ).getCurrentPostType();
+			const postType = select( coreStore ).getPostType( postTypeSlug );
 
-		return {
-			permalink: select( editorStore ).getPermalink(),
-			isPublished: select( editorStore ).isCurrentPostPublished(),
-			label: postType?.labels.view_item,
-		};
-	}, [] );
+			return {
+				permalink: select( editorStore ).getPermalink(),
+				isPublished: select( editorStore ).isCurrentPostPublished(),
+				label: postType?.labels.view_item,
+				showIconLabels:
+					select( editPostStore ).isFeatureActive( 'showIconLabels' ),
+			};
+		},
+		[]
+	);
 
 	// Only render the view button if the post is published and has a permalink.
 	if ( ! isPublished || ! permalink ) {
@@ -32,6 +42,7 @@ export default function ViewLink() {
 			label={ label || __( 'View post' ) }
 			href={ permalink }
 			target="_blank"
+			showTooltip={ ! showIconLabels }
 		/>
 	);
 }
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -229,6 +229,7 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 							isEnabled={
 								! isFocusMode && hasDefaultEditorCanvasView
 							}
+							showIconLabels={ showIconLabels }
 						>
 							{ ( { onClose } ) => (
 								<MenuGroup>

diff --git a/packages/edit-site/src/components/save-button/index.js b/packages/edit-site/src/components/save-button/index.js
@@ -98,7 +98,7 @@ export default function SaveButton( {
 			 * Displaying the keyboard shortcut conditionally makes the tooltip
 			 * itself show conditionally. This would trigger a full-rerendering
 			 * of the button that we want to avoid. By setting `showTooltip`,
-			 & the tooltip is always rendered even when there's no keyboard shortcut.
+			 * the tooltip is always rendered even when there's no keyboard shortcut.
 			 */
 			showTooltip={ showTooltip }
 			icon={ icon }

diff --git a/packages/editor/src/components/post-saved-state/index.js b/packages/editor/src/components/post-saved-state/index.js
@@ -156,7 +156,7 @@ export default function PostSavedState( {
 			 * Displaying the keyboard shortcut conditionally makes the tooltip
 			 * itself show conditionally. This would trigger a full-rerendering
 			 * of the button that we want to avoid. By setting `showTooltip`,
-			 & the tooltip is always rendered even when there's no keyboard shortcut.
+			 * the tooltip is always rendered even when there's no keyboard shortcut.
 			 */
 			showTooltip
 			variant="tertiary"