@wordpress/e2e-tests/plugins/block-icons/index.js

Test plugins and mu-plugins for E2E tests in WordPress.

( function () {
	const registerBlockType = wp.blocks.registerBlockType;
	const el = wp.element.createElement;
	const { InnerBlocks, useBlockProps, useInnerBlocksProps } = wp.blockEditor;
	const circle = el( 'circle', {
		cx: 10,
		cy: 10,
		r: 10,
		fill: 'red',
		stroke: 'blue',
		strokeWidth: '10',
	} );
	const svg = el(
		'svg',
		{ width: 20, height: 20, viewBox: '0 0 20 20' },
		circle
	);

	registerBlockType( 'test/test-single-svg-icon', {
		apiVersion: 3,
		title: 'TestSimpleSvgIcon',
		icon: svg,
		category: 'text',

		edit: function Edit() {
			const blockProps = useBlockProps( {
				className: 'test-single-svg-icon',
				style: { outline: '1px solid gray', padding: 5 },
			} );
			const innerBlocksProps = useInnerBlocksProps( blockProps, {
				allowedBlocks: [ 'core/paragraph', 'core/image' ],
				template: [
					[
						'core/paragraph',
						{
							content: 'TestSimpleSvgIcon',
						},
					],
				],
			} );
			return el( 'div', innerBlocksProps );
		},

		save() {
			return el(
				'div',
				{
					className: 'test-single-svg-icon',
					style: { outline: '1px solid gray', padding: 5 },
				},
				el( InnerBlocks.Content, {} )
			);
		},
	} );

	registerBlockType( 'test/test-dash-icon', {
		apiVersion: 3,
		title: 'TestSimpleDashIcon',
		icon: 'cart',
		category: 'text',

		edit: function Edit() {
			const blockProps = useBlockProps( {
				className: 'test-dash-icon',
				style: { outline: '1px solid gray', padding: 5 },
			} );
			const innerBlocksProps = useInnerBlocksProps( blockProps, {
				allowedBlocks: [ 'core/paragraph', 'core/image' ],
				template: [
					[
						'core/paragraph',
						{
							content: 'TestDashIcon',
						},
					],
				],
			} );
			return el( 'div', innerBlocksProps );
		},

		save() {
			return el(
				'div',
				{
					className: 'test-dash-icon',
					style: { outline: '1px solid gray', padding: 5 },
				},
				el( InnerBlocks.Content, {} )
			);
		},
	} );

	registerBlockType( 'test/test-function-icon', {
		apiVersion: 3,
		title: 'TestFunctionIcon',
		icon() {
			return svg;
		},
		category: 'text',

		edit: function Edit() {
			const blockProps = useBlockProps( {
				className: 'test-function-icon',
				style: { outline: '1px solid gray', padding: 5 },
			} );
			const innerBlocksProps = useInnerBlocksProps( blockProps, {
				allowedBlocks: [ 'core/paragraph', 'core/image' ],
				template: [
					[
						'core/paragraph',
						{
							content: 'TestFunctionIcon',
						},
					],
				],
			} );
			return el( 'div', innerBlocksProps );
		},

		save() {
			return el(
				'div',
				{
					className: 'test-function-icon',
					style: { outline: '1px solid gray', padding: 5 },
				},
				el( InnerBlocks.Content, {} )
			);
		},
	} );

	registerBlockType( 'test/test-dash-icon-colors', {
		apiVersion: 3,
		title: 'TestDashIconColors',
		icon: {
			background: '#010000',
			foreground: '#fe0000',
			src: 'cart',
		},
		category: 'text',

		edit: function Edit() {
			const blockProps = useBlockProps( {
				className: 'test-dash-icon-colors',
				style: { outline: '1px solid gray', padding: 5 },
			} );
			const innerBlocksProps = useInnerBlocksProps( blockProps, {
				allowedBlocks: [ 'core/paragraph', 'core/image' ],
				template: [
					[
						'core/paragraph',
						{
							content: 'TestIconColors',
						},
					],
				],
			} );
			return el( 'div', innerBlocksProps );
		},

		save() {
			return el(
				'div',
				{
					className: 'test-dash-icon-colors',
					style: { outline: '1px solid gray', padding: 5 },
				},
				el( InnerBlocks.Content, {} )
			);
		},
	} );

	registerBlockType( 'test/test-svg-icon-background', {
		apiVersion: 3,
		title: 'TestSvgIconBackground',
		icon: {
			background: '#010000',
			src: svg,
		},
		category: 'text',

		edit: function Edit() {
			const blockProps = useBlockProps( {
				className: 'test-svg-icon-background',
				style: { outline: '1px solid gray', padding: 5 },
			} );
			const innerBlocksProps = useInnerBlocksProps( blockProps, {
				allowedBlocks: [ 'core/paragraph', 'core/image' ],
				template: [
					[
						'core/paragraph',
						{
							content: 'TestIconColors',
						},
					],
				],
			} );
			return el( 'div', innerBlocksProps );
		},

		save() {
			return el(
				'div',
				{
					className: 'test-svg-icon-background',
					style: { outline: '1px solid gray', padding: 5 },
				},
				el( InnerBlocks.Content, {} )
			);
		},
	} );
} )();