Alley React Snippet

gistfile1.txt

/**
 * WordPress dependencies
 */
import { PanelBody, ToggleControl } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

/**
 * Renders the Advanced Features sidebar panel and toggle for the alley feature flag.
 * Reads and updates post meta via core/editor; does not persist to server (editor save does).
 *
 * @return {JSX.Element} Inspector panel with toggle control.
 */
export default function FeatureTogglePanel() {
	// Use WP data store to get the post attributes.
	const { meta } = useSelect( ( select ) => {
		const editor = select( 'core/editor' );
		return {
			meta: editor.getEditedPostAttribute( 'meta' ) || {},
		};
	}, [] );

	const { editPost } = useDispatch( 'core/editor' );
	const enabled = Boolean( meta.alley_feature_enabled );

	const updateMeta = ( nextValue ) => {
		// New object so core/editor detects a change and keeps meta in sync.
		editPost( {
			meta: Object.assign( {}, meta, { alley_feature_enabled: nextValue } ),
		} );
	};

	return (
		<PanelBody title="Advanced Features" initialOpen>
			<ToggleControl
				label={__( 'Enable smart feature', 'alley' ) }
				checked={ enabled }
				onChange={ updateMeta }
				help={ __( 'Applies additional processing during rendering.', 'alley' ) }
			/>
		</PanelBody>
	);
}