XMAN Replicator

Path: /home/vestsxzf/public_html/wp-content/themes/blocksy/static/js/customizer/components/

Name	Size	Rights	Date	Actions
[.]	<DIR>	drwxr-xr-x	2026-03-27 10:28	🔄 🗑️ 🗑️📁 ⬇️ 🔒
[..]	<DIR>	drwxr-xr-x	2026-03-27 10:28	🔄 🗑️ 🗑️📁 ⬇️ 🔒
Overlay.js	1,875 B	-rw-r--r--	2026-03-27 10:28	✏️ 🔄 🗑️ ⬇️ 🔒
ProOverlay.js	2,832 B	-rw-r--r--	2026-03-27 10:28	✏️ 🔄 🗑️ ⬇️ 🔒
ProOverlayBuilderUnknownItem.js	1,297 B	-rw-r--r--	2026-03-27 10:28	✏️ 🔄 🗑️ ⬇️ 🔒
[reach]	<DIR>	drwxr-xr-x	2026-03-27 10:28	🔄 🗑️ 🗑️📁 ⬇️ 🔒
responsive-controls.js	1,721 B	-rw-r--r--	2026-03-27 10:28	✏️ 🔄 🗑️ ⬇️ 🔒
useDeviceManager.js	2,550 B	-rw-r--r--	2026-03-27 10:28	✏️ 🔄 🗑️ ⬇️ 🔒

Edit: useDeviceManager.js

import {
	useState,
	useEffect,
	useCallback,
	createContext,
	createElement,
	useContext,
} from '@wordpress/element'

export const DeviceManagerStateContext = createContext()
export const DeviceManagerActionsContext = createContext()

export const useDeviceManagerState = () => {
	const context = useContext(DeviceManagerStateContext)

return context || { currentView: 'desktop' }
}

export const useDeviceManagerActions = () => {
	const context = useContext(DeviceManagerActionsContext)
	return context || {}
}

export const getCurrentDevice = (select = null) => {
	if (wp.customize && wp.customize.previewedDevice) {
		return wp.customize.previewedDevice()
	}

let maybeSelect = select

if (wp.data && wp.data.select) {
		maybeSelect = wp.data.select
	}

let device = 'desktop'

if (maybeSelect) {
		if (
			maybeSelect('core/editor') &&
			maybeSelect('core/editor').getDeviceType
		) {
			device = maybeSelect('core/editor').getDeviceType().toLowerCase()
		} else {
			if (
				maybeSelect('core/edit-post') &&
				maybeSelect(
					'core/edit-post'
				).__experimentalGetPreviewDeviceType()
			) {
				device = maybeSelect('core/edit-post')
					.__experimentalGetPreviewDeviceType()
					.toLowerCase()
			}
		}
	}

return device
}

export const useDeviceManager = (args = {}) => {
	const { withTablet = true } = args

const [currentView, setCurrentView] = useState(
		wp.customize && wp.customize.previewedDevice
			? wp.customize.previewedDevice()
			: 'desktop'
	)

const listener = () => {
		setCurrentView(
			wp.customize && wp.customize.previewedDevice
				? wp.customize.previewedDevice()
				: 'desktop'
		)
	}

useEffect(() => {
		setTimeout(() => {
			if (wp.customize && wp.customize.previewedDevice) {
				wp.customize.previewedDevice.bind(listener)
			}
		}, 1000)

return () => {
			if (wp.customize && wp.customize.previewedDevice) {
				wp.customize.previewedDevice.unbind(listener)
			}
		}
	}, [])

return [
		withTablet
			? currentView
			: currentView === 'tablet'
			? 'mobile'
			: currentView,
		(device) => {
			setCurrentView(device)

if (wp.customize && wp.customize.previewedDevice) {
				wp.customize.previewedDevice.set(device)
			}
		},
	]
}

export const DeviceManagerProvider = ({ children }) => {
	const [currentView, setDevice] = useDeviceManager()

return (
		<DeviceManagerStateContext.Provider value={{ currentView }}>
			<DeviceManagerActionsContext.Provider value={{ setDevice }}>
				{children}
			</DeviceManagerActionsContext.Provider>
		</DeviceManagerStateContext.Provider>
	)
}

🛸 XMAN Replicator

Edit: useDeviceManager.js

PHP Console

SQL Console