[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Create a Gutenberg block for Display the Large Image of a product.

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "woocommerce/product-gallery-large-image",
	"title": "Large Image",
	"description": "Display the Large Image of a product.",
	"category": "woocommerce",
	"keywords": [ "WooCommerce" ],
	"usesContext": [ "postId", "hoverZoom", "fullScreenOnClick" ],
	"supports": {
		"interactivity": true
	},
	"textdomain": "woocommerce",
	"ancestor": [ "woocommerce/product-gallery" ],
	"viewScriptModule": "woocommerce/product-gallery-large-image",
	"editorStyle": "file:../woocommerce/product-gallery-large-image-editor.css"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';

export const Edit = () => {
	const innerBlocksProps = useInnerBlocksProps(
		{
			className: 'wc-block-product-gallery-large-image__inner-blocks',
		},
		{
			templateInsertUpdatesSelection: true,
		}
	);

	const blockProps = useBlockProps( {
		className:
			'wc-block-product-gallery-large-image wc-block-editor-product-gallery-large-image',
	} );

	return (
		<div { ...blockProps }>
			<div { ...innerBlocksProps } />
		</div>
	);
};

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/save.tsx
/**
 * External dependencies
 */
import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';

export const Save = () => {
	const blockProps = useBlockProps.save( {
		className: 'wc-block-product-gallery-large-image__inner-blocks',
	} );
	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
	return <div { ...innerBlocksProps } />;
};


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Create a text block with customizable content, text align

[Assistant]
// File: packages/block-library/src/verse/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/verse",
	"title": "Verse",
	"category": "text",
	"description": "Insert poetry. Use special spacing formats. Or quote song lyrics.",
	"keywords": [ "poetry", "poem" ],
	"textdomain": "default",
	"attributes": {
		"content": {
			"type": "rich-text",
			"source": "rich-text",
			"selector": "pre",
			"__unstablePreserveWhiteSpace": true,
			"role": "content"
		},
		"textAlign": {
			"type": "string"
		}
	},
	"supports": {
		"anchor": true,
		"background": {
			"backgroundImage": true,
			"backgroundSize": true,
			"__experimentalDefaultControls": {
				"backgroundImage": true
			}
		},
		"color": {
			"gradients": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"dimensions": {
			"minHeight": true,
			"__experimentalDefaultControls": {
				"minHeight": false
			}
		},
		"typography": {
			"fontSize": true,
			"__experimentalFontFamily": true,
			"lineHeight": true,
			"__experimentalFontStyle": true,
			"__experimentalFontWeight": true,
			"__experimentalLetterSpacing": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalWritingMode": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"spacing": {
			"margin": true,
			"padding": true,
			"__experimentalDefaultControls": {
				"margin": false,
				"padding": false
			}
		},
		"__experimentalBorder": {
			"radius": true,
			"width": true,
			"color": true,
			"style": true
		},
		"interactivity": {
			"clientNavigation": true
		}
	},
	"style": "wp-block-verse",
	"editorStyle": "wp-block-verse-editor"
}

// File: packages/block-library/src/verse/index.js
/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { verse as icon } from '@wordpress/icons';
import { privateApis as blocksPrivateApis } from '@wordpress/blocks';

/**
 * Internal dependencies
 */
import initBlock from '../utils/init-block';
import deprecated from './deprecated';
import edit from './edit';
import metadata from './block.json';
import save from './save';
import transforms from './transforms';
import { unlock } from '../lock-unlock';

const { fieldsKey, formKey } = unlock( blocksPrivateApis );

const { name } = metadata;

export { metadata, name };

export const settings = {
	icon,
	example: {
		attributes: {
			/* eslint-disable @wordpress/i18n-no-collapsible-whitespace */
			// translators: Sample content for the Verse block. Can be replaced with a more locale-adequate work.
			content: __(
				'WHAT was he doing, the great god Pan,\n	Down in the reeds by the river?\nSpreading ruin and scattering ban,\nSplashing and paddling with hoofs of a goat,\nAnd breaking the golden lilies afloat\n    With the dragon-fly on the river.'
			),
			/* eslint-enable @wordpress/i18n-no-collapsible-whitespace */
		},
	},
	transforms,
	deprecated,
	merge( attributes, attributesToMerge ) {
		return {
			content: attributes.content + '\n\n' + attributesToMerge.content,
		};
	},
	edit,
	save,
};

if ( window.__experimentalContentOnlyInspectorFields ) {
	settings[ fieldsKey ] = [
		{
			id: 'content',
			label: __( 'Content' ),
			type: 'richtext',
		},
	];
	settings[ formKey ] = {
		fields: [ 'content' ],
	};
}

export const init = () => initBlock( { name, metadata, settings } );

// File: packages/block-library/src/verse/save.js
/**
 * External dependencies
 */
import clsx from 'clsx';

/**
 * WordPress dependencies
 */
import { RichText, useBlockProps } from '@wordpress/block-editor';

export default function save( { attributes } ) {
	const { textAlign, content } = attributes;

	const className = clsx( {
		[ `has-text-align-${ textAlign }` ]: textAlign,
	} );

	return (
		<pre { ...useBlockProps.save( { className } ) }>
			<RichText.Content value={ content } />
		</pre>
	);
}


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Develop a Gutenberg block representing an Accordion Panel, ensuring it supports configurable attributes including block restrictions, template controls, initial expansion, and selection mechanism.

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/accordion/inner-blocks/accordion-panel/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "woocommerce/accordion-panel",
	"title": "Accordion Panel",
	"category": "woocommerce",
	"keywords": [ "WooCommerce" ],
	"description": "Accordion Panel",
	"example": {},
	"__experimental": true,
	"parent": [ "woocommerce/accordion-item" ],
	"supports": {
		"color": {
			"background": true,
			"gradient": true
		},
		"border": true,
		"interactivity": true,
		"spacing": {
			"padding": true,
			"margin": [ "top", "bottom" ],
			"blockGap": true,
			"__experimentalDefaultControls": {
				"padding": true,
				"blockGap": true
			}
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true,
			"__experimentalDefaultControls": {
				"color": true,
				"radius": true,
				"style": true,
				"width": true
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"shadow": true,
		"layout": true
	},
	"attributes": {
		"allowedBlocks": {
			"type": "array"
		},
		"templateLock": {
			"type": [ "string", "boolean" ],
			"enum": [ "all", "insert", "contentOnly", false ],
			"default": false
		},
		"openByDefault": {
			"type": "boolean",
			"default": false
		},
		"isSelected": {
			"type": "boolean",
			"default": false
		}
	},
	"textdomain": "woocommerce"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/accordion/inner-blocks/accordion-panel/index.js
/**
 * External dependencies
 */
import { SVG, Path } from '@wordpress/components';
import { registerBlockType } from '@wordpress/blocks';

/**
 * Internal dependencies
 */
import edit from './edit';
import save from './save';
import metadata from './block.json';

const icon = (
	<SVG
		width="24"
		height="24"
		viewBox="0 0 24 24"
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
	>
		<Path
			fillRule="evenodd"
			clipRule="evenodd"
			d="M8.10417 6.00024H6.5C5.39543 6.00024 4.5 6.89567 4.5 8.00024V10.3336H6V8.00024C6 7.7241 6.22386 7.50024 6.5 7.50024H8.10417V6.00024ZM4.5 13.6669V16.0002C4.5 17.1048 5.39543 18.0002 6.5 18.0002H8.10417V16.5002H6.5C6.22386 16.5002 6 16.2764 6 16.0002V13.6669H4.5ZM10.3958 6.00024V7.50024H13.6042V6.00024H10.3958ZM15.8958 6.00024V7.50024H17.5C17.7761 7.50024 18 7.7241 18 8.00024V10.3336H19.5V8.00024C19.5 6.89567 18.6046 6.00024 17.5 6.00024H15.8958ZM19.5 13.6669H18V16.0002C18 16.2764 17.7761 16.5002 17.5 16.5002H15.8958V18.0002H17.5C18.6046 18.0002 19.5 17.1048 19.5 16.0002V13.6669ZM13.6042 18.0002V16.5002H10.3958V18.0002H13.6042Z"
			fill="currentColor"
		/>
	</SVG>
);

const { name } = metadata;

export { metadata, name };

export const settings = {
	apiVersion: 3,
	icon,
	example: {},
	edit,
	save,
};

registerBlockType( metadata, settings );

// File: plugins/woocommerce/client/blocks/assets/js/blocks/accordion/inner-blocks/accordion-panel/save.js
/**
 * External dependencies
 */
import {
	InnerBlocks,
	useBlockProps,
	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
} from '@wordpress/block-editor';
import clsx from 'clsx';

export default function save( { attributes } ) {
	const blockProps = useBlockProps.save();
	const borderProps = getBorderClassesAndStyles( attributes );
	const colorProps = getColorClassesAndStyles( attributes );
	const spacingProps = getSpacingClassesAndStyles( attributes );
	const shadowProps = getShadowClassesAndStyles( attributes );

	return (
		<div
			{ ...blockProps }
			className={ clsx(
				blockProps.className,
				colorProps.className,
				borderProps.className,
				{
					[ `has-custom-font-size` ]: blockProps?.style?.fontSize,
				}
			) }
			style={ {
				...borderProps.style,
				...colorProps.style,
				...shadowProps.style,
			} }
		>
			<div
				className="accordion-content__wrapper"
				style={ {
					...spacingProps.style,
				} }
			>
				<InnerBlocks.Content />
			</div>
		</div>
	);
}


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Develop a Gutenberg block to display the cart subtotal, incorporating a class name and lock attribute for customization and control.

[Assistant]
<|thinking|>
To create this {type}, I need to:
- Create the block.json configuration file
- Register the block type
- Define block attributes and their types
- Implement the Edit component for the editor
- Implement the Save component for frontend rendering
- Add necessary controls in the inspector panel
- Style the block for both editor and frontend
<|im_end|>

// File: plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.json
{
	"name": "woocommerce/checkout-order-summary-subtotal-block",
	"version": "1.0.0",
	"title": "Subtotal",
	"description": "Shows the cart subtotal row.",
	"category": "woocommerce",
	"supports": {
		"align": false,
		"html": false,
		"multiple": false,
		"reusable": false,
		"lock": false
	},
	"attributes": {
		"className": {
			"type": "string",
			"default": ""
		},
		"lock": {
			"type": "object",
			"default": {
				"remove": true,
				"move": true
			}
		}
	},
	"parent": [
		"woocommerce/checkout-order-summary-totals-block"
	],
	"textdomain": "woocommerce",
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps } from '@wordpress/block-editor';

/**
 * Internal dependencies
 */
import Block from './block';

export const Edit = ( {
	attributes,
}: {
	attributes: {
		className: string;
	};
	setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): JSX.Element => {
	const { className } = attributes;
	const blockProps = useBlockProps();
	return (
		<div { ...blockProps }>
			<Block className={ className } />
		</div>
	);
};

export const Save = (): JSX.Element => {
	return <div { ...useBlockProps.save() } />;
};


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Develop a WordPress block that visually presents the currently applied filter selections.

[Assistant]
<|thinking|>
To create this {type}, I need to:
- Create the block.json configuration file
- Register the block type
- Define block attributes and their types
- Implement the Edit component for the editor
- Implement the Save component for frontend rendering
- Add necessary controls in the inspector panel
- Style the block for both editor and frontend
<|im_end|>

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/active-filters/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"name": "woocommerce/product-filter-active",
	"title": "Active Filters",
	"description": "Display the currently active filters.",
	"category": "woocommerce",
	"keywords": [ "WooCommerce" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"ancestor": [ "woocommerce/product-filters" ],
	"supports": {
		"interactivity": true,
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true,
			"__experimentalDefaultControls": {
				"color": false,
				"radius": false,
				"style": false,
				"width": false
			}
		},
		"spacing": {
			"margin": true,
			"padding": true,
			"blockGap": false,
			"__experimentalDefaultControls": {
				"margin": false,
				"padding": false,
				"blockGap": false
			}
		}
	},
	"usesContext": [ "activeFilters" ],
	"viewScriptModule": "woocommerce/product-filter-active"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/active-filters/edit.tsx
/**
 * External dependencies
 */
import {
	useBlockProps,
	useInnerBlocksProps,
	BlockContextProvider,
} from '@wordpress/block-editor';

/**
 * Internal dependencies
 */
import { InitialDisabled } from '../../components/initial-disabled';
import { EXCLUDED_BLOCKS } from '../../constants';
import { getAllowedBlocks } from '../../utils/get-allowed-blocks';
import { filtersPreview } from './constants';

const Edit = () => {
	const { children, ...innerBlocksProps } = useInnerBlocksProps(
		useBlockProps(),
		{
			allowedBlocks: getAllowedBlocks( EXCLUDED_BLOCKS ),
			template: [
				[ 'woocommerce/product-filter-removable-chips' ],
				[ 'woocommerce/product-filter-clear-button' ],
			],
		}
	);

	return (
		<div { ...innerBlocksProps }>
			<InitialDisabled>
				<BlockContextProvider
					value={ {
						filterData: {
							items: filtersPreview,
						},
					} }
				>
					{ children }
				</BlockContextProvider>
			</InitialDisabled>
		</div>
	);
};

export default Edit;

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/active-filters/save.tsx
/**
 * External dependencies
 */
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';

const Save = () => {
	const blockProps = useBlockProps.save();
	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
	return <div { ...innerBlocksProps } />;
};

export default Save;


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Craft a WordPress block enabling product grid price range filtering with customizable options including class configuration, input field display, inline input mode, and two additional settings.

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/price-filter/block.json
{
	"name": "woocommerce/price-filter",
	"title": "Filter by Price Controls",
	"description": "Enable customers to filter the product grid by choosing a price range.",
	"category": "woocommerce",
	"keywords": [ "WooCommerce" ],
	"supports": {
		"interactivity": {
			"clientNavigation": false
		},
		"html": false,
		"multiple": false,
		"color": {
			"text": true,
			"background": false
		},
		"inserter": false,
		"lock": false
	},
	"attributes": {
		"className": {
			"type": "string",
			"default": ""
		},
		"showInputFields": {
			"type": "boolean",
			"default": true
		},
		"inlineInput": {
			"type": "boolean",
			"default": false
		},
		"showFilterButton": {
			"type": "boolean",
			"default": false
		},
		"headingLevel": {
			"type": "number",
			"default": 3
		}
	},
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/price-filter/edit.tsx
/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { getAdminLink } from '@woocommerce/settings';
import { blocksConfig } from '@woocommerce/block-settings';
import BlockTitle from '@woocommerce/editor-components/block-title';
import { Icon, currencyDollar, external } from '@wordpress/icons';
import type { BlockEditProps } from '@wordpress/blocks';
import {
	Placeholder,
	Disabled,
	PanelBody,
	ToggleControl,
	Button,
	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
	__experimentalToggleGroupControl as ToggleGroupControl,
	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from '@wordpress/components';

/**
 * Internal dependencies
 */
import Block from './block';
import './editor.scss';
import type { Attributes } from './types';
import { UpgradeNotice } from '../filter-wrapper/upgrade';

export default function ( {
	attributes,
	setAttributes,
	clientId,
}: BlockEditProps< Attributes > ) {
	const {
		heading,
		headingLevel,
		showInputFields,
		inlineInput,
		showFilterButton,
	} = attributes;

	const blockProps = useBlockProps();

	const getInspectorControls = () => {
		return (
			<InspectorControls key="inspector">
				<PanelBody>
					<UpgradeNotice clientId={ clientId } />
				</PanelBody>
				<PanelBody title={ __( 'Settings', 'woocommerce' ) }>
					<ToggleGroupControl
						label={ __( 'Price Range Selector', 'woocommerce' ) }
						isBlock
						value={ showInputFields ? 'editable' : 'text' }
						onChange={ ( value: string ) =>
							setAttributes( {
								showInputFields: value === 'editable',
							} )
						}
						className="wc-block-price-filter__price-range-toggle"
					>
						<ToggleGroupControlOption
							value="editable"
							label={ __( 'Editable', 'woocommerce' ) }
						/>
						<ToggleGroupControlOption
							value="text"
							label={ __( 'Text', 'woocommerce' ) }
						/>
					</ToggleGroupControl>
					{ showInputFields && (
						<ToggleControl
							label={ __( 'Inline input fields', 'woocommerce' ) }
							checked={ inlineInput }
							onChange={ () =>
								setAttributes( {
									inlineInput: ! inlineInput,
								} )
							}
							help={ __(
								'Show input fields inline with the slider.',
								'woocommerce'
							) }
						/>
					) }
					<ToggleControl
						label={ __(
							"Show 'Apply filters' button",
							'woocommerce'
						) }
						help={ __(
							'Products will update when the button is clicked.',
							'woocommerce'
						) }
						checked={ showFilterButton }
						onChange={ () =>
							setAttributes( {
								showFilterButton: ! showFilterButton,
							} )
						}
					/>
				</PanelBody>
			</InspectorControls>
		);
	};

	const noProductsPlaceholder = () => (
		<Placeholder
			className="wc-block-price-slider"
			icon={ <Icon icon={ currencyDollar } /> }
			label={ __( 'Filter by Price', 'woocommerce' ) }
			instructions={ __(
				'Display a slider to filter products in your store by price.',
				'woocommerce'
			) }
		>
			<p>
				{ __(
					'To filter your products by price you first need to assign prices to your products.',
					'woocommerce'
				) }
			</p>
			<Button
				className="wc-block-price-slider__add-product-button"
				variant="secondary"
				href={ getAdminLink( 'post-new.php?post_type=product' ) }
				target="_top"
			>
				{ __( 'Add new product', 'woocommerce' ) + ' ' }
				<Icon icon={ external } />
			</Button>
			<Button
				className="wc-block-price-slider__read_more_button"
				variant="tertiary"
				href="https://woocommerce.com/document/managing-products/"
				target="_blank"
			>
				{ __( 'Learn more', 'woocommerce' ) }
			</Button>
		</Placeholder>
	);

	return (
		<div { ...blockProps }>
			{ blocksConfig.productCount === 0 ? (
				noProductsPlaceholder()
			) : (
				<>
					{ getInspectorControls() }
					{ heading && (
						<BlockTitle
							className="wc-block-price-filter__title"
							headingLevel={ headingLevel }
							heading={ heading }
							onChange={ ( value: string ) =>
								setAttributes( { heading: value } )
							}
						/>
					) }
					<Disabled>
						<Block attributes={ attributes } isEditor={ true } />
					</Disabled>
				</>
			) }
		</div>
	);
}


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Create a tailored WordPress block using the Gutenberg editor, focusing on the unique attributes of the a8c/event block type.

[Assistant]
// File: blocks/event/src/index.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import { Icon } from './icons';
import Edit from './edit';
import Save from './save';

export function registerBlock() {
	registerBlockType( 'a8c/event', {
		title: __( 'Event', 'event' ),
		description: __( 'Show the time and location of an event.', 'event' ),
		icon: <Icon />,
		category: 'widgets',
		supports: {
			align: [ 'center', 'wide' ],
		},
		example: {
			attributes: {
				eventTitle: 'Digging for Treasure',
				eventLocation: 'Treasure Island',
				eventStart: '1783-11-14T12:00:00',
				eventImageId: 1,
				eventImageURL:
					'https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/TI-treasure.jpg/366px-TI-treasure.jpg',
				eventImageAlt: 'Treasure',
				focalPoint: {
					x: '0.30',
					y: '0.40',
				},
				customBackgroundColor: '#d4c5af',
				align: 'wide',
			},
		},
		attributes: {
			eventTitle: {
				type: 'string',
			},
			eventLocation: {
				type: 'string',
			},
			eventStart: {
				type: 'string',
			},
			eventImageId: {
				type: 'number',
			},
			eventImageURL: {
				type: 'string',
			},
			eventImageAlt: {
				type: 'string',
				default: '',
			},
			focalPoint: {
				type: 'object',
			},
			backgroundColor: {
				type: 'string',
			},
			customBackgroundColor: {
				type: 'string',
			},
			textColor: {
				type: 'string',
			},
			customTextColor: {
				type: 'string',
			},
		},
		edit: Edit,
		save: Save,
	} );
}

// File: blocks/event/src/save.js
/**
 * External dependencies
 */
import classnames from 'classnames';

/**
 * WordPress dependencies
 */
import {
	InnerBlocks,
	RichText,
	getColorClassName,
} from '@wordpress/block-editor';
import { getSettings, dateI18n } from '@wordpress/date';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import DateSelect from './date-select';

const Save = ( { attributes } ) => {
	const settings = getSettings();

	const classNames = [
		getColorClassName( 'color', attributes.textColor ),
		getColorClassName( 'background-color', attributes.backgroundColor ),
	];
	const style = {
		color: attributes.customTextColor,
		backgroundColor: attributes.customBackgroundColor,
	};
	const imgStyle = {
		backgroundImage:
			attributes.eventImageURL && `url(${ attributes.eventImageURL })`,
		backgroundPosition:
			attributes.focalPoint &&
			`${ attributes.focalPoint.x * 100 }% ${ attributes.focalPoint.y *
				100 }%`,
		backgroundSize: 'cover',
	};

	return (

				{ attributes.eventStart && (

						{ dateI18n( 'M', attributes.eventStart ) }
						{ dateI18n( 'j', attributes.eventStart ) }

				) }
				<RichText.Content
					tagName="h3"
					className="event__title"
					value={ attributes.eventTitle }
				/>
				{ attributes.eventStart && (

							{ __( 'When:', 'event' ) }

						<DateSelect.Content
							className="event__date-select"
							dateFormat={ settings.formats.datetimeAbbreviated }
							value={ attributes.eventStart }
						/>

				) }
				{ attributes.eventLocation && (

							{ __( 'Where:', 'event' ) }

						<RichText.Content value={ attributes.eventLocation } />

				) }

					<InnerBlocks.Content className="event__description" />

			{ attributes.eventImageURL && (

			) }

	);
};

export default Save;


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Develop a block for Restrict access to your content for paying subscribers. that allows users to configure: selected plan ids, is preview, is premium content child

[Assistant]
<|thinking|>
To create this {type}, I need to:
- Create the block.json configuration file
- Register the block type
- Define block attributes and their types
- Implement the Edit component for the editor
- Implement the Save component for frontend rendering
- Add necessary controls in the inspector panel
- Style the block for both editor and frontend
<|im_end|>

// File: projects/plugins/jetpack/extensions/blocks/premium-content/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "premium-content/container",
	"title": "Paid Content",
	"description": "Restrict access to your content for paying subscribers.",
	"keywords": [
		"buy",
		"credit card",
		"debit card",
		"monetize",
		"earn",
		"exclusive",
		"gated",
		"gofundme",
		"memberships",
		"money",
		"newsletter",
		"paid",
		"patreon",
		"pay",
		"payments",
		"paywall",
		"premium content",
		"purchase",
		"recurring",
		"repeat",
		"signin",
		"stripe",
		"subscribe",
		"subscriptions",
		"support",
		"sponsor",
		"square",
		"toast",
		"venmo",
		"stripe",
		"substack"
	],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "monetize",
	"icon": "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='m12.74,14.43l-4.1-1.26-.13.71-.42,6.87c-.03.49.52.81.93.54l3.72-2.48,4,2.51c.42.26.96-.07.92-.56l-.64-6.87v-.71l-4.28,1.26Z'/><path d='m12.74,15.14c-3.55,0-6.44-2.89-6.44-6.44s2.89-6.44,6.44-6.44,6.44,2.89,6.44,6.44-2.89,6.44-6.44,6.44Zm0-11.89c-3,0-5.44,2.44-5.44,5.44s2.44,5.44,5.44,5.44,5.44-2.44,5.44-5.44-2.44-5.44-5.44-5.44Z'/><path d='M11.95 11.08 9.36 8.48 10.06 7.77 11.95 9.66 15.42 6.19 16.13 6.9 11.95 11.08z'/></svg>",
	"supports": {
		"html": false
	},
	"providesContext": {
		"premium-content/planIds": "selectedPlanIds",
		"premium-content/isPreview": "isPreview",
		"isPremiumContentChild": "isPremiumContentChild"
	},
	"attributes": {
		"selectedPlanIds": {
			"type": "array",
			"default": []
		},
		"isPreview": {
			"type": "boolean",
			"default": false
		},
		"isPremiumContentChild": {
			"type": "boolean",
			"default": true
		}
	},
	"example": {
		"attributes": {
			"isPreview": true
		}
	}
}

// File: projects/plugins/jetpack/extensions/blocks/premium-content/edit.js
import { store as blockEditorStore, useBlockProps } from '@wordpress/block-editor';
import { Disabled, Placeholder, Spinner } from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
import { select, useSelect } from '@wordpress/data';
import { useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import ConnectBanner from '../../shared/components/connect-banner';
import ProductManagementControls from '../../shared/components/product-management-controls';
import { PRODUCT_TYPE_SUBSCRIPTION } from '../../shared/components/product-management-controls/constants';
import { StripeNudge } from '../../shared/components/stripe-nudge';
import useIsUserConnected from '../../shared/use-is-user-connected';
import { store as membershipProductsStore } from '../../store/membership-products';
import Blocks from './_inc/blocks';
import Context from './_inc/context';
import './editor.scss';
import ViewSelector from './_inc/view-selector';
/**
 * Tab definitions
 *
 * If changing or adding tabs, the _TAB constants below might need changing too.
 *
 * @typedef { import('./tabs').Tab } Tab
 * @type { Tab[] }
 */
const tabs = [
	{
		id: 'premium',
		label: { __( 'Subscriber View', 'jetpack' ) },
		className: 'wp-premium-content-subscriber-view',
	},
	{
		id: 'wall',
		label: { __( 'Guest View', 'jetpack' ) },
		className: 'wp-premium-content-logged-out-view',
	},
];

const CONTENT_TAB = 0;
const WALL_TAB = 1;
const BLOCK_NAME = 'premium-content';
/**
 *
 * @typedef { import('react').MutableRefObject<?object> } ContainerRef
 */

/**
 * Block edit function
 *
 * @typedef { import('./').Attributes } Attributes
 * @typedef {object} OwnProps
 * @property { boolean }                                isSelected
 * @property { string }                                 className
 * @property { string }                                 clientId
 * @property { Attributes }                             attributes
 * @property {(attributes: Object<Attributes>) => void} setAttributes
 * @typedef { OwnProps } Props
 * @param    { Props }                                  props
 */

function Edit( { clientId, isSelected, attributes, setAttributes } ) {
	const { isPreview, selectedPlanIds } = attributes;

	const [ selectedTab, selectTab ] = useState( tabs[ WALL_TAB ] );
	const blockProps = useBlockProps();
	const isUserConnected = useIsUserConnected();

	const setSelectedProductIds = productIds => setAttributes( { selectedPlanIds: productIds } );

	const { isApiLoading, selectedBlock } = useSelect( selector => ( {
		selectedBlock: selector( blockEditorStore ).getSelectedBlock(),
		isApiLoading: selector( membershipProductsStore ).isApiStateLoading(),
	} ) );

	useEffect( () => {
		if ( isSelected ) {
			return; // If this block is selected then leave the focused tab as it was.
		}

		if ( ! selectedBlock ) {
			return; // Sometimes there isn't a block selected, e.g. on page load.
		}

		const editorStore = select( blockEditorStore );

		// Confirm that the selected block is a descendant of this one.
		if ( ! editorStore.getBlockParents( selectedBlock.clientId ).includes( clientId ) ) {
			return;
		}

		if (
			'premium-content/logged-out-view' === selectedBlock.name ||
			editorStore.getBlockParentsByBlockName(
				selectedBlock.clientId,
				'premium-content/logged-out-view'
			).length
		) {
			selectTab( tabs[ WALL_TAB ] );
		} else {
			selectTab( tabs[ CONTENT_TAB ] );
		}
	}, [ clientId, isSelected, selectedBlock ] );

	const isSmallViewport = useViewportMatch( 'medium', '<' );

	if ( ! isUserConnected ) {
		return (

				<ConnectBanner
					block="Paid Content"
					explanation={ __(
						'Connect your WordPress.com account to enable paid content.',
						'jetpack'
					) }
				/>

		);
	}

	return (

			{ ! isPreview && (
				<>
					{ isApiLoading && (
						<Placeholder
							icon="lock"
							label={ __( 'Paid Content', 'jetpack' ) }
							instructions={ __( 'Loading data…', 'jetpack' ) }
						>
							<Spinner />
						</Placeholder>
					) }
					<ProductManagementControls
						blockName={ BLOCK_NAME }
						clientId={ clientId }
						productType={ PRODUCT_TYPE_SUBSCRIPTION }
						selectedProductIds={ selectedPlanIds }
						setSelectedProductIds={ setSelectedProductIds }
					/>
					<ViewSelector
						options={ tabs }
						selectedOption={ selectedTab }
						selectAction={ selectTab }
						contractViewport={ isSmallViewport }
						label={ __( 'Change view', 'jetpack' ) }
					/>
				</>
			) }
			{ ! isApiLoading && (
				<>
					<StripeNudge blockName={ BLOCK_NAME } />
					<Context.Provider value={ { selectedTab } }>
						<Blocks />
					</Context.Provider>
				</>
			) }

	);
}

export default function MaybeDisabledEdit( props ) {
	// The block transformations menu renders a block preview popover using real blocks
	// for transformation. The block previews do not play nicely with useEffect and
	// updating content after a resolved API call. To disarm the block preview, we can
	// check to see if the block is being rendered within a Disabled context, and set
	// the isPreview flag accordingly.
	return (
		<Disabled.Consumer>
			{ isDisabled => {
				return (
					<Edit
						{ ...props }
						attributes={ {
							...props.attributes,
							isPreview: isDisabled || props.attributes?.isPreview,
						} }
					/>
				);
			} }
		</Disabled.Consumer>
	);
}

// File: projects/plugins/jetpack/extensions/blocks/premium-content/save.js
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
import clsx from 'clsx';

export default function Save() {
	const blockProps = useBlockProps.save();

	return (

			<InnerBlocks.Content />

	);
}


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Build a block feature for displaying curated site recommendations that lets users personalize presentation through avatar display, description visibility, link opening preferences, and two extra configuration choices.

[Assistant]
<|thinking|>
To create this {type}, I need to:
- Create the block.json configuration file
- Register the block type
- Define block attributes and their types
- Implement the Edit component for the editor
- Implement the Save component for frontend rendering
- Add necessary controls in the inspector panel
- Style the block for both editor and frontend
<|im_end|>

// File: projects/plugins/jetpack/extensions/blocks/blogroll/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/blogroll",
	"title": "Blogroll",
	"description": "Share the sites you follow with your users.",
	"keywords": [],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "grow",
	"icon": "<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M4.08691 16.2412H20.0869V14.7412H4.08691V16.2412Z'></path><path d='M4.08691 20.2412H13.0869V18.7412H4.08691V20.2412Z'></path><path fill-rule='evenodd' clip-rule='evenodd' d='M4.08691 8.17871C4.08691 6.00409 5.84979 4.24121 8.02441 4.24121C10.199 4.24121 11.9619 6.00409 11.9619 8.17871C11.9619 10.3533 10.199 12.1162 8.02441 12.1162C5.84979 12.1162 4.08691 10.3533 4.08691 8.17871ZM5.10729 6.71621C5.51231 5.90991 6.2418 5.29471 7.12439 5.04194C6.91534 5.28455 6.73551 5.57108 6.58869 5.88606C6.46938 6.14205 6.36999 6.42056 6.29338 6.71621H5.10729ZM4.85759 7.39121C4.79508 7.64341 4.76191 7.90719 4.76191 8.17871C4.76191 8.45024 4.79508 8.71401 4.85759 8.96621H6.16284C6.12938 8.71126 6.11192 8.44782 6.11192 8.1787C6.11192 7.90956 6.12938 7.64614 6.16284 7.39121H4.85759ZM6.84439 7.39121C6.80693 7.64285 6.78692 7.90651 6.78692 8.1787C6.78692 8.45091 6.80694 8.71459 6.84439 8.96621H9.20444C9.2419 8.71458 9.26192 8.45091 9.26192 8.17873C9.26192 7.90653 9.2419 7.64285 9.20444 7.39121H6.84439ZM9.88599 7.39121C9.91945 7.64615 9.93692 7.90958 9.93692 8.17873C9.93692 8.44786 9.91945 8.71128 9.88599 8.96621H11.1912C11.2537 8.71401 11.2869 8.45024 11.2869 8.17871C11.2869 7.90719 11.2537 7.64341 11.1912 7.39121H9.88599ZM10.9415 6.71621H9.75544C9.67883 6.42057 9.57945 6.14207 9.46014 5.88609C9.31332 5.5711 9.13347 5.28455 8.92441 5.04193C9.80702 5.29469 10.5365 5.9099 10.9415 6.71621ZM9.05465 6.71621H6.99417C7.05245 6.52254 7.12177 6.34014 7.2005 6.17123C7.42342 5.69296 7.71302 5.34019 8.02439 5.13337C8.33578 5.34019 8.6254 5.69297 8.84833 6.17126C8.92706 6.34016 8.99637 6.52255 9.05465 6.71621ZM5.10729 9.64121H6.29339C6.37419 9.95305 6.48034 10.2458 6.6085 10.5132C6.75142 10.8114 6.92452 11.0835 7.12445 11.3155C6.24183 11.0627 5.51232 10.4475 5.10729 9.64121ZM9.05466 9.64121H6.99418C7.05655 9.84847 7.13156 10.0428 7.21721 10.2215C7.43825 10.6827 7.72115 11.0226 8.02446 11.224C8.33582 11.0172 8.62541 10.6645 8.84833 10.1862C8.92706 10.0173 8.99638 9.83488 9.05466 9.64121ZM9.46014 10.4714C9.57945 10.2154 9.67884 9.93686 9.75545 9.64121H10.9415C10.5365 10.4475 9.80703 11.0627 8.92444 11.3155C9.13349 11.0729 9.31332 10.7863 9.46014 10.4714Z'></path></svg>",
	"supports": {
		"align": false,
		"alignWide": true,
		"anchor": false,
		"customClassName": true,
		"className": true,
		"html": false,
		"multiple": true,
		"reusable": true,
		"color": {
			"link": true,
			"gradients": true
		},
		"spacing": {
			"padding": true,
			"margin": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true
		}
	},
	"attributes": {
		"show_avatar": {
			"type": "boolean",
			"default": true
		},
		"show_description": {
			"type": "boolean",
			"default": true
		},
		"open_links_new_window": {
			"type": "boolean",
			"default": true
		},
		"ignore_user_blogs": {
			"type": "boolean",
			"default": true
		},
		"load_placeholders": {
			"type": "boolean",
			"default": true
		}
	},
	"providesContext": {
		"showAvatar": "show_avatar",
		"showDescription": "show_description",
		"openLinksNewWindow": "open_links_new_window"
	}
}

// File: projects/plugins/jetpack/extensions/blocks/blogroll/edit.js
import { InspectorControls, useBlockProps, InnerBlocks } from '@wordpress/block-editor';
import { createBlock } from '@wordpress/blocks';
import { PanelBody, ToggleControl, FlexBlock, Spinner, Notice } from '@wordpress/components';
import { dispatch } from '@wordpress/data';
import { useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import clsx from 'clsx';
import ConnectBanner from '../../shared/components/connect-banner';
import useIsUserConnected from '../../shared/use-is-user-connected';
import BlogrollAppender from './components/blogroll-appender';
import useRecommendations from './use-recommendations';
import { useSiteRecommendationSync } from './use-site-recommendations';
import useSubscriptions from './use-subscriptions';
import { createBlockFromRecommendation } from './utils';
import './editor.scss';

export function BlogRollEdit( { className, attributes, setAttributes, clientId } ) {
	const {
		show_avatar,
		show_description,
		open_links_new_window,
		ignore_user_blogs,
		load_placeholders,
	} = attributes;

	const isUserConnected = useIsUserConnected();

	const {
		isLoading: isLoadingRecommendations,
		recommendations,
		errorMessage: recommendationsErrorMessage,
	} = useRecommendations( load_placeholders );
	const {
		isLoading: isLoadingSubscriptions,
		subscriptions,
		errorMessage: subscriptionsErrorMessage,
	} = useSubscriptions( {
		ignore_user_blogs,
	} );
	useSiteRecommendationSync( { clientId } );
	const { replaceInnerBlocks } = dispatch( 'core/block-editor' );

	useEffect( () => {
		if ( load_placeholders && recommendations.length ) {
			setAttributes( { load_placeholders: false } );

			const blocks = [
				createBlock( 'core/heading', { content: __( 'Blogroll', 'jetpack' ), level: 3 } ),
				...recommendations.map( createBlockFromRecommendation ),
			];
			replaceInnerBlocks( clientId, blocks );
		}
	}, [ recommendations, load_placeholders, setAttributes, clientId, replaceInnerBlocks ] );

	const blockProps = useBlockProps( {
		className: clsx( className, {
			'hide-avatar': ! show_avatar,
			'hide-description': ! show_description,
		} ),
	} );

	if ( ! isUserConnected ) {
		return (
			<>
				<ConnectBanner
					block="Blogroll"
					explanation={ __(
						'Connect your WordPress.com account to use the Blogroll block.',
						'jetpack'
					) }
				/>
			</>
		);
	}

	const errorMessage = recommendationsErrorMessage || subscriptionsErrorMessage;

	return (
		<div { ...blockProps }>
			<InnerBlocks
				template={ [ [ 'core/heading', { content: __( 'Blogroll', 'jetpack' ), level: 3 } ] ] }
				allowedBlocks={ [ 'jetpack/blogroll-item' ] }
				renderAppender={ () =>
					! isLoadingRecommendations && (
						<BlogrollAppender
							isLoading={ isLoadingSubscriptions }
							subscriptions={ subscriptions }
							clientId={ clientId }
						/>
					)
				}
			/>

			{ errorMessage && (
				<Notice status="error" isDismissible={ false }>
					<p>{ errorMessage }</p>
				</Notice>
			) }

			{ load_placeholders && isLoadingRecommendations && (
				<FlexBlock style={ { padding: '30px', textAlign: 'center' } }>
					<Spinner />
				</FlexBlock>
			) }

			<InspectorControls>
				<PanelBody title={ __( 'Settings', 'jetpack' ) }>
					<ToggleControl
						label={ __( 'Show avatar', 'jetpack' ) }
						checked={ !! show_avatar }
						onChange={ () => setAttributes( { show_avatar: ! show_avatar } ) }
						__nextHasNoMarginBottom={ true }
					/>
					<ToggleControl
						label={ __( 'Show description', 'jetpack' ) }
						checked={ !! show_description }
						onChange={ () => setAttributes( { show_description: ! show_description } ) }
						__nextHasNoMarginBottom={ true }
					/>
					<ToggleControl
						label={ __( 'Open links in a new window', 'jetpack' ) }
						checked={ !! open_links_new_window }
						onChange={ () => setAttributes( { open_links_new_window: ! open_links_new_window } ) }
						__nextHasNoMarginBottom={ true }
					/>
					<ToggleControl
						label={ __( 'Hide my own sites', 'jetpack' ) }
						checked={ !! ignore_user_blogs }
						onChange={ () => setAttributes( { ignore_user_blogs: ! ignore_user_blogs } ) }
						__nextHasNoMarginBottom={ true }
					/>
				</PanelBody>
			</InspectorControls>
		</div>
	);
}

export default BlogRollEdit;

// File: projects/plugins/jetpack/extensions/blocks/blogroll/save.js
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
import clsx from 'clsx';

export function BlogRollSave( { attributes: { show_avatar, show_description }, className } ) {
	const blockProps = useBlockProps.save( {
		className: clsx( className, {
			'hide-avatar': ! show_avatar,
			'hide-description': ! show_description,
		} ),
	} );

	return (
		<div { ...blockProps }>
			<InnerBlocks.Content />
		</div>
	);
}

export default BlogRollSave;


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Build a Gutenberg block that Show all product categories as a list or dropdown. with these attributes: align, has count, has image, and 4 more options

[Assistant]
<|thinking|>
To create this {type}, I need to:
- Create the block.json configuration file
- Register the block type
- Define block attributes and their types
- Implement the Edit component for the editor
- Implement the Save component for frontend rendering
- Add necessary controls in the inspector panel
- Style the block for both editor and frontend
<|im_end|>

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-categories/block.json
{
	"name": "woocommerce/product-categories",
	"title": "Product Categories List",
	"category": "woocommerce",
	"description": "Show all product categories as a list or dropdown.",
	"keywords": [ "WooCommerce" ],
	"supports": {
		"interactivity": {
			"clientNavigation": true
		},
		"align": [ "wide", "full" ],
		"html": false,
		"color": {
			"background": false,
			"link": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true
		}
	},
	"attributes": {
		"align": {
			"type": "string"
		},
		"hasCount": {
			"type": "boolean",
			"default": true
		},
		"hasImage": {
			"type": "boolean",
			"default": false
		},
		"hasEmpty": {
			"type": "boolean",
			"default": false
		},
		"isDropdown": {
			"type": "boolean",
			"default": false
		},
		"isHierarchical": {
			"type": "boolean",
			"default": true
		},
		"showChildrenOnly": {
			"type": "boolean",
			"default": false
		}
	},
	"example": {
		"attributes": {
			"hasCount": true,
			"hasImage": false
		}
	},
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-categories/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps } from '@wordpress/block-editor';

/**
 * Internal dependencies
 */
import Block from './block';
import './editor.scss';
import type { ProductCategoriesBlockProps } from './types';

export default function ProductCategoriesEdit(
	props: ProductCategoriesBlockProps
): JSX.Element {
	const blockProps = useBlockProps();

	return (
		<div { ...blockProps }>
			<Block { ...props } />
		</div>
	);
}


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Develop a block for Display a grid of your newest products. that allows users to configure: columns, rows, align buttons, and 7 more options

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-new/block.json
{
	"name": "woocommerce/product-new",
	"title": "Newest Products",
	"category": "woocommerce",
	"keywords": [ "WooCommerce" ],
	"description": "Display a grid of your newest products.",
	"supports": {
		"interactivity": {
			"clientNavigation": false
		},
		"align": [ "wide", "full" ],
		"html": false,
		"inserter": false
	},
	"attributes": {
		"columns": {
			"type": "number",
			"default": 3
		},
		"rows": {
			"type": "number",
			"default": 3
		},
		"alignButtons": {
			"type": "boolean",
			"default": false
		},
		"contentVisibility": {
			"type": "object",
			"default": {
				"image": true,
				"title": true,
				"price": true,
				"rating": true,
				"button": true
			},
			"properties": {
				"image": {
					"type": "boolean",
					"default": true
				},
				"title": {
					"type": "boolean",
					"default": true
				},
				"price": {
					"type": "boolean",
					"default": true
				},
				"rating": {
					"type": "boolean",
					"default": true
				},
				"button": {
					"type": "boolean",
					"default": true
				}
			}
		},
		"categories": {
			"type": "array",
			"default": []
		},
		"catOperator": {
			"type": "string",
			"default": "any"
		},
		"isPreview": {
			"type": "boolean",
			"default": false
		},
		"stockStatus": {
			"type": "array"
		},
		"editMode": {
			"type": "boolean",
			"default": true
		},
		"orderby": {
			"type": "string",
			"enum": [
				"date",
				"popularity",
				"price_asc",
				"price_desc",
				"rating",
				"title",
				"menu_order"
			],
			"default": "date"
		}
	},
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-new/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps } from '@wordpress/block-editor';

/**
 * Internal dependencies
 */
import { ProductNewestBlock } from './block';
import { ProductNewestBlockProps } from './types';

export const Edit = (
	props: unknown & ProductNewestBlockProps
): JSX.Element => {
	const blockProps = useBlockProps();

	return (
		<div { ...blockProps }>
			<ProductNewestBlock { ...props } />
		</div>
	);
};


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Create a widgets block with customizable comments to show, display avatar, display date, display content

[Assistant]
<|thinking|>
To create this {type}, I need to:
- Create the block.json configuration file
- Register the block type
- Define block attributes and their types
- Implement the Edit component for the editor
- Implement the Save component for frontend rendering
- Add necessary controls in the inspector panel
- Style the block for both editor and frontend
<|im_end|>

// File: packages/block-library/src/latest-comments/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/latest-comments",
	"title": "Latest Comments",
	"category": "widgets",
	"description": "Display a list of your most recent comments.",
	"keywords": [ "recent comments" ],
	"textdomain": "default",
	"attributes": {
		"commentsToShow": {
			"type": "number",
			"default": 5,
			"minimum": 1,
			"maximum": 100
		},
		"displayAvatar": {
			"type": "boolean",
			"default": true
		},
		"displayDate": {
			"type": "boolean",
			"default": true
		},
		"displayContent": {
			"type": "string",
			"default": "excerpt",
			"enum": [ "none", "excerpt", "full" ]
		}
	},
	"supports": {
		"align": true,
		"color": {
			"gradients": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true,
				"link": true
			}
		},
		"html": false,
		"spacing": {
			"margin": true,
			"padding": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		}
	},
	"editorStyle": "wp-block-latest-comments-editor",
	"style": "wp-block-latest-comments"
}

// File: packages/block-library/src/latest-comments/index.js
/**
 * WordPress dependencies
 */
import { comment as icon } from '@wordpress/icons';

/**
 * Internal dependencies
 */
import initBlock from '../utils/init-block';
import metadata from './block.json';
import edit from './edit';
import deprecated from './deprecated';

const { name } = metadata;

export { metadata, name };

export const settings = {
	icon,
	example: {},
	edit,
	deprecated,
};

export const init = () => initBlock( { name, metadata, settings } );


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Craft a personalized Gutenberg block specifically designed with the identifier a8c/event, implementing custom functionality and design.

[Assistant]
// File: blocks/event/src/index.js
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import { Icon } from './icons';
import Edit from './edit';
import Save from './save';

export function registerBlock() {
	registerBlockType( 'a8c/event', {
		title: __( 'Event', 'event' ),
		description: __( 'Show the time and location of an event.', 'event' ),
		icon: <Icon />,
		category: 'widgets',
		supports: {
			align: [ 'center', 'wide' ],
		},
		example: {
			attributes: {
				eventTitle: 'Digging for Treasure',
				eventLocation: 'Treasure Island',
				eventStart: '1783-11-14T12:00:00',
				eventImageId: 1,
				eventImageURL:
					'https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/TI-treasure.jpg/366px-TI-treasure.jpg',
				eventImageAlt: 'Treasure',
				focalPoint: {
					x: '0.30',
					y: '0.40',
				},
				customBackgroundColor: '#d4c5af',
				align: 'wide',
			},
		},
		attributes: {
			eventTitle: {
				type: 'string',
			},
			eventLocation: {
				type: 'string',
			},
			eventStart: {
				type: 'string',
			},
			eventImageId: {
				type: 'number',
			},
			eventImageURL: {
				type: 'string',
			},
			eventImageAlt: {
				type: 'string',
				default: '',
			},
			focalPoint: {
				type: 'object',
			},
			backgroundColor: {
				type: 'string',
			},
			customBackgroundColor: {
				type: 'string',
			},
			textColor: {
				type: 'string',
			},
			customTextColor: {
				type: 'string',
			},
		},
		edit: Edit,
		save: Save,
	} );
}

// File: blocks/event/src/save.js
/**
 * External dependencies
 */
import classnames from 'classnames';

/**
 * WordPress dependencies
 */
import {
	InnerBlocks,
	RichText,
	getColorClassName,
} from '@wordpress/block-editor';
import { getSettings, dateI18n } from '@wordpress/date';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import DateSelect from './date-select';

const Save = ( { attributes } ) => {
	const settings = getSettings();

	const classNames = [
		getColorClassName( 'color', attributes.textColor ),
		getColorClassName( 'background-color', attributes.backgroundColor ),
	];
	const style = {
		color: attributes.customTextColor,
		backgroundColor: attributes.customBackgroundColor,
	};
	const imgStyle = {
		backgroundImage:
			attributes.eventImageURL && `url(${ attributes.eventImageURL })`,
		backgroundPosition:
			attributes.focalPoint &&
			`${ attributes.focalPoint.x * 100 }% ${ attributes.focalPoint.y *
				100 }%`,
		backgroundSize: 'cover',
	};

	return (

				{ attributes.eventStart && (

						{ dateI18n( 'M', attributes.eventStart ) }
						{ dateI18n( 'j', attributes.eventStart ) }

				) }
				<RichText.Content
					tagName="h3"
					className="event__title"
					value={ attributes.eventTitle }
				/>
				{ attributes.eventStart && (

							{ __( 'When:', 'event' ) }

						<DateSelect.Content
							className="event__date-select"
							dateFormat={ settings.formats.datetimeAbbreviated }
							value={ attributes.eventStart }
						/>

				) }
				{ attributes.eventLocation && (

							{ __( 'Where:', 'event' ) }

						<RichText.Content value={ attributes.eventLocation } />

				) }

					<InnerBlocks.Content className="event__description" />

			{ attributes.eventImageURL && (

			) }

	);
};

export default Save;


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Design a flexible WooCommerce block with comprehensive styling options, allowing users to modify attributes such as alternative text, content positioning, opacity levels, and 12 more advanced customization settings.

[Assistant]
<|thinking|>
To create this {type}, I need to:
- Create the block.json configuration file
- Register the block type
- Define block attributes and their types
- Implement the Edit component for the editor
- Implement the Save component for frontend rendering
- Add necessary controls in the inspector panel
- Style the block for both editor and frontend
<|im_end|>

// File: plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/featured-product/block.json
{
	"name": "woocommerce/featured-product",
	"title": "Featured Product",
	"description": "Highlight a product or variation.",
	"category": "woocommerce",
	"keywords": [ "WooCommerce" ],
	"supports": {
		"interactivity": {
			"clientNavigation": true
		},
		"align": [ "wide", "full" ],
		"ariaLabel": true,
		"html": false,
		"filter": {
			"duotone": true
		},
		"color": {
			"background": true,
			"text": true
		},
		"spacing": {
			"padding": true,
			"__experimentalDefaultControls": {
				"padding": true
			},
			"__experimentalSkipSerialization": true
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"width": true,
			"__experimentalDefaultControls": {
				"color": true,
				"radius": true,
				"width": true
			},
			"__experimentalSkipSerialization": true
		},
		"multiple": true
	},
	"attributes": {
		"alt": {
			"type": "string",
			"default": ""
		},
		"contentAlign": {
			"type": "string",
			"default": "center"
		},
		"dimRatio": {
			"type": "number",
			"default": 50
		},
		"focalPoint": {
			"type": "object",
			"default": {
				"x": 0.5,
				"y": 0.5
			}
		},
		"imageFit": {
			"type": "string",
			"default": "none"
		},
		"hasParallax": {
			"type": "boolean",
			"default": false
		},
		"isRepeated": {
			"type": "boolean",
			"default": false
		},
		"mediaId": {
			"type": "number",
			"default": 0
		},
		"mediaSrc": {
			"type": "string",
			"default": ""
		},
		"minHeight": {
			"type": "number",
			"default": 500
		},
		"linkText": {
			"type": "string",
			"default": "Shop now"
		},
		"overlayColor": {
			"type": "string",
			"default": "#000000"
		},
		"overlayGradient": {
			"type": "string"
		},
		"productId": {
			"type": "number"
		},
		"previewProduct": {
			"type": "object",
			"default": null
		}
	},
	"selectors": {
		"filter": {
			"duotone": ".wp-block-woocommerce-featured-product .wc-block-featured-product__background-image"
		}
	},
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/featured-product/index.tsx
/**
 * External dependencies
 */
import { Icon, starEmpty } from '@wordpress/icons';

/**
 * Internal dependencies
 */
import './style.scss';
import './editor.scss';
import Block from './block';
import { register } from '../register';
import { example } from './example';
import deprecated from './deprecated';
import metadata from './block.json';

register( Block, example, metadata, {
	deprecated,
	icon: {
		src: (
			<Icon
				icon={ starEmpty }
				className="wc-block-editor-components-block-icon"
			/>
		),
	},
} );


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Implement a Gutenberg block for Contains the block elements used to display product reviews, like the title, author, date, rating and more.

[Assistant]
<|thinking|>
To create this {type}, I need to:
- Create the block.json configuration file
- Register the block type
- Define block attributes and their types
- Implement the Edit component for the editor
- Implement the Save component for frontend rendering
- Add necessary controls in the inspector panel
- Style the block for both editor and frontend
<|im_end|>

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-template/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "woocommerce/product-review-template",
	"title": "Reviews Template",
	"category": "woocommerce",
	"ancestor": [ "woocommerce/product-reviews" ],
	"description": "Contains the block elements used to display product reviews, like the title, author, date, rating and more.",
	"textdomain": "woocommerce",
	"usesContext": [ "postId", "postType" ],
	"supports": {
		"align": true,
		"html": false,
		"reusable": false,
		"spacing": {
			"margin": true,
			"padding": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true,
			"__experimentalDefaultControls": {
				"radius": true,
				"color": true,
				"width": true,
				"style": true
			}
		}
	}
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-template/edit.tsx
/**
 * External dependencies
 */
import { useState, memo } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { BlockInstance, BlockEditProps } from '@wordpress/blocks';
import { Spinner } from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import {
	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
	// @ts-ignore No types for this exist yet.
	BlockContextProvider,
	useBlockProps,
	// @ts-expect-error no exported member.
	useInnerBlocksProps,
	store as blockEditorStore,
	// @ts-expect-error no exported member.
	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
	__experimentalUseBlockPreview as useBlockPreview,
} from '@wordpress/block-editor';

/**
 * Internal dependencies
 */
import { useCommentQueryArgs, useCommentList } from './hooks';

interface Comment {
	commentId: number;
}

interface ReviewTemplateInnerBlocksProps {
	comment: Comment;
	activeCommentId: number;
	setActiveCommentId: ( id: number ) => void;
	firstCommentId: number;
	blocks: BlockInstance[];
}

interface ReviewTemplatePreviewProps {
	blocks: BlockInstance[];
	commentId: number;
	setActiveCommentId: ( id: number ) => void;
	isHidden: boolean;
}

type ReviewTemplateAttributes = {
	postId?: number;
};

const TEMPLATE = [
	[ 'core/avatar' ],
	[ 'woocommerce/product-review-author-name' ],
	[ 'woocommerce/product-review-date' ],
	[ 'woocommerce/product-review-content' ],
];

interface ReviewSettings {
	perPage: number;
	pageComments: boolean;
}

const getCommentsPlaceholder = ( {
	perPage,
	pageComments,
}: ReviewSettings ) => {
	const numberOfComments = pageComments ? Math.min( perPage, 3 ) : 3;

	return Array.from( { length: numberOfComments }, ( _, i ) => ( {
		commentId: -( i + 1 ),
	} ) );
};

const ReviewTemplatePreview = ( {
	blocks,
	commentId,
	setActiveCommentId,
	isHidden,
}: ReviewTemplatePreviewProps ) => {
	const blockPreviewProps = useBlockPreview( {
		blocks,
	} );

	const handleOnClick = () => {
		setActiveCommentId( commentId );
	};

	const style = {
		display: isHidden ? 'none' : undefined,
	};

	return (
		<div
			{ ...blockPreviewProps }
			tabIndex={ 0 }
			role="button"
			style={ style }
			onClick={ handleOnClick }
			onKeyDown={ handleOnClick }
		/>
	);
};

const MemoizedReviewTemplatePreview = memo( ReviewTemplatePreview );

const ReviewTemplateInnerBlocks = memo( function ReviewTemplateInnerBlocks( {
	comment,
	activeCommentId,
	setActiveCommentId,
	firstCommentId,
	blocks,
}: ReviewTemplateInnerBlocksProps ) {
	const { children, ...innerBlocksProps } = useInnerBlocksProps(
		{},
		{ template: TEMPLATE }
	);

	return (
		<li { ...innerBlocksProps }>
			{ comment.commentId === ( activeCommentId || firstCommentId )
				? children
				: null }

			<MemoizedReviewTemplatePreview
				blocks={ blocks }
				commentId={ comment.commentId }
				setActiveCommentId={ setActiveCommentId }
				isHidden={
					comment.commentId === ( activeCommentId || firstCommentId )
				}
			/>
		</li>
	);
} );

export default function ReviewTemplateEdit( {
	clientId,
	context: { postId },
}: BlockEditProps< ReviewTemplateAttributes > & {
	context: { postId: number };
} ) {
	const blockProps = useBlockProps();

	const [ activeCommentId, setActiveCommentId ] = useState< number >( 0 );
	const { commentOrder, commentsPerPage, pageComments } = useSelect(
		( select ) => {
			const { getSettings } = select( blockEditorStore ) as unknown as {
				getSettings(): {
					// eslint-disable-next-line @typescript-eslint/naming-convention
					__experimentalDiscussionSettings: {
						commentOrder: string;
						commentsPerPage: number;
						pageComments: boolean;
					};
				};
			};
			return getSettings().__experimentalDiscussionSettings;
		},
		[]
	);

	const commentQuery = useCommentQueryArgs( {
		postId: postId ?? 0,
	} );

	const { topLevelComments, blocks } = useSelect(
		( select ) => {
			const { getEntityRecords } = select( coreStore );
			const { getBlocks } = select( blockEditorStore ) as unknown as {
				getBlocks( clientId: string ): BlockInstance[];
			};
			return {
				topLevelComments: commentQuery
					? getEntityRecords( 'root', 'comment', commentQuery )
					: null,
				blocks: getBlocks( clientId ),
			};
		},
		[ clientId, commentQuery ]
	);

	let commentTree = useCommentList(
		// Reverse the order of top comments if needed.
		commentOrder === 'desc' && topLevelComments
			? [
					...( topLevelComments as Array< {
						id: number;
					} > ),
			  ].reverse()
			: ( topLevelComments as Array< {
					id: number;
			  } > )
	);

	if ( ! topLevelComments ) {
		return (
			<p { ...blockProps }>
				<Spinner />
			</p>
		);
	}

	if ( ! postId ) {
		commentTree = getCommentsPlaceholder( {
			perPage: commentsPerPage,
			pageComments,
		} );
	}

	if ( ! commentTree.length ) {
		return (
			<p { ...blockProps }>
				{ __( 'No results found.', 'woocommerce' ) }
			</p>
		);
	}

	return (
		<ol { ...blockProps }>
			{ commentTree &&
				commentTree.map(
					(
						{
							commentId,
						}: {
							commentId: number;
						},
						index: number
					) => (
						<BlockContextProvider
							key={ commentId || index }
							value={ {
								commentId: commentId < 0 ? null : commentId,
							} }
						>
							<ReviewTemplateInnerBlocks
								comment={ { commentId } }
								activeCommentId={ activeCommentId }
								setActiveCommentId={ setActiveCommentId }
								blocks={ blocks }
								firstCommentId={ commentTree[ 0 ]?.commentId }
							/>
						</BlockContextProvider>
					)
				) }
		</ol>
	);
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-template/save.tsx
/**
 * External dependencies
 */
import { InnerBlocks } from '@wordpress/block-editor';

export default function ReviewTemplateSave() {
	return <InnerBlocks.Content />;
}


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Develop a WordPress extension allowing seamless product variation browsing and selection, with integrated cart functionality for immediate purchase.

[Assistant]
<|thinking|>
To create this {type}, I need to:
- Create the block.json configuration file
- Register the block type
- Define block attributes and their types
- Implement the Edit component for the editor
- Implement the Save component for frontend rendering
- Add necessary controls in the inspector panel
- Style the block for both editor and frontend
<|im_end|>

// File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/variation-selector/block.json
{
	"name": "woocommerce/add-to-cart-with-options-variation-selector",
	"title": "Variation Selector (Beta)",
	"description": "Display any product variations available to select from and add to cart.",
	"category": "woocommerce-product-elements",
	"keywords": [ "WooCommerce" ],
	"usesContext": [ "postId" ],
	"ancestor": [ "woocommerce/add-to-cart-with-options" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"supports": {
		"interactivity": true
	},
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"viewScriptModule": "woocommerce/add-to-cart-with-options-variation-selector"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/variation-selector/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
import { BlockEditProps } from '@wordpress/blocks';

/**
 * Internal dependencies
 */
import { ATTRIBUTE_ITEM_TEMPLATE } from './attribute/constants';

interface Attributes {
	className?: string;
}

export default function AddToCartWithOptionsVariationSelectorEdit(
	props: BlockEditProps< Attributes >
) {
	const { className } = props.attributes;

	const blockProps = useBlockProps( {
		className,
	} );
	const innerBlocksProps = useInnerBlocksProps( blockProps, {
		template: ATTRIBUTE_ITEM_TEMPLATE,
		templateLock: 'all',
	} );

	return <div { ...innerBlocksProps } />;
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/variation-selector/save.tsx
/**
 * External dependencies
 */
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';

export default function AddToCartWithOptionsVariationSelectorSave() {
	const blockProps = useBlockProps.save();
	const innerBlocksProps = useInnerBlocksProps.save( {
		...blockProps,
		role: 'list',
	} );
	return <div { ...innerBlocksProps } />;
}


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Implement a Gutenberg block for Display a group of products that can be added to the cart.

[Assistant]
<|thinking|>
To create this {type}, I need to:
- Create the block.json configuration file
- Register the block type
- Define block attributes and their types
- Implement the Edit component for the editor
- Implement the Save component for frontend rendering
- Add necessary controls in the inspector panel
- Style the block for both editor and frontend
<|im_end|>

// File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/grouped-product-selector/block.json
{
	"name": "woocommerce/add-to-cart-with-options-grouped-product-selector",
	"title": "Grouped Product Selector (Beta)",
	"description": "Display a group of products that can be added to the cart.",
	"category": "woocommerce-product-elements",
	"keywords": [ "WooCommerce" ],
	"usesContext": [ "postId" ],
	"ancestor": [ "woocommerce/add-to-cart-with-options" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"supports": {
		"interactivity": true
	},
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"viewScriptModule": "woocommerce/add-to-cart-with-options-grouped-product-selector"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/grouped-product-selector/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
import { type BlockEditProps } from '@wordpress/blocks';

/**
 * Internal dependencies
 */
import { GROUPED_PRODUCT_ITEM_TEMPLATE } from './product-item/constants';

interface Attributes {
	className?: string;
}

export default function AddToCartWithOptionsGroupedProductSelectorEdit(
	props: BlockEditProps< Attributes >
) {
	const { className } = props.attributes;
	const blockProps = useBlockProps( {
		className,
	} );
	const innerBlocksProps = useInnerBlocksProps( blockProps, {
		template: GROUPED_PRODUCT_ITEM_TEMPLATE,
		templateLock: 'all',
	} );

	return <div { ...innerBlocksProps } />;
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/grouped-product-selector/save.tsx
/**
 * External dependencies
 */
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';

export default function AddToCartWithOptionsGroupedProductSelectorSave() {
	const blockProps = useBlockProps.save();
	const innerBlocksProps = useInnerBlocksProps.save( {
		...blockProps,
		role: 'list',
	} );
	return <div { ...innerBlocksProps } />;
}


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Engineer a versatile block mechanism for rendering post comments that provides flexible configuration options for tag naming and legacy parameters.

[Assistant]
<|thinking|>
To create this {type}, I need to:
- Create the block.json configuration file
- Register the block type
- Define block attributes and their types
- Implement the Edit component for the editor
- Implement the Save component for frontend rendering
- Add necessary controls in the inspector panel
- Style the block for both editor and frontend
<|im_end|>

// File: packages/block-library/src/comments/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/comments",
	"title": "Comments",
	"category": "theme",
	"description": "An advanced block that allows displaying post comments using different visual configurations.",
	"textdomain": "default",
	"attributes": {
		"tagName": {
			"type": "string",
			"default": "div"
		},
		"legacy": {
			"type": "boolean",
			"default": false
		}
	},
	"supports": {
		"align": [ "wide", "full" ],
		"html": false,
		"color": {
			"gradients": true,
			"heading": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true,
				"link": true
			}
		},
		"spacing": {
			"margin": true,
			"padding": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true,
			"__experimentalDefaultControls": {
				"radius": true,
				"color": true,
				"width": true,
				"style": true
			}
		}
	},
	"editorStyle": "wp-block-comments-editor",
	"usesContext": [ "postId", "postType" ]
}

// File: packages/block-library/src/comments/index.js
/**
 * WordPress dependencies
 */
import { postComments as icon } from '@wordpress/icons';

/**
 * Internal dependencies
 */
import initBlock from '../utils/init-block';
import metadata from './block.json';
import deprecated from './deprecated';
import edit from './edit';
import save from './save';

const { name } = metadata;
export { metadata, name };

export const settings = {
	icon,
	example: {},
	edit,
	save,
	deprecated,
};

export const init = () => initBlock( { name, metadata, settings } );

// File: packages/block-library/src/comments/save.js
/**
 * WordPress dependencies
 */
import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';

export default function save( { attributes: { tagName: Tag, legacy } } ) {
	const blockProps = useBlockProps.save();
	const innerBlocksProps = useInnerBlocksProps.save( blockProps );

	// The legacy version is dynamic (i.e. PHP rendered) and doesn't allow inner
	// blocks, so nothing is saved in that case.
	return legacy ? null : <Tag { ...innerBlocksProps } />;
}


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Implement a Gutenberg block for Block: a8c/bauhaus-centenary

[Assistant]
<|thinking|>
To create this {type}, I need to:
- Create the block.json configuration file
- Register the block type
- Define block attributes and their types
- Implement the Edit component for the editor
- Implement the Save component for frontend rendering
- Add necessary controls in the inspector panel
- Style the block for both editor and frontend
<|im_end|>

// File: blocks/bauhaus-centenary/src/index.js
/**
 * WordPress dependencies
 */
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import Edit from './edit';
import Save from './save';
import { BauhausIcon } from './icon';

export const registerBlock = () => {
	registerBlockType( 'a8c/bauhaus-centenary', {
		title: 'Bauhaus Centenary',
		description: __( 'Celebrate the centenary of the design school', 'bauhaus-centenary' ),
		icon: BauhausIcon,
		category: 'widgets',
		supports: {
			align: true,
		},
		attributes: {
			align: {
				type: 'string',
				default: 'center',
			},
			caption: {
				type: 'string',
			},
			height: {
				type: 'integer',
				default: 128,
			},
			category: {
				type: 'string',
			},
			backgroundColor: {
				type: 'string',
			},
			customBackgroundColor: {
				type: 'string',
			},
			fill1Color: {
				type: 'string',
			},
			fill2Color: {
				type: 'string',
			},
			fill3Color: {
				type: 'string',
			},
			year: {
				type: 'string',
				default: '1919',
			},
		},
		edit: ( props ) => <Edit { ...props } />,
		save: ( props ) => <Save { ...props } />,
	} );
};

// File: blocks/bauhaus-centenary/src/save.js
/**
 * External dependencies
 */
import classnames from 'classnames';

/**
 * WordPress dependencies
 */
import { RichText, getColorClassName } from '@wordpress/block-editor';

/**
 * Internal dependencies
 */
import categories from './categories';

const Save = ( { attributes, className } ) => {
	const Category = categories[ attributes.category ];

	const style = {
		backgroundColor: attributes.customBackgroundColor,
	};

	const classNames = classnames(
		className,
		{ [ `align${ attributes.align }` ]: attributes.align },
		getColorClassName( 'background-color', attributes.backgroundColor ),
	);

	return (
		<figure className={ classNames } style={ style }>
			<Category.Content attributes={ attributes } />
			{ ! RichText.isEmpty( attributes.caption ) && <RichText.Content tagName="figcaption" value={ attributes.caption } /> }
		</figure>
	);
};

export default Save;


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Build a WordPress block to Add a way of selecting a child product within the Grouped Product block. Depending on the type of product and its properties, this might be a button, a checkbox, or a link.

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/grouped-product-selector/product-item-selector/block.json
{
	"name": "woocommerce/add-to-cart-with-options-grouped-product-item-selector",
	"title": "Grouped Product: Item Selector (Beta)",
	"description": "Add a way of selecting a child product within the Grouped Product block. Depending on the type of product and its properties, this might be a button, a checkbox, or a link.",
	"category": "woocommerce-product-elements",
	"keywords": [ "WooCommerce" ],
	"usesContext": [ "postId" ],
	"ancestor": [ "woocommerce/add-to-cart-with-options-grouped-product-item" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"supports": {
		"inserter": false,
		"interactivity": true
	},
	"style": "file:../woocommerce/add-to-cart-with-options-grouped-product-item-selector-style.css"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/grouped-product-selector/product-item-selector/edit.tsx
/**
 * External dependencies
 */
import { useProductDataContext } from '@woocommerce/shared-context';
import { Disabled, Spinner } from '@wordpress/components';
import { useBlockProps } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { isProductResponseItem } from '@woocommerce/entities';

/**
 * Internal dependencies
 */
import QuantityStepper from '../../components/quantity-stepper';

const CTA = () => {
	const { isLoading, product } = useProductDataContext();

	if ( isLoading || ! isProductResponseItem( product ) ) {
		return <Spinner />;
	}

	const {
		permalink,
		add_to_cart: productCartDetails,
		has_options: hasOptions,
		is_purchasable: isPurchasable,
		is_in_stock: isInStock,
		sold_individually: soldIndividually,
	} = product;

	if ( ! hasOptions && isPurchasable && isInStock ) {
		if ( soldIndividually ) {
			return (
				<input
					type="checkbox"
					value="1"
					className="wc-grouped-product-add-to-cart-checkbox"
				/>
			);
		}
		return <QuantityStepper />;
	}

	return (
		<a
			aria-label={ productCartDetails?.description || '' }
			className="button wp-element-button add_to_cart_button wc-block-components-product-button__button"
			href={ permalink }
		>
			{ productCartDetails?.text || __( 'Add to Cart', 'woocommerce' ) }
		</a>
	);
};

export default function ProductItemCTAEdit() {
	const blockProps = useBlockProps( {
		className:
			'wc-block-add-to-cart-with-options-grouped-product-item-selector',
	} );

	return (
		<div { ...blockProps }>
			<Disabled>
				<CTA />
			</Disabled>
		</div>
	);
}


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Craft a rating display block that provides flexibility in setting product details, including its ID, query loop hierarchy, text positioning, and two supplementary user-defined options.

[Assistant]
<|thinking|>
To create this {type}, I need to:
- Create the block.json configuration file
- Register the block type
- Define block attributes and their types
- Implement the Edit component for the editor
- Implement the Save component for frontend rendering
- Add necessary controls in the inspector panel
- Style the block for both editor and frontend
<|im_end|>

// File: plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/rating/block.json
{
	"name": "woocommerce/product-rating",
	"icon": "info",
	"title": "Product Rating",
	"description": "Display the average rating of a product.",
	"category": "woocommerce-product-elements",
	"attributes": {
		"productId": {
			"type": "number",
			"default": 0
		},
		"isDescendentOfQueryLoop": {
			"type": "boolean",
			"default": false
		},
		"textAlign": {
			"type": "string",
			"default": ""
		},
		"isDescendentOfSingleProductBlock": {
			"type": "boolean",
			"default": false
		},
		"isDescendentOfSingleProductTemplate": {
			"type": "boolean",
			"default": false
		}
	},
	"supports": {
		"interactivity": {
			"clientNavigation": true
		},
		"color": {
			"text": true,
			"background": false,
			"link": false,
			"__experimentalSkipSerialization": true
		},
		"spacing": {
			"margin": true,
			"padding": true
		},
		"typography": {
			"fontSize": true,
			"__experimentalSkipSerialization": true
		},
		"__experimentalSelector": ".wc-block-components-product-rating"
	},
	"ancestor": [
		"woocommerce/all-products",
		"woocommerce/single-product",
		"woocommerce/product-template",
		"core/post-template"
	],
	"usesContext": [ "query", "queryId", "postId" ],
	"keywords": [ "WooCommerce" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/rating/index.ts
/**
 * External dependencies
 */
import type { BlockConfiguration } from '@wordpress/blocks';
import { registerProductBlockType } from '@woocommerce/atomic-utils';

/**
 * Internal dependencies
 */
import save from '../save';
import edit from './edit';
import { BLOCK_ICON as icon } from './constants';
import metadata from './block.json';

const blockConfig: BlockConfiguration = {
	...metadata,
	icon: { src: icon },
	edit,
	save,
};

registerProductBlockType( blockConfig, {
	isAvailableOnPostEditor: true,
} );


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Craft a custom Gutenberg block designed to showcase post or page URLs, incorporating configurable attributes for content display and link targeting behavior.

[Assistant]
<|thinking|>
To create this {type}, I need to:
- Create the block.json configuration file
- Register the block type
- Define block attributes and their types
- Implement the Edit component for the editor
- Implement the Save component for frontend rendering
- Add necessary controls in the inspector panel
- Style the block for both editor and frontend
<|im_end|>

// File: packages/block-library/src/read-more/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/read-more",
	"title": "Read More",
	"category": "theme",
	"description": "Displays the link of a post, page, or any other content-type.",
	"textdomain": "default",
	"attributes": {
		"content": {
			"type": "string",
			"role": "content"
		},
		"linkTarget": {
			"type": "string",
			"default": "_self"
		}
	},
	"usesContext": [ "postId" ],
	"supports": {
		"html": false,
		"color": {
			"gradients": true,
			"text": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalLetterSpacing": true,
			"__experimentalTextDecoration": true,
			"__experimentalDefaultControls": {
				"fontSize": true,
				"textDecoration": true
			}
		},
		"spacing": {
			"margin": [ "top", "bottom" ],
			"padding": true,
			"__experimentalDefaultControls": {
				"padding": true
			}
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"width": true,
			"__experimentalDefaultControls": {
				"width": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		}
	},
	"style": "wp-block-read-more"
}

// File: packages/block-library/src/read-more/index.js
/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { link as icon } from '@wordpress/icons';

/**
 * Internal dependencies
 */
import initBlock from '../utils/init-block';
import metadata from './block.json';
import edit from './edit';

const { name } = metadata;
export { metadata, name };

export const settings = {
	icon,
	edit,
	example: {
		attributes: {
			content: __( 'Read more' ),
		},
	},
};

export const init = () => initBlock( { name, metadata, settings } );


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Develop a block for Display a grid of your top rated products. that allows users to configure: columns, rows, align buttons, and 7 more options

[Assistant]
<|thinking|>
To create this {type}, I need to:
- Create the block.json configuration file
- Register the block type
- Define block attributes and their types
- Implement the Edit component for the editor
- Implement the Save component for frontend rendering
- Add necessary controls in the inspector panel
- Style the block for both editor and frontend
<|im_end|>

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-top-rated/block.json
{
	"name": "woocommerce/product-top-rated",
	"title": "Top Rated Products",
	"category": "woocommerce",
	"keywords": [ "WooCommerce" ],
	"description": "Display a grid of your top rated products.",
	"supports": {
		"interactivity": {
			"clientNavigation": false
		},
		"align": [ "wide", "full" ],
		"html": false,
		"inserter": false
	},
	"attributes": {
		"columns": {
			"type": "number",
			"default": 3
		},
		"rows": {
			"type": "number",
			"default": 3
		},
		"alignButtons": {
			"type": "boolean",
			"default": false
		},
		"contentVisibility": {
			"type": "object",
			"default": {
				"image": true,
				"title": true,
				"price": true,
				"rating": true,
				"button": true
			},
			"properties": {
				"image": {
					"type": "boolean",
					"default": true
				},
				"title": {
					"type": "boolean",
					"default": true
				},
				"price": {
					"type": "boolean",
					"default": true
				},
				"rating": {
					"type": "boolean",
					"default": true
				},
				"button": {
					"type": "boolean",
					"default": true
				}
			}
		},
		"categories": {
			"type": "array",
			"default": []
		},
		"catOperator": {
			"type": "string",
			"default": "any"
		},
		"isPreview": {
			"type": "boolean",
			"default": false
		},
		"stockStatus": {
			"type": "array"
		},
		"editMode": {
			"type": "boolean",
			"default": true
		},
		"orderby": {
			"type": "string",
			"enum": [
				"date",
				"popularity",
				"price_asc",
				"price_desc",
				"rating",
				"title",
				"menu_order"
			],
			"default": "rating"
		}
	},
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-top-rated/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps } from '@wordpress/block-editor';

/**
 * Internal dependencies
 */
import { ProductTopRatedBlock } from './block';
import { Props } from './types';

export const Edit = ( props: unknown & Props ): JSX.Element => {
	const blockProps = useBlockProps();

	return (
		<div { ...blockProps }>
			<ProductTopRatedBlock { ...props } />
		</div>
	);
};


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Develop a WooCommerce block featuring configurable locking functionality that allows users to customize access and security settings.

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.json
{
	"name": "woocommerce/proceed-to-checkout-block",
	"version": "1.0.0",
	"title": "Proceed to Checkout",
	"description": "Allow customers proceed to Checkout.",
	"category": "woocommerce",
	"supports": {
		"align": false,
		"html": false,
		"multiple": false,
		"reusable": false,
		"inserter": false,
		"lock": false
	},
	"attributes": {
		"lock": {
			"type": "object",
			"default": {
				"remove": true,
				"move": true
			}
		}
	},
	"parent": [
		"woocommerce/cart-totals-block"
	],
	"textdomain": "woocommerce",
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx
/**
 * External dependencies
 */
import { useRef } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import EditableButton from '@woocommerce/editor-components/editable-button';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import PageSelector from '@woocommerce/editor-components/page-selector';
import { CART_PAGE_ID } from '@woocommerce/block-settings';

/**
 * Internal dependencies
 */
import { defaultButtonLabel } from './constants';

export const Edit = ( {
	attributes,
	setAttributes,
}: {
	attributes: {
		checkoutPageId: number;
		className: string;
		buttonLabel: string;
	};
	setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): JSX.Element => {
	const blockProps = useBlockProps();
	const { checkoutPageId = 0, buttonLabel } = attributes;
	const { current: savedCheckoutPageId } = useRef( checkoutPageId );

	const currentPostId = useSelect(
		( select ) => {
			if ( ! savedCheckoutPageId ) {
				const store = select( 'core/editor' );
				return store.getCurrentPostId();
			}
			return savedCheckoutPageId;
		},
		[ savedCheckoutPageId ]
	);

	return (
		<div { ...blockProps }>
			<InspectorControls>
				{ ! (
					currentPostId === CART_PAGE_ID && savedCheckoutPageId === 0
				) && (
					<PageSelector
						pageId={ checkoutPageId }
						setPageId={ ( id: number ) =>
							setAttributes( { checkoutPageId: id } )
						}
						labels={ {
							title: __(
								'Proceed to Checkout button',
								'woocommerce'
							),
							default: __(
								'WooCommerce Checkout Page',
								'woocommerce'
							),
						} }
					/>
				) }
			</InspectorControls>
			<EditableButton
				className="wc-block-cart__submit-button"
				value={ buttonLabel }
				placeholder={ defaultButtonLabel }
				onChange={ ( content ) => {
					setAttributes( {
						buttonLabel: content,
					} );
				} }
			/>
		</div>
	);
};

export const Save = (): JSX.Element => {
	return <div { ...useBlockProps.save() } />;
};


[System]
You are an expert WordPress developer specializing in creating high-quality plugins and Gutenberg blocks.
You write clean, well-documented code following WordPress coding standards and best practices.
Your code is secure, performant, and maintainable.

[User] Craft a custom Gutenberg block for an Accordion Panel, incorporating attributes like allowed block types, template locking, default open state, and selection status.

[Assistant]
<|thinking|>
To create this {type}, I need to:
- Create the block.json configuration file
- Register the block type
- Define block attributes and their types
- Implement the Edit component for the editor
- Implement the Save component for frontend rendering
- Add necessary controls in the inspector panel
- Style the block for both editor and frontend
<|im_end|>

// File: plugins/woocommerce/client/blocks/assets/js/blocks/accordion/inner-blocks/accordion-panel/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "woocommerce/accordion-panel",
	"title": "Accordion Panel",
	"category": "woocommerce",
	"keywords": [ "WooCommerce" ],
	"description": "Accordion Panel",
	"example": {},
	"__experimental": true,
	"parent": [ "woocommerce/accordion-item" ],
	"supports": {
		"color": {
			"background": true,
			"gradient": true
		},
		"border": true,
		"interactivity": true,
		"spacing": {
			"padding": true,
			"margin": [ "top", "bottom" ],
			"blockGap": true,
			"__experimentalDefaultControls": {
				"padding": true,
				"blockGap": true
			}
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true,
			"__experimentalDefaultControls": {
				"color": true,
				"radius": true,
				"style": true,
				"width": true
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"shadow": true,
		"layout": true
	},
	"attributes": {
		"allowedBlocks": {
			"type": "array"
		},
		"templateLock": {
			"type": [ "string", "boolean" ],
			"enum": [ "all", "insert", "contentOnly", false ],
			"default": false
		},
		"openByDefault": {
			"type": "boolean",
			"default": false
		},
		"isSelected": {
			"type": "boolean",
			"default": false
		}
	},
	"textdomain": "woocommerce"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/accordion/inner-blocks/accordion-panel/index.js
/**
 * External dependencies
 */
import { SVG, Path } from '@wordpress/components';
import { registerBlockType } from '@wordpress/blocks';

/**
 * Internal dependencies
 */
import edit from './edit';
import save from './save';
import metadata from './block.json';

const icon = (
	<SVG
		width="24"
		height="24"
		viewBox="0 0 24 24"
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
	>
		<Path
			fillRule="evenodd"
			clipRule="evenodd"
			d="M8.10417 6.00024H6.5C5.39543 6.00024 4.5 6.89567 4.5 8.00024V10.3336H6V8.00024C6 7.7241 6.22386 7.50024 6.5 7.50024H8.10417V6.00024ZM4.5 13.6669V16.0002C4.5 17.1048 5.39543 18.0002 6.5 18.0002H8.10417V16.5002H6.5C6.22386 16.5002 6 16.2764 6 16.0002V13.6669H4.5ZM10.3958 6.00024V7.50024H13.6042V6.00024H10.3958ZM15.8958 6.00024V7.50024H17.5C17.7761 7.50024 18 7.7241 18 8.00024V10.3336H19.5V8.00024C19.5 6.89567 18.6046 6.00024 17.5 6.00024H15.8958ZM19.5 13.6669H18V16.0002C18 16.2764 17.7761 16.5002 17.5 16.5002H15.8958V18.0002H17.5C18.6046 18.0002 19.5 17.1048 19.5 16.0002V13.6669ZM13.6042 18.0002V16.5002H10.3958V18.0002H13.6042Z"
			fill="currentColor"
		/>
	</SVG>
);

const { name } = metadata;

export { metadata, name };

export const settings = {
	apiVersion: 3,
	icon,
	example: {},
	edit,
	save,
};

registerBlockType( metadata, settings );

// File: plugins/woocommerce/client/blocks/assets/js/blocks/accordion/inner-blocks/accordion-panel/save.js
/**
 * External dependencies
 */
import {
	InnerBlocks,
	useBlockProps,
	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
} from '@wordpress/block-editor';
import clsx from 'clsx';

export default function save( { attributes } ) {
	const blockProps = useBlockProps.save();
	const borderProps = getBorderClassesAndStyles( attributes );
	const colorProps = getColorClassesAndStyles( attributes );
	const spacingProps = getSpacingClassesAndStyles( attributes );
	const shadowProps = getShadowClassesAndStyles( attributes );

	return (
		<div
			{ ...blockProps }
			className={ clsx(
				blockProps.className,
				colorProps.className,
				borderProps.className,
				{
					[ `has-custom-font-size` ]: blockProps?.style?.fontSize,
				}
			) }
			style={ {
				...borderProps.style,
				...colorProps.style,
				...shadowProps.style,
			} }
		>
			<div
				className="accordion-content__wrapper"
				style={ {
					...spacingProps.style,
				} }
			>
				<InnerBlocks.Content />
			</div>
		</div>
	);
}