WordFence

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

Editing: index.js

import { InspectorControls } from '@wordpress/block-editor';
import { registerBlockType } from '@wordpress/blocks';
import { Button, PanelBody } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import { useState } from '@wordpress/element';
import { applyFilters } from '@wordpress/hooks';
import { __ } from '@wordpress/i18n';

const { navigator } = window;

let copiedTimeout;

function ShortcodeRender( props ) {
	const [ copied, setCopied ] = useState( false );

return (
		<div className="vpf-layout-shortcode-copy">
			<strong>{ props.label }:</strong>
			<div>
				<pre>{ props.content }</pre>
				<Button
					onClick={ () => {
						navigator.clipboard
							.writeText( props.content )
							.then( () => {
								setCopied( true );

clearTimeout( copiedTimeout );

copiedTimeout = setTimeout( () => {
									setCopied( false );
								}, 450 );
							} );
					} }
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						width="16"
						height="16"
						fill="currentColor"
						viewBox="0 0 16 16"
					>
						<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
						<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
					</svg>
					{ copied ? (
						<div className="vpf-layout-shortcode-copied">
							{ __( 'Copied!', 'visual-portfolio' ) }
						</div>
					) : null }
				</Button>
			</div>
		</div>
	);
}

/**
 * Layouts Editor block
 *
 * @param props
 */
function LayoutsEditorBlock( props ) {
	const { clientId } = props;

const [ additionalShortcodes, setAdditionalShortcodes ] = useState( false );

const { postId, blockData, VisualPortfolioBlockEdit } = useSelect(
		( select ) => {
			const { getBlockData } = select(
				'visual-portfolio/saved-layout-data'
			);
			const { getCurrentPostId } = select( 'core/editor' );
			const { getBlockType } = select( 'core/blocks' );

return {
				postId: getCurrentPostId(),
				blockData: getBlockData(),
				VisualPortfolioBlockEdit:
					getBlockType( 'visual-portfolio/block' )?.edit ||
					( () => null ),
			};
		}
	);

const { updateBlockData } = useDispatch(
		'visual-portfolio/saved-layout-data'
	);

let shortcodes = [
		{
			label: __( 'This Saved Layout', 'visual-portfolio' ),
			content: `[visual_portfolio id="${ postId }"]`,
		},
		{
			label: __( 'Filter', 'visual-portfolio' ),
			content: `[visual_portfolio_filter id="${ postId }" type="minimal" align="center" show_count="false" text_all="All"]`,
			isOptional: true,
		},
		{
			label: __( 'Sort', 'visual-portfolio' ),
			content: `[visual_portfolio_sort id="${ postId }" type="minimal" align="center"]`,
			isOptional: true,
		},
	];

shortcodes = applyFilters(
		'vpf.layouts-editor.shortcodes-list',
		shortcodes,
		{ props, postId, blockData, updateBlockData, VisualPortfolioBlockEdit }
	);

return (
		<>
			<InspectorControls>
				<PanelBody
					title={ __( 'Shortcodes', 'visual-portfolio' ) }
					scrollAfterOpen
				>
					<p>
						{ __(
							'To output this saved layout and its components you can use the following shortcodes:'
						) }
					</p>
					{ shortcodes.map( ( data ) => {
						if ( data.isOptional ) {
							return null;
						}

return (
							<ShortcodeRender
								key={ `shortcode-${ data.label }` }
								{ ...data }
							/>
						);
					} ) }
					{ additionalShortcodes ? (
						<>
							{ shortcodes.map( ( data ) => {
								if ( ! data.isOptional ) {
									return null;
								}

return (
									<ShortcodeRender
										key={ `shortcode-${ data.label }` }
										{ ...data }
									/>
								);
							} ) }
							{ applyFilters(
								'vpf.layouts-editor.shortcodes',
								'',
								this
							) }
						</>
					) : (
						<Button
							variant="link"
							onClick={ () => {
								setAdditionalShortcodes(
									! additionalShortcodes
								);
							} }
						>
							{ __(
								'Show Additional Shortcodes',
								'visual-portfolio'
							) }
						</Button>
					) }
				</PanelBody>
			</InspectorControls>
			<VisualPortfolioBlockEdit
				attributes={ {
					...blockData,
					block_id: blockData.id || clientId,
				} }
				setAttributes={ ( data ) => {
					updateBlockData( data );
				} }
				clientId={ clientId }
			/>
		</>
	);
}

registerBlockType( 'visual-portfolio/saved-editor', {
	icon: {
		foreground: '#2540CC',
		src: (
			<svg
				width="20"
				height="20"
				viewBox="0 0 20 20"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
			>
				<mask
					id="mask0"
					// eslint-disable-next-line react/no-unknown-property
					mask-type="alpha"
					maskUnits="userSpaceOnUse"
					x="9"
					y="8"
					width="5"
					height="6"
				>
					<path
						d="M11.1409 14L13.0565 8.49994H11.2789L9.55397 14H11.1409Z"
						fill="url(#paint0_linear)"
					/>
				</mask>
				<g mask="url(#mask0)">
					<path
						d="M11.1409 14L13.0565 8.49994H11.2789L9.55397 14H11.1409Z"
						fill="currentColor"
					/>
				</g>
				<path
					d="M8.90795 14L6.9923 8.49994H8.76989L10.4948 14H8.90795Z"
					fill="currentColor"
				/>
				<path
					d="M19 16.2222C19 16.6937 18.8104 17.1459 18.4728 17.4793C18.1352 17.8127 17.6774 18 17.2 18H2.8C2.32261 18 1.86477 17.8127 1.52721 17.4793C1.18964 17.1459 1 16.6937 1 16.2222V3.77778C1 3.30628 1.18964 2.8541 1.52721 2.5207C1.86477 2.1873 2.32261 2 2.8 2H7.3L9.1 4.66667H17.2C17.6774 4.66667 18.1352 4.85397 18.4728 5.18737C18.8104 5.52076 19 5.97295 19 6.44444V16.2222Z"
					stroke="currentColor"
					strokeWidth="1.5"
					strokeLinecap="round"
					strokeLinejoin="round"
					fill="transparent"
				/>
				<defs>
					<linearGradient
						id="paint0_linear"
						x1="12.191"
						y1="8.49994"
						x2="7.44436"
						y2="15.1301"
						gradientUnits="userSpaceOnUse"
					>
						<stop />
						<stop offset="1" stopOpacity="0" />
					</linearGradient>
				</defs>
			</svg>
		),
	},
	edit: LayoutsEditorBlock,
	save() {
		return null;
	},
} );