File Manager

X7ROOT File Manager

Current Path: /home/freights/public_html/wp-content/plugins/generateblocks/src/blocks/loop-item

home / freights / public_html / wp-content / plugins / generateblocks / src / blocks / loop-item /

?? ..
?? block.json(1.29 KB)
?? components
?? edit.js(3.74 KB)
?? editor.scss(61 B)
?? index.js(2.63 KB)
?? save.js(551 B)

Editing: edit.js

import { useBlockProps, InspectorControls, useInnerBlocksProps } from '@wordpress/block-editor';
import { useMemo, useEffect } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';

import { BlockStyles, withUniqueId } from '@edge22/block-styles';

import { BlockSettings } from './components/BlockSettings';
import { selectorShortcuts } from '@utils/selectorShortcuts';
import { withStyles } from '@hoc/withStyles';
import { BlockStylesBuilder, BlockAppender } from '@components/index';
import { withHtmlAttributes } from '@hoc/withHtmlAttributes.js';
import { getBlockClasses } from '@utils/getBlockClasses';

import './editor.scss';

function EditBlock( props ) {
	const {
		attributes,
		setAttributes,
		clientId,
		isSelected,
		onStyleChange,
		editorHtmlAttributes,
		styles,
		context,
		name,
	} = props;

const {
		tagName,
	} = attributes;

useEffect( () => {
		if ( ! tagName ) {
			setAttributes( { tagName: 'div' } );
		}
	}, [ tagName ] );

const classNames = getBlockClasses(
		'gb-loop-item',
		{
			...attributes,
			styles,
		},
		true
	);

const blockProps = useBlockProps( {
		className: classNames.join( ' ' ).trim(),
		...editorHtmlAttributes,
	} );

const innerBlocksProps = useInnerBlocksProps(
		blockProps,
		{
			renderAppender: () => (
				<BlockAppender
					clientId={ clientId }
					isSelected={ isSelected }
					attributes={ attributes }
				/>
			),
		}
	);

const {
		children: innerBlocksChildren,
		...otherInnerBlocksProps
	} = innerBlocksProps;

const TagName = tagName || 'div';
	const shortcuts = useMemo( () => {
		const visibleSelectors = [];
		const blockSelectors = { ...selectorShortcuts };

visibleSelectors.push(
			{
				label: __( 'Links', 'generateblocks' ),
				value: 'a',
			}
		);

if ( 'a' === tagName || 'button' === tagName ) {
			if ( blockSelectors?.links ) {
				delete blockSelectors.links;
			}

const defaultItems = blockSelectors?.default?.items || [];

if ( defaultItems.length > 0 ) {
				blockSelectors.default.items = defaultItems.filter( ( item ) => {
					return 'a' !== item.value && ! item.value.startsWith( 'a:' );
				} );
			}
		}

return {
			selectorShortcuts: blockSelectors,
			visibleShortcuts: visibleSelectors,
		};
	}, [ tagName ] );

const contextPostId = context?.postId ?? context?.[ 'generateblocks/loopIndex' ] ?? 0;
	const previewId = context?.[ 'generateblocks/loopPreviewId' ] ?? {};
	const hasLoopItems = context?.[ 'generateblocks/hasLoopItems' ] ?? false;
	const setPreviewId = context?.[ 'generateblocks/setLoopPreviewId' ] ?? null;
	const queryId = context?.[ 'generateblocks/queryId' ] ?? '';
	const itemPreviewId = previewId[ queryId ] || 0;

return (
		<>
			<InspectorControls>
				<BlockStyles
					settingsTab={ (
						<BlockSettings
							{ ...props }
						/>
					) }
					stylesTab={ (
						<BlockStylesBuilder
							attributes={ attributes }
							setAttributes={ setAttributes }
							shortcuts={ shortcuts }
							onStyleChange={ onStyleChange }
							name={ name }
						/>
					) }
				/>
			</InspectorControls>
			<TagName { ...otherInnerBlocksProps }>
				{ innerBlocksChildren }
				{ ( !! hasLoopItems && itemPreviewId !== contextPostId ) && (
					<button
						className="gb-block-preview__toggle"
						data-block-id={ clientId }
						data-context-post-id={ contextPostId }
						onClick={ () => {
							if ( setPreviewId ) {
								setPreviewId( ( prev ) => {
									return {
										...prev,
										[ queryId ]: contextPostId,
									};
								} );
							}
						} }
						type="button"
						aria-label={ __( 'Set this block as active', 'generateblocks' ) }
					/>
				) }
			</TagName>
		</>
	);
}

const Edit = compose(
	withHtmlAttributes,
	withStyles,
	withUniqueId
)( EditBlock );

export { Edit };

X7ROOT File Manager

Editing: edit.js

Upload File

Create Folder