# post-carousel/4.0.2/src/context/togglePanelBodyContext.js

Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News, version 4.0.2. 49 lines.

- Page: https://pluginprobe.com/plugins/post-carousel/4.0.2/code/src/context/togglePanelBodyContext.js
- Raw: https://pluginprobe.com/plugins/post-carousel/4.0.2/raw/src/context/togglePanelBodyContext.js
- Modified: 2026-04-24T11:48:54+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/post-carousel/4.0.2/code/src/context/togglePanelBodyContext.js#L10-L20`.

```javascript
import { createContext, useCallback, useContext, useState } from "@wordpress/element";

// Create context
export const TogglePanelBodyContext = createContext();

const addFlashClass = (target) => {
	const panelBodyEl = document.querySelectorAll(".sp-smart-post-tab-panel");
	if (!panelBodyEl || !panelBodyEl.length) {
		return;
	}
	panelBodyEl.forEach((panel) => {
		panel.classList.toggle("sp-flash", Boolean(target));
	});
};

// Create a context provider components
export const TogglePanelBodyProvider = ({ blockName = "", children }) => {
	// const [ openPanel, setOpenPanel ] = useState( localStor.get() || '' );
	const [openPanel, setOpenPanel] = useState("general");

	const togglePanelBody = useCallback(
		(event = false, panel, blockName = false) => {
			// event?.stopPropagation?.();
			const panelName =
				"object" === typeof event ? event?.target?.closest(".sp-panel-data")?.dataset?.component : event;
			const panelValue = panelName || panel;

			setOpenPanel(openPanel === panelValue && "string" === typeof event ? "" : panelValue);
			addFlashClass(event.target);
		},
		[openPanel]
	);

	const contextValue = {
		openPanel: openPanel,
		togglePanelBody: togglePanelBody,
	};

	return <TogglePanelBodyContext.Provider value={contextValue}>{children}</TogglePanelBodyContext.Provider>;
};

export const usePanelBodyContext = () => {
	const context = useContext(TogglePanelBodyContext);
	// if ( ! isEditor() ) {
	// 	return { togglePanelBody: () => {}, openPanel: '' }; // Fallback for frontend;
	// }
	return context;
};

```