@wordpress/block-editor/src/components/block-visibility/viewport-menu-item.js

Generic block editor.

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { MenuItem } from '@wordpress/components';
import { seen, unseen } from '@wordpress/icons';
import { useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';

/**
 * Internal dependencies
 */
import { BlockVisibilityModal } from './';
import { store as blockEditorStore } from '../../store';
import { unlock } from '../../lock-unlock';

export default function BlockVisibilityViewportMenuItem( { clientIds } ) {
	const [ isModalOpen, setIsModalOpen ] = useState( false );
	const areBlocksHiddenAnywhere = useSelect(
		( select ) =>
			unlock( select( blockEditorStore ) ).areBlocksHiddenAnywhere(
				clientIds
			),
		[ clientIds ]
	);
	return (
		<>
			<MenuItem
				icon={ areBlocksHiddenAnywhere ? unseen : seen }
				onClick={ () => setIsModalOpen( true ) }
			>
				{ areBlocksHiddenAnywhere ? __( 'Show' ) : __( 'Hide' ) }
			</MenuItem>
			{ isModalOpen && (
				<BlockVisibilityModal
					clientIds={ clientIds }
					onClose={ () => setIsModalOpen( false ) }
				/>
			) }
		</>
	);
}