[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 custom Gutenberg block that renders taxonomy terms comprehensively, featuring a dropdown interface, hierarchical organization, and extensible display 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: packages/block-library/src/categories/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/categories",
	"title": "Terms List",
	"category": "widgets",
	"description": "Display a list of all terms of a given taxonomy.",
	"keywords": [ "categories" ],
	"textdomain": "default",
	"attributes": {
		"taxonomy": {
			"type": "string",
			"default": "category"
		},
		"displayAsDropdown": {
			"type": "boolean",
			"default": false
		},
		"showHierarchy": {
			"type": "boolean",
			"default": false
		},
		"showPostCounts": {
			"type": "boolean",
			"default": false
		},
		"showOnlyTopLevel": {
			"type": "boolean",
			"default": false
		},
		"showEmpty": {
			"type": "boolean",
			"default": false
		},
		"label": {
			"type": "string",
			"role": "content"
		},
		"showLabel": {
			"type": "boolean",
			"default": true
		}
	},
	"usesContext": [ "enhancedPagination" ],
	"supports": {
		"align": true,
		"html": false,
		"spacing": {
			"margin": true,
			"padding": true,
			"__experimentalDefaultControls": {
				"margin": false,
				"padding": false
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"color": {
			"gradients": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true,
				"link": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true,
			"__experimentalDefaultControls": {
				"radius": true,
				"color": true,
				"width": true,
				"style": true
			}
		}
	},
	"editorStyle": "wp-block-categories-editor",
	"style": "wp-block-categories"
}

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

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

const { name } = metadata;

export { metadata, name };

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

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] Design a theme block enabling users to easily adjust and customize text alignment settings within the block.

[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/term-description/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/term-description",
	"title": "Term Description",
	"category": "theme",
	"description": "Display the description of categories, tags and custom taxonomies when viewing an archive.",
	"textdomain": "default",
	"usesContext": [ "termId", "taxonomy" ],
	"attributes": {
		"textAlign": {
			"type": "string"
		}
	},
	"supports": {
		"align": [ "wide", "full" ],
		"html": false,
		"color": {
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"spacing": {
			"padding": true,
			"margin": 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: packages/block-library/src/term-description/index.js
/**
 * WordPress dependencies
 */
import { termDescription 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: {},
};

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] Create a block that Display an input field customers can use to select the number of products to add to their 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/quantity-selector/block.json
{
	"name": "woocommerce/add-to-cart-with-options-quantity-selector",
	"title": "Product Quantity (Beta)",
	"description": "Display an input field customers can use to select the number of products to add to their 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",
	"style": "file:../woocommerce/add-to-cart-with-options-quantity-selector-style.css",
	"viewScriptModule": "woocommerce/add-to-cart-with-options-quantity-selector"
}

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

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

const AddToCartWithOptionsQuantitySelectorEdit = () => {
	const blockProps = useBlockProps( {
		className: 'wc-block-add-to-cart-with-options__quantity-selector',
	} );

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

export default AddToCartWithOptionsQuantitySelectorEdit;


[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 customizable WordPress block enabling merchants to present order summaries with adjustable lock mechanisms for enhanced user management.

[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-block/block.json
{
	"name": "woocommerce/checkout-order-summary-block",
	"version": "1.0.0",
	"title": "Order Summary",
	"description": "Show customers a summary of their order.",
	"category": "woocommerce",
	"supports": {
		"align": false,
		"html": false,
		"multiple": false,
		"reusable": false,
		"inserter": false,
		"lock": false
	},
	"attributes": {
		"lock": {
			"type": "object",
			"default": {
				"remove": true
			}
		}
	},
	"parent": [
		"woocommerce/checkout-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-block/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
import type { TemplateArray } from '@wordpress/blocks';
import { innerBlockAreas } from '@woocommerce/blocks-checkout';
import { TotalsFooterItem } from '@woocommerce/base-components/cart-checkout';
import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
import { useStoreCart } from '@woocommerce/base-context/hooks';
import { __ } from '@wordpress/i18n';
import { useId, useState } from '@wordpress/element';
import { Icon } from '@wordpress/components';
import { chevronDown, chevronUp } from '@wordpress/icons';
import clsx from 'clsx';
import { FormattedMonetaryAmount } from '@woocommerce/blocks-components';
import { useContainerWidthContext } from '@woocommerce/base-context';

/**
 * Internal dependencies
 */
import {
	useForcedLayout,
	getAllowedBlocks,
} from '../../../cart-checkout-shared';
import { OrderMetaSlotFill } from './slotfills';

export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
	const blockProps = useBlockProps();
	const { cartTotals } = useStoreCart();
	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
	const totalPrice = parseInt( cartTotals.total_price, 10 );
	const allowedBlocks = getAllowedBlocks(
		innerBlockAreas.CHECKOUT_ORDER_SUMMARY
	);
	const { isLarge } = useContainerWidthContext();
	const [ isOpen, setIsOpen ] = useState( false );
	const ariaControlsId = useId();

	const orderSummaryProps = ! isLarge
		? {
				role: 'button',
				onClick: () => setIsOpen( ! isOpen ),
				'aria-expanded': isOpen,
				'aria-controls': ariaControlsId,
				tabIndex: 0,
				onKeyDown: ( event: React.KeyboardEvent ) => {
					if ( event.key === 'Enter' || event.key === ' ' ) {
						setIsOpen( ! isOpen );
					}
				},
		  }
		: {};

	const defaultTemplate = [
		[ 'woocommerce/checkout-order-summary-cart-items-block', {}, [] ],
		[ 'woocommerce/checkout-order-summary-coupon-form-block', {}, [] ],
		[ 'woocommerce/checkout-order-summary-totals-block', {}, [] ],
	] as TemplateArray;

	useForcedLayout( {
		clientId,
		registeredBlocks: allowedBlocks,
		defaultTemplate,
	} );

	return (

					{ __( 'Order summary', 'woocommerce' ) }

				<FormattedMonetaryAmount
					currency={ totalsCurrency }
					value={ totalPrice }
					className="wc-block-components-checkout-order-summary__title-price"
				/>

					<Icon icon={ isOpen ? chevronUp : chevronDown } />

				<InnerBlocks
					allowedBlocks={ allowedBlocks }
					template={ defaultTemplate }
				/>

					<TotalsFooterItem
						currency={ totalsCurrency }
						values={ cartTotals }
					/>

				<OrderMetaSlotFill />

	);
};

export const Save = (): JSX.Element => {
	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] Create a design block with customizable tabs id, orientation, active tab index, and 12 more options

[Assistant]
// File: packages/block-library/src/tabs/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"__experimental": true,
	"apiVersion": 3,
	"name": "core/tabs",
	"title": "Tabs",
	"description": "Display content in a tabbed interface to help users navigate detailed content with ease.",
	"version": "1.0.0",
	"category": "design",
	"textdomain": "default",
	"allowedBlocks": [ "core/tab" ],
	"attributes": {
		"tabsId": {
			"type": "string",
			"default": ""
		},
		"orientation": {
			"type": "string",
			"default": "horizontal",
			"enum": [ "horizontal", "vertical" ]
		},
		"activeTabIndex": {
			"type": "number",
			"default": 0
		},
		"tabInactiveColor": {
			"type": "string"
		},
		"customTabInactiveColor": {
			"type": "string"
		},
		"tabHoverColor": {
			"type": "string"
		},
		"customTabHoverColor": {
			"type": "string"
		},
		"tabActiveColor": {
			"type": "string"
		},
		"customTabActiveColor": {
			"type": "string"
		},
		"tabTextColor": {
			"type": "string"
		},
		"customTabTextColor": {
			"type": "string"
		},
		"tabActiveTextColor": {
			"type": "string"
		},
		"customTabActiveTextColor": {
			"type": "string"
		},
		"tabHoverTextColor": {
			"type": "string"
		},
		"customTabHoverTextColor": {
			"type": "string"
		}
	},
	"styles": [
		{
			"name": "tab",
			"label": "Tabs",
			"isDefault": true
		},
		{
			"name": "links",
			"label": "Links"
		},
		{
			"name": "button",
			"label": "Button"
		}
	],
	"supports": {
		"align": true,
		"color": {
			"text": false,
			"background": false
		},
		"html": false,
		"interactivity": true,
		"spacing": {
			"blockGap": [ "horizontal", "vertical" ],
			"margin": true,
			"padding": false
		},
		"typography": {
			"fontSize": true,
			"__experimentalFontFamily": true
		}
	},
	"example": {
		"attributes": {
			"className": "is-example"
		},
		"innerBlocks": [
			{
				"name": "core/tab",
				"attributes": {
					"label": "Tab 1"
				},
				"innerBlocks": [
					{
						"name": "core/paragraph",
						"attributes": {
							"content": "Pariatur commodo sint mollit. Veniam Lorem labore voluptate fugiat. Ad nulla est labore cillum cillum qui nostrud do incididunt eiusmod. Aliqua aliqua sunt consequat consequat in duis deserunt."
						}
					},
					{
						"name": "core/paragraph",
						"attributes": {
							"content": "Adipisicing ullamco nisi in eu laborum adipisicing aliquip aliqua. Fugiat labore officia consequat nisi veniam velit commodo cillum enim duis quis ad."
						}
					}
				]
			},
			{
				"name": "core/tab",
				"attributes": {
					"label": "Tab 2"
				}
			},
			{
				"name": "core/tab",
				"attributes": {
					"label": "Tab 3"
				}
			}
		]
	},
	"providesContext": {
		"core/tabs-id": "tabsId"
	},
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css",
	"viewScriptModule": "@wordpress/block-library/tabs/view"
}

// File: packages/block-library/src/tabs/index.js
/**
 * Internal dependencies
 */
import initBlock from '../utils/init-block';
import edit from './edit';
import save from './save';
import icon from './icon';

import metadata from './block.json';

const { name } = metadata;

export { metadata, name };

export const settings = {
	icon,
	edit,
	save,
};

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

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

export default function Save( { attributes } ) {
	// eslint-disable-next-line react-compiler/react-compiler
	const blockProps = useBlockProps.save();

	// eslint-disable-next-line react-compiler/react-compiler
	const innerBlocksProps = useInnerBlocksProps.save( {} );

	const title = attributes?.metadata?.name || 'Tab Contents';

	return (

{ title }

			{ innerBlocksProps.children }

	);
}


[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 Display a list of filter options. with these attributes: option element border, custom option element border, option element selected, and 5 more options

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/checkbox-list/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"name": "woocommerce/product-filter-checkbox-list",
	"title": "List",
	"description": "Display a list of filter options.",
	"category": "woocommerce",
	"keywords": [ "WooCommerce" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"ancestor": [
		"woocommerce/product-filter-attribute",
		"woocommerce/product-filter-status",
		"woocommerce/product-filter-taxonomy",
		"woocommerce/product-filter-rating"
	],
	"supports": {
		"interactivity": true
	},
	"usesContext": [ "filterData" ],
	"attributes": {
		"optionElementBorder": {
			"type": "string",
			"default": ""
		},
		"customOptionElementBorder": {
			"type": "string",
			"default": ""
		},
		"optionElementSelected": {
			"type": "string",
			"default": ""
		},
		"customOptionElementSelected": {
			"type": "string",
			"default": ""
		},
		"optionElement": {
			"type": "string",
			"default": ""
		},
		"customOptionElement": {
			"type": "string",
			"default": ""
		},
		"labelElement": {
			"type": "string",
			"default": ""
		},
		"customLabelElement": {
			"type": "string",
			"default": ""
		}
	},
	"viewScriptModule": "woocommerce/product-filter-checkbox-list",
	"style": "file:../woocommerce/product-filter-checkbox-list-style.css",
	"editorStyle": "file:../woocommerce/product-filter-checkbox-list-editor.css"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/checkbox-list/edit.tsx
/**
 * External dependencies
 */
import clsx from 'clsx';
import { __ } from '@wordpress/i18n';
import { Icon, Disabled } from '@wordpress/components';
import { checkMark } from '@woocommerce/icons';
import { useMemo } from '@wordpress/element';
import { decodeHtmlEntities } from '@woocommerce/utils';
import {
	useBlockProps,
	withColors,
	InspectorControls,
	// @ts-expect-error - no types.
	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
	// @ts-expect-error - no types.
	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
} from '@wordpress/block-editor';

/**
 * Internal dependencies
 */
import './style.scss';
import './editor.scss';
import { EditProps } from './types';
import { getColorClasses, getColorVars } from './utils';

const CheckboxListEdit = ( props: EditProps ): JSX.Element => {
	const {
		clientId,
		context,
		attributes,
		setAttributes,
		optionElementBorder,
		setOptionElementBorder,
		optionElementSelected,
		setOptionElementSelected,
		optionElement,
		setOptionElement,
		labelElement,
		setLabelElement,
	} = props;

	const {
		customOptionElementBorder,
		customOptionElementSelected,
		customOptionElement,
		customLabelElement,
	} = attributes;
	const { filterData } = context;
	const { isLoading, items, showCounts } = filterData;

	const colorGradientSettings = useMultipleOriginColorsAndGradients();
	const blockProps = useBlockProps( {
		className: clsx( 'wc-block-product-filter-checkbox-list', {
			'is-loading': isLoading,
			...getColorClasses( attributes ),
		} ),
		style: getColorVars( attributes ),
	} );

	const loadingState = useMemo( () => {
		return [ ...Array( 5 ) ].map( ( x, i ) => (

		) );
	}, [] );

	if ( ! items ) {
		return <></>;
	}

	const threshold = 15;
	const isLongList = items.length > threshold;

	return (
		<>

				<Disabled>

						{ isLoading && loadingState }
						{ ! isLoading &&
							( isLongList
								? items.slice( 0, threshold )
								: items
							).map( ( item, index ) => (
								<div
									key={ index }
									className={ clsx(
										'wc-block-product-filter-checkbox-list__item',
										{
											[ `has-depth-${ item?.depth }` ]:
												item?.depth,
										}
									) }
								>
									<label
										htmlFor={ `interactive-checkbox-${ index }` }
										className=" wc-block-product-filter-checkbox-list__label"
									>

											<input
												name={ `interactive-checkbox-${ index }` }
												type="checkbox"
												className="wc-block-product-filter-checkbox-list__input"
												defaultChecked={
													!! item.selected
												}
											/>
											<Icon
												className="wc-block-product-filter-checkbox-list__mark"
												icon={ checkMark }
											/>

												{ typeof item.label === 'string'
													? decodeHtmlEntities(
															item.label
													  )
													: item.label }

											{ showCounts && (

													{ ` (${ item.count })` }

											) }

							) ) }

					{ ! isLoading && isLongList && (
						<button className="wc-block-product-filter-checkbox-list__show-more">
							{ __( 'Show more…', 'woocommerce' ) }
						</button>
					) }
				</Disabled>

			<InspectorControls group="color">
				{ colorGradientSettings.hasColorsOrGradients && (
					<ColorGradientSettingsDropdown
						__experimentalIsRenderedInSidebar
						settings={ [
							{
								label: __( 'Label', 'woocommerce' ),
								colorValue:
									labelElement.color || customLabelElement,
								isShownByDefault: true,
								enableAlpha: true,
								onColorChange: ( colorValue: string ) => {
									setLabelElement( colorValue );
									setAttributes( {
										customLabelElement: colorValue,
									} );
								},
								resetAllFilter: () => {
									setLabelElement( '' );
									setAttributes( {
										customLabelElement: '',
									} );
								},
							},
							{
								label: __(
									'Option Element Border',
									'woocommerce'
								),
								colorValue:
									optionElementBorder.color ||
									customOptionElementBorder,
								isShownByDefault: true,
								enableAlpha: true,
								onColorChange: ( colorValue: string ) => {
									setOptionElementBorder( colorValue );
									setAttributes( {
										customOptionElementBorder: colorValue,
									} );
								},
								resetAllFilter: () => {
									setOptionElementBorder( '' );
									setAttributes( {
										customOptionElementBorder: '',
									} );
								},
							},
							{
								label: __(
									'Option Element (Selected)',
									'woocommerce'
								),
								colorValue:
									optionElementSelected.color ||
									customOptionElementSelected,
								isShownByDefault: true,
								enableAlpha: true,
								onColorChange: ( colorValue: string ) => {
									setOptionElementSelected( colorValue );
									setAttributes( {
										customOptionElementSelected: colorValue,
									} );
								},
								resetAllFilter: () => {
									setOptionElementSelected( '' );
									setAttributes( {
										customOptionElementSelected: '',
									} );
								},
							},
							{
								label: __( 'Option Element', 'woocommerce' ),
								colorValue:
									optionElement.color || customOptionElement,
								isShownByDefault: true,
								enableAlpha: true,
								onColorChange: ( colorValue: string ) => {
									setOptionElement( colorValue );
									setAttributes( {
										customOptionElement: colorValue,
									} );
								},
								resetAllFilter: () => {
									setOptionElement( '' );
									setAttributes( {
										customOptionElement: '',
									} );
								},
							},
						] }
						panelId={ clientId }
						{ ...colorGradientSettings }
					/>
				) }
			</InspectorControls>
		</>
	);
};

export default withColors( {
	optionElementBorder: 'option-element-border',
	optionElementSelected: 'option-element-border',
	optionElement: 'option-element',
	labelElement: 'label-element',
} )( CheckboxListEdit );

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

/**
 * Internal dependencies
 */
import { BlockAttributes } from './types';
import { getColorClasses, getColorVars } from './utils';

const Save = ( { attributes }: { attributes: BlockAttributes } ) => {
	const blockProps = useBlockProps.save( {
		className: clsx(
			'wc-block-product-filter-checkbox-list',
			attributes.className,
			getColorClasses( attributes )
		),
		style: {
			...getColorVars( attributes ),
		},
	} );

	return
;
};

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] Create a block that Format the name of an attribute associated with a variable product.

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/variation-selector/attribute-name/block.json
{
	"name": "woocommerce/add-to-cart-with-options-variation-selector-attribute-name",
	"title": "Variation Selector: Attribute Name (Beta)",
	"description": "Format the name of an attribute associated with a variable product.",
	"category": "woocommerce-product-elements",
	"keywords": [ "WooCommerce" ],
	"ancestor": [
		"woocommerce/add-to-cart-with-options-variation-selector-attribute"
	],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"supports": {
		"inserter": false,
		"interactivity": true,
		"align": false,
		"alignWide": false,
		"color": {
			"__experimentalSkipSerialization": true,
			"gradients": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"typography": {
			"__experimentalSkipSerialization": [
				"fontSize",
				"lineHeight",
				"fontFamily",
				"fontWeight",
				"fontStyle",
				"textTransform",
				"textDecoration",
				"letterSpacing"
			],
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalWritingMode": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"spacing": {
			"__experimentalSkipSerialization": true,
			"padding": [ "horizontal", "vertical" ],
			"__experimentalDefaultControls": {
				"padding": true
			}
		}
	},
	"usesContext": [
		"woocommerce/attributeId",
		"woocommerce/attributeName",
		"woocommerce/attributeTerms"
	],
	"style": "file:../woocommerce/add-to-cart-with-options-variation-selector-attribute-name-style.css"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/variation-selector/attribute-name/edit.tsx
/**
 * External dependencies
 */
import { type BlockEditProps } from '@wordpress/blocks';
import {
	useBlockProps,
	__experimentalUseColorProps as useColorProps,
	getTypographyClassesAndStyles as useTypographyProps,
	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
	useSettings,
} from '@wordpress/block-editor';
import { useCustomDataContext } from '@woocommerce/shared-context';
import type { ProductResponseAttributeItem } from '@woocommerce/types';
import clsx from 'clsx';

interface Attributes {
	className?: string;
}

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

	const colorProps = useColorProps( attributes );

	const [ fluidTypographySettings, layout ] = useSettings(
		'typography.fluid',
		'layout'
	);
	const typographyProps = useTypographyProps( attributes, {
		typography: {
			fluid: fluidTypographySettings,
		},
		layout: {
			wideSize: layout?.wideSize,
		},
	} );

	const spacingProps = useSpacingProps( attributes );

	const blockProps = useBlockProps( {
		className: clsx(
			className,
			colorProps.className,
			typographyProps.className,
			spacingProps.className
		),
		style: {
			...colorProps.stye,
			...typographyProps.style,
			...spacingProps.style,
		},
	} );

	const { data: attribute } =
		useCustomDataContext< ProductResponseAttributeItem >( 'attribute' );

	if ( ! attribute ) return;

	return (
		<label { ...blockProps } htmlFor={ attribute.taxonomy }>
			{ attribute.name }
		</label>
	);
}


[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 A single accordion that displays a header and expandable content. that allows users to configure: open by default

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/accordion/inner-blocks/accordion-item/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "woocommerce/accordion-item",
	"title": "Accordion",
	"category": "woocommerce",
	"keywords": [ "WooCommerce" ],
	"description": "A single accordion that displays a header and expandable content.",
	"example": {},
	"__experimental": true,
	"parent": [ "woocommerce/accordion-group" ],
	"allowedBlocks": [
		"woocommerce/accordion-header",
		"woocommerce/accordion-panel"
	],
	"supports": {
		"align": [ "wide", "full" ],
		"color": {
			"background": true,
			"gradient": true
		},
		"interactivity": true,
		"spacing": {
			"margin": [ "top", "bottom" ],
			"blockGap": true
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true,
			"__experimentalDefaultControls": {
				"color": true,
				"radius": true,
				"style": true,
				"width": true
			}
		},
		"shadow": true,
		"layout": true
	},
	"attributes": {
		"openByDefault": {
			"type": "boolean",
			"default": false
		}
	},
	"textdomain": "woocommerce"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/accordion/inner-blocks/accordion-item/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="M19.5 9.5L9.5 9.5L9.5 8L19.5 8L19.5 9.5Z"
			fill="currentColor"
		/>
		<Path
			fillRule="evenodd"
			clipRule="evenodd"
			d="M19.5 13L9.5 13L9.5 11.5L19.5 11.5L19.5 13Z"
			fill="currentColor"
		/>
		<Path
			fillRule="evenodd"
			clipRule="evenodd"
			d="M19.5 16.3999L9.5 16.3999L9.5 14.8999L19.5 14.8999L19.5 16.3999Z"
			fill="currentColor"
		/>
		<Path d="M4.5 6.25L8.5 8.75L4.5 11.25L4.5 6.25Z" 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-item/save.js
/**
 * External dependencies
 */
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
import clsx from 'clsx';

export default function save( { attributes } ) {
	const { openByDefault } = attributes;
	const blockProps = useBlockProps.save();
	const className = clsx(
		{
			'is-open': openByDefault,
		},
		blockProps.className
	);
	const innerBlocksProps = useInnerBlocksProps.save( {
		...blockProps,
		className,
	} );

	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] Develop a block for Embed a Pinterest pin, board, or user. that allows users to configure: url

[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/pinterest/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/pinterest",
	"title": "Pinterest",
	"description": "Embed a Pinterest pin, board, or user.",
	"keywords": [ "social", "pinboard", "pins" ],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "embed",
	"icon": "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M12,2C6.477,2,2,6.477,2,12c0,4.236,2.636,7.855,6.356,9.312c-0.087-0.791-0.166-2.005,0.035-2.869c0.182-0.78,1.173-4.971,1.173-4.971s-0.299-0.599-0.299-1.484c0-1.39,0.806-2.429,1.809-2.429c0.853,0,1.265,0.641,1.265,1.409c0,0.858-0.546,2.141-0.828,3.329c-0.236,0.996,0.499,1.807,1.481,1.807c1.777,0,3.144-1.874,3.144-4.579c0-2.394-1.72-4.068-4.177-4.068c-2.845,0-4.515,2.134-4.515,4.34c0,0.859,0.331,1.781,0.744,2.282c0.082,0.099,0.094,0.186,0.069,0.287C8.18,14.682,8.011,15.361,7.978,15.5c-0.044,0.183-0.145,0.222-0.334,0.134c-1.249-0.581-2.03-2.407-2.03-3.874c0-3.154,2.292-6.051,6.607-6.051c3.469,0,6.165,2.472,6.165,5.775c0,3.446-2.173,6.22-5.189,6.22c-1.013,0-1.966-0.526-2.292-1.148c0,0-0.501,1.909-0.623,2.377c-0.226,0.869-0.835,1.957-1.243,2.622C9.975,21.844,10.969,22,12,22c5.523,0,10-4.477,10-10C22,6.477,17.523,2,12,2z'/></svg>",
	"supports": {
		"html": false,
		"align": false,
		"inserter": false
	},
	"attributes": {
		"url": {
			"type": "string"
		}
	},
	"example": {
		"attributes": {
			"url": "https://pinterest.com/anapinskywalker/"
		}
	}
}

// File: projects/plugins/jetpack/extensions/blocks/pinterest/edit.js
import { useBlockProps } from '@wordpress/block-editor';
import { SandBox, withNotices } from '@wordpress/components';
import { useState, useEffect, useCallback } from '@wordpress/element';
import EditUrlForm from './components/edit-url-form';
import ErrorNotice from './components/error-notice';
import LoadingContainer from './components/loading-container';
import useTestPinterestEmbedUrl from './hooks/use-test-pinterest-embed-url';
import { pinType } from './utils';

export function PinterestEdit( {
	attributes,
	isSelected,
	noticeOperations,
	noticeUI,
	setAttributes,
	onReplace,
} ) {
	const { url } = attributes;

	const blockProps = useBlockProps();
	const { isFetching, pinterestUrl, testUrl, hasTestUrlError } = useTestPinterestEmbedUrl();
	const [ isInteractive, setIsInteractive ] = useState( false );
	const [ editedUrl, setEditedUrl ] = useState( '' );
	const [ isEditing, setIsEditing ] = useState( false );

	/**
	 * Sets an error notice using noticeOperations.
	 */
	const getErrorNotice = useCallback( () => {
		return <ErrorNotice fallbackUrl={ editedUrl } onClick={ onReplace } />;
		// Disabling for onReplace and editedUrl as they are not requirements for creating a new function.
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [ hasTestUrlError ] );

	/**
	 * Submit handler for the url editing form.
	 */
	const onSubmitForm = () => {
		if ( isFetching ) {
			return;
		}
		testUrl( editedUrl );
		setIsEditing( false );
	};

	/**
	 * This is called onMouseUp on the overlay. We can't respond to the `isSelected` prop
	 * changing, because that happens on mouse down, and the overlay immediately disappears,
	 * and the mouse event can end up in the preview content. We can't use onClick on
	 * the overlay to hide it either, because then the editor misses the mouseup event, and
	 * thinks we're multi-selecting blocks.
	 */
	const hideOverlay = () => {
		setIsInteractive( true );
	};

	/*
		Set the URL when the component mounts.
		We disable missing dependencies warning in the linter
		because we want this to run once on mount.
	 */
	useEffect( () => {
		if ( url ) {
			testUrl( url );
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [] );

	/*
		We only want to change `isInteractive` when the block is not selected, because changing it when
		the block becomes selected makes the overlap disappear too early. Hiding the overlay
		happens on mouseup when the overlay is clicked.
	*/
	useEffect( () => {
		if ( ! isSelected && isInteractive ) {
			setIsInteractive( false );
		}
	}, [ isSelected, isInteractive ] );

	// Listen out for changes to after we've tested the url via `testUrl()`.
	useEffect( () => {
		setAttributes( { url: pinterestUrl } );
		noticeOperations.removeAllNotices();
		// Set the input value of the edited URL.
		if ( pinterestUrl ) {
			setEditedUrl( pinterestUrl );
		}
		if ( hasTestUrlError ) {
			noticeOperations.createErrorNotice( getErrorNotice() );
		}
		// Disabling for noticeOperations as it is a prop and not a requirement for re-rendering.
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [ pinterestUrl, hasTestUrlError, setAttributes, getErrorNotice ] );

	if ( isFetching ) {
		return <LoadingContainer />;
	}

	const pinterestEmbedType = pinType( url );

	let content;

	if ( isEditing || ! url || ( url && ! pinterestEmbedType ) ) {
		content = (
			<EditUrlForm
				onSubmit={ onSubmitForm }
				noticeUI={ noticeUI }
				url={ editedUrl }
				setUrl={ setEditedUrl }
			/>
		);
	} else {
		const sandBoxHTML = `<a data-pin-do='${ pinterestEmbedType }' href='${ url }'></a>`;
		/*
		Disabled because the overlay div doesn't actually have a role or functionality
		as far as the user is concerned. We're just catching the first click so that
		the block can be selected without interacting with the embed preview that the overlay covers.
	 */
		/* eslint-disable jsx-a11y/no-static-element-interactions */
		content = (

					<SandBox
						html={ sandBoxHTML }
						scripts={ [ 'https://assets.pinterest.com/js/pinit.js' ] }
						onFocus={ hideOverlay }
					/>
					{ ! isInteractive && (

					) }

		);
	}

	return
{ content }
;
}

export default withNotices( PinterestEdit );

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

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

	return (

			{ url }

	);
}


[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 Contains the products table and other custom blocks of filled mini-cart. with these attributes: lock

[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/mini-cart/mini-cart-contents/inner-blocks/mini-cart-items-block/block.json
{
	"name": "woocommerce/mini-cart-items-block",
	"version": "1.0.0",
	"title": "Mini-Cart Items",
	"description": "Contains the products table and other custom blocks of filled mini-cart.",
	"category": "woocommerce",
	"supports": {
		"align": false,
		"html": false,
		"multiple": false,
		"reusable": false,
		"inserter": false,
		"lock": false,
		"interactivity": {
			"clientNavigation": true
		}
	},
	"attributes": {
		"lock": {
			"type": "object",
			"default": {
				"remove": true,
				"move": true
			}
		}
	},
	"parent": [ "woocommerce/filled-mini-cart-contents-block" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-items-block/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
import type { TemplateArray } from '@wordpress/blocks';

/**
 * Internal dependencies
 */
import { getMiniCartAllowedBlocks } from '../allowed-blocks';

export const Edit = (): JSX.Element => {
	const blockProps = useBlockProps( {
		className: 'wc-block-mini-cart__items',
	} );

	const defaultTemplate = [
		[ 'woocommerce/mini-cart-products-table-block', {} ],
	].filter( Boolean ) as unknown as TemplateArray;

	return (
		<div { ...blockProps }>
			<InnerBlocks
				template={ defaultTemplate }
				renderAppender={ InnerBlocks.ButtonBlockAppender }
				templateLock={ false }
				allowedBlocks={ getMiniCartAllowedBlocks() }
			/>
		</div>
	);
};

export const Save = (): JSX.Element => {
	return (
		<div { ...useBlockProps.save() }>
			<InnerBlocks.Content />
		</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 theme block with customizable format, is link

[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/comment-date/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/comment-date",
	"title": "Comment Date",
	"category": "theme",
	"ancestor": [ "core/comment-template" ],
	"description": "Displays the date on which the comment was posted.",
	"textdomain": "default",
	"attributes": {
		"format": {
			"type": "string"
		},
		"isLink": {
			"type": "boolean",
			"default": true
		}
	},
	"usesContext": [ "commentId" ],
	"supports": {
		"html": false,
		"color": {
			"gradients": 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
			}
		},
		"interactivity": {
			"clientNavigation": true
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true,
			"__experimentalDefaultControls": {
				"radius": true,
				"color": true,
				"width": true,
				"style": true
			}
		}
	},
	"style": "wp-block-comment-date"
}

// File: packages/block-library/src/comment-date/index.js
/**
 * WordPress dependencies
 */
import { postDate 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,
	edit,
	deprecated,
	example: {},
};

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 WordPress block that enables users to input a custom label and configurable statistics, with flexible display options for presenting data.

[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/blog-stats/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/blog-stats",
	"title": "Blog Stats",
	"description": "Show a stats counter for your blog.",
	"keywords": [ "views", "hits", "analytics", "counter", "visitors" ],
	"version": "1.0",
	"textdomain": "jetpack",
	"category": "grow",
	"icon": "<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='M160-200h160v-320H160v320Zm240 0h160v-560H400v560Zm240 0h160v-240H640v240ZM80-120v-480h240v-240h320v320h240v400H80Z'/></svg>",
	"supports": {
		"align": true,
		"alignWide": true,
		"html": false,
		"multiple": true,
		"reusable": true,
		"color": {
			"gradients": true
		},
		"spacing": {
			"margin": true,
			"padding": true
		},
		"typography": {
			"__experimentalFontFamily": true,
			"fontSize": true
		}
	},
	"attributes": {
		"label": {
			"type": "string"
		},
		"statsData": {
			"type": "string",
			"default": "views"
		},
		"statsOption": {
			"type": "string",
			"default": "site"
		}
	}
}

// File: projects/plugins/jetpack/extensions/blocks/blog-stats/edit.js
import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils';
import { formatNumber } from '@automattic/number-formatters';
import apiFetch from '@wordpress/api-fetch';
import { InspectorControls, RichText, useBlockProps } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { useEffect, useState } from '@wordpress/element';
import { __, _n } from '@wordpress/i18n';
import { BlogStatsInspectorControls } from './controls';
import { InactiveStatsPlaceholder } from './inactive-placeholder';

function BlogStatsEdit( { attributes, className, setAttributes } ) {
	const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } =
		useModuleStatus( 'stats' );
	const { label, statsData, statsOption } = attributes;
	const [ blogViews, setBlogViews ] = useState( null );
	const [ blogVisitors, setBlogVisitors ] = useState();
	const [ postViews, setPostViews ] = useState();
	const blockProps = useBlockProps();

	const blogStats = statsData === 'views' ? blogViews : blogVisitors;
	const stats = statsOption === 'post' ? postViews : blogStats;

	const postId = useSelect( select => select( 'core/editor' ).getCurrentPostId(), [] );

	useEffect( () => {
		if ( isModuleActive ) {
			apiFetch( {
				path: Number.isInteger( postId )
					? `/wpcom/v2/blog-stats?post_id=${ postId }`
					: '/wpcom/v2/blog-stats',
			} ).then( response => {
				setBlogViews( response[ 'blog-views' ] );
				setBlogVisitors( response[ 'blog-visitors' ] );

				// Display "12,345" as an obvious placeholder when we have no Post ID.
				// Applies to widgets, FSE templates etc.
				setPostViews( Number.isInteger( postId ) ? response[ 'post-views' ] : '12345' );
			} );
		}
	}, [ postId, isModuleActive ] );

	// We don't collect visitor data for individual posts.
	useEffect( () => {
		if ( statsData === 'visitors' ) {
			setAttributes( { statsOption: 'site' } );
		}
	}, [ statsData, setAttributes ] );

	if ( ! isModuleActive && ! isLoadingModules ) {
		return (
			<InactiveStatsPlaceholder
				className={ className }
				changeStatus={ changeStatus }
				isLoading={ isChangingStatus }
			/>
		);
	}

	const visitorsPlaceholder =
		/* Translators: Number of visitors */
		_n( 'visitor', 'visitors', parseInt( stats ), 'jetpack', 0 );

	const viewsPlaceholder =
		/* Translators: Number of views */
		_n( 'hit', 'hits', parseInt( stats ), 'jetpack', 0 );

	return (

			<InspectorControls>
				<BlogStatsInspectorControls attributes={ attributes } setAttributes={ setAttributes } />
			</InspectorControls>

				{ isLoadingModules || blogViews === null ? (

{ __( 'Loading stats…', 'jetpack' ) }

				) : (

						{ formatNumber( stats ) }
						<RichText
							tagName="span"
							placeholder={ statsData === 'visitors' ? visitorsPlaceholder : viewsPlaceholder }
							value={ label }
							allowedFormats={ [ 'core/bold', 'core/italic', 'core/link' ] }
							onChange={ newLabel => setAttributes( { label: newLabel } ) }
						/>

				) }

	);
}

export default BlogStatsEdit;


[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 removable active filters as chips. that allows users to configure: chip text, custom chip text, chip background, and 3 more options

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/removable-chips/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"name": "woocommerce/product-filter-removable-chips",
	"title": "Chips",
	"description": "Display removable active filters as chips.",
	"category": "woocommerce",
	"keywords": [ "WooCommerce" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"ancestor": [ "woocommerce/product-filter-active" ],
	"supports": {
		"layout": {
			"allowSwitching": false,
			"allowInheriting": false,
			"allowVerticalAlignment": false,
			"default": {
				"type": "flex"
			}
		},
		"interactivity": true
	},
	"usesContext": [ "queryId", "filterData" ],
	"attributes": {
		"chipText": {
			"type": "string"
		},
		"customChipText": {
			"type": "string"
		},
		"chipBackground": {
			"type": "string"
		},
		"customChipBackground": {
			"type": "string"
		},
		"chipBorder": {
			"type": "string"
		},
		"customChipBorder": {
			"type": "string"
		}
	},
	"style": "file:../woocommerce/product-filter-removable-chips-style.css"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/removable-chips/edit.tsx
/**
 * External dependencies
 */
import { __, sprintf } from '@wordpress/i18n';
import clsx from 'clsx';
import { Icon, closeSmall, arrowRight, arrowDown } from '@wordpress/icons';
import { Label } from '@woocommerce/blocks-components';
import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
import { getBlockSupport } from '@wordpress/blocks';
import {
	InspectorControls,
	useBlockProps,
	useInnerBlocksProps,
	BlockControls,
	withColors,
	// @ts-expect-error - no types.
	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
	// @ts-expect-error - no types.
	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
} from '@wordpress/block-editor';

/**
 * Internal dependencies
 */
import { EditProps } from './types';
import { getColorClasses, getColorVars } from './utils';

const Edit = ( props: EditProps ): JSX.Element => {
	const colorGradientSettings = useMultipleOriginColorsAndGradients();
	const {
		name,
		context,
		clientId,
		attributes,
		setAttributes,
		chipText,
		setChipText,
		chipBackground,
		setChipBackground,
		chipBorder,
		setChipBorder,
	} = props;
	const { customChipText, customChipBackground, customChipBorder, layout } =
		attributes;
	const { filterData } = context;
	const { items } = filterData;

	// Extract attributes from block layout
	const layoutBlockSupport = getBlockSupport( name, 'layout' );
	const defaultBlockLayout = layoutBlockSupport?.default;
	const usedLayout = layout || defaultBlockLayout || {};

	const blockProps = useBlockProps( {
		className: clsx( 'wc-block-product-filter-removable-chips', {
			...getColorClasses( attributes ),
		} ),
		style: getColorVars( attributes ),
	} );

	const innerBlocksProps = useInnerBlocksProps( blockProps, {} );
	const removeText = ( label: string ): string => {
		return sprintf(
			/* translators: %s attribute value used in the filter. For example: yellow, green, small, large. */
			__( 'Remove %s filter', 'woocommerce' ),
			label
		);
	};

	return (

			<BlockControls>
				<ToolbarGroup>
					<ToolbarButton
						icon={ arrowRight }
						label={ __( 'Horizontal', 'woocommerce' ) }
						onClick={ () =>
							setAttributes( {
								layout: {
									...usedLayout,
									orientation: 'horizontal',
								},
							} )
						}
						isPressed={
							usedLayout.orientation === 'horizontal' ||
							! usedLayout.orientation
						}
					/>
					<ToolbarButton
						icon={ arrowDown }
						label={ __( 'Vertical', 'woocommerce' ) }
						onClick={ () =>
							setAttributes( {
								layout: {
									...usedLayout,
									orientation: 'vertical',
								},
							} )
						}
						isPressed={ usedLayout.orientation === 'vertical' }
					/>
				</ToolbarGroup>
			</BlockControls>

				{ items?.map( ( item, index ) => (

							{ item.type + ': ' + item.label }

						<button className="wc-block-product-filter-removable-chips__remove">
							<Icon
								className="wc-block-product-filter-removable-chips__remove-icon"
								icon={ closeSmall }
								size={ 25 }
							/>

						</button>

				) ) }

			<InspectorControls group="color">
				{ colorGradientSettings.hasColorsOrGradients && (
					<ColorGradientSettingsDropdown
						__experimentalIsRenderedInSidebar
						settings={ [
							{
								label: __( 'Chip Text', 'woocommerce' ),
								colorValue: chipText.color || customChipText,
								onColorChange: ( colorValue: string ) => {
									setChipText( colorValue );
									setAttributes( {
										customChipText: colorValue,
									} );
								},
								resetAllFilter: () => {
									setChipText( '' );
									setAttributes( {
										customChipText: '',
									} );
								},
							},
							{
								label: __( 'Chip Border', 'woocommerce' ),
								colorValue:
									chipBorder.color || customChipBorder,
								onColorChange: ( colorValue: string ) => {
									setChipBorder( colorValue );
									setAttributes( {
										customChipBorder: colorValue,
									} );
								},
								resetAllFilter: () => {
									setChipBorder( '' );
									setAttributes( {
										customChipBorder: '',
									} );
								},
							},
							{
								label: __( 'Chip Background', 'woocommerce' ),
								colorValue:
									chipBackground.color ||
									customChipBackground,
								onColorChange: ( colorValue: string ) => {
									setChipBackground( colorValue );
									setAttributes( {
										customChipBackground: colorValue,
									} );
								},
								resetAllFilter: () => {
									setChipBackground( '' );
									setAttributes( {
										customChipBackground: '',
									} );
								},
							},
						] }
						panelId={ clientId }
						{ ...colorGradientSettings }
					/>
				) }
			</InspectorControls>

	);
};

export default withColors( {
	chipText: 'chip-text',
	chipBorder: 'chip-border',
	chipBackground: 'chip-background',
} )( Edit );

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

/**
 * Internal dependencies
 */
import { BlockAttributes } from './types';
import { getColorClasses, getColorVars } from './utils';

const Save = ( {
	attributes,
	style,
}: {
	attributes: BlockAttributes;
	style: Record< string, string >;
} ) => {
	const blockProps = useBlockProps.save( {
		className: clsx(
			'wc-block-product-filter-removable-chips',
			attributes.className,
			getColorClasses( attributes )
		),
		style: {
			...style,
			...getColorVars( attributes ),
		},
	} );

	return
;
};

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] Create a WordPress block enabling dynamic comment display with customizable tag and legacy settings for enhanced visual presentation.

[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] Develop a block for Display content in multiple columns, with blocks added to each column. that allows users to configure: vertical alignment, is stacked on mobile, template lock

[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/columns/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/columns",
	"title": "Columns",
	"category": "design",
	"allowedBlocks": [ "core/column" ],
	"description": "Display content in multiple columns, with blocks added to each column.",
	"textdomain": "default",
	"attributes": {
		"verticalAlignment": {
			"type": "string"
		},
		"isStackedOnMobile": {
			"type": "boolean",
			"default": true
		},
		"templateLock": {
			"type": [ "string", "boolean" ],
			"enum": [ "all", "insert", "contentOnly", false ]
		}
	},
	"supports": {
		"anchor": true,
		"align": [ "wide", "full" ],
		"html": false,
		"color": {
			"gradients": true,
			"link": true,
			"heading": true,
			"button": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"spacing": {
			"blockGap": {
				"__experimentalDefault": "2em",
				"sides": [ "horizontal", "vertical" ]
			},
			"margin": [ "top", "bottom" ],
			"padding": true,
			"__experimentalDefaultControls": {
				"padding": true,
				"blockGap": true
			}
		},
		"layout": {
			"allowSwitching": false,
			"allowInheriting": false,
			"allowEditing": false,
			"default": {
				"type": "flex",
				"flexWrap": "nowrap"
			}
		},
		"__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
			}
		},
		"interactivity": {
			"clientNavigation": true
		},
		"shadow": true
	},
	"editorStyle": "wp-block-columns-editor",
	"style": "wp-block-columns"
}

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

/**
 * 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 variations from './variations';
import transforms from './transforms';

const { name } = metadata;

export { metadata, name };

export const settings = {
	icon,
	variations,
	example: {
		viewportWidth: 782, // Columns collapse "@media (max-width: 781px)".
		innerBlocks: [
			{
				name: 'core/column',
				innerBlocks: [
					{
						name: 'core/paragraph',
						attributes: {
							/* translators: example text. */
							content: __(
								'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et eros eu felis.'
							),
						},
					},
					{
						name: 'core/image',
						attributes: {
							url: 'https://s.w.org/images/core/5.3/Windbuchencom.jpg',
						},
					},
					{
						name: 'core/paragraph',
						attributes: {
							/* translators: example text. */
							content: __(
								'Suspendisse commodo neque lacus, a dictum orci interdum et.'
							),
						},
					},
				],
			},
			{
				name: 'core/column',
				innerBlocks: [
					{
						name: 'core/paragraph',
						attributes: {
							/* translators: example text. */
							content: __(
								'Etiam et egestas lorem. Vivamus sagittis sit amet dolor quis lobortis. Integer sed fermentum arcu, id vulputate lacus. Etiam fermentum sem eu quam hendrerit.'
							),
						},
					},
					{
						name: 'core/paragraph',
						attributes: {
							/* translators: example text. */
							content: __(
								'Nam risus massa, ullamcorper consectetur eros fermentum, porta aliquet ligula. Sed vel mauris nec enim.'
							),
						},
					},
				],
			},
		],
	},
	deprecated,
	edit,
	save,
	transforms,
};

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

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

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

export default function save( { attributes } ) {
	const { isStackedOnMobile, verticalAlignment } = attributes;

	const className = clsx( {
		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
	} );

	const blockProps = useBlockProps.save( { className } );
	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 woocommerce block with customizable is preview, lock, width

[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/mini-cart/mini-cart-contents/block.json
{
	"name": "woocommerce/mini-cart-contents",
	"version": "1.0.0",
	"title": "Mini-Cart Contents",
	"description": "Display a Mini-Cart widget.",
	"category": "woocommerce",
	"supports": {
		"align": false,
		"html": false,
		"multiple": false,
		"reusable": false,
		"inserter": false,
		"color": {
			"text": true,
			"background": true,
			"link": true
		},
		"lock": false,
		"__experimentalBorder": {
			"color": true,
			"width": true
		}
	},
	"attributes": {
		"isPreview": {
			"type": "boolean",
			"default": false
		},
		"lock": {
			"type": "object",
			"default": {
				"remove": true,
				"move": true
			}
		},
		"width": {
			"type": "string",
			"default": "480px"
		}
	},
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx
/* eslint-disable jsdoc/check-alignment */
/**
 * External dependencies
 */
import {
	useBlockProps,
	InnerBlocks,
	InspectorControls,
} from '@wordpress/block-editor';
import { EditorProvider } from '@woocommerce/base-context';
import type { TemplateArray } from '@wordpress/blocks';
import type { FocusEvent, ReactElement } from 'react';
import { __ } from '@wordpress/i18n';
import {
	PanelBody,
	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
	__experimentalUnitControl as UnitControl,
} from '@wordpress/components';

/**
 * Internal dependencies
 */
import { useForcedLayout } from '../../cart-checkout-shared';
import { MiniCartInnerBlocksStyle } from './inner-blocks-style';
import './editor.scss';
import { attributes as defaultAttributes } from './attributes';
import { useThemeColors } from '../../../shared/hooks/use-theme-colors';

// Array of allowed block names.
const ALLOWED_BLOCKS = [
	'woocommerce/filled-mini-cart-contents-block',
	'woocommerce/empty-mini-cart-contents-block',
];
const MIN_WIDTH = 300;

interface Props {
	clientId: string;
	attributes: Record< string, unknown >;
	setAttributes: ( attributes: Record< string, unknown > ) => void;
}

const Edit = ( {
	clientId,
	attributes,
	setAttributes,
}: Props ): ReactElement => {
	const { currentView, width } = attributes;

	const blockProps = useBlockProps();

	const defaultTemplate = [
		[ 'woocommerce/filled-mini-cart-contents-block', {}, [] ],
		[ 'woocommerce/empty-mini-cart-contents-block', {}, [] ],
	] as TemplateArray;

	useForcedLayout( {
		clientId,
		registeredBlocks: ALLOWED_BLOCKS,
		defaultTemplate,
	} );

	// Apply the Mini-Cart Contents block base styles based on Site Editor's background and text colors.
	// We need to set `div` in the selector so it has more specificity than the CSS.
	useThemeColors(
		'mini-cart-contents',
		( { editorBackgroundColor, editorColor } ) => `
				div:where(.wp-block-woocommerce-mini-cart-contents) {
					background-color: ${ editorBackgroundColor };
					color: ${ editorColor };
				}
			`
	);

	return (
		<>
			<InspectorControls key="inspector">
				<PanelBody
					title={ __( 'Dimensions', 'woocommerce' ) }
					initialOpen
				>
					<UnitControl
						__next40pxDefaultSize
						onChange={ ( value ) => {
							setAttributes( { width: value } );
						} }
						onBlur={ ( e: FocusEvent< HTMLInputElement > ) => {
							if ( e.target.value === '' ) {
								setAttributes( {
									width: defaultAttributes.width.default,
								} );
							} else if ( Number( e.target.value ) < MIN_WIDTH ) {
								setAttributes( {
									width: MIN_WIDTH + 'px',
								} );
							}
						} }
						value={ width }
						units={ [
							{
								value: 'px',
								label: 'px',
								default: defaultAttributes.width.default,
							},
						] }
					/>
				</PanelBody>
			</InspectorControls>

					<EditorProvider currentView={ currentView }>
						<InnerBlocks
							allowedBlocks={ ALLOWED_BLOCKS }
							template={ defaultTemplate }
							templateLock={ false }
						/>
					</EditorProvider>
					<MiniCartInnerBlocksStyle style={ blockProps.style } />

		</>
	);
};

export default Edit;

export const Save = (): JSX.Element => {
	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] Craft a configurable block for displaying taxonomy term names, offering users control over text positioning, heading hierarchy, and link integration.

[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/term-name/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/term-name",
	"title": "Term Name",
	"category": "theme",
	"description": "Displays the name of a taxonomy term.",
	"keywords": [ "term title" ],
	"textdomain": "default",
	"usesContext": [ "termId", "taxonomy" ],
	"attributes": {
		"textAlign": {
			"type": "string"
		},
		"level": {
			"type": "number",
			"default": 0
		},
		"isLink": {
			"type": "boolean",
			"default": false
		},
		"levelOptions": {
			"type": "array"
		}
	},
	"supports": {
		"align": [ "wide", "full" ],
		"html": false,
		"color": {
			"gradients": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true,
				"link": true
			}
		},
		"spacing": {
			"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": {
				"color": true,
				"width": true,
				"style": true
			}
		}
	},
	"style": "wp-block-term-name"
}

// File: packages/block-library/src/term-name/index.js
/**
 * WordPress dependencies
 */
import { termName 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,
	example: {},
	edit,
};

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 Gutenberg block to showcase taxonomy terms, incorporating a dropdown view, hierarchical display, and additional configurable options for comprehensive term representation.

[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/categories/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/categories",
	"title": "Terms List",
	"category": "widgets",
	"description": "Display a list of all terms of a given taxonomy.",
	"keywords": [ "categories" ],
	"textdomain": "default",
	"attributes": {
		"taxonomy": {
			"type": "string",
			"default": "category"
		},
		"displayAsDropdown": {
			"type": "boolean",
			"default": false
		},
		"showHierarchy": {
			"type": "boolean",
			"default": false
		},
		"showPostCounts": {
			"type": "boolean",
			"default": false
		},
		"showOnlyTopLevel": {
			"type": "boolean",
			"default": false
		},
		"showEmpty": {
			"type": "boolean",
			"default": false
		},
		"label": {
			"type": "string",
			"role": "content"
		},
		"showLabel": {
			"type": "boolean",
			"default": true
		}
	},
	"usesContext": [ "enhancedPagination" ],
	"supports": {
		"align": true,
		"html": false,
		"spacing": {
			"margin": true,
			"padding": true,
			"__experimentalDefaultControls": {
				"margin": false,
				"padding": false
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"color": {
			"gradients": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true,
				"link": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true,
			"__experimentalDefaultControls": {
				"radius": true,
				"color": true,
				"width": true,
				"style": true
			}
		}
	},
	"editorStyle": "wp-block-categories-editor",
	"style": "wp-block-categories"
}

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

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

const { name } = metadata;

export { metadata, name };

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

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] Build a Gutenberg block that Your site doesn’t include support for this block. with these attributes: original name, original undelimited content, original 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/missing/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/missing",
	"title": "Unsupported",
	"category": "text",
	"description": "Your site doesn’t include support for this block.",
	"textdomain": "default",
	"attributes": {
		"originalName": {
			"type": "string"
		},
		"originalUndelimitedContent": {
			"type": "string"
		},
		"originalContent": {
			"type": "string",
			"source": "raw"
		}
	},
	"supports": {
		"className": false,
		"customClassName": false,
		"inserter": false,
		"html": false,
		"lock": false,
		"reusable": false,
		"renaming": false,
		"visibility": false,
		"interactivity": {
			"clientNavigation": true
		}
	}
}

// File: packages/block-library/src/missing/index.js
/**
 * WordPress dependencies
 */
import { getBlockType } from '@wordpress/blocks';

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

const { name } = metadata;

export { metadata, name };

export const settings = {
	name,
	__experimentalLabel( attributes, { context } ) {
		if ( context === 'accessibility' ) {
			const { originalName } = attributes;

			const originalBlockType = originalName
				? getBlockType( originalName )
				: undefined;

			if ( originalBlockType ) {
				return originalBlockType.settings.title || originalName;
			}

			return '';
		}
	},
	edit,
	save,
};

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

// File: packages/block-library/src/missing/save.js
/**
 * WordPress dependencies
 */
import { RawHTML } from '@wordpress/element';

export default function save( { attributes } ) {
	// Preserve the missing block's content.
	return <RawHTML>{ attributes.originalContent }</RawHTML>;
}


[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 custom Gutenberg block enabling users to choose between shipping and local pickup, incorporating a locking mechanism for the selection process.

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.json
{
	"name": "woocommerce/checkout-shipping-method-block",
	"version": "1.0.0",
	"title": "Delivery",
	"description": "Select between shipping or local pickup.",
	"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/checkout-fields-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-shipping-method-block/edit.tsx
/* eslint-disable @wordpress/no-unsafe-wp-apis */
/**
 * External dependencies
 */
import clsx from 'clsx';
import { __ } from '@wordpress/i18n';
import { PanelBody, ToggleControl } from '@wordpress/components';
import { Icon, store, shipping } from '@wordpress/icons';
import { ADMIN_URL, getSetting } from '@woocommerce/settings';
import { LOCAL_PICKUP_ENABLED } from '@woocommerce/block-settings';
import {
	InspectorControls,
	useBlockProps,
	RichText,
} from '@wordpress/block-editor';
import { Button } from '@ariakit/react';
import { useShippingData } from '@woocommerce/base-context/hooks';
import { innerBlockAreas } from '@woocommerce/blocks-checkout';
import { useDispatch, useSelect } from '@wordpress/data';
import { checkoutStore as checkoutStoreDescriptor } from '@woocommerce/block-data';
import ExternalLinkCard from '@woocommerce/editor-components/external-link-card';
import { useEffect } from '@wordpress/element';

/**
 * Internal dependencies
 */
import {
	FormStepBlock,
	AdditionalFields,
	AdditionalFieldsContent,
} from '../../form-step';
import { RatePrice, getLocalPickupPrices, getShippingPrices } from './shared';
import type { minMaxPrices } from './shared';
import './style.scss';
import { defaultShippingText, defaultLocalPickupText } from './constants';

const LocalPickupSelector = ( {
	checked,
	rate,
	showPrice,
	showIcon,
	toggleText,
	setAttributes,
	onClick,
}: {
	checked: string;
	rate: minMaxPrices;
	showPrice: boolean;
	showIcon: boolean;
	toggleText: string;
	onClick: () => void;
	setAttributes: ( attributes: Record< string, unknown > ) => void;
} ) => {
	return (
		<Button
			render={
 }
			className={ clsx( 'wc-block-checkout__shipping-method-option', {
				'wc-block-checkout__shipping-method-option--selected':
					checked === 'pickup',
			} ) }
			onClick={ onClick }
		>
			{ showIcon === true && (
				<Icon
					icon={ store }
					size={ 28 }
					className="wc-block-checkout__shipping-method-option-icon"
				/>
			) }
			<RichText
				value={ toggleText }
				placeholder={ defaultLocalPickupText }
				tagName="span"
				className="wc-block-checkout__shipping-method-option-title"
				onChange={ ( value ) =>
					setAttributes( { localPickupText: value } )
				}
				__unstableDisableFormats
				preserveWhiteSpace
			/>
			{ showPrice === true && (
				<RatePrice minRate={ rate.min } maxRate={ rate.max } />
			) }
		</Button>
	);
};

const ShippingSelector = ( {
	checked,
	rate,
	showPrice,
	showIcon,
	toggleText,
	setAttributes,
	onClick,
}: {
	checked: string;
	rate: minMaxPrices;
	showPrice: boolean;
	showIcon: boolean;
	toggleText: string;
	setAttributes: ( attributes: Record< string, unknown > ) => void;
	onClick: () => void;
} ) => {
	const Price =
		rate.min === undefined ? (

				{ __( 'calculated with an address', 'woocommerce' ) }

		) : (
			<RatePrice minRate={ rate.min } maxRate={ rate.max } />
		);

	return (
		<Button
			render={
 }
			className={ clsx( 'wc-block-checkout__shipping-method-option', {
				'wc-block-checkout__shipping-method-option--selected':
					checked === 'shipping',
			} ) }
			onClick={ onClick }
		>
			{ showIcon === true && (
				<Icon
					icon={ shipping }
					size={ 28 }
					className="wc-block-checkout__shipping-method-option-icon"
				/>
			) }
			<RichText
				value={ toggleText }
				placeholder={ defaultShippingText }
				tagName="span"
				className="wc-block-checkout__shipping-method-option-title"
				onChange={ ( value ) =>
					setAttributes( { shippingText: value } )
				}
				__unstableDisableFormats
				preserveWhiteSpace
			/>
			{ showPrice === true && Price }
		</Button>
	);
};

export const Edit = ( {
	attributes,
	setAttributes,
}: {
	attributes: {
		title: string;
		description: string;
		showStepNumber: boolean;
		allowCreateAccount: boolean;
		localPickupText: string;
		shippingText: string;
		showPrice: boolean;
		showIcon: boolean;
		className: string;
	};
	setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): JSX.Element | null => {
	useEffect( () => {
		const localPickupTitle = getSetting< string >(
			'localPickupText',
			attributes.localPickupText
		);
		setAttributes( { localPickupText: localPickupTitle } );
		// Disable the exhaustive deps rule because we only want to run this on first mount to set the attribute, not
		// each time the attribute changes.
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [ setAttributes ] );
	const { setPrefersCollection } = useDispatch( checkoutStoreDescriptor );
	const { prefersCollection } = useSelect( ( select ) => {
		const checkoutStore = select( checkoutStoreDescriptor );
		return {
			prefersCollection: checkoutStore.prefersCollection(),
		};
	} );
	const { showPrice, showIcon, className, localPickupText, shippingText } =
		attributes;
	const {
		shippingRates,
		needsShipping,
		hasCalculatedShipping,
		isCollectable,
	} = useShippingData();

	if (
		! needsShipping ||
		! hasCalculatedShipping ||
		! shippingRates ||
		! isCollectable ||
		! LOCAL_PICKUP_ENABLED
	) {
		return null;
	}

	const changeView = ( method: string ) => {
		if ( method === 'pickup' ) {
			setPrefersCollection( true );
		} else {
			setPrefersCollection( false );
		}
	};

	return (
		<FormStepBlock
			attributes={ attributes }
			setAttributes={ setAttributes }
			className={ clsx(
				'wc-block-checkout__shipping-method',
				className
			) }
		>
			<InspectorControls>
				<PanelBody title={ __( 'Appearance', 'woocommerce' ) }>

						{ __(
							'Choose how this block is displayed to your customers.',
							'woocommerce'
						) }

					<ToggleControl
						__nextHasNoMarginBottom
						label={ __( 'Show icon', 'woocommerce' ) }
						checked={ showIcon }
						onChange={ () =>
							setAttributes( {
								showIcon: ! showIcon,
							} )
						}
					/>
					<ToggleControl
						__nextHasNoMarginBottom
						label={ __( 'Show costs', 'woocommerce' ) }
						checked={ showPrice }
						onChange={ () =>
							setAttributes( {
								showPrice: ! showPrice,
							} )
						}
					/>
				</PanelBody>
				<PanelBody title={ __( 'Shipping Methods', 'woocommerce' ) }>

						{ __(
							'Methods can be made managed in your store settings.',
							'woocommerce'
						) }

					<ExternalLinkCard
						key={ 'shipping_methods' }
						href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=shipping` }
						title={ __( 'Shipping', 'woocommerce' ) }
						description={ __(
							'Manage your shipping zones, methods, and rates.',
							'woocommerce'
						) }
					/>
					<ExternalLinkCard
						key={ 'pickup_location' }
						href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=shipping&section=pickup_location` }
						title={ __( 'Pickup', 'woocommerce' ) }
						description={ __(
							'Allow customers to choose a local pickup location during checkout.',
							'woocommerce'
						) }
					/>
				</PanelBody>
			</InspectorControls>

				<ShippingSelector
					checked={ prefersCollection ? 'pickup' : 'shipping' }
					rate={ getShippingPrices(
						shippingRates[ 0 ]?.shipping_rates
					) }
					onClick={ () => {
						changeView( 'shipping' );
					} }
					showPrice={ showPrice }
					showIcon={ showIcon }
					setAttributes={ setAttributes }
					toggleText={ shippingText }
				/>
				<LocalPickupSelector
					checked={ prefersCollection ? 'pickup' : 'shipping' }
					rate={ getLocalPickupPrices(
						shippingRates[ 0 ]?.shipping_rates
					) }
					showPrice={ showPrice }
					onClick={ () => {
						changeView( 'pickup' );
					} }
					showIcon={ showIcon }
					setAttributes={ setAttributes }
					toggleText={ localPickupText }
				/>

			<AdditionalFields block={ innerBlockAreas.SHIPPING_METHOD } />
		</FormStepBlock>
	);
};

export const Save = (): JSX.Element => {
	return (

			<AdditionalFieldsContent />

	);
};


[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 Gutenberg block to enable seamless e-commerce and fundraising functionality directly within your WordPress site.

[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/payments-intro/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/payments-intro",
	"title": "Payments",
	"description": "Sell products and services or receive donations on your website.",
	"keywords": [ "earn", "monetize", "paid", "pay", "money", "checkout" ],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "monetize",
	"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'><path d='M3.25 12a8.75 8.75 0 1117.5 0 8.75 8.75 0 01-17.5 0zM12 4.75a7.25 7.25 0 100 14.5 7.25 7.25 0 000-14.5zm-1.338 4.877c-.314.22-.412.452-.412.623 0 .171.098.403.412.623.312.218.783.377 1.338.377.825 0 1.605.233 2.198.648.59.414 1.052 1.057 1.052 1.852 0 .795-.461 1.438-1.052 1.852-.41.286-.907.486-1.448.582v.316a.75.75 0 01-1.5 0v-.316a3.64 3.64 0 01-1.448-.582c-.59-.414-1.052-1.057-1.052-1.852a.75.75 0 011.5 0c0 .171.098.403.412.623.312.218.783.377 1.338.377s1.026-.159 1.338-.377c.314-.22.412-.452.412-.623 0-.171-.098-.403-.412-.623-.312-.218-.783-.377-1.338-.377-.825 0-1.605-.233-2.198-.648-.59-.414-1.052-1.057-1.052-1.852 0-.795.461-1.438 1.052-1.852a3.64 3.64 0 011.448-.582V7.5a.75.75 0 011.5 0v.316c.54.096 1.039.296 1.448.582.59.414 1.052 1.057 1.052 1.852a.75.75 0 01-1.5 0c0-.171-.098-.403-.412-.623-.312-.218-.783-.377-1.338-.377s-1.026.159-1.338.377z'></path></svg>",
	"supports": {
		"alignWide": false,
		"className": true,
		"customClassName": false,
		"html": false,
		"reusable": false
	}
}

// File: projects/plugins/jetpack/extensions/blocks/payments-intro/edit.js
import { InnerBlocks, store as blockEditorStore, useBlockProps } from '@wordpress/block-editor';
import { cloneBlock, createBlock, getBlockType, registerBlockVariation } from '@wordpress/blocks';
import { Placeholder } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import { useEffect, useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import ConnectBanner from '../../shared/components/connect-banner';
import useIsUserConnected from '../../shared/use-is-user-connected';
import PaymentsIntroBlockPicker from './block-picker';
import PaymentsIntroPatternPicker from './pattern-picker';
import defaultVariations from './variations';

export default function JetpackPaymentsIntroEdit( { name, clientId } ) {
	const patternFilter = pattern => pattern.categories?.includes( 'shop' );

	const blockProps = useBlockProps();
	const { blockType, hasInnerBlocks, hasPatterns, settings } = useSelect( select => {
		const { getBlocks, __experimentalGetAllowedPatterns, getSettings } = select( blockEditorStore );

		return {
			settings: getSettings(),
			blockType: getBlockType( name ),
			hasInnerBlocks: getBlocks( clientId )?.length > 0,
			hasPatterns: __experimentalGetAllowedPatterns?.().filter( patternFilter ).length > 0,
		};
	} );

	const isUserConnected = useIsUserConnected();

	const { replaceBlock, selectBlock, updateSettings } = useDispatch( blockEditorStore );

	const maybeMakeBlockVisible = useCallback(
		blockName => {
			const isBlockAllowed =
				settings?.allowedBlockTypes === true || settings?.allowedBlockTypes?.includes( blockName );
			if ( ! isBlockAllowed ) {
				// Add the block to the allowed block list before rendering
				updateSettings( {
					...settings,
					allowedBlockTypes: [ ...settings.allowedBlockTypes, blockName ],
				} );
			}
		},
		[ settings, updateSettings ]
	);

	const setVariation = variation => {
		const blockName = variation.name;

		maybeMakeBlockVisible( blockName );
		replaceBlock( clientId, createBlock( blockName ) );
		selectBlock( clientId );
	};

	const usableVariations = defaultVariations.filter( variation => getBlockType( variation.name ) );

	useEffect( () => {
		// Populate default variation on older versions of WP or GB that don't support variations.
		if ( ! hasInnerBlocks && ! registerBlockVariation ) {
			setVariation( usableVariations[ 0 ] );
		}
	} );

	const displayVariations = usableVariations.length && registerBlockVariation;

	let instructions = __( "Please select which kind of payment you'd like to add.", 'jetpack' );
	if ( hasPatterns ) {
		instructions = __( 'Start by choosing one of our suggested layout patterns.', 'jetpack' );
	}

	let content;

	if ( ! isUserConnected ) {
		content = (
			<ConnectBanner
				block="Payments"
				explanation={ __(
					'Connect your WordPress.com account to start using payments blocks.',
					'jetpack'
				) }
			/>
		);
	} else if ( ! hasInnerBlocks && displayVariations ) {
		content = (
			<Placeholder
				icon={ blockType?.icon?.src }
				label={ blockType?.title }
				instructions={ instructions }
			>
				{ hasPatterns && (
					<>
						<PaymentsIntroPatternPicker
							onBlockPatternSelect={ blocks => replaceBlock( clientId, blocks.map( cloneBlock ) ) }
							patternFilter={ patternFilter }
						/>

{ __( 'Or use one of our blocks to create your own.', 'jetpack' ) }

					</>
				) }
				<PaymentsIntroBlockPicker
					label={ __( 'Payment Block list', 'jetpack' ) }
					variations={ usableVariations }
					onSelect={ ( nextVariation = usableVariations[ 0 ] ) => {
						setVariation( nextVariation );
					} }
				/>
			</Placeholder>
		);
	} else {
		content = <InnerBlocks />;
	}

	return
{ 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] Create a widgets block with customizable id, label, title, and 2 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: packages/block-library/src/page-list-item/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/page-list-item",
	"title": "Page List Item",
	"category": "widgets",
	"parent": [ "core/page-list" ],
	"description": "Displays a page inside a list of all pages.",
	"keywords": [ "page", "menu", "navigation" ],
	"textdomain": "default",
	"attributes": {
		"id": {
			"type": "number"
		},
		"label": {
			"type": "string"
		},
		"title": {
			"type": "string"
		},
		"link": {
			"type": "string"
		},
		"hasChildren": {
			"type": "boolean"
		}
	},
	"usesContext": [
		"textColor",
		"customTextColor",
		"backgroundColor",
		"customBackgroundColor",
		"overlayTextColor",
		"customOverlayTextColor",
		"overlayBackgroundColor",
		"customOverlayBackgroundColor",
		"fontSize",
		"customFontSize",
		"showSubmenuIcon",
		"style",
		"openSubmenusOnClick"
	],
	"supports": {
		"reusable": false,
		"html": false,
		"lock": false,
		"inserter": false,
		"__experimentalToolbar": false,
		"interactivity": {
			"clientNavigation": true
		}
	},
	"editorStyle": "wp-block-page-list-editor",
	"style": "wp-block-page-list"
}

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

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

const { name } = metadata;

export { metadata, name };

export const settings = {
	__experimentalLabel: ( { label } ) => label,
	icon,
	example: {},
	edit,
};

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