[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 Collect one-time, monthly, or annually recurring donations. that allows users to configure: currency, one time donation, monthly donation, and 5 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: projects/plugins/jetpack/extensions/blocks/donations/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/donations",
	"title": "Donations Form",
	"description": "Collect one-time, monthly, or annually recurring donations.",
	"keywords": [
		"charity",
		"contribution",
		"credit card",
		"debit card",
		"donate",
		"earn",
		"monetize",
		"ecommerce",
		"fundraising",
		"fundraiser",
		"gofundme",
		"money",
		"nonprofit",
		"non-profit",
		"paid",
		"patreon",
		"pay",
		"payments",
		"recurring",
		"stripe",
		"sponsor",
		"square",
		"tipping",
		"venmo"
	],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "monetize",
	"icon": "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M16.5 4.5c2.206 0 4 1.794 4 4 0 4.67-5.543 8.94-8.5 11.023C9.043 17.44 3.5 13.17 3.5 8.5c0-2.206 1.794-4 4-4 1.298 0 2.522.638 3.273 1.706L12 7.953l1.227-1.746c.75-1.07 1.975-1.707 3.273-1.707m0-1.5c-1.862 0-3.505.928-4.5 2.344C11.005 3.928 9.362 3 7.5 3 4.462 3 2 5.462 2 8.5c0 5.72 6.5 10.438 10 12.85 3.5-2.412 10-7.13 10-12.85C22 5.462 19.538 3 16.5 3z' /></svg>",
	"supports": { "html": false },
	"attributes": {
		"currency": {
			"type": "string",
			"default": ""
		},
		"oneTimeDonation": {
			"type": "object",
			"default": {
				"show": true,
				"planId": null,
				"amounts": [ 5, 15, 100 ]
			}
		},
		"monthlyDonation": {
			"type": "object",
			"default": {
				"show": true,
				"planId": null,
				"amounts": [ 5, 15, 100 ]
			}
		},
		"annualDonation": {
			"type": "object",
			"default": {
				"show": true,
				"planId": null,
				"amounts": [ 5, 15, 100 ]
			}
		},
		"showCustomAmount": {
			"type": "boolean",
			"default": true
		},
		"chooseAmountText": {
			"type": "string"
		},
		"customAmountText": {
			"type": "string"
		},
		"fallbackLinkUrl": {
			"type": "string"
		}
	},
	"example": {}
}

// File: projects/plugins/jetpack/extensions/blocks/donations/edit.js
import { Spinner } from '@automattic/jetpack-components';
import { useBlockProps } from '@wordpress/block-editor';
import { useDispatch, useSelect } from '@wordpress/data';
import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import ConnectBanner from '../../shared/components/connect-banner';
import { StripeNudge } from '../../shared/components/stripe-nudge';
import { SUPPORTED_CURRENCIES } from '../../shared/currencies';
import getConnectUrl from '../../shared/get-connect-url';
import useIsUserConnected from '../../shared/use-is-user-connected';
import { store as membershipProductsStore } from '../../store/membership-products';
import { STORE_NAME as MEMBERSHIPS_PRODUCTS_STORE } from '../../store/membership-products/constants';
import fetchDefaultProducts from './fetch-default-products';
import fetchStatus from './fetch-status';
import FirstTimeModal from './first-time-modal';
import './first-time-modal.scss';
import LoadingError from './loading-error';
import Tabs from './tabs';

const Edit = props => {
	const { attributes, setAttributes } = props;
	const { currency } = attributes;

	const blockProps = useBlockProps();
	const [ loadingError, setLoadingError ] = useState( '' );
	const [ products, setProducts ] = useState( [] );
	const [ showFirstTimeModal, setShowFirstTimeModal ] = useState( false );
	const isUserConnected = useIsUserConnected();

	const { lockPostSaving, unlockPostSaving } = useDispatch( 'core/editor' );
	const { getEntityRecord, getCurrentUser } = useSelect( 'core' );
	const { editEntityRecord, saveEditedEntityRecord } = useDispatch( 'core' );
	const post = useSelect( select => select( 'core/editor' ).getCurrentPost(), [] );
	const isPostSavingLocked = useSelect(
		select => select( 'core/editor' ).isPostSavingLocked(),
		[]
	);

	const stripeConnectUrl = useSelect(
		select => select( membershipProductsStore ).getConnectUrl() || '',
		[]
	);

	const { setConnectUrl, setConnectedAccountDefaultCurrency } = useDispatch(
		MEMBERSHIPS_PRODUCTS_STORE
	);

	const stripeDefaultCurrency = useSelect( select =>
		select( MEMBERSHIPS_PRODUCTS_STORE ).getConnectedAccountDefaultCurrency()
	);

	useEffect( () => {
		if ( ! currency && stripeDefaultCurrency && ! isPostSavingLocked ) {
			const uppercasedStripeCurrency = stripeDefaultCurrency.toUpperCase();
			const isCurrencySupported = !! SUPPORTED_CURRENCIES[ uppercasedStripeCurrency ];
			if ( isCurrencySupported ) {
				// If no currency is available, default to the stripe one
				setAttributes( { currency: uppercasedStripeCurrency } );
			} else {
				// We default to USD
				setAttributes( { currency: 'USD' } );
			}
		}
	}, [ currency, stripeDefaultCurrency, isPostSavingLocked, setAttributes ] );

	const apiError = message => {
		setLoadingError( message );
	};

	const hasRequiredProducts = productIdsPerInterval => {
		const intervals = Object.keys( productIdsPerInterval );

		return (
			intervals.includes( 'one-time' ) &&
			intervals.includes( '1 month' ) &&
			intervals.includes( '1 year' )
		);
	};

	//
	// Check if this is the first time using the donations block
	//

	// Add this to preload the user entity
	const currentUser = getCurrentUser();
	useEffect( () => {
		if ( currentUser?.id ) {
			// Ensure the user entity is loaded
			getEntityRecord( 'root', 'user', currentUser.id );
		}
	}, [ currentUser?.id, getEntityRecord ] );

	const hasDismissedDonationWarning =
		currentUser?.meta?.jetpack_donation_warning_dismissed || false;

	// Show the modal if the user has not dismissed the warning
	useEffect( () => {
		if ( currentUser?.id && hasDismissedDonationWarning === false ) {
			setShowFirstTimeModal( true );
		}
	}, [ currentUser, hasDismissedDonationWarning ] );

	useEffect( () => {
		lockPostSaving( 'donations' );

		const filterProducts = productList =>
			productList.reduce(
				( filteredProducts, { id, currency: productCurrency, type, interval } ) => {
					if ( productCurrency === currency && type === 'donation' ) {
						filteredProducts[ interval ] = id;
					}
					return filteredProducts;
				},
				{}
			);

		fetchStatus( 'donation' ).then( result => {
			if ( ( ! result && typeof result !== 'object' ) || result.errors ) {
				unlockPostSaving( 'donations' );
				setLoadingError( __( 'Could not load data from WordPress.com.', 'jetpack' ) );
				return;
			}
			setConnectUrl( getConnectUrl( post.id, result.connect_url ) );
			setConnectedAccountDefaultCurrency(
				result?.connected_account_default_currency?.toUpperCase()
			);

			const filteredProducts = filterProducts( result.products );

			if ( hasRequiredProducts( filteredProducts ) ) {
				setProducts( filteredProducts );
				unlockPostSaving( 'donations' );
				return;
			}

			// Set fake products when there is no connection to Stripe so users can still try the block in the editor.
			if ( result.connect_url ) {
				setProducts( {
					'one-time': -1,
					'1 month': -1,
					'1 year': -1,
				} );
				unlockPostSaving( 'donations' );
				return;
			}

			if ( currency ) {
				// Only create products if we have the correct plan and stripe connection.
				fetchDefaultProducts( currency ).then( defaultProducts => {
					setProducts( filterProducts( defaultProducts ) );
					unlockPostSaving( 'donations' );
				}, apiError );
			}

			unlockPostSaving( 'donations' );
		}, apiError );
	}, [
		lockPostSaving,
		currency,
		post.id,
		setConnectUrl,
		setConnectedAccountDefaultCurrency,
		unlockPostSaving,
	] );

	let content;

	if ( ! isUserConnected ) {
		content = (
			<ConnectBanner
				block="Donations Form"
				explanation={ __( 'Connect your WordPress.com account to enable donations.', 'jetpack' ) }
			/>
		);
	} else if ( loadingError ) {
		content = <LoadingError error={ loadingError } />;
	} else if ( stripeConnectUrl ) {
		// Need to connect Stripe first
		content = <StripeNudge blockName="donations" />;
	} else if ( ! currency ) {
		// Memberships settings are still loading
		content = <Spinner color="black" />;
	} else {
		content = <Tabs { ...props } products={ products } />;
	}

	// When the first time modal is closed, update the user meta to mark the donation warning as dismissed
	const handleModalClose = async () => {
		setShowFirstTimeModal( false );

		if ( ! currentUser?.id ) {
			// eslint-disable-next-line no-console
			console.error( 'Cannot update user meta: User not loaded' );
			return;
		}

		try {
			await editEntityRecord( 'root', 'user', currentUser.id, {
				meta: {
					jetpack_donation_warning_dismissed: true,
				},
			} );
			await saveEditedEntityRecord( 'root', 'user', currentUser.id );
		} catch ( error ) {
			// eslint-disable-next-line no-console
			console.error( 'Failed to update user meta:', error );
		}
	};

	return (

			{ content }
			{ showFirstTimeModal && <FirstTimeModal onClose={ handleModalClose } /> }

	);
};

