Fix: Hide "View Post" link for non-viewable post types (#71356)

R1shabh-Gupta · R1shabh-Gupta · t-hamano · web-flow · commit 8f9c5708c008 · 2025-09-05T15:53:29.000+09:00
* fix: hide admin bar View Post link for non-viewable posts

* test: add unit tests for listener hooks functionality

* fix: restore "View Post" link visibility when switching from non-viewable to viewable post types

Co-authored-by: R1shabh-Gupta &lt;rishabhwp@git.wordpress.org&gt;
Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
Co-authored-by: sabernhardt &lt;sabernhardt@git.wordpress.org&gt;
diff --git a/packages/edit-post/src/components/editor-initialization/listener-hooks.js b/packages/edit-post/src/components/editor-initialization/listener-hooks.js
@@ -4,6 +4,7 @@
 import { useSelect } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -18,12 +19,17 @@ import {
  * post link in the admin bar.
  */
 export const useUpdatePostLinkListener = () => {
-	const { newPermalink } = useSelect(
-		( select ) => ( {
-			newPermalink: select( editorStore ).getCurrentPost().link,
-		} ),
-		[]
-	);
+	const { isViewable, newPermalink } = useSelect( ( select ) => {
+		const { getPostType } = select( coreStore );
+		const { getCurrentPost, getEditedPostAttribute } =
+			select( editorStore );
+		const postType = getPostType( getEditedPostAttribute( 'type' ) );
+		return {
+			isViewable: postType?.viewable,
+			newPermalink: getCurrentPost().link,
+		};
+	}, [] );
+
 	const nodeToUpdateRef = useRef();
 
 	useEffect( () => {
@@ -36,6 +42,13 @@ export const useUpdatePostLinkListener = () => {
 		if ( ! newPermalink || ! nodeToUpdateRef.current ) {
 			return;
 		}
+
+		if ( ! isViewable ) {
+			nodeToUpdateRef.current.style.display = 'none';
+			return;
+		}
+
+		nodeToUpdateRef.current.style.display = '';
 		nodeToUpdateRef.current.setAttribute( 'href', newPermalink );
-	}, [ newPermalink ] );
+	}, [ newPermalink, isViewable ] );
 };
diff --git a/packages/edit-post/src/components/editor-initialization/test/listener-hooks.js b/packages/edit-post/src/components/editor-initialization/test/listener-hooks.js
@@ -33,6 +33,14 @@ describe( 'listener hook tests', () => {
 			...storeConfig,
 			selectors: {
 				getCurrentPost: jest.fn(),
+				getCurrentPostType: jest.fn(),
+				getEditedPostAttribute: jest.fn(),
+			},
+		},
+		core: {
+			...storeConfig,
+			selectors: {
+				getPostType: jest.fn(),
 			},
 		},
 		'core/viewport': {
@@ -69,6 +77,13 @@ describe( 'listener hook tests', () => {
 		mockStores[ store ].selectors[ functionName ].mockReturnValue( value );
 	};
 
+	const setupPostTypeScenario = ( postType, isViewable = true ) => {
+		setMockReturnValue( 'core/editor', 'getEditedPostAttribute', postType );
+		setMockReturnValue( 'core', 'getPostType', {
+			viewable: isViewable,
+		} );
+	};
+
 	afterEach( () => {
 		Object.values( mockStores ).forEach( ( storeMocks ) => {
 			Object.values( storeMocks.selectors ).forEach( ( mock ) => {
@@ -95,28 +110,36 @@ describe( 'listener hook tests', () => {
 		};
 
 		const setAttribute = jest.fn();
+		const mockElement = {
+			setAttribute,
+			style: { display: '' },
+		};
 		const mockSelector = jest.fn();
 		beforeEach( () => {
+			// Reset the mock element style
+			mockElement.style.display = '';
 			// eslint-disable-next-line testing-library/no-node-access
-			document.querySelector = mockSelector.mockReturnValue( {
-				setAttribute,
-			} );
+			document.querySelector =
+				mockSelector.mockReturnValue( mockElement );
 		} );
 		afterEach( () => {
 			setAttribute.mockClear();
 			mockSelector.mockClear();
+			mockElement.style.display = '';
 		} );
 		it( 'updates nothing if there is no view link available', () => {
 			mockSelector.mockImplementation( () => null );
 			setMockReturnValue( 'core/editor', 'getCurrentPost', {
 				link: 'foo',
 			} );
+			setupPostTypeScenario( 'post', true );
 			render( <TestedOutput /> );
 
 			expect( setAttribute ).not.toHaveBeenCalled();
 		} );
 		it( 'updates nothing if there is no permalink', () => {
 			setMockReturnValue( 'core/editor', 'getCurrentPost', { link: '' } );
+			setupPostTypeScenario( 'post', true );
 			render( <TestedOutput /> );
 
 			expect( setAttribute ).not.toHaveBeenCalled();
@@ -125,6 +148,7 @@ describe( 'listener hook tests', () => {
 			setMockReturnValue( 'core/editor', 'getCurrentPost', {
 				link: 'foo',
 			} );
+			setupPostTypeScenario( 'post', true );
 			const { rerender } = render( <TestedOutput /> );
 
 			rerender( <TestedOutput /> );
@@ -139,6 +163,7 @@ describe( 'listener hook tests', () => {
 			setMockReturnValue( 'core/editor', 'getCurrentPost', {
 				link: 'foo',
 			} );
+			setupPostTypeScenario( 'post', true );
 			render( <TestedOutput /> );
 			expect( setAttribute ).toHaveBeenCalledTimes( 1 );
 			act( () => {
@@ -150,6 +175,7 @@ describe( 'listener hook tests', () => {
 			setMockReturnValue( 'core/editor', 'getCurrentPost', {
 				link: 'foo',
 			} );
+			setupPostTypeScenario( 'post', true );
 			render( <TestedOutput /> );
 			expect( setAttribute ).toHaveBeenCalledTimes( 1 );
 			expect( setAttribute ).toHaveBeenCalledWith( 'href', 'foo' );
@@ -163,5 +189,15 @@ describe( 'listener hook tests', () => {
 			expect( setAttribute ).toHaveBeenCalledTimes( 2 );
 			expect( setAttribute ).toHaveBeenCalledWith( 'href', 'bar' );
 		} );
+		it( 'hides the "View Post" link when editing non-viewable post types', () => {
+			setMockReturnValue( 'core/editor', 'getCurrentPost', {
+				link: 'foo',
+			} );
+			setupPostTypeScenario( 'wp_block', false );
+			render( <TestedOutput /> );
+
+			expect( setAttribute ).not.toHaveBeenCalled();
+			expect( mockElement ).toHaveProperty( 'style.display', 'none' );
+		} );
 	} );
 } );
