# ghostkit/3.3.3/gutenberg/blocks/widgetized-area/edit.js

Block Animations, Motion & Scroll Effects – Ghost Kit, version 3.3.3. 60 lines.

- Page: https://pluginprobe.com/plugins/ghostkit/3.3.3/code/gutenberg/blocks/widgetized-area/edit.js
- Raw: https://pluginprobe.com/plugins/ghostkit/3.3.3/raw/gutenberg/blocks/widgetized-area/edit.js
- Modified: 2024-02-18T18:40:24+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/ghostkit/3.3.3/code/gutenberg/blocks/widgetized-area/edit.js#L10-L20`.

```javascript
import classnames from 'classnames/dedupe';

import { useBlockProps } from '@wordpress/block-editor';
import { Placeholder, SelectControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

import getIcon from '../../utils/get-icon';

const { GHOSTKIT } = window;

/**
 * Block Edit Class.
 *
 * @param props
 */
export default function BlockEdit(props) {
	const { setAttributes, attributes } = props;

	let { className } = props;

	const { id } = attributes;

	className = classnames('ghostkit-widgetized-area', className);

	const blockProps = useBlockProps({ className });

	return (
		<div {...blockProps}>
			<Placeholder
				icon={getIcon('block-widgetized-area')}
				label={__('Widgetized Area', 'ghostkit')}
			>
				<SelectControl
					value={id}
					onChange={(value) => setAttributes({ id: value })}
					options={(() => {
						const sidebars = [
							{
								label: __('--- Select Sidebar ---', 'ghostkit'),
								value: '',
							},
						];

						if (GHOSTKIT.sidebars) {
							Object.keys(GHOSTKIT.sidebars).forEach((k) => {
								sidebars.push({
									label: GHOSTKIT.sidebars[k].name,
									value: GHOSTKIT.sidebars[k].id,
								});
							});
						}

						return sidebars;
					})()}
				/>
			</Placeholder>
		</div>
	);
}

```