export default Edit;

// File: projects/plugins/jetpack/extensions/blocks/donations/save.js
import { RichText, useBlockProps } from '@wordpress/block-editor';
import { getDefaultTexts } from './utils';

const DEFAULT_TEXTS = getDefaultTexts();

const Save = ( { attributes } ) => {
	const { fallbackLinkUrl, oneTimeDonation, monthlyDonation, annualDonation } = attributes;

	if (
		! oneTimeDonation ||
		! oneTimeDonation.show ||
		! oneTimeDonation.planId ||
		oneTimeDonation.planId === -1
	) {
		return null;
	}

	const blockProps = useBlockProps.save();

	return (

			<RichText.Content tagName="h4" value={ DEFAULT_TEXTS.oneTimeDonation?.heading } />
			<RichText.Content
				tagName="p"
				value={ oneTimeDonation.extraText ?? DEFAULT_TEXTS.extraText }
			/>
			<RichText.Content
				tagName="a"
				className="jetpack-donations-fallback-link"
				href={ fallbackLinkUrl }
				rel="noopener noreferrer noamphtml"
				target="_blank"
				value={ DEFAULT_TEXTS.oneTimeDonation?.buttonText }
			/>
			{ monthlyDonation.show && (
				<>

					<RichText.Content tagName="h4" value={ DEFAULT_TEXTS.monthlyDonation?.heading } />
					<RichText.Content
						tagName="p"
						value={ monthlyDonation.extraText ?? DEFAULT_TEXTS.extraText }
					/>
					<RichText.Content
						tagName="a"
						className="jetpack-donations-fallback-link"
						href={ fallbackLinkUrl }
						rel="noopener noreferrer noamphtml"
						target="_blank"
						value={ DEFAULT_TEXTS.monthlyDonation?.buttonText }
					/>
				</>
			) }
			{ annualDonation.show && (
				<>

					<RichText.Content tagName="h4" value={ DEFAULT_TEXTS.annualDonation?.heading } />
					<RichText.Content
						tagName="p"
						value={ annualDonation.extraText ?? DEFAULT_TEXTS.extraText }
					/>
					<RichText.Content
						tagName="a"
						className="jetpack-donations-fallback-link"
						href={ fallbackLinkUrl }
						rel="noopener noreferrer noamphtml"
						target="_blank"
						value={ DEFAULT_TEXTS.annualDonation?.buttonText }
					/>
				</>
			) }

	);
};

export default Save;


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

