File "BlockSettings.jsx"

Full path: /home/webcknlt/admissiontell.com/wp-content/plugins/generateblocks/src/blocks/loop-item/components/BlockSettings.jsx
File size: 2.45 B (2.45 KB bytes)
MIME-type: text/x-java
Charset: utf-8

Download   Open   Edit   Advanced Editor &nnbsp; Back

import { __ } from '@wordpress/i18n';
import { BaseControl, Notice } from '@wordpress/components';

import { OpenPanel } from '@edge22/components';

import {
	ApplyFilters,
	URLControls,
	TagNameControl,
} from '@components/index.js';
import { useBlockStyles } from '@hooks/useBlockStyles';
import { InlineBackgroundImage } from '../../element/components/InlineBackgroundImage';

export function BlockSettings( {
	getStyleValue,
	onStyleChange,
	name,
	attributes,
	setAttributes,
	htmlAttributes,
	styles,
	context,
} ) {
	const {
		tagName,
	} = attributes;

	const {
		atRule,
	} = useBlockStyles();

	const panelProps = {
		name,
		attributes,
		setAttributes,
		getStyleValue,
		onStyleChange,
	};

	return (
		<ApplyFilters
			name="generateblocks.editor.blockControls"
			blockName={ name }
			getStyleValue={ getStyleValue }
			onStyleChange={ onStyleChange }
			currentAtRule={ atRule }
			attributes={ attributes }
			setAttributes={ setAttributes }
		>
			<OpenPanel
				{ ...panelProps }
				shouldRender={ 'a' === tagName && '' === atRule }
				panelId="link-destination"
			>
				<URLControls
					label={ __( 'Link Destination', 'generateblocks' ) }
					setAttributes={ setAttributes }
					htmlAttributes={ htmlAttributes }
					context={ context }
					tagName={ tagName }
				/>
			</OpenPanel>

			<OpenPanel
				{ ...panelProps }
				shouldRender={ '' === atRule }
				panelId="inline-background-image"
			>
				<InlineBackgroundImage
					label={ __( 'Inline Background Image', 'generateblocks' ) }
					htmlAttributes={ htmlAttributes }
					setAttributes={ setAttributes }
					styles={ styles }
					onStyleChange={ onStyleChange }
					context={ context }
				/>
			</OpenPanel>

			<OpenPanel
				{ ...panelProps }
				panelId="settings"
			>
				{ '' === atRule && (
					<>
						<TagNameControl
							blockName="generateblocks/loop-item"
							value={ tagName }
							onChange={ ( value ) => {
								setAttributes( { tagName: value } );

								if ( 'a' === value && ! styles?.display ) {
									onStyleChange( 'display', 'block' );
								}
							} }
						/>

						{ 'a' === tagName && (
							<BaseControl>
								<Notice
									status="warning"
									isDismissible={ false }
								>
									{ __( 'This container is now a link element. Be sure not to add any interactive elements inside of it, like buttons or other links.', 'generateblocks' ) }
								</Notice>
							</BaseControl>
						) }
					</>
				) }
			</OpenPanel>
		</ApplyFilters>
	);
}