WordFence

🏠 Root / home / artorgp / www / wp-content / plugins / visual-portfolio / gutenberg / block /

Editing: edit.js

import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { useEffect } from '@wordpress/element';

import ControlsRender from '../components/controls-render';
import IframePreview from '../components/iframe-preview';
import SetupWizard from '../components/setup-wizard';

const {
	plugin_url: pluginUrl,
	controls_categories: registeredControlsCategories,
} = window.VPGutenbergVariables;

function filterControlCategories( categories, isChildOfLoop ) {
	if ( ! isChildOfLoop ) {
		return categories;
	}

// Categories to remove when block is child of Loop
	const categoriesToRemove = [
		'content-source',
		'content-source-general',
		'content-source-images',
		'content-source-post-based',
		'content-source-taxonomies',
		'content-source-social-stream',
	];

// Create a new object with filtered categories
	return Object.fromEntries(
		Object.entries( categories ).filter(
			( [ key ] ) => ! categoriesToRemove.includes( key )
		)
	);
}

function renderControls( props, isChildOfLoop ) {
	const { attributes, context } = props;

let { content_source: contentSource } = attributes;

// Saved layouts by default displaying Portfolio source.
	if ( contentSource === 'portfolio' ) {
		contentSource = '';
	}

// Use context value if available, otherwise use contentSource from attributes
	contentSource = ( context && context[ 'vp/queryType' ] ) || contentSource;

const filteredCategories = filterControlCategories(
		registeredControlsCategories,
		isChildOfLoop
	);

return (
		<>
			{ ! isChildOfLoop && (
				<ControlsRender category="content-source" { ...props } />
			) }

{ /* Display all settings once selected Content Source */ }
			{ contentSource ? (
				<>
					{ Object.keys( filteredCategories ).map( ( name ) => {
						if ( name === 'content-source' ) {
							return null;
						}

// Open Layouts category by default when not in Loop context.
						const categoryInitialOpen =
							isChildOfLoop && name === 'layout-elements';

return (
							<ControlsRender
								key={ name }
								category={ name }
								categoryInitialOpen={ categoryInitialOpen }
								{ ...props }
							/>
						);
					} ) }
				</>
			) : null }
		</>
	);
}

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

const {
		block_id: blockId,
		content_source: contentSourceFromAttributes,
		setup_wizard: setupWizard,
		preview_image_example: previewExample,
		layout,
	} = attributes;

const { 'vp/queryType': contentSourceFromContext } = context || {};

// Use context values if they exist, otherwise fall back to attributes
	const contentSource =
		contentSourceFromContext || contentSourceFromAttributes;

const isChildOfLoop = !! contentSourceFromContext;

// Display setup wizard on mount.
	useEffect( () => {
		if (
			! setupWizard &&
			( ! blockId || ! contentSource ) &&
			! isChildOfLoop
		) {
			setAttributes( {
				setup_wizard: 'true',
			} );
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [] );

// Display block preview.
	if ( previewExample === 'true' ) {
		return (
			<div className="vpf-example-preview">
				<img
					src={ `${ pluginUrl }/assets/admin/images/example-${ layout }.png` }
					alt={ `Preview of ${ layout } layout` }
				/>
			</div>
		);
	}

const blockProps = useBlockProps();

return (
		<div { ...blockProps }>
			{ setupWizard === 'true' ? (
				<SetupWizard { ...props } />
			) : (
				<>
					<InspectorControls>
						{ renderControls( props, isChildOfLoop ) }
					</InspectorControls>
					<IframePreview { ...props } />
				</>
			) }
		</div>
	);
}