[User] Craft a custom Gutenberg block for showcasing product SKUs, incorporating a product ID selector, descendant product visibility toggle, product picker, and two additional configurable parameters.

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/sku/block.json
{
	"name": "woocommerce/product-sku",
	"title": "Product SKU",
	"description": "Displays the SKU of a product.",
	"category": "woocommerce-product-elements",
	"attributes": {
		"productId": {
			"type": "number",
			"default": 0
		},
		"isDescendantOfAllProducts": {
			"type": "boolean",
			"default": false
		},
		"showProductSelector": {
			"type": "boolean",
			"default": false
		},
		"prefix": {
			"type": "string",
			"default": "SKU:"
		},
		"suffix": {
			"type": "string",
			"default": ""
		}
	},
	"usesContext": [ "query", "queryId", "postId" ],
	"ancestor": [
		"woocommerce/product-meta",
		"woocommerce/all-products",
		"woocommerce/single-product",
		"woocommerce/product-template",
		"core/post-template"
	],
	"supports": {
		"html": false,
		"interactivity": {
			"clientNavigation": true
		},
		"color": {
			"text": true,
			"background": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontWeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true
		},
		"spacing": {
			"margin": true,
			"padding": true
		}
	},
	"keywords": [ "WooCommerce" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/sku/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps } from '@wordpress/block-editor';
import type { BlockEditProps } from '@wordpress/blocks';
import EditProductLink from '@woocommerce/editor-components/edit-product-link';
import { ProductQueryContext as Context } from '@woocommerce/blocks/product-query/types';

/**
 * Internal dependencies
 */
import './editor.scss';
import Block from './block';
import type { Attributes } from './types';
import { useIsDescendentOfSingleProductTemplate } from '../shared/use-is-descendent-of-single-product-template';

const Edit = ( {
	attributes,
	setAttributes,
	context,
}: BlockEditProps< Attributes > & { context: Context } ): JSX.Element => {
	const { style, ...blockProps } = useBlockProps( {
		className:
			'wc-block-components-product-sku wp-block-woocommerce-product-sku',
	} );
	const blockAttrs = {
		...attributes,
		...context,
	};
	const isDescendentOfQueryLoop = Number.isFinite( context.queryId );

	let { isDescendentOfSingleProductTemplate } =
		useIsDescendentOfSingleProductTemplate();

	if ( isDescendentOfQueryLoop ) {
		isDescendentOfSingleProductTemplate = false;
	}

	return (
		<>
			<EditProductLink />
			<div
				{ ...blockProps }
				/**
				 * If block is a descendant of the All Products block, we don't
				 * want to apply style here because it will be applied inside
				 * Block using useColors, useTypography, and useSpacing hooks.
				 */
				style={
					attributes.isDescendantOfAllProducts ? undefined : style
				}
			>
				<Block
					{ ...blockAttrs }
					setAttributes={ setAttributes }
					isDescendentOfSingleProductTemplate={
						isDescendentOfSingleProductTemplate
					}
					isDescendantOfAllProducts={
						attributes.isDescendantOfAllProducts
					}
				/>
			</div>
		</>
	);
};

export default Edit;


[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 using Gutenberg that renders a product's SKU, featuring customizable attributes including product identification, hierarchical product display, selector functionality, and two supplementary options.

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

// File: plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/sku/block.json
{
	"name": "woocommerce/product-sku",
	"title": "Product SKU",
	"description": "Displays the SKU of a product.",
	"category": "woocommerce-product-elements",
	"attributes": {
		"productId": {
			"type": "number",
			"default": 0
		},
		"isDescendantOfAllProducts": {
			"type": "boolean",
			"default": false
		},
		"showProductSelector": {
			"type": "boolean",
			"default": false
		},
		"prefix": {
			"type": "string",
			"default": "SKU:"
		},
		"suffix": {
			"type": "string",
			"default": ""
		}
	},
	"usesContext": [ "query", "queryId", "postId" ],
	"ancestor": [
		"woocommerce/product-meta",
		"woocommerce/all-products",
		"woocommerce/single-product",
		"woocommerce/product-template",
		"core/post-template"
	],
	"supports": {
		"html": false,
		"interactivity": {
			"clientNavigation": true
		},
		"color": {
			"text": true,
			"background": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontWeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true
		},
		"spacing": {
			"margin": true,
			"padding": true
		}
	},
	"keywords": [ "WooCommerce" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/sku/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps } from '@wordpress/block-editor';
import type { BlockEditProps } from '@wordpress/blocks';
import EditProductLink from '@woocommerce/editor-components/edit-product-link';
import { ProductQueryContext as Context } from '@woocommerce/blocks/product-query/types';

/**
 * Internal dependencies
 */
import './editor.scss';
import Block from './block';
import type { Attributes } from './types';
import { useIsDescendentOfSingleProductTemplate } from '../shared/use-is-descendent-of-single-product-template';

const Edit = ( {
	attributes,
	setAttributes,
	context,
}: BlockEditProps< Attributes > & { context: Context } ): JSX.Element => {
	const { style, ...blockProps } = useBlockProps( {
		className:
			'wc-block-components-product-sku wp-block-woocommerce-product-sku',
	} );
	const blockAttrs = {
		...attributes,
		...context,
	};
	const isDescendentOfQueryLoop = Number.isFinite( context.queryId );

	let { isDescendentOfSingleProductTemplate } =
		useIsDescendentOfSingleProductTemplate();

	if ( isDescendentOfQueryLoop ) {
		isDescendentOfSingleProductTemplate = false;
	}

	return (
		<>
			<EditProductLink />
			<div
				{ ...blockProps }
				/**
				 * If block is a descendant of the All Products block, we don't
				 * want to apply style here because it will be applied inside
				 * Block using useColors, useTypography, and useSpacing hooks.
				 */
				style={
					attributes.isDescendantOfAllProducts ? undefined : style
				}
			>
				<Block
					{ ...blockAttrs }
					setAttributes={ setAttributes }
					isDescendentOfSingleProductTemplate={
						isDescendentOfSingleProductTemplate
					}
					isDescendantOfAllProducts={
						attributes.isDescendantOfAllProducts
					}
				/>
			</div>
		</>
	);
};

export default Edit;


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

[User] Create a text block with customizable content

[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/preformatted/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/preformatted",
	"title": "Preformatted",
	"category": "text",
	"description": "Add text that respects your spacing and tabs, and also allows styling.",
	"textdomain": "default",
	"attributes": {
		"content": {
			"type": "rich-text",
			"source": "rich-text",
			"selector": "pre",
			"__unstablePreserveWhiteSpace": true,
			"role": "content"
		}
	},
	"supports": {
		"anchor": true,
		"color": {
			"gradients": 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
			}
		}
	},
	"style": "wp-block-preformatted"
}

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

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

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

const { name } = metadata;

export { metadata, name };

export const settings = {
	icon,
	example: {
		attributes: {
			/* eslint-disable @wordpress/i18n-no-collapsible-whitespace */
			// translators: Sample content for the Preformatted block. Can be replaced with a more locale-adequate work.
			content: __(
				'EXT. XANADU - FAINT DAWN - 1940 (MINIATURE)\nWindow, very small in the distance, illuminated.\nAll around this is an almost totally black screen. Now, as the camera moves slowly towards the window which is almost a postage stamp in the frame, other forms appear;'
			),
			/* eslint-enable @wordpress/i18n-no-collapsible-whitespace */
		},
	},
	transforms,
	edit,
	save,
	merge( attributes, attributesToMerge ) {
		return {
			content: attributes.content + '\n\n' + attributesToMerge.content,
		};
	},
};

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

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

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

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

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


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

[User] Build a Gutenberg block that Display the order confirmation billing section. with these attributes: heading

[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/order-confirmation/billing-wrapper/block.json
{
	"name": "woocommerce/order-confirmation-billing-wrapper",
	"version": "1.0.0",
	"title": "Billing Address Section",
	"description": "Display the order confirmation billing section.",
	"category": "woocommerce",
	"keywords": [
		"WooCommerce"
	],
	"attributes": {
		"heading": {
			"type": "string"
		}
	},
	"supports": {
		"multiple": false,
		"align": [
			"wide",
			"full"
		],
		"html": false,
		"spacing": {
			"padding": true,
			"margin": true,
			"__experimentalDefaultControls": {
				"margin": false,
				"padding": false
			}
		}
	},
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/order-confirmation/billing-wrapper/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';

const Edit = ( {
	attributes,
	setAttributes,
}: {
	attributes: {
		heading: string;
	};
	setAttributes: ( attributes: Record< string, unknown > ) => void;
} ) => {
	const blockProps = useBlockProps();

	return (
		<div { ...blockProps }>
			<InnerBlocks
				allowedBlocks={ [ 'core/heading' ] }
				template={ [
					[
						'core/heading',
						{
							level: 2,
							style: { typography: { fontSize: '24px' } },
							content: attributes.heading || '',
							onChangeContent: ( value: string ) =>
								setAttributes( { heading: value } ),
						},
					],
					[
						'woocommerce/order-confirmation-billing-address',
						{
							lock: {
								remove: true,
							},
						},
					],
				] }
			/>
		</div>
	);
};

export default Edit;


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

[User] Develop a WooCommerce block that enables flexible configuration through customizable parameters, including query ID, query type, tag name, and six additional configurable options.

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "woocommerce/product-collection",
	"title": "Product Collection",
	"description": "Display a collection of products from your store.",
	"category": "woocommerce",
	"keywords": [
		"WooCommerce",
		"Products (Beta)",
		"all products",
		"by attribute",
		"by category",
		"by tag"
	],
	"textdomain": "woocommerce",
	"attributes": {
		"queryId": {
			"type": "number"
		},
		"query": {
			"type": "object"
		},
		"tagName": {
			"type": "string"
		},
		"displayLayout": {
			"type": "object",
			"properties": {
				"type": {
					"type": "string",
					"enum": [ "flex", "list", "carousel" ]
				},
				"columns": {
					"type": "number"
				},
				"shrinkColumns": {
					"type": "boolean"
				}
			}
		},
		"dimensions": {
			"type": "object"
		},
		"convertedFromProducts": {
			"type": "boolean",
			"default": false
		},
		"collection": {
			"type": "string"
		},
		"hideControls": {
			"default": [],
			"type": "array"
		},
		"queryContextIncludes": {
			"type": "array"
		},
		"forcePageReload": {
			"type": "boolean",
			"default": false
		},
		"__privatePreviewState": {
			"type": "object"
		}
	},
	"providesContext": {
		"queryId": "queryId",
		"query": "query",
		"displayLayout": "displayLayout",
		"dimensions": "dimensions",
		"queryContextIncludes": "queryContextIncludes",
		"collection": "collection",
		"__privateProductCollectionPreviewState": "__privatePreviewState"
	},
	"usesContext": [ "templateSlug", "postId" ],
	"supports": {
		"align": [ "wide", "full" ],
		"anchor": true,
		"html": false,
		"__experimentalLayout": true,
		"interactivity": true,
		"email": true
	},
	"editorStyle": "file:../woocommerce/product-collection-editor.css",
	"style": "file:../woocommerce/product-collection-style.css"
}

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

export default function QuerySave( { attributes: { tagName: Tag = 'div' } } ) {
	const blockProps = useBlockProps.save();
	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
	return <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] Create a woocommerce block with customizable text align, show product title, show reviews count, and 2 more options

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/reviews-title/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "woocommerce/product-reviews-title",
	"title": "Reviews Title",
	"category": "woocommerce",
	"ancestor": [ "woocommerce/product-reviews" ],
	"description": "Displays a title with the number of reviews.",
	"textdomain": "woocommerce",
	"usesContext": [ "postId", "postType" ],
	"attributes": {
		"textAlign": {
			"type": "string"
		},
		"showProductTitle": {
			"type": "boolean",
			"default": true
		},
		"showReviewsCount": {
			"type": "boolean",
			"default": true
		},
		"level": {
			"type": "number",
			"default": 2
		},
		"levelOptions": {
			"type": "array"
		}
	},
	"supports": {
		"anchor": false,
		"align": true,
		"html": false,
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true
		},
		"color": {
			"gradients": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": 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,
				"__experimentalFontFamily": true,
				"__experimentalFontStyle": true,
				"__experimentalFontWeight": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		}
	}
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/reviews-title/index.ts
/**
 * External dependencies
 */
import { registerBlockType } from '@wordpress/blocks';
import { title as icon } from '@wordpress/icons';

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

// @ts-expect-error metadata is not typed.
registerBlockType( metadata, {
	edit,
	icon,
} );


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

[User] Craft a dynamic pricing block in WordPress that provides flexibility for users to set product details, including ID, query loop relationship, text positioning, and two extra personalization options.

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

// File: plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/price/block.json
{
	"name": "woocommerce/product-price",
	"title": "Product Price",
	"description": "Display the price of a product.",
	"category": "woocommerce-product-elements",
	"attributes": {
		"productId": { "type": "number", "default": 0 },
		"isDescendentOfQueryLoop": { "type": "boolean", "default": false },
		"textAlign": { "type": "string", "default": "" },
		"isDescendentOfSingleProductTemplate": {
			"type": "boolean",
			"default": false
		},
		"isDescendentOfSingleProductBlock": {
			"type": "boolean",
			"default": false
		}
	},
	"usesContext": [ "query", "queryId", "postId" ],
	"keywords": [ "WooCommerce" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"supports": {
		"html": false,
		"interactivity": true,
		"color": {
			"text": true,
			"background": true,
			"link": false
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalLetterSpacing": true
		},
		"__experimentalSelector": ".wp-block-woocommerce-product-price .wc-block-components-product-price",
		"email": true,
		"spacing": {
			"margin": true,
			"padding": true
		}
	},
	"ancestor": [
		"woocommerce/all-products",
		"woocommerce/featured-product",
		"woocommerce/single-product",
		"woocommerce/product-template",
		"core/post-template"
	],
	"viewScriptModule": "product-price",
	"style": "file:../product-price.css",
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/price/edit.tsx
/**
 * External dependencies
 */
import {
	AlignmentToolbar,
	BlockControls,
	useBlockProps,
} from '@wordpress/block-editor';
import { useEffect } from '@wordpress/element';
import type { BlockAlignment } from '@wordpress/blocks';
import { isExperimentalWcRestApiV4Enabled } from '@woocommerce/block-settings';
import { useProduct } from '@woocommerce/entities';

/**
 * Internal dependencies
 */
import Block from './block';
import { useIsDescendentOfSingleProductTemplate } from '../shared/use-is-descendent-of-single-product-template';

type UnsupportedAligments = 'wide' | 'full';
type AllowedAlignments = Exclude< BlockAlignment, UnsupportedAligments >;

interface BlockAttributes {
	textAlign?: AllowedAlignments;
}

interface Attributes {
	textAlign: 'left' | 'center' | 'right';
	isDescendentOfSingleProduct: boolean;
	isDescendentOfSingleProductBlock: boolean;
	productId: number;
}

interface Context {
	queryId: number;
}

interface Props {
	attributes: Attributes;
	setAttributes: (
		attributes: Partial< BlockAttributes > & Record< string, unknown >
	) => void;
	context: Context;
}

const PriceEdit = ( {
	attributes,
	setAttributes,
	context,
}: Props ): JSX.Element => {
	const blockProps = useBlockProps();
	const blockAttrs = {
		...attributes,
		...context,
	};
	const isDescendentOfQueryLoop = Number.isFinite( context.queryId );

	let { isDescendentOfSingleProductTemplate } =
		useIsDescendentOfSingleProductTemplate();

	if ( isDescendentOfQueryLoop ) {
		isDescendentOfSingleProductTemplate = false;
	}

	useEffect(
		() =>
			setAttributes( {
				isDescendentOfQueryLoop,
				isDescendentOfSingleProductTemplate,
			} ),
		[
			isDescendentOfQueryLoop,
			isDescendentOfSingleProductTemplate,
			setAttributes,
		]
	);

	const isExperimentalWcRestApiEnabled = isExperimentalWcRestApiV4Enabled();

	const { product } = useProduct( context.postId );

	return (
		<>
			<BlockControls>
				<AlignmentToolbar
					value={ attributes.textAlign }
					onChange={ ( textAlign: AllowedAlignments ) => {
						setAttributes( { textAlign } );
					} }
				/>
			</BlockControls>
			<div { ...blockProps }>
				{
					// If experimental WC API is not available we must fallback to "old" way of fetching product data.
					// Once it's available everywhere we can remove this fallback.
					isExperimentalWcRestApiEnabled ? (
						<Block
							{ ...blockAttrs }
							isAdmin={ true }
							product={ product }
							isExperimentalWcRestApiV4Enabled={
								isExperimentalWcRestApiEnabled
							}
						/>
					) : (
						<Block
							{ ...blockAttrs }
							product={ undefined }
							isAdmin={ false }
							isExperimentalWcRestApiV4Enabled={ false }
						/>
					)
				}
			</div>
		</>
	);
};

export default PriceEdit;


[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 block that empowers users to effortlessly transform plain text by incorporating headings, lists, and link functionalities with intuitive source configuration.

[Assistant]
// File: projects/plugins/jetpack/extensions/blocks/markdown/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/markdown",
	"title": "Markdown",
	"description": "Add headings, lists, or links to plain text with ease.",
	"keywords": [ "formatting", "syntax", "markup" ],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "text",
	"icon": "<svg viewBox='0 0 208 128' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><rect width='198' height='118' x='5' y='5' ry='10' stroke='currentColor' strokeWidth='10' fill='none' /><path d='M30 98v-68h20l20 25 20-25h20v68h-20v-39l-20 25-20-25v39zM155 98l-30-33h20v-35h20v35h20z' />",
	"supports": {
		"align": [ "wide", "full" ],
		"html": false,
		"spacing": {
			"padding": true,
			"margin": true,
			"__experimentalDefaultControls": {
				"padding": true,
				"margin": true
			}
		}
	},
	"attributes": { "source": { "type": "string" } },
	"example": {
		"attributes": {
			"source": "## ## Try Markdown\n\nMarkdown is a text formatting syntax that is converted into HTML. You can _emphasize_ text or **make it strong** with just a few characters."
		}
	}
}

// File: projects/plugins/jetpack/extensions/blocks/markdown/edit.js
import { BlockControls, PlainText, useBlockProps } from '@wordpress/block-editor';
import { compose } from '@wordpress/compose';
import { withDispatch, withSelect } from '@wordpress/data';
import { useEffect, useRef, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import ToolbarButton from './controls';
import MarkdownRenderer from './renderer';

/**
 * Module variables
 */
const PANEL_EDITOR = 'editor';
const PANEL_PREVIEW = 'preview';

const MarkdownEdit = ( { attributes, setAttributes, isSelected, removeBlock } ) => {
	const { source } = attributes;
	const isEmpty = ! source || source.trim() === '';

	const blockProps = useBlockProps();
	const { className } = blockProps;
	const [ activePanel, setActivePanel ] = useState( PANEL_EDITOR );
	const input = useRef( null );

	const onChange = s => setAttributes( { source: s } );
	const onKeyDown = e => {
		// Remove the block if source is empty and we're pressing the Backspace key
		if ( e.keyCode === 8 && source === '' ) {
			removeBlock();
			e.preventDefault();
		}
	};

	useEffect( () => {
		if ( isSelected ) {
			if ( activePanel === PANEL_EDITOR ) {
				input?.current.focus();
			}
		} else if ( activePanel === PANEL_PREVIEW ) {
			setActivePanel( PANEL_EDITOR );
		}
	}, [ isSelected, activePanel, setActivePanel ] );

	let content;

	if ( ! isSelected && isEmpty ) {
		content = (
			<p className={ `${ className }__placeholder` }>
				{ __( 'Write your _Markdown_ **here**…', 'jetpack' ) }

		);
	} else {
		content = (

				<BlockControls>

						<ToolbarButton
							className={ className }
							label={ __( 'Markdown', 'jetpack' ) }
							isPressed={ activePanel === PANEL_EDITOR }
							onClick={ () => setActivePanel( PANEL_EDITOR ) }
						/>
						<ToolbarButton
							className={ className }
							label={ __( 'Preview', 'jetpack' ) }
							isPressed={ activePanel === PANEL_PREVIEW }
							onClick={ () => setActivePanel( PANEL_PREVIEW ) }
						/>

				</BlockControls>

				{ activePanel === PANEL_PREVIEW || ! isSelected ? (
					<MarkdownRenderer className={ `${ className }__preview` } source={ source } />
				) : (
					<PlainText
						className={ `${ className }__editor` }
						onChange={ onChange }
						onKeyDown={ onKeyDown }
						aria-label={ __( 'Markdown', 'jetpack' ) }
						ref={ input }
						value={ source }
					/>
				) }

		);
	}

	return
{ content }
;
};

export default compose( [
	withSelect( select => ( {
		currentBlockId: select( 'core/block-editor' ).getSelectedBlockClientId(),
	} ) ),
	withDispatch( ( dispatch, { currentBlockId } ) => ( {
		removeBlock: () => dispatch( 'core/block-editor' ).removeBlocks( currentBlockId ),
	} ) ),
] )( MarkdownEdit );

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

export default ( { attributes } ) => {
	const blockProps = useBlockProps.save();

	return (
		<MarkdownRenderer { ...blockProps } source={ attributes.source } attributes={ attributes } />
	);
};


[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 Button allowing you to sell products and subscriptions. with these attributes: plan id, plan ids, align, and 3 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: projects/plugins/jetpack/extensions/blocks/recurring-payments/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/recurring-payments",
	"title": "Payment Button",
	"description": "Button allowing you to sell products and subscriptions.",
	"keywords": [
		"buy",
		"contribution",
		"commerce",
		"credit card",
		"debit card",
		"donate",
		"Donations",
		"monetize",
		"earn",
		"ecommerce",
		"gofundme",
		"memberships",
		"money",
		"paid",
		"patreon",
		"pay",
		"payments",
		"products",
		"purchase",
		"recurring",
		"sell",
		"shop",
		"stripe",
		"subscribe",
		"subscriptions",
		"sponsor",
		"square",
		"toast",
		"venmo"
	],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "monetize",
	"icon": "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M20 4H4c-1.105 0-2 .895-2 2v12c0 1.105.895 2 2 2h16c1.105 0 2-.895 2-2V6c0-1.105-.895-2-2-2zm0 2v2H4V6h16zM4 18v-6h16v6H4zm2-4h7v2H6v-2zm9 0h3v2h-3v-2z'/></svg>",
	"supports": {
		"html": false,
		"__experimentalExposeControlsToChildren": true
	},
	"usesContext": [ "isPremiumContentChild" ],
	"providesContext": {
		"jetpack/parentBlockWidth": "width"
	},
	"attributes": {
		"planId": {
			"type": "integer"
		},
		"planIds": {
			"type": "array"
		},
		"align": {
			"type": "string"
		},
		"url": {
			"type": "string",
			"default": "#"
		},
		"uniqueId": {
			"type": "string",
			"default": "id"
		},
		"width": {
			"type": "string"
		}
	},
	"parent": [ "jetpack/payment-buttons" ]
}

// File: projects/plugins/jetpack/extensions/blocks/recurring-payments/edit.jsx
import { InspectorControls, useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
import { useEffect, useMemo, useCallback } from '@wordpress/element';
import { applyFilters } from '@wordpress/hooks';
import ProductManagementControls from '../../shared/components/product-management-controls';
import { StripeNudge } from '../../shared/components/stripe-nudge';
import { getEditorType, POST_EDITOR } from '../../shared/get-editor-type';
import useWidth from '../../shared/use-width';
import { WidthPanel } from '../../shared/width-panel';
import { getBlockStyles } from './util';

// If we use the name on index.js and the block name changes the events block name will also change.
const BLOCK_NAME = 'recurring-payments';

export default function Edit( { attributes, clientId, setAttributes } ) {
	const { align, planId, planIds, width } = attributes;

	// planId is a integer, planIds is an array.
	// if planIds is set, use it, otherwise use planId. Going forward we should only use planIds.
	// This is placed in useMemo to support the useCallback and useEffect hooks below.
	const _planIds = useMemo( () => {
		return planIds || ( planId ? [ planId ] : [] );
	}, [ planId, planIds ] );

	const editorType = getEditorType();
	const postLink = useSelect( select => select( editorStore )?.getCurrentPost()?.link, [] );

	const updateSubscriptionPlans = useCallback(
		newPlanIds => {
			// verify newPlanIds is a non-empty array.
			if ( ! Array.isArray( newPlanIds ) || 0 === newPlanIds.length ) {
				return;
			}
			// ensure/convert all elements to integers.
			const validatedPlanIds = newPlanIds
				.map( id => parseInt( id, 10 ) )
				.filter( id => ! isNaN( id ) );

			// if all the elements match the existing planIds, do nothing.
			if (
				Array.isArray( _planIds ) &&
				validatedPlanIds.length === _planIds.length &&
				validatedPlanIds.every( i => _planIds.includes( i ) )
			) {
				return;
			}

			const newPlanId = validatedPlanIds.join( '+' );
			const resolvePaymentUrl = paymentPlanId => {
				if ( POST_EDITOR !== editorType || ! postLink ) {
					return '#';
				}

				const postUrl = new URL( postLink );
				postUrl.searchParams.set( 'recurring_payments', paymentPlanId );
				return postUrl.toString();
			};

			setAttributes( {
				planId: null,
				planIds: validatedPlanIds,
				url: resolvePaymentUrl( newPlanId ),
				uniqueId: `recurring-payments-${ newPlanId }`,
			} );
		},
		[ editorType, _planIds, postLink, setAttributes ]
	);

	useEffect( () => {
		updateSubscriptionPlans( _planIds );
	}, [ _planIds, updateSubscriptionPlans ] );

	/**
	 * Filters the editor settings of the Payment Button block (`jetpack/recurring-payments`).
	 *
	 * @param {object}  editorSettings                               - An object with the block settings.
	 * @param {boolean} editorSettings.showProductManagementControls - Whether the product management block controls should be shown.
	 * @param {boolean} editorSettings.showStripeNudge               - Whether the action to connect to Stripe should be shown.
	 * @param {string}  clientId                                     - Block ID.
	 */
	const { showProductManagementControls, showStripeNudge } = applyFilters(
		'jetpack.recurringPayments.editorSettings',
		{
			showProductManagementControls: true,
			showStripeNudge: true,
		},
		clientId
	);

	useWidth( { attributes, setAttributes } );

	const blockProps = useBlockProps( { style: getBlockStyles( { width } ) } );
	const innerBlocksProps = useInnerBlocksProps(
		{},
		{
			template: [
				[
					'jetpack/button',
					{
						element: 'a',
						passthroughAttributes: {
							uniqueId: 'uniqueId',
							url: 'url',
						},
					},
				],
			],
			templateLock: 'all',
			templateInsertUpdatesSelection: true,
		}
	);

	return (
		<div { ...blockProps }>
			{ showProductManagementControls && (
				<ProductManagementControls
					blockName={ BLOCK_NAME }
					clientId={ clientId }
					selectedProductIds={ _planIds }
					setSelectedProductIds={ updateSubscriptionPlans }
				/>
			) }
			<InspectorControls>
				<WidthPanel
					align={ align }
					width={ width }
					onChange={ newWidth => setAttributes( { width: newWidth } ) }
				/>
			</InspectorControls>
			{ showStripeNudge && <StripeNudge blockName={ BLOCK_NAME } /> }
			<div { ...innerBlocksProps } />
		</div>
	);
}

// File: projects/plugins/jetpack/extensions/blocks/recurring-payments/save.js
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
import { getBlockStyles } from './util';

export default function save( { attributes: { width } } ) {
	const innerBlocksProps = useInnerBlocksProps.save( {
		...useBlockProps.save(),
		style: getBlockStyles( { width } ),
	} );
	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] Design a block specifically for scenarios where no product inventory exists, displaying alternative content when no items are found.

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

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/inner-blocks/no-results/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "woocommerce/product-collection-no-results",
	"title": "No results",
	"category": "woocommerce",
	"description": "The contents of this block will display when there are no products found.",
	"textdomain": "woocommerce",
	"keywords": [ "Product Collection" ],
	"usesContext": [ "queryId", "query" ],
	"ancestor": [ "woocommerce/product-collection" ],
	"supports": {
		"interactivity": {
			"clientNavigation": true
		},
		"align": true,
		"reusable": false,
		"html": false,
		"color": {
			"gradients": true,
			"link": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"email": true
	}
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/inner-blocks/no-results/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
import { Template } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

const TEMPLATE: Template[] = [
	[
		'core/group',
		{
			layout: {
				type: 'flex',
				orientation: 'vertical',
				justifyContent: 'center',
				flexWrap: 'wrap',
			},
		},
		[
			[
				'core/paragraph',
				{
					textAlign: 'center',
					fontSize: 'medium',
					content: `${ __(
						'No results found',
						'woocommerce'
					) }`,
				},
			],
			[
				'core/paragraph',
				{
					content: `${ __(
						'You can try',
						'woocommerce'
					) } ${ __(
						'clearing any filters',
						'woocommerce'
					) } ${ __(
						'or head to our',
						'woocommerce'
					) } ${ __(
						"store's home",
						'woocommerce'
					) }`,
				},
			],
		],
	],
];

const Edit = () => {
	const blockProps = useBlockProps( {
		className: 'wc-block-product-collection-no-results',
	} );

	return (

			<InnerBlocks template={ TEMPLATE } />

	);
};

export default Edit;

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

export default function NoResultsSave() {
	// @ts-expect-error: `InnerBlocks.Content` is a component that is typed in WordPress core
	return <InnerBlocks.Content />;
}


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

[User] Develop a custom Gutenberg block that Displays the description of the selected variation.

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

// File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/variation-description/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "woocommerce/add-to-cart-with-options-variation-description",
	"title": "Variation Description (Beta)",
	"description": "Displays the description of the selected variation.",
	"category": "woocommerce",
	"textdomain": "woocommerce",
	"ancestor": [ "woocommerce/add-to-cart-with-options" ],
	"supports": {
		"interactivity": true,
		"html": false,
		"dimensions": {
			"minHeight": true
		},
		"spacing": {
			"padding": true,
			"margin": true
		},
		"color": {
			"gradients": true,
			"link": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true
		}
	},
	"viewScriptModule": "woocommerce/product-elements"
}

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

export default function VariationDescriptionEdit() {
	const blockProps = useBlockProps();

	return (
		<div { ...blockProps }>
			<p>
				{ __(
					'This block displays the variation description. When the shopper selects a variation, the description content will automatically appear here.',
					'woocommerce'
				) }
			</p>
		</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] Design a WooCommerce custom block with the ability to modify the surrounding tag's HTML element programmatically.

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

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "woocommerce/product-reviews",
	"icon": "admin-comments",
	"title": "Product Reviews",
	"description": "Display a product's reviews",
	"category": "woocommerce",
	"textdomain": "woocommerce",
	"attributes": {
		"tagName": {
			"type": "string",
			"default": "div"
		}
	},
	"supports": {
		"interactivity": true,
		"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
			}
		}
	},
	"usesContext": [ "postId", "postType" ],
	"viewScriptModule": "woocommerce/product-reviews"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/edit.tsx
/**
 * External dependencies
 */
import { SelectControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useQueryLoopProductContextValidation } from '@woocommerce/base-hooks';
import {
	InspectorControls,
	useBlockProps,
	// @ts-expect-error missing types.
	useInnerBlocksProps,
} from '@wordpress/block-editor';

/**
 * Internal dependencies
 */
import TEMPLATE from './template';
import { ProductReviewsEditProps } from './types';
import { htmlElementMessages } from '../../utils/messages';

const Edit = ( {
	attributes,
	setAttributes,
	clientId,
	context,
}: ProductReviewsEditProps ) => {
	const { tagName: TagName = 'div' } = attributes;
	const blockProps = useBlockProps();
	const innerBlocksProps = useInnerBlocksProps( blockProps, {
		template: TEMPLATE,
	} );

	const { hasInvalidContext, warningElement } =
		useQueryLoopProductContextValidation( {
			clientId,
			postType: context.postType,
			blockName: __( 'Product Reviews', 'woocommerce' ),
		} );

	if ( hasInvalidContext ) {
		return warningElement;
	}

	return (
		<>
			{ /* @ts-expect-error missing types */ }
			<InspectorControls group="advanced">
				<SelectControl
					// @ts-expect-error missing types.
					__nextHasNoMarginBottom
					__next40pxDefaultSize
					label={ __( 'HTML element', 'woocommerce' ) }
					options={ [
						{
							label: __( 'Default (<div>)', 'woocommerce' ),
							value: 'div',
						},
						{ label: '<section>', value: 'section' },
						{ label: '<aside>', value: 'aside' },
					] }
					value={ TagName }
					onChange={ ( value: 'div' | 'section' | 'aside' ) =>
						setAttributes( { tagName: value } )
					}
					help={ htmlElementMessages[ TagName ] }
				/>
			</InspectorControls>
			<TagName { ...innerBlocksProps } />
		</>
	);
};

export default Edit;

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/save.tsx
/**
 * External dependencies
 */
import {
	// @ts-expect-error Missing types for this package.
	useInnerBlocksProps,
	useBlockProps,
} from '@wordpress/block-editor';

export default function Save( {
	attributes: { tagName: Tag = 'div' },
}: {
	attributes: { tagName: string };
} ) {
	const blockProps = useBlockProps.save();
	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
	return <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 Column containing the cart totals. that allows users to configure: checkbox, text, 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/cart/inner-blocks/cart-totals-block/block.json
{
	"name": "woocommerce/cart-totals-block",
	"version": "1.0.0",
	"title": "Cart Totals",
	"description": "Column containing the cart totals.",
	"category": "woocommerce",
	"supports": {
		"align": false,
		"html": false,
		"multiple": false,
		"reusable": false,
		"inserter": false,
		"lock": false
	},
	"attributes": {
		"checkbox": {
			"type": "boolean",
			"default": false
		},
		"text": {
			"type": "string",
			"required": false
		},
		"lock": {
			"type": "object",
			"default": {
				"remove": true
			}
		}
	},
	"parent": [
		"woocommerce/filled-cart-block"
	],
	"textdomain": "woocommerce",
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/cart-totals-block/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
import { Sidebar } from '@woocommerce/base-components/sidebar-layout';
import { innerBlockAreas } from '@woocommerce/blocks-checkout';
import type { TemplateArray } from '@wordpress/blocks';

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

export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
	const blockProps = useBlockProps( { className: 'wc-block-cart__sidebar' } );
	const allowedBlocks = getAllowedBlocks( innerBlockAreas.CART_TOTALS );
	const defaultTemplate = [
		[ 'woocommerce/cart-order-summary-block', {}, [] ],
		[ 'woocommerce/cart-express-payment-block', {}, [] ],
		[ 'woocommerce/proceed-to-checkout-block', {}, [] ],
		[ 'woocommerce/cart-accepted-payment-methods-block', {}, [] ],
	] as TemplateArray;

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

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

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 woocommerce block with customizable class name, 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/cart/inner-blocks/cart-order-summary-subtotal/block.json
{
	"name": "woocommerce/cart-order-summary-subtotal-block",
	"version": "1.0.0",
	"title": "Subtotal",
	"description": "Shows the cart subtotal row.",
	"category": "woocommerce",
	"supports": {
		"align": false,
		"html": false,
		"multiple": false,
		"reusable": false,
		"lock": false
	},
	"attributes": {
		"className": {
			"type": "string",
			"default": ""
		},
		"lock": {
			"type": "object",
			"default": {
				"remove": true,
				"move": true
			}
		}
	},
	"parent": [
		"woocommerce/cart-order-summary-totals-block"
	],
	"textdomain": "woocommerce",
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3
}

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

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

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

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


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

[User] Build a Gutenberg block that Displays the next product review's page link. with these attributes: label

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

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/reviews-pagination-next/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "woocommerce/product-reviews-pagination-next",
	"title": "Reviews Next Page",
	"category": "woocommerce",
	"ancestor": [ "woocommerce/product-reviews-pagination" ],
	"description": "Displays the next product review's page link.",
	"textdomain": "woocommerce",
	"attributes": {
		"label": {
			"type": "string"
		}
	},
	"usesContext": [ "postId", "reviews/paginationArrow" ],
	"supports": {
		"reusable": false,
		"html": false,
		"color": {
			"gradients": true,
			"text": false,
			"__experimentalDefaultControls": {
				"background": true
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		}
	}
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/reviews-pagination-next/edit.tsx
/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { useBlockProps, PlainText } from '@wordpress/block-editor';
import { BlockEditProps } from '@wordpress/blocks';

const arrowMap = {
	none: '',
	arrow: '→',
	chevron: '»',
};

type Props = BlockEditProps< { label: string } > & {
	// eslint-disable-next-line @typescript-eslint/naming-convention
	context: { 'reviews/paginationArrow': string };
};

export default function Edit( {
	attributes: { label },
	setAttributes,
	context: { 'reviews/paginationArrow': paginationArrow },
}: Props ) {
	const displayArrow = arrowMap[ paginationArrow as keyof typeof arrowMap ];
	return (
		<a
			href="#reviews-pagination-next-pseudo-link"
			onClick={ ( event ) => event.preventDefault() }
			{ ...useBlockProps() }
		>
			<PlainText
				__experimentalVersion={ 2 }
				tagName="span"
				aria-label={ __( 'Newer reviews page link', 'woocommerce' ) }
				placeholder={ __( 'Newer Reviews', 'woocommerce' ) }
				value={ label }
				onChange={ ( newLabel ) =>
					setAttributes( { label: newLabel } )
				}
			/>
			{ displayArrow && (
				<span
					className={ `wp-block-woocommerce-product-reviews-pagination-next-arrow is-arrow-${ paginationArrow }` }
				>
					{ displayArrow }
				</span>
			) }
		</a>
	);
}


[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 reusable block framework for standardizing attribute properties and options applicable to all variable product types within the WordPress environment.

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/variation-selector/attribute/block.json
{
	"name": "woocommerce/add-to-cart-with-options-variation-selector-attribute",
	"title": "Variation Selector: Template (Beta)",
	"description": "A template for attribute name and options that will be applied to all variable products with attributes.",
	"category": "woocommerce-product-elements",
	"keywords": [ "WooCommerce" ],
	"usesContext": [ "postId" ],
	"ancestor": [ "woocommerce/add-to-cart-with-options-variation-selector" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"supports": {
		"inserter": false,
		"interactivity": true
	}
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/variation-selector/attribute/edit.tsx
/**
 * External dependencies
 */
import { useState } from '@wordpress/element';
import {
	useBlockProps,
	useInnerBlocksProps,
	store as blockEditorStore,
	__experimentalUseBlockPreview as useBlockPreview,
} from '@wordpress/block-editor';
import { BlockInstance, type BlockEditProps } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
import {
	CustomDataProvider,
	useProductDataContext,
} from '@woocommerce/shared-context';
import { isProductResponseItem } from '@woocommerce/entities';

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

interface Attributes {
	className?: string;
}

type AttributeItemProps = {
	blocks: BlockInstance[];
	isSelected: boolean;
	onSelect(): void;
};

function AttributeItem( { blocks, isSelected, onSelect }: AttributeItemProps ) {
	const blockPreviewProps = useBlockPreview( {
		blocks,
	} );
	const innerBlocksProps = useInnerBlocksProps(
		{ role: 'listitem' },
		{ templateLock: 'insert' }
	);

	return (
		<>
			{ isSelected ? <div { ...innerBlocksProps } /> : <></> }

			<div
				role="listitem"
				style={ { display: isSelected ? 'none' : undefined } }
			>
				<div
					{ ...blockPreviewProps }
					role="button"
					tabIndex={ 0 }
					onClick={ onSelect }
					onKeyDown={ onSelect }
				/>
			</div>
		</>
	);
}

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

	const blockProps = useBlockProps( {
		className,
	} );

	const { product } = useProductDataContext();

	const productAttributes =
		isProductResponseItem( product ) && product.type === 'variable'
			? product.attributes
			: DEFAULT_ATTRIBUTES;

	const { blocks } = useSelect(
		( select ) => {
			const { getBlocks } = select( blockEditorStore );
			return { blocks: getBlocks( clientId ) };
		},
		[ clientId ]
	);

	const [ selectedAttributeItem, setSelectedAttributeItem ] =
		useState< number >();

	return (
		<div { ...blockProps } role="list">
			{ productAttributes.map( ( attribute ) => (
				<CustomDataProvider
					key={ attribute.id }
					id="attribute"
					data={ attribute }
				>
					<AttributeItem
						blocks={ blocks }
						isSelected={
							( selectedAttributeItem ||
								productAttributes[ 0 ]?.id ) === attribute.id
						}
						onSelect={ () =>
							setSelectedAttributeItem( attribute.id )
						}
					/>
				</CustomDataProvider>
			) ) }
		</div>
	);
}

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

export default function AttributeItemTemplateSave() {
	const blockProps = useBlockProps.save();
	const innerBlocksProps = useInnerBlocksProps.save( {
		...blockProps,
		role: 'listitem',
	} );
	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] Craft a Gutenberg block designed for form fundamentals, incorporating attributes for type, name, label, and five additional configurable parameters.

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

// File: packages/block-library/src/form-input/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"__experimental": true,
	"name": "core/form-input",
	"title": "Input Field",
	"category": "common",
	"ancestor": [ "core/form" ],
	"description": "The basic building block for forms.",
	"keywords": [ "input", "form" ],
	"textdomain": "default",
	"icon": "forms",
	"attributes": {
		"type": {
			"type": "string",
			"default": "text"
		},
		"name": {
			"type": "string"
		},
		"label": {
			"type": "rich-text",
			"default": "Label",
			"selector": ".wp-block-form-input__label-content",
			"source": "rich-text",
			"role": "content"
		},
		"inlineLabel": {
			"type": "boolean",
			"default": false
		},
		"required": {
			"type": "boolean",
			"default": false,
			"selector": ".wp-block-form-input__input",
			"source": "attribute",
			"attribute": "required"
		},
		"placeholder": {
			"type": "string",
			"selector": ".wp-block-form-input__input",
			"source": "attribute",
			"attribute": "placeholder",
			"role": "content"
		},
		"value": {
			"type": "string",
			"default": "",
			"selector": "input",
			"source": "attribute",
			"attribute": "value"
		},
		"visibilityPermissions": {
			"type": "string",
			"default": "all"
		}
	},
	"supports": {
		"anchor": true,
		"reusable": false,
		"spacing": {
			"margin": [ "top", "bottom" ]
		},
		"__experimentalBorder": {
			"radius": true,
			"__experimentalSkipSerialization": true,
			"__experimentalDefaultControls": {
				"radius": true
			}
		}
	},
	"style": [ "wp-block-form-input" ]
}

// File: packages/block-library/src/form-input/index.js
/**
 * 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';

const { name } = metadata;

export { metadata, name };

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

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

// File: packages/block-library/src/form-input/save.js
/**
 * External dependencies
 */
import clsx from 'clsx';
import removeAccents from 'remove-accents';

/**
 * WordPress dependencies
 */
import {
	RichText,
	useBlockProps,
	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
} from '@wordpress/block-editor';
import { __unstableStripHTML as stripHTML } from '@wordpress/dom';

/**
 * Get the name attribute from a content string.
 *
 * @param {string} content The block content.
 *
 * @return {string} Returns the slug.
 */
const getNameFromLabel = ( content ) => {
	return (
		removeAccents( stripHTML( content ) )
			// Convert anything that's not a letter or number to a hyphen.
			.replace( /[^\p{L}\p{N}]+/gu, '-' )
			// Convert to lowercase
			.toLowerCase()
			// Remove any remaining leading or trailing hyphens.
			.replace( /(^-+)|(-+$)/g, '' )
	);
};

export default function save( { attributes } ) {
	const { type, name, label, inlineLabel, required, placeholder, value } =
		attributes;

	const borderProps = getBorderClassesAndStyles( attributes );
	const colorProps = getColorClassesAndStyles( attributes );

	const inputStyle = {
		...borderProps.style,
		...colorProps.style,
	};

	const inputClasses = clsx(
		'wp-block-form-input__input',
		colorProps.className,
		borderProps.className
	);
	const TagName = type === 'textarea' ? 'textarea' : 'input';

	const blockProps = useBlockProps.save();

	// Note: radio inputs aren't implemented yet.
	const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';

	if ( 'hidden' === type ) {
		return <input type={ type } name={ name } value={ value } />;
	}

	return (

			{ /* eslint-disable jsx-a11y/label-has-associated-control */ }

				{ ! isCheckboxOrRadio && (

						<RichText.Content value={ label } />

				) }
				<TagName
					className={ inputClasses }
					type={ 'textarea' === type ? undefined : type }
					name={ name || getNameFromLabel( label ) }
					required={ required }
					aria-required={ required }
					placeholder={ placeholder || undefined }
					style={ inputStyle }
				/>
				{ isCheckboxOrRadio && (

						<RichText.Content value={ label } />

				) }

			{ /* eslint-enable jsx-a11y/label-has-associated-control */ }

	);
}


[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 Allow customers to breeze through with quick payment options. with these attributes: show button styles, button height, button border radius, 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: plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/block.json
{
	"name": "woocommerce/checkout-express-payment-block",
	"version": "1.0.0",
	"title": "Express Checkout",
	"description": "Allow customers to breeze through with quick payment options.",
	"category": "woocommerce",
	"supports": {
		"align": false,
		"html": false,
		"multiple": false,
		"reusable": false,
		"inserter": false,
		"lock": false
	},
	"attributes": {
		"showButtonStyles": {
			"type": "boolean",
			"default": false
		},
		"buttonHeight": {
			"type": "string",
			"default": "48"
		},
		"buttonBorderRadius": {
			"type": "string",
			"default": "4"
		},
		"className": {
			"type": "string",
			"default": ""
		},
		"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-express-payment-block/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps } from '@wordpress/block-editor';
import { useExpressPaymentMethods } from '@woocommerce/base-context/hooks';
import clsx from 'clsx';
import { ExpressPaymentControls } from '@woocommerce/blocks/cart-checkout-shared';
import type { BlockAttributes } from '@wordpress/blocks';

/**
 * Internal dependencies
 */
import Block from './block';
import './editor.scss';
import type { ExpressCheckoutAttributes } from '../../../cart-checkout-shared/types';
import { ExpressPaymentContext } from '../../../cart-checkout-shared/payment-methods/express-payment/express-payment-context';

export const Edit = ( {
	attributes,
	setAttributes,
}: {
	attributes: ExpressCheckoutAttributes;
	setAttributes: ( attrs: BlockAttributes ) => void;
} ): JSX.Element | null => {
	const { paymentMethods, isInitialized } = useExpressPaymentMethods();
	const hasExpressPaymentMethods = Object.keys( paymentMethods ).length > 0;
	const blockProps = useBlockProps( {
		className: clsx(
			{
				'wp-block-woocommerce-checkout-express-payment-block--has-express-payment-methods':
					hasExpressPaymentMethods,
			},
			attributes?.className
		),
		attributes,
	} );

	if ( ! isInitialized || ! hasExpressPaymentMethods ) {
		return null;
	}

	const { buttonHeight, buttonBorderRadius, showButtonStyles } = attributes;

	return (
		<div { ...blockProps }>
			<ExpressPaymentControls
				attributes={ attributes }
				setAttributes={ setAttributes }
			/>
			<ExpressPaymentContext.Provider
				value={ { showButtonStyles, buttonHeight, buttonBorderRadius } }
			>
				<Block />
			</ExpressPaymentContext.Provider>
		</div>
	);
};

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


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

[User] Create a woocommerce block with customizable lock

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/block.json
{
	"name": "woocommerce/checkout-payment-block",
	"version": "1.0.0",
	"title": "Payment Options",
	"description": "Payment options for your store.",
	"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-payment-block/edit.tsx
/**
 * External dependencies
 */
import clsx from 'clsx';
import { __ } from '@wordpress/i18n';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, ExternalLink } from '@wordpress/components';
import { payment } from '@wordpress/icons';
import { ADMIN_URL, getSetting } from '@woocommerce/settings';
import ExternalLinkCard from '@woocommerce/editor-components/external-link-card';
import { innerBlockAreas } from '@woocommerce/blocks-checkout';
import Noninteractive from '@woocommerce/base-components/noninteractive';
import { GlobalPaymentMethod } from '@woocommerce/types';
import { select } from '@wordpress/data';
import { paymentStore } from '@woocommerce/block-data';
import { blocksConfig } from '@woocommerce/block-settings';
import { trimCharacters, trimWords } from '@woocommerce/utils';

/**
 * Internal dependencies
 */
import {
	FormStepBlock,
	AdditionalFields,
	AdditionalFieldsContent,
} from '../../form-step';
import Block from './block';
import ConfigurePlaceholder from '../../configure-placeholder';

export const Edit = ( {
	attributes,
	setAttributes,
}: {
	attributes: {
		title: string;
		description: string;
		showStepNumber: boolean;
		className: string;
	};
	setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): JSX.Element => {
	const globalPaymentMethods = getSetting< GlobalPaymentMethod[] >(
		'globalPaymentMethods'
	);
	const incompatiblePaymentMethods =
		select( paymentStore ).getIncompatiblePaymentMethods();

	const incompatiblePaymentMethodMessage = __(
		'Incompatible with block-based checkout',
		'woocommerce'
	);
	const wordCountType = blocksConfig.wordCountType;

	return (
		<FormStepBlock
			attributes={ attributes }
			setAttributes={ setAttributes }
			className={ clsx(
				'wc-block-checkout__payment-method',
				attributes?.className
			) }
		>
			<InspectorControls>
				{ globalPaymentMethods.length > 0 && (
					<PanelBody title={ __( 'Methods', 'woocommerce' ) }>
						<p className="wc-block-checkout__controls-text">
							{ __(
								'You currently have the following payment integrations active.',
								'woocommerce'
							) }
						</p>
						{ globalPaymentMethods.map( ( method ) => {
							const isIncompatible =
								!! incompatiblePaymentMethods[ method.id ];

							let trimmedDescription;

							if ( wordCountType === 'words' ) {
								trimmedDescription = trimWords(
									method.description,
									30,
									undefined,
									false
								);
							} else {
								trimmedDescription = trimCharacters(
									method.description,
									30,
									wordCountType ===
										'characters_including_spaces',
									undefined,
									false
								);
							}

							return (
								<ExternalLinkCard
									key={ method.id }
									href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=checkout&section=${ method.id }` }
									title={ method.title }
									description={ trimmedDescription }
									{ ...( isIncompatible
										? {
												warning:
													incompatiblePaymentMethodMessage,
										  }
										: {} ) }
								/>
							);
						} ) }
						<ExternalLink
							href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=checkout` }
						>
							{ __( 'Manage payment methods', 'woocommerce' ) }
						</ExternalLink>
					</PanelBody>
				) }
			</InspectorControls>
			<Noninteractive>
				<Block
					noPaymentMethods={
						<ConfigurePlaceholder
							icon={ payment }
							label={ __( 'Payment options', 'woocommerce' ) }
							description={ __(
								'Your store does not have any payment methods that support the Checkout block. Once you have configured a compatible payment method it will be displayed here.',
								'woocommerce'
							) }
							buttonLabel={ __(
								'Configure Payment Options',
								'woocommerce'
							) }
							buttonHref={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=checkout` }
						/>
					}
				/>
			</Noninteractive>
			<AdditionalFields block={ innerBlockAreas.PAYMENT_METHODS } />
		</FormStepBlock>
	);
};

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


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

[User] Craft a custom Gutenberg block featuring a mandatory consent mechanism that allows users to review and accept Terms & Conditions and Privacy Policy by implementing a configurable checkbox with class name, text, and optional separator options.

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/block.json
{
	"name": "woocommerce/checkout-terms-block",
	"version": "1.0.0",
	"title": "Terms and Conditions",
	"description": "Ensure that customers agree to your Terms & Conditions and Privacy Policy.",
	"category": "woocommerce",
	"supports": {
		"align": false,
		"html": false,
		"multiple": false,
		"reusable": false
	},
	"attributes": {
		"className": {
			"type": "string",
			"default": ""
		},
		"checkbox": {
			"type": "boolean",
			"default": false
		},
		"text": {
			"type": "string",
			"required": false
		},
		"showSeparator": {
			"type": "boolean",
			"default": 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-terms-block/edit.tsx
/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import {
	useBlockProps,
	RichText,
	InspectorControls,
} from '@wordpress/block-editor';
import { CheckboxControl } from '@woocommerce/blocks-components';
import {
	PanelBody,
	ToggleControl,
	Notice,
	ExternalLink,
} from '@wordpress/components';
import { PRIVACY_URL, TERMS_URL } from '@woocommerce/block-settings';
import { ADMIN_URL } from '@woocommerce/settings';
import clsx from 'clsx';

/**
 * Internal dependencies
 */
import './editor.scss';
import { termsConsentDefaultText, termsCheckboxDefaultText } from './constants';

const noop = () => undefined;

export const Edit = ( {
	attributes: { checkbox, text, showSeparator },
	setAttributes,
}: {
	attributes: { text: string; checkbox: boolean; showSeparator: boolean };
	setAttributes: ( attributes: Record< string, unknown > ) => void;
} ) => {
	const blockProps = useBlockProps();

	const defaultText = checkbox
		? termsCheckboxDefaultText
		: termsConsentDefaultText;

	const currentText = text || defaultText;
	return (

			<InspectorControls>
				{ /* Show this notice if a terms page or a privacy page is not setup. */ }
				{ ( ! TERMS_URL || ! PRIVACY_URL ) && (
					<Notice
						className="wc-block-checkout__terms_notice"
						status="warning"
						isDismissible={ false }
					>
						{ __(
							"Link to your store's Terms and Conditions and Privacy Policy pages by creating pages for them.",
							'woocommerce'
						) }

						{ ! TERMS_URL && (
							<>

								<ExternalLink
									href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=advanced` }
								>
									{ __(
										'Setup a Terms and Conditions page',
										'woocommerce'
									) }
								</ExternalLink>
							</>
						) }
						{ ! PRIVACY_URL && (
							<>

								<ExternalLink
									href={ `${ ADMIN_URL }options-privacy.php` }
								>
									{ __(
										'Setup a Privacy Policy page',
										'woocommerce'
									) }
								</ExternalLink>
							</>
						) }
					</Notice>
				) }
				{ /* Show this notice if we have both a terms and privacy pages, but they're not present in the text. */ }
				{ TERMS_URL &&
					PRIVACY_URL &&
					! (
						currentText.includes( TERMS_URL ) &&
						currentText.includes( PRIVACY_URL )
					) && (
						<Notice
							className="wc-block-checkout__terms_notice"
							status="warning"
							isDismissible={ false }
							actions={
								termsConsentDefaultText !== text
									? [
											{
												label: __(
													'Restore default text',
													'woocommerce'
												),
												onClick: () =>
													setAttributes( {
														text: '',
													} ),
											},
									  ]
									: []
							}
						>

								{ __(
									'Ensure you add links to your policy pages in this section.',
									'woocommerce'
								) }

						</Notice>
					) }
				<PanelBody title={ __( 'Display options', 'woocommerce' ) }>
					<ToggleControl
						__nextHasNoMarginBottom
						label={ __( 'Require checkbox', 'woocommerce' ) }
						checked={ checkbox }
						onChange={ () =>
							setAttributes( {
								checkbox: ! checkbox,
							} )
						}
					/>
					<ToggleControl
						__nextHasNoMarginBottom
						label={ __( 'Show separator', 'woocommerce' ) }
						checked={ showSeparator }
						onChange={ () =>
							setAttributes( {
								showSeparator: ! showSeparator,
							} )
						}
					/>
				</PanelBody>
			</InspectorControls>

				{ checkbox ? (
					<>

							<CheckboxControl
								id="terms-condition"
								checked={ false }
								onChange={ noop }
							/>

						<RichText
							value={ currentText }
							onChange={ ( value ) =>
								setAttributes( { text: value } )
							}
						/>
					</>
				) : (
					<RichText
						tagName="span"
						value={ currentText }
						onChange={ ( value ) =>
							setAttributes( { text: value } )
						}
					/>
				) }

	);
};

export const Save = () => {
	return
;
};


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

[User] Craft a WordPress block enabling users to customize date archive display with options for dropdown format, label visibility, post count inclusion, and type selection.

[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/archives/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/archives",
	"title": "Archives",
	"category": "widgets",
	"description": "Display a date archive of your posts.",
	"textdomain": "default",
	"attributes": {
		"displayAsDropdown": {
			"type": "boolean",
			"default": false
		},
		"showLabel": {
			"type": "boolean",
			"default": true
		},
		"showPostCounts": {
			"type": "boolean",
			"default": false
		},
		"type": {
			"type": "string",
			"default": "monthly"
		}
	},
	"supports": {
		"align": true,
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": 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
		}
	},
	"editorStyle": "wp-block-archives-editor"
}

// File: packages/block-library/src/archives/index.js
/**
 * WordPress dependencies
 */
import { archive 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 customizable Gutenberg block that renders hierarchical navigation breadcrumbs, allowing configuration of taxonomy preference, separator style, home link visibility, and two additional display parameters.

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

// File: packages/block-library/src/breadcrumbs/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/breadcrumbs",
	"title": "Breadcrumbs",
	"__experimental": true,
	"category": "theme",
	"description": "Display a breadcrumb trail for hierarchical post types or based on taxonomy terms.",
	"textdomain": "default",
	"attributes": {
		"prefersTaxonomy": {
			"type": "boolean",
			"default": false
		},
		"separator": {
			"type": "string",
			"default": "/"
		},
		"showHomeItem": {
			"type": "boolean",
			"default": true
		},
		"showCurrentItem": {
			"type": "boolean",
			"default": true
		},
		"showOnHomePage": {
			"type": "boolean",
			"default": false
		}
	},
	"usesContext": [ "postId", "postType", "templateSlug" ],
	"supports": {
		"html": false,
		"align": [ "wide", "full" ],
		"spacing": {
			"margin": true,
			"padding": true
		},
		"color": {
			"gradients": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true,
			"__experimentalDefaultControls": {
				"radius": false,
				"color": true,
				"width": true,
				"style": true
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		}
	},
	"style": "wp-block-breadcrumbs"
}

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

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