[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] Construct a flexible widget block enabling custom parent page identification with inherent nesting capabilities.

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

// File: packages/block-library/src/page-list/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/page-list",
	"title": "Page List",
	"category": "widgets",
	"allowedBlocks": [ "core/page-list-item" ],
	"description": "Display a list of all pages.",
	"keywords": [ "menu", "navigation" ],
	"textdomain": "default",
	"attributes": {
		"parentPageID": {
			"type": "integer",
			"default": 0
		},
		"isNested": {
			"type": "boolean",
			"default": false
		}
	},
	"usesContext": [
		"textColor",
		"customTextColor",
		"backgroundColor",
		"customBackgroundColor",
		"overlayTextColor",
		"customOverlayTextColor",
		"overlayBackgroundColor",
		"customOverlayBackgroundColor",
		"fontSize",
		"customFontSize",
		"showSubmenuIcon",
		"style",
		"openSubmenusOnClick"
	],
	"supports": {
		"reusable": false,
		"html": false,
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		},
		"color": {
			"text": true,
			"background": true,
			"link": true,
			"gradients": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true,
				"link": true
			}
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true
		},
		"spacing": {
			"padding": true,
			"margin": true,
			"__experimentalDefaultControls": {
				"padding": false,
				"margin": false
			}
		},
		"contentRole": true
	},
	"editorStyle": "wp-block-page-list-editor",
	"style": "wp-block-page-list"
}

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

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

const { name } = metadata;

export { metadata, name };

export const settings = {
	icon: pages,
	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] Develop a block for Display a link to the cart. that allows users to configure: is preview, cart icon, 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: plugins/woocommerce/client/blocks/assets/js/blocks/cart-link/block.json
{
	"name": "woocommerce/cart-link",
	"title": "Cart Link",
	"icon": "cart",
	"description": "Display a link to the cart.",
	"category": "woocommerce",
	"keywords": [ "WooCommerce" ],
	"textdomain": "woocommerce",
	"supports": {
		"interactivity": {
			"clientNavigation": true
		},
		"html": false,
		"multiple": false,
		"typography": {
			"fontSize": true
		},
		"color": {
			"text": false,
			"link": true
		},
		"spacing": {
			"padding": true
		}
	},
	"example": {
		"attributes": {
			"isPreview": true,
			"cartIcon": "cart",
			"content": "Cart"
		}
	},
	"attributes": {
		"isPreview": {
			"type": "boolean",
			"default": false
		},
		"cartIcon": {
			"type": "string",
			"default": "cart"
		},
		"content": {
			"type": "string",
			"default": null
		}
	},
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/cart-link/edit.tsx
/* eslint-disable @wordpress/no-unsafe-wp-apis */
/**
 * External dependencies
 */
import {
	InspectorControls,
	useBlockProps,
	PlainText,
} from '@wordpress/block-editor';
import { cartOutline, bag, bagAlt } from '@woocommerce/icons';
import { __ } from '@wordpress/i18n';
import {
	Icon,
	PanelBody,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
	__experimentalToggleGroupControl as ToggleGroupControl,
} from '@wordpress/components';

/**
 * Internal dependencies
 */
import './style.scss';
import './editor.scss';
import QuantityBadge from '../mini-cart/quantity-badge';

export interface Attributes {
	cartIcon: 'cart' | 'bag' | 'bag-alt';
	content: string;
}

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

const Edit = ( { attributes, setAttributes }: Props ): JSX.Element => {
	const { cartIcon, content } = attributes;

	const blockProps = useBlockProps();

	return (
		<div { ...blockProps }>
			<InspectorControls>
				<PanelBody title={ __( 'Settings', 'woocommerce' ) }>
					<ToggleGroupControl
						__nextHasNoMarginBottom
						__next40pxDefaultSize
						className="wc-block-editor-mini-cart__cart-icon-toggle"
						isBlock
						label={ __( 'Cart Icon', 'woocommerce' ) }
						value={ cartIcon }
						onChange={ ( value: 'cart' | 'bag' | 'bag-alt' ) => {
							setAttributes( {
								cartIcon: value,
							} );
						} }
					>
						<ToggleGroupControlOption
							value={ 'cart' }
							label={ <Icon size={ 32 } icon={ cartOutline } /> }
						/>
						<ToggleGroupControlOption
							value={ 'bag' }
							label={ <Icon size={ 32 } icon={ bag } /> }
						/>
						<ToggleGroupControlOption
							value={ 'bag-alt' }
							label={ <Icon size={ 32 } icon={ bagAlt } /> }
						/>
					</ToggleGroupControl>
				</PanelBody>
			</InspectorControls>
			<a
				className="wc-block-cart-link"
				href={ '#cart-pseudo-link' }
				onClick={ ( event ) => event.preventDefault() }
			>
				<QuantityBadge
					icon={ cartIcon }
					productCountVisibility={ 'never' }
				/>
				<PlainText
					className="wc-block-cart-link__text"
					value={
						content !== null ? content : __( 'Cart', 'woocommerce' )
					}
					__experimentalVersion={ 2 }
					onChange={ ( value: string ) =>
						setAttributes( {
							content: value,
						} )
					}
					style={ { backgroundColor: 'transparent', resize: 'none' } }
				/>
			</a>
		</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 block for A form. that allows users to configure: submission method, method, action, email

[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/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"__experimental": true,
	"name": "core/form",
	"title": "Form",
	"category": "common",
	"allowedBlocks": [
		"core/paragraph",
		"core/heading",
		"core/form-input",
		"core/form-submit-button",
		"core/form-submission-notification",
		"core/group",
		"core/columns"
	],
	"description": "A form.",
	"keywords": [ "container", "wrapper", "row", "section" ],
	"textdomain": "default",
	"icon": "feedback",
	"attributes": {
		"submissionMethod": {
			"type": "string",
			"default": "email"
		},
		"method": {
			"type": "string",
			"default": "post"
		},
		"action": {
			"type": "string"
		},
		"email": {
			"type": "string"
		}
	},
	"supports": {
		"anchor": true,
		"color": {
			"gradients": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true,
				"link": true
			}
		},
		"spacing": {
			"margin": true,
			"padding": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalTextDecoration": true,
			"__experimentalFontStyle": true,
			"__experimentalFontWeight": true,
			"__experimentalLetterSpacing": true,
			"__experimentalTextTransform": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		}
	}
}

// File: packages/block-library/src/form/index.js
/**
 * Internal dependencies
 */
import initBlock from '../utils/init-block';
import edit from './edit';
import metadata from './block.json';
import save from './save';
import variations from './variations';
import deprecated from './deprecated';

/**
 * WordPress dependencies
 */
import { addFilter } from '@wordpress/hooks';

const { name } = metadata;

export { metadata, name };

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

export const init = () => {
	// Prevent adding forms inside forms.
	const DISALLOWED_PARENTS = [ 'core/form' ];
	addFilter(
		'blockEditor.__unstableCanInsertBlockType',
		'core/block-library/preventInsertingFormIntoAnotherForm',
		(
			canInsert,
			blockType,
			rootClientId,
			{ getBlock, getBlockParentsByBlockName }
		) => {
			if ( blockType.name !== 'core/form' ) {
				return canInsert;
			}

			for ( const disallowedParentType of DISALLOWED_PARENTS ) {
				const hasDisallowedParent =
					getBlock( rootClientId )?.name === disallowedParentType ||
					getBlockParentsByBlockName(
						rootClientId,
						disallowedParentType
					).length;
				if ( hasDisallowedParent ) {
					return false;
				}
			}
			return true;
		}
	);

	return initBlock( { name, metadata, settings } );
};

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

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

	return (
		<form
			{ ...blockProps }
			encType={ submissionMethod === 'email' ? 'text/plain' : null }
		>
			<InnerBlocks.Content />
		</form>
	);
}


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

[User] Create a Gutenberg block for Block: a8c/book

[Assistant]
// File: blocks/book/src/index.js
/**
 * WordPress dependencies
 */
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

/**
 * External dependencies
 */
import { BookIcon } from './icon';

/**
 * Internal dependencies
 */
import Edit from './edit';
import save from './save';

/**
 * Every block starts by registering a new block type definition.
 *
 * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
 */
export function registerBlock() {
	registerBlockType( 'a8c/book', {
		attributes: {
			author: {
				type: 'string',
			},
			height: {
				type: 'number',
			},
			imageId: {
				type: 'number',
			},
			imageUrl: {
				type: 'string',
				source: 'attribute',
				selector: 'img',
				attribute: 'src',
			},
			publisher: {
				type: 'string',
			},
			publicationDate: {
				type: 'string',
			},
			summary: {
				type: 'string',
			},
			title: {
				type: 'string',
			},
			width: {
				type: 'number',
			},
		},

		title: __( 'Book', 'a8c' ),
		description: __(
			'Show a book with cover and metadata such as author and publisher.',
			'a8c'
		),

		category: 'widgets',
		icon: BookIcon,

		supports: {
			// Removes support for an HTML mode.
			html: false,
			align: [ 'left', 'center', 'right' ],
			lightBlockWrapper: true,
		},

		edit: Edit,
		save,
	} );
}

// File: blocks/book/src/save.js
import { RichText } from '@wordpress/block-editor';
/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

import classnames from 'classnames';
import prefixClasses from './prefixClasses';

/**
 * The save function defines the way in which the different attributes should
 * be combined into the final markup, which is then serialized by the block
 * editor into `post_content`.
 *
 * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save
 *
 * @return {WPElement} Element to render.
 */
export default function save( { className, attributes } ) {
	const {
		author,
		imageId,
		imageUrl,
		publicationDate,
		publisher,
		title,
		width,
	} = attributes;
	const hasMedia = !! imageId;

	const classes = classnames( 'wp-block-a8c-book', className );

	return (

			{ hasMedia && (

			) }

				{ title && (
					<RichText.Content
						tagName="p"
						className={ prefixClasses( '__title' ) }
						value={ title }
					/>
				) }
				{ author && (
					<RichText.Content
						tagName="p"
						className={ prefixClasses( '__author' ) }
						value={ author }
					/>
				) }
				{ publisher && (
					<RichText.Content
						tagName="p"
						className={ prefixClasses( '__publisher' ) }
						value={ publisher }
					/>
				) }
				{ publicationDate && (
					<RichText.Content
						tagName="p"
						className={ prefixClasses( '__publicationDate' ) }
						value={ publicationDate }
					/>
				) }

	);
}


[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] Construct a flexible text block module enabling users to modify ordering, values, type, and three extra options through intuitive configuration controls.

[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/list/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/list",
	"title": "List",
	"category": "text",
	"allowedBlocks": [ "core/list-item" ],
	"description": "An organized collection of items displayed in a specific order.",
	"keywords": [ "bullet list", "ordered list", "numbered list" ],
	"textdomain": "default",
	"attributes": {
		"ordered": {
			"type": "boolean",
			"default": false,
			"role": "content"
		},
		"values": {
			"type": "string",
			"source": "html",
			"selector": "ol,ul",
			"multiline": "li",
			"default": "",
			"role": "content"
		},
		"type": {
			"type": "string"
		},
		"start": {
			"type": "number"
		},
		"reversed": {
			"type": "boolean"
		},
		"placeholder": {
			"type": "string"
		}
	},
	"supports": {
		"anchor": true,
		"html": false,
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"color": {
			"gradients": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"spacing": {
			"margin": true,
			"padding": true,
			"__experimentalDefaultControls": {
				"margin": false,
				"padding": false
			}
		},
		"__unstablePasteTextInline": true,
		"__experimentalOnMerge": true,
		"__experimentalSlashInserter": true,
		"interactivity": {
			"clientNavigation": true
		}
	},
	"selectors": {
		"border": ".wp-block-list:not(.wp-block-list .wp-block-list)"
	},
	"editorStyle": "wp-block-list-editor",
	"style": "wp-block-list"
}

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

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

const { name } = metadata;

export { metadata, name };

const settings = {
	icon,
	example: {
		innerBlocks: [
			{
				name: 'core/list-item',
				attributes: { content: __( 'Alice.' ) },
			},
			{
				name: 'core/list-item',
				attributes: { content: __( 'The White Rabbit.' ) },
			},
			{
				name: 'core/list-item',
				attributes: { content: __( 'The Cheshire Cat.' ) },
			},
			{
				name: 'core/list-item',
				attributes: { content: __( 'The Mad Hatter.' ) },
			},
			{
				name: 'core/list-item',
				attributes: { content: __( 'The Queen of Hearts.' ) },
			},
		],
	},
	transforms,
	edit,
	save,
	deprecated,
};

export { settings };

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

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

export default function save( { attributes } ) {
	const { ordered, type, reversed, start } = attributes;
	const TagName = ordered ? 'ol' : 'ul';
	return (
		<TagName
			{ ...useBlockProps.save( {
				reversed,
				start,
				style: {
					listStyleType:
						ordered && type !== 'decimal' ? type : undefined,
				},
			} ) }
		>
			<InnerBlocks.Content />
		</TagName>
	);
}


[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 WordPress block enabling in-store navigation and page hierarchy tracking, with customizable text alignment, font scaling, and content positioning options for enhanced user orientation.

[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/breadcrumbs/block.json
{
	"name": "woocommerce/breadcrumbs",
	"title": "Store Breadcrumbs",
	"description": "Enable customers to keep track of their location within the store and navigate back to parent pages.",
	"category": "woocommerce",
	"keywords": [ "WooCommerce" ],
	"textdomain": "woocommerce",
	"attributes": {
		"contentJustification": {
			"type": "string"
		},
		"fontSize": {
			"type": "string",
			"default": "small"
		},
		"align": {
			"type": "string",
			"default": "wide"
		}
	},
	"supports": {
		"interactivity": {
			"clientNavigation": true
		},
		"align": [ "wide", "full" ],
		"color": {
			"background": false,
			"link": true
		},
		"html": false,
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontStyle": true,
			"__experimentalFontWeight": true,
			"__experimentalTextTransform": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		}
	},
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/breadcrumbs/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps } from '@wordpress/block-editor';
import { Disabled } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

export interface Attributes {
	className?: string;
}

const Edit = () => {
	const blockProps = useBlockProps( {
		className: 'woocommerce wc-block-breadcrumbs',
	} );

	return (

			<Disabled>
				{ __( 'Breadcrumbs', 'woocommerce' ) }
				{ __( ' / Navigation / Path', 'woocommerce' ) }
			</Disabled>

	);
};

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] Build a WordPress block to Let your visitors send you messages with the tap of a button.

[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/send-a-message/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/send-a-message",
	"title": "Send A Message",
	"description": "Let your visitors send you messages with the tap of a button.",
	"keywords": [ "whatsapp", "messenger", "contact", "support" ],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "grow",
	"icon": "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z'/></svg>",
	"supports": {
		"html": false
	},
	"attributes": {},
	"example": {}
}

// File: projects/plugins/jetpack/extensions/blocks/send-a-message/edit.js
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';

export default function SendAMessageEdit() {
	const blockProps = useBlockProps();
	// Default template is single WhatsApp block until we offer
	// more services
	const DEFAULT_TEMPLATE = [ [ 'jetpack/whatsapp-button', {} ] ];
	const ALLOWED_BLOCKS = [ 'jetpack/whatsapp-button' ];

	return (
		<div { ...blockProps }>
			<InnerBlocks template={ DEFAULT_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
		</div>
	);
}

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

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

	return (
		<div { ...blockProps }>
			<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] Develop a block for Display the order details section. that allows users to configure: 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/totals-wrapper/block.json
{
	"name": "woocommerce/order-confirmation-totals-wrapper",
	"version": "1.0.0",
	"title": "Order Totals Section",
	"description": "Display the order details 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/totals-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-totals',
						{
							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] Build a Gutenberg block that Display a post's comments form. with these attributes: text align

[Assistant]
// File: packages/block-library/src/post-comments-form/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/post-comments-form",
	"title": "Comments Form",
	"category": "theme",
	"description": "Display a post's comments form.",
	"textdomain": "default",
	"attributes": {
		"textAlign": {
			"type": "string"
		}
	},
	"usesContext": [ "postId", "postType" ],
	"supports": {
		"html": false,
		"color": {
			"gradients": true,
			"heading": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"spacing": {
			"margin": true,
			"padding": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontStyle": true,
			"__experimentalFontWeight": true,
			"__experimentalLetterSpacing": true,
			"__experimentalTextTransform": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true,
			"__experimentalDefaultControls": {
				"radius": true,
				"color": true,
				"width": true,
				"style": true
			}
		}
	},
	"editorStyle": "wp-block-post-comments-form-editor",
	"style": [
		"wp-block-post-comments-form",
		"wp-block-buttons",
		"wp-block-button"
	],
	"example": {
		"attributes": {
			"textAlign": "center"
		}
	}
}

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

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

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

export const settings = {
	icon,
	edit,
};

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


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

[User] Create a WordPress block that renders a taxonomy term name with customizable text alignment, heading level, and optional linking functionality.

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

// File: packages/block-library/src/term-name/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/term-name",
	"title": "Term Name",
	"category": "theme",
	"description": "Displays the name of a taxonomy term.",
	"keywords": [ "term title" ],
	"textdomain": "default",
	"usesContext": [ "termId", "taxonomy" ],
	"attributes": {
		"textAlign": {
			"type": "string"
		},
		"level": {
			"type": "number",
			"default": 0
		},
		"isLink": {
			"type": "boolean",
			"default": false
		},
		"levelOptions": {
			"type": "array"
		}
	},
	"supports": {
		"align": [ "wide", "full" ],
		"html": false,
		"color": {
			"gradients": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true,
				"link": true
			}
		},
		"spacing": {
			"padding": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true,
			"__experimentalDefaultControls": {
				"color": true,
				"width": true,
				"style": true
			}
		}
	},
	"style": "wp-block-term-name"
}

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

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

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

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

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


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

[User] Create a WordPress block displaying post terms with customizable alignment, separator, and additional configurable parameters for flexible term presentation.

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

// File: packages/block-library/src/post-terms/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/post-terms",
	"title": "Post Terms",
	"category": "theme",
	"description": "Post terms.",
	"textdomain": "default",
	"attributes": {
		"term": {
			"type": "string"
		},
		"textAlign": {
			"type": "string"
		},
		"separator": {
			"type": "string",
			"default": ", "
		},
		"prefix": {
			"type": "string",
			"default": "",
			"role": "content"
		},
		"suffix": {
			"type": "string",
			"default": "",
			"role": "content"
		}
	},
	"usesContext": [ "postId", "postType" ],
	"example": {
		"viewportWidth": 350
	},
	"supports": {
		"html": false,
		"color": {
			"gradients": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true,
				"link": true
			}
		},
		"spacing": {
			"margin": true,
			"padding": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true,
			"__experimentalDefaultControls": {
				"radius": true,
				"color": true,
				"width": true,
				"style": true
			}
		}
	},
	"style": "wp-block-post-terms"
}

// File: packages/block-library/src/post-terms/index.js
/**
 * WordPress dependencies
 */
import { postCategories as icon } from '@wordpress/icons';
import { addFilter } from '@wordpress/hooks';

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

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

export const settings = {
	icon,
	edit,
};

export const init = () => {
	addFilter(
		'blocks.registerBlockType',
		'core/template-part',
		enhanceVariations
	);

	return initBlock( { name, metadata, settings } );
};


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

[User] Develop a block for Create a break between ideas or sections with a horizontal separator. that allows users to configure: opacity, tag name

[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/separator/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/separator",
	"title": "Separator",
	"category": "design",
	"description": "Create a break between ideas or sections with a horizontal separator.",
	"keywords": [ "horizontal-line", "hr", "divider" ],
	"textdomain": "default",
	"attributes": {
		"opacity": {
			"type": "string",
			"default": "alpha-channel"
		},
		"tagName": {
			"type": "string",
			"enum": [ "hr", "div" ],
			"default": "hr"
		}
	},
	"supports": {
		"anchor": true,
		"align": [ "center", "wide", "full" ],
		"color": {
			"enableContrastChecker": false,
			"__experimentalSkipSerialization": true,
			"gradients": true,
			"background": true,
			"text": false,
			"__experimentalDefaultControls": {
				"background": true
			}
		},
		"spacing": {
			"margin": [ "top", "bottom" ]
		},
		"interactivity": {
			"clientNavigation": true
		}
	},
	"styles": [
		{ "name": "default", "label": "Default", "isDefault": true },
		{ "name": "wide", "label": "Wide Line" },
		{ "name": "dots", "label": "Dots" }
	],
	"editorStyle": "wp-block-separator-editor",
	"style": "wp-block-separator"
}

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

/**
 * 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 deprecated from './deprecated';

const { name } = metadata;

export { metadata, name };

export const settings = {
	icon,
	example: {
		attributes: {
			customColor: '#065174',
			className: 'is-style-wide',
		},
	},
	transforms,
	edit,
	save,
	deprecated,
};

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

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

/**
 * WordPress dependencies
 */
import {
	getColorClassName,
	useBlockProps,
	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
} from '@wordpress/block-editor';

export default function separatorSave( { attributes } ) {
	const { backgroundColor, style, opacity, tagName: Tag } = attributes;
	const customColor = style?.color?.background;
	const colorProps = getColorClassesAndStyles( attributes );
	// The hr support changing color using border-color, since border-color
	// is not yet supported in the color palette, we use background-color.

	// The dots styles uses text for the dots, to change those dots color is
	// using color, not backgroundColor.
	const colorClass = getColorClassName( 'color', backgroundColor );

	const className = clsx(
		{
			'has-text-color': backgroundColor || customColor,
			[ colorClass ]: colorClass,
			'has-css-opacity': opacity === 'css',
			'has-alpha-channel-opacity': opacity === 'alpha-channel',
		},
		colorProps.className
	);

	const styles = {
		backgroundColor: colorProps?.style?.backgroundColor,
		color: colorClass ? undefined : customColor,
	};
	return <Tag { ...useBlockProps.save( { className, style: styles } ) } />;
}


[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]
<|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-pickup-options-block/block.json
{
	"name": "woocommerce/checkout-pickup-options-block",
	"version": "1.0.0",
	"title": "Pickup Method",
	"description": "Shows local pickup locations.",
	"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-pickup-options-block/edit.tsx
/* eslint-disable @wordpress/no-unsafe-wp-apis */
/**
 * External dependencies
 */
import clsx from 'clsx';
import { useBlockProps } from '@wordpress/block-editor';
import { innerBlockAreas } from '@woocommerce/blocks-checkout';
import { useSelect } from '@wordpress/data';
import { checkoutStore as checkoutStoreDescriptor } from '@woocommerce/block-data';
import { LOCAL_PICKUP_ENABLED } from '@woocommerce/block-settings';
import { Disabled } from '@wordpress/components';

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

export const Edit = ( {
	attributes,
	setAttributes,
}: {
	attributes: {
		title: string;
		description: string;
		showStepNumber: boolean;
		className: string;
	};
	setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): JSX.Element | null => {
	const { prefersCollection } = useSelect( ( select ) => {
		const checkoutStore = select( checkoutStoreDescriptor );
		return {
			prefersCollection: checkoutStore.prefersCollection(),
		};
	} );
	const { className } = attributes;

	if ( ! prefersCollection || ! LOCAL_PICKUP_ENABLED ) {
		return null;
	}

	return (
		<FormStepBlock
			attributes={ attributes }
			setAttributes={ setAttributes }
			className={ clsx(
				'wc-block-checkout__shipping-method',
				className
			) }
		>
			<Disabled>
				<Block />
			</Disabled>
			<AdditionalFields block={ innerBlockAreas.PICKUP_LOCATION } />
		</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] Develop a block for Block that displays the checkout button when the Mini-Cart has products. that allows users to configure: lock, checkout button label

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.json
{
	"name": "woocommerce/mini-cart-checkout-button-block",
	"version": "1.0.0",
	"title": "Mini-Cart Proceed to Checkout Button",
	"description": "Block that displays the checkout button when the Mini-Cart has products.",
	"category": "woocommerce",
	"supports": {
		"align": false,
		"html": false,
		"multiple": false,
		"reusable": false,
		"inserter": true,
		"color": {
			"text": true,
			"background": true
		},
		"interactivity": {
			"clientNavigation": true
		}
	},
	"attributes": {
		"lock": {
			"type": "object",
			"default": {
				"remove": false,
				"move": false
			}
		},
		"checkoutButtonLabel": {
			"type": "string",
			"default": ""
		}
	},
	"styles": [
		{
			"name": "fill",
			"label": "Fill",
			"isDefault": true
		},
		{
			"name": "outline",
			"label": "Outline"
		}
	],
	"parent": [ "woocommerce/mini-cart-footer-block" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps } from '@wordpress/block-editor';
import EditableButton from '@woocommerce/editor-components/editable-button';
import clsx from 'clsx';

/**
 * Internal dependencies
 */
import { defaultCheckoutButtonLabel } from './constants';
import { getVariant } from '../utils';

export const Edit = ( {
	attributes,
	setAttributes,
}: {
	attributes: {
		checkoutButtonLabel: string;
	};
	setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): JSX.Element => {
	const blockProps = useBlockProps( {
		className: clsx( 'wc-block-mini-cart__footer-checkout' ),
	} );
	const { checkoutButtonLabel } = attributes;

	return (
		<div { ...blockProps }>
			<EditableButton
				variant={ getVariant( blockProps.className, 'contained' ) }
				value={ checkoutButtonLabel }
				placeholder={ defaultCheckoutButtonLabel }
				onChange={ ( content ) => {
					setAttributes( {
						checkoutButtonLabel: content,
					} );
				} }
				style={ blockProps.style }
			/>
		</div>
	);
};

export const Save = (): JSX.Element => {
	return <div { ...useBlockProps.save() }></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 WordPress block that introduces adjustable white space between elements, featuring configurable height and width attributes for precise spacing management.

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

// File: packages/block-library/src/spacer/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/spacer",
	"title": "Spacer",
	"category": "design",
	"description": "Add white space between blocks and customize its height.",
	"textdomain": "default",
	"attributes": {
		"height": {
			"type": "string",
			"default": "100px"
		},
		"width": {
			"type": "string"
		}
	},
	"usesContext": [ "orientation" ],
	"supports": {
		"anchor": true,
		"spacing": {
			"margin": [ "top", "bottom" ],
			"__experimentalDefaultControls": {
				"margin": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		}
	},
	"editorStyle": "wp-block-spacer-editor",
	"style": "wp-block-spacer"
}

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

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

const { name } = metadata;

export { metadata, name };

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

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

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

export default function save( { attributes } ) {
	const { height, width, style } = attributes;
	const { layout: { selfStretch } = {} } = style || {};
	// If selfStretch is set to 'fill' or 'fit', don't set default height.
	const finalHeight =
		selfStretch === 'fill' || selfStretch === 'fit' ? undefined : height;
	return (
		<div
			{ ...useBlockProps.save( {
				style: {
					height: getSpacingPresetCssVar( finalHeight ),
					width: getSpacingPresetCssVar( width ),
				},
				'aria-hidden': true,
			} ) }
		/>
	);
}


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

[User] Build a Gutenberg block that Describe in a few words what this site is about. This is important for search results, sharing on social media, and gives overall clarity to visitors. with these attributes: text align, level, level options

[Assistant]
// File: packages/block-library/src/site-tagline/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/site-tagline",
	"title": "Site Tagline",
	"category": "theme",
	"description": "Describe in a few words what this site is about. This is important for search results, sharing on social media, and gives overall clarity to visitors.",
	"keywords": [ "description" ],
	"textdomain": "default",
	"attributes": {
		"textAlign": {
			"type": "string"
		},
		"level": {
			"type": "number",
			"default": 0
		},
		"levelOptions": {
			"type": "array",
			"default": [ 0, 1, 2, 3, 4, 5, 6 ]
		}
	},
	"example": {
		"viewportWidth": 350,
		"attributes": {
			"textAlign": "center"
		}
	},
	"supports": {
		"align": [ "wide", "full" ],
		"html": false,
		"color": {
			"gradients": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"contentRole": true,
		"spacing": {
			"margin": true,
			"padding": true,
			"__experimentalDefaultControls": {
				"margin": false,
				"padding": false
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalFontStyle": true,
			"__experimentalFontWeight": true,
			"__experimentalLetterSpacing": true,
			"__experimentalWritingMode": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true
		}
	},
	"editorStyle": "wp-block-site-tagline-editor",
	"style": "wp-block-site-tagline"
}

// File: packages/block-library/src/site-tagline/index.js
/**
 * Internal dependencies
 */
import initBlock from '../utils/init-block';
import metadata from './block.json';
import edit from './edit';
import icon from './icon';
import deprecated from './deprecated';

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

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

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


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

[User] Create a Gutenberg block for Displays the description of the product.

[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-description/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "woocommerce/product-description",
	"title": "Product Description",
	"description": "Displays the description of the product.",
	"category": "woocommerce",
	"textdomain": "woocommerce",
	"usesContext": [ "postId", "postType", "queryId" ],
	"ancestor": [
		"woocommerce/single-product",
		"woocommerce/product-template",
		"core/post-template"
	],
	"supports": {
		"interactivity": {
			"clientNavigation": true
		},
		"align": [ "wide", "full" ],
		"html": false,
		"layout": true,
		"background": {
			"backgroundImage": true,
			"backgroundSize": true,
			"__experimentalDefaultControls": {
				"backgroundImage": true
			}
		},
		"dimensions": {
			"minHeight": true
		},
		"spacing": {
			"blockGap": true,
			"padding": true,
			"margin": true,
			"__experimentalDefaultControls": {
				"margin": false,
				"padding": false
			}
		},
		"color": {
			"gradients": true,
			"heading": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": false,
				"text": false
			}
		},
		"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
			}
		}
	}
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-description/edit.tsx
/**
 * External dependencies
 */
import { useQueryLoopProductContextValidation } from '@woocommerce/base-hooks';
import {
	RecursionProvider,
	useBlockProps,
	useHasRecursion,
	Warning,
} from '@wordpress/block-editor';
import { useEntityProp } from '@wordpress/core-data';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import { ProductDescriptionEditProps } from './types';

function Placeholder( { layoutClassNames } ) {
	const blockProps = useBlockProps( { className: layoutClassNames } );
	return (

				{ __(
					'This block displays the product description. When viewing a product page, the description content will automatically appear here.',
					'woocommerce'
				) }

	);
}

function Content( props ) {
	const { context: { postType, postId } = {}, layoutClassNames } = props;

	const [ , , content ] = useEntityProp(
		'postType',
		postType,
		'content',
		postId
	);
	const blockProps = useBlockProps( { className: layoutClassNames } );

	return content?.protected ? (

			<Warning>
				{ __( 'This content is password protected.', 'woocommerce' ) }
			</Warning>

	) : (

	);
}

function RecursionError() {
	const blockProps = useBlockProps();
	return (

			<Warning>
				{ __(
					'Block cannot be rendered inside itself.',
					'woocommerce'
				) }
			</Warning>

	);
}

export default function ProductDescriptionEdit( {
	context,
	__unstableLayoutClassNames: layoutClassNames,
	__unstableParentLayout: parentLayout,
	clientId,
}: ProductDescriptionEditProps ) {
	const { postId: contextPostId, postType: contextPostType } = context;
	const hasAlreadyRendered = useHasRecursion( contextPostId );
	const { hasInvalidContext, warningElement } =
		useQueryLoopProductContextValidation( {
			clientId,
			postType: contextPostType,
			blockName: __( 'Product Description', 'woocommerce' ),
		} );
	if ( hasInvalidContext ) {
		return warningElement;
	}

	if ( contextPostId && contextPostType && hasAlreadyRendered ) {
		return <RecursionError />;
	}

	return (
		<RecursionProvider uniqueId={ contextPostId }>
			{ contextPostId && contextPostType ? (
				<Content
					context={ context }
					parentLayout={ parentLayout }
					layoutClassNames={ layoutClassNames }
				/>
			) : (
				<Placeholder layoutClassNames={ layoutClassNames } />
			) }
		</RecursionProvider>
	);
}


[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] Construct a custom WordPress block featuring flexible label modification capabilities for enhanced design control.

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

// File: packages/block-library/src/home-link/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/home-link",
	"category": "design",
	"parent": [ "core/navigation" ],
	"title": "Home Link",
	"description": "Create a link that always points to the homepage of the site. Usually not necessary if there is already a site title link present in the header.",
	"textdomain": "default",
	"attributes": {
		"label": {
			"type": "string",
			"role": "content"
		}
	},
	"usesContext": [
		"textColor",
		"customTextColor",
		"backgroundColor",
		"customBackgroundColor",
		"fontSize",
		"customFontSize",
		"style"
	],
	"supports": {
		"reusable": false,
		"html": false,
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		}
	},
	"editorStyle": "wp-block-home-link-editor",
	"style": "wp-block-home-link"
}

// File: packages/block-library/src/home-link/index.js
/**
 * WordPress dependencies
 */
import { _x } from '@wordpress/i18n';
import { home } from '@wordpress/icons';

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

const { name } = metadata;

export { metadata, name };

export const settings = {
	icon: home,

	edit,

	save,

	example: {
		attributes: {
			label: _x( 'Home Link', 'block example' ),
		},
	},
};

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

// File: packages/block-library/src/home-link/save.js
/**
 * WordPress dependencies
 */
import { InnerBlocks } from '@wordpress/block-editor';

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


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

[User] Build a Gutenberg block that This block is deprecated. Please use the Columns block instead. with these attributes: content, columns, width

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

// File: packages/block-library/src/text-columns/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/text-columns",
	"title": "Text Columns (deprecated)",
	"icon": "columns",
	"category": "design",
	"description": "This block is deprecated. Please use the Columns block instead.",
	"textdomain": "default",
	"attributes": {
		"content": {
			"type": "array",
			"source": "query",
			"selector": "p",
			"query": {
				"children": {
					"type": "string",
					"source": "html"
				}
			},
			"default": [ {}, {} ]
		},
		"columns": {
			"type": "number",
			"default": 2
		},
		"width": {
			"type": "string"
		}
	},
	"supports": {
		"inserter": false,
		"interactivity": {
			"clientNavigation": true
		}
	},
	"editorStyle": "wp-block-text-columns-editor",
	"style": "wp-block-text-columns"
}

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

const { name } = metadata;

export { metadata, name };

export const settings = {
	transforms,
	getEditWrapperProps( attributes ) {
		const { width } = attributes;
		if ( 'wide' === width || 'full' === width ) {
			return { 'data-align': width };
		}
	},
	edit,
	save,
};

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

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

export default function save( { attributes } ) {
	const { width, content, columns } = attributes;
	return (
		<div
			{ ...useBlockProps.save( {
				className: `align${ width } columns-${ columns }`,
			} ) }
		>
			{ Array.from( { length: columns } ).map( ( _, index ) => (
				<div className="wp-block-column" key={ `column-${ index }` }>
					<RichText.Content
						tagName="p"
						value={ content?.[ index ]?.children }
					/>
				</div>
			) ) }
		</div>
	);
}


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

[User] Develop a widget block featuring customizable icon styling with multiple configuration settings, including 9 total color and design 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/social-links/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/social-links",
	"title": "Social Icons",
	"category": "widgets",
	"allowedBlocks": [ "core/social-link" ],
	"description": "Display icons linking to your social profiles or sites.",
	"keywords": [ "links" ],
	"textdomain": "default",
	"attributes": {
		"iconColor": {
			"type": "string"
		},
		"customIconColor": {
			"type": "string"
		},
		"iconColorValue": {
			"type": "string"
		},
		"iconBackgroundColor": {
			"type": "string"
		},
		"customIconBackgroundColor": {
			"type": "string"
		},
		"iconBackgroundColorValue": {
			"type": "string"
		},
		"openInNewTab": {
			"type": "boolean",
			"default": false
		},
		"showLabels": {
			"type": "boolean",
			"default": false
		},
		"size": {
			"type": "string"
		}
	},
	"providesContext": {
		"openInNewTab": "openInNewTab",
		"showLabels": "showLabels",
		"iconColor": "iconColor",
		"iconColorValue": "iconColorValue",
		"iconBackgroundColor": "iconBackgroundColor",
		"iconBackgroundColorValue": "iconBackgroundColorValue"
	},
	"supports": {
		"align": [ "left", "center", "right" ],
		"anchor": true,
		"html": false,
		"__experimentalExposeControlsToChildren": true,
		"layout": {
			"allowSwitching": false,
			"allowInheriting": false,
			"allowVerticalAlignment": false,
			"default": {
				"type": "flex"
			}
		},
		"color": {
			"enableContrastChecker": false,
			"background": true,
			"gradients": true,
			"text": false,
			"__experimentalDefaultControls": {
				"background": false
			}
		},
		"spacing": {
			"blockGap": [ "horizontal", "vertical" ],
			"margin": true,
			"padding": true,
			"units": [ "px", "em", "rem", "vh", "vw" ],
			"__experimentalDefaultControls": {
				"blockGap": true,
				"margin": true,
				"padding": false
			}
		},
		"interactivity": {
			"clientNavigation": true
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true,
			"__experimentalDefaultControls": {
				"radius": true,
				"color": true,
				"width": true,
				"style": true
			}
		},
		"contentRole": true
	},
	"styles": [
		{ "name": "default", "label": "Default", "isDefault": true },
		{ "name": "logos-only", "label": "Logos Only" },
		{ "name": "pill-shape", "label": "Pill Shape" }
	],
	"editorStyle": "wp-block-social-links-editor",
	"style": "wp-block-social-links"
}

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

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

const { name } = metadata;

export { metadata, name };

export const settings = {
	example: {
		innerBlocks: [
			{
				name: 'core/social-link',
				attributes: {
					service: 'wordpress',
					url: 'https://wordpress.org',
				},
			},
			{
				name: 'core/social-link',
				attributes: {
					service: 'facebook',
					url: 'https://www.facebook.com/WordPress/',
				},
			},
			{
				name: 'core/social-link',
				attributes: {
					service: 'twitter',
					url: 'https://twitter.com/WordPress',
				},
			},
		],
	},
	icon,
	edit,
	save,
	deprecated,
};

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

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

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

export default function save( props ) {
	const {
		attributes: {
			iconBackgroundColorValue,
			iconColorValue,
			showLabels,
			size,
		},
	} = props;

	const className = clsx( size, {
		'has-visible-labels': showLabels,
		'has-icon-color': iconColorValue,
		'has-icon-background-color': iconBackgroundColorValue,
	} );
	const blockProps = useBlockProps.save( { className } );
	const innerBlocksProps = useInnerBlocksProps.save( blockProps );

	return <ul { ...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] Build a Gutenberg block that Search for and insert an animated image. with these attributes: align, caption, giphy url, 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: projects/plugins/jetpack/extensions/blocks/gif/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/gif",
	"title": "GIF",
	"description": "Search for and insert an animated image.",
	"keywords": [ "animated", "giphy", "image" ],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "embed",
	"icon": "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path fill='none' d='M0 0h24v24H0V0z'/><path d='M18 13v7H4V6h5.02c.05-.71.22-1.38.48-2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5l-2-2zm-1.5 5h-11l2.75-3.53 1.96 2.36 2.75-3.54L16.5 18zm2.8-9.11c.44-.7.7-1.51.7-2.39C20 4.01 17.99 2 15.5 2S11 4.01 11 6.5s2.01 4.5 4.49 4.5c.88 0 1.7-.26 2.39-.7L21 13.42 22.42 12 19.3 8.89zM15.5 9C14.12 9 13 7.88 13 6.5S14.12 4 15.5 4 18 5.12 18 6.5 16.88 9 15.5 9z'/></svg>",
	"supports": {
		"html": false,
		"align": true
	},
	"attributes": {
		"align": {
			"type": "string",
			"default": "center"
		},
		"caption": {
			"type": "string"
		},
		"giphyUrl": {
			"type": "string"
		},
		"searchText": {
			"type": "string"
		},
		"paddingTop": {
			"type": "string",
			"default": "56.2%"
		}
	},
	"example": {
		"attributes": {
			"align": "center",
			"giphyUrl": "https://giphy.com/embed/fxKWgoOG9hzPPkE1oc",
			"paddingTop": "100%",
			"searchText": "WordPress"
		}
	}
}

// File: projects/plugins/jetpack/extensions/blocks/gif/edit.js
import { getBlockIconComponent } from '@automattic/jetpack-shared-extension-utils';
import { RichText, useBlockProps } from '@wordpress/block-editor';
import { Placeholder } from '@wordpress/components';
import { createRef, useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import clsx from 'clsx';
import metadata from './block.json';
import SearchForm from './components/search-form';
import Controls from './controls';
import useFetchGiphyData from './hooks/use-fetch-giphy-data';
import { getUrl, getSelectedGiphyAttributes } from './utils';

const icon = getBlockIconComponent( metadata );

function GifEdit( { attributes, setAttributes, isSelected } ) {
	const { align, caption, giphyUrl, searchText, paddingTop } = attributes;
	const [ captionFocus, setCaptionFocus ] = useState( false );
	const searchFormInputRef = createRef();
	const { isFetching, giphyData, fetchGiphyData } = useFetchGiphyData();
	const blockProps = useBlockProps();

	const setSearchInputFocus = () => {
		searchFormInputRef.current.focus();
		setCaptionFocus( false );
	};

	useEffect( () => {
		if ( ! giphyUrl && giphyData && giphyData[ 0 ] ) {
			setAttributes( getSelectedGiphyAttributes( giphyData[ 0 ] ) );
		}
	}, [ giphyUrl, giphyData, setAttributes ] );

	const onSubmit = async event => {
		event.preventDefault();

		if ( ! attributes.searchText || isFetching ) {
			return;
		}

		const url = await getUrl( attributes.searchText );

		if ( url ) {
			fetchGiphyData( url );
		}
	};

	const onChange = event => setAttributes( { searchText: event.target.value } );
	const onSelectThumbnail = thumbnail => setAttributes( getSelectedGiphyAttributes( thumbnail ) );

	return (
		<div { ...blockProps } className={ clsx( blockProps.className, `align${ align }` ) }>
			<Controls />
			{ ! giphyUrl ? (
				<Placeholder
					className="wp-block-jetpack-gif_placeholder"
					icon={ icon }
					label={ metadata.title }
					instructions={ __( 'Search for a term or paste a Giphy URL', 'jetpack' ) }
				>
					<SearchForm
						onSubmit={ onSubmit }
						onChange={ onChange }
						value={ searchText }
						ref={ searchFormInputRef }
					/>
				</Placeholder>
			) : (

					{ isSelected && (
						<SearchForm
							onSubmit={ onSubmit }
							onChange={ onChange }
							value={ searchText }
							ref={ searchFormInputRef }
						/>
					) }
					{ isSelected && giphyData && giphyData.length > 1 && (

							{ giphyData.map( thumbnail => {
								const thumbnailStyle = {
									backgroundImage: `url(${ thumbnail.images.downsized_still.url })`,
								};
								return (
									<button
										className="wp-block-jetpack-gif_thumbnail-container"
										key={ thumbnail.id }
										onClick={ e => {
											e.preventDefault();
											onSelectThumbnail( thumbnail );
										} }
										style={ thumbnailStyle }
									/>
								);
							} ) }

					) }

					{ ( ! RichText.isEmpty( caption ) || isSelected ) && !! giphyUrl && (
						<RichText
							className="wp-block-jetpack-gif-caption gallery-caption"
							inlineToolbar
							isSelected={ captionFocus }
							onFocus={ () => setCaptionFocus( false ) }
							onChange={ value => setAttributes( { caption: value } ) }
							placeholder={ __( 'Write caption…', 'jetpack' ) }
							tagName="figcaption"
							value={ caption }
						/>
					) }

			) }

	);
}

export default GifEdit;


[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 featuring an appointment scheduling calendar, incorporating customizable attributes like background color, event type visibility, primary color, and three additional configuration options.

[Assistant]
// File: projects/plugins/jetpack/extensions/blocks/calendly/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/calendly",
	"title": "Calendly",
	"description": "Embed a calendar for customers to schedule appointments.",
	"keywords": [ "calendar", "schedule", "appointments", "events", "dates" ],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "grow",
	"icon": "<svg viewBox='0 0 23 24' width='23' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M19,1h-2.3v0c0-0.6-0.4-1-1-1c-0.6,0-1,0.4-1,1v0H8.6v0c0-0.6-0.4-1-1-1c-0.6,0-1,0.4-1,1v0H4C1.8,1,0,2.8,0,5 v15c0,2.2,1.8,4,4,4h15c2.2,0,4-1.8,4-4V5C23,2.8,21.2,1,19,1z M21,20c0,1.1-0.9,2-2,2H4c-1.1,0-2-0.9-2-2V5c0-1.1,0.9-2,2-2h2.6 v0.8c0,0.6,0.4,1,1,1c0.6,0,1-0.4,1-1V3h6.1v0.8c0,0.6,0.4,1,1,1c0.6,0,1-0.4,1-1V3H19c1.1,0,2,0.9,2,2V20z M13.9,14.8l1.4,1.4 c-0.9,0.9-2.1,1.3-3.5,1.3c-2.4,0-4.5-2.1-4.5-4.7s2.1-4.7,4.5-4.7c1.4,0,2.5,0.4,3.4,1.1L14,10.9c-0.5-0.4-1.2-0.6-2.1-0.6 c-1.2,0-2.5,1.1-2.5,2.7c0,1.6,1.3,2.7,2.5,2.7C12.7,15.5,13.4,15.3,13.9,14.8z'/></svg>",
	"supports": {
		"align": true,
		"alignWide": false,
		"html": false
	},
	"attributes": {
		"backgroundColor": {
			"type": "string",
			"default": "ffffff"
		},
		"hideEventTypeDetails": {
			"type": "boolean",
			"default": false
		},
		"primaryColor": {
			"type": "string",
			"default": "00A2FF"
		},
		"textColor": {
			"type": "string",
			"default": "4D5055"
		},
		"style": {
			"type": "string",
			"default": "inline",
			"enum": [ "inline", "link" ]
		},
		"url": {
			"type": "string"
		}
	},
	"example": {
		"attributes": {
			"hideEventTypeDetails": false,
			"style": "inline",
			"url": "https://calendly.com/wpcom/jetpack-block-example"
		},
		"innerBlocks": [
			{
				"name": "jetpack/button",
				"attributes": {
					"element": "a",
					"text": "Schedule time with me",
					"uniqueId": "calendly-widget-id",
					"url": "https://calendly.com/wpcom/jetpack-block-example"
				}
			}
		]
	}
}

// File: projects/plugins/jetpack/extensions/blocks/calendly/edit.js
import { getBlockIconComponent } from '@automattic/jetpack-shared-extension-utils';
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
import { getBlockDefaultClassName } from '@wordpress/blocks';
import { Button, ExternalLink, Placeholder, Spinner, withNotices } from '@wordpress/components';
import { select, dispatch } from '@wordpress/data';
import { useEffect, useState } from '@wordpress/element';
import { __, _x } from '@wordpress/i18n';
import clsx from 'clsx';
import { isEqual } from 'lodash';
import { getValidatedAttributes } from '../../shared/get-validated-attributes';
import testEmbedUrl from '../../shared/test-embed-url';
import metadata from './block.json';
import { CALENDLY_EXAMPLE_URL } from './constants';
import CalendlyControls from './controls';
import { getAttributesFromEmbedCode } from './utils';

import './editor.scss';
import './view.scss';

const innerButtonBlock = {
	name: 'jetpack/button',
	attributes: {
		element: 'a',
		text: __( 'Schedule time with me', 'jetpack' ),
		uniqueId: 'calendly-widget-id',
		url: CALENDLY_EXAMPLE_URL,
	},
};
const icon = getBlockIconComponent( metadata );

export function CalendlyEdit( props ) {
	const { attributes, clientId, name, noticeOperations, noticeUI, setAttributes } = props;
	const defaultClassName = getBlockDefaultClassName( name );
	const validatedAttributes = getValidatedAttributes( metadata.attributes, attributes );

	if ( ! isEqual( validatedAttributes, attributes ) ) {
		setAttributes( validatedAttributes );
	}

	const { backgroundColor, hideEventTypeDetails, primaryColor, textColor, style, url } =
		validatedAttributes;
	const [ embedCode, setEmbedCode ] = useState( url );
	const [ isEditingUrl, setIsEditingUrl ] = useState( false );
	const [ isResolvingUrl, setIsResolvingUrl ] = useState( false );
	const [ embedButtonAttributes, setEmbedButtonAttributes ] = useState( {} );
	const blockProps = useBlockProps();

	const setErrorNotice = () => {
		noticeOperations.removeAllNotices();
		noticeOperations.createErrorNotice(
			__( "Your calendar couldn't be embedded. Please double check your URL or code.", 'jetpack' )
		);
	};

	useEffect( () => {
		if ( ! url || CALENDLY_EXAMPLE_URL === url || 'link' === style ) {
			return;
		}
		testEmbedUrl( url, setIsResolvingUrl ).catch( () => {
			setAttributes( { url: undefined } );
			setErrorNotice();
		} );
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [] );

	const parseEmbedCode = event => {
		if ( ! event ) {
			setErrorNotice();
			return;
		}

		event.preventDefault();

		const newAttributes = getAttributesFromEmbedCode( embedCode );
		if ( ! newAttributes ) {
			setErrorNotice();
			return;
		}

		if ( newAttributes.buttonAttributes && 'link' === newAttributes.style ) {
			const innerButtons = select( 'core/editor' ).getBlocksByClientId( clientId );

			if ( innerButtons.length ) {
				innerButtons[ 0 ].innerBlocks.forEach( block => {
					dispatch( 'core/editor' ).updateBlockAttributes(
						block.clientId,
						newAttributes.buttonAttributes
					);
				} );
			}
			setEmbedButtonAttributes( newAttributes.buttonAttributes );
		}

		testEmbedUrl( newAttributes.url, setIsResolvingUrl )
			.then( () => {
				const newValidatedAttributes = getValidatedAttributes( metadata.attributes, newAttributes );
				setAttributes( newValidatedAttributes );
				setIsEditingUrl( false );
				noticeOperations.removeAllNotices();
			} )
			.catch( () => {
				setAttributes( { url: undefined } );
				setErrorNotice();
			} );
	};

	const blockEmbedding = (

			<Spinner />

{ __( 'Embedding…', 'jetpack' ) }

	);

	const blockPlaceholder = (
		<Placeholder
			label={ __( 'Calendly', 'jetpack' ) }
			instructions={ __( 'Enter your Calendly web address or embed code below.', 'jetpack' ) }
			icon={ icon }
			notices={ noticeUI }
		>
			<form onSubmit={ parseEmbedCode }>
				<input
					type="text"
					id="embedCode"
					onChange={ event => setEmbedCode( event.target.value ) }
					placeholder={ __( 'Calendly web address or embed code…', 'jetpack' ) }
					value={ embedCode || '' }
					className="components-placeholder__input"
				/>

					<Button variant="secondary" type="submit">
						{ _x( 'Embed', 'button label', 'jetpack' ) }
					</Button>

			</form>
			<div className={ `${ defaultClassName }-learn-more` }>
				<ExternalLink href="https://help.calendly.com/hc/en-us/articles/223147027-Embed-options-overview">
					{ __( 'Need help finding your embed code?', 'jetpack' ) }
				</ExternalLink>

		</Placeholder>
	);

	const iframeSrc = () => {
		const query = new URLSearchParams( {
			embed_domain: 'wordpress.com',
			embed_type: 'Inline',
			hide_event_type_details: hideEventTypeDetails ? 1 : 0,
			background_color: backgroundColor,
			primary_color: primaryColor,
			text_color: textColor,
		} );
		return `${ url }?${ query }`;
	};

	const inlinePreview = (
		<>
			<div className={ `${ defaultClassName }-overlay` }>

		</>
	);

	const buttonPreview = (
		<InnerBlocks
			template={ [
				[
					innerButtonBlock.name,
					{
						...innerButtonBlock.attributes,
						...embedButtonAttributes,
						passthroughAttributes: { url: 'url' },
					},
				],
			] }
			templateLock="all"
		/>
	);

	const blockPreview = previewStyle => {
		if ( previewStyle === 'inline' ) {
			return inlinePreview;
		}

		return buttonPreview;
	};

	if ( isResolvingUrl ) {
		return blockEmbedding;
	}

	return (
		<div
			{ ...blockProps }
			className={ clsx( blockProps.className, {
				[ `calendly-style-${ style }` ]: url && ! isEditingUrl,
			} ) }
		>
			<CalendlyControls
				{ ...{
					...props,
					defaultClassName,
					embedCode,
					isEditingUrl,
					parseEmbedCode,
					setEmbedCode,
					setIsEditingUrl,
				} }
			/>
			{ url && ! isEditingUrl ? blockPreview( style ) : blockPlaceholder }

	);
}

export default withNotices( CalendlyEdit );

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

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

	return (

			<InnerBlocks.Content />

	);
}


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

[User] Create a WordPress block displaying financial breakdown details, enabling users to customize the class name and locking preferences.

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

// File: plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-totals/block.json
{
	"name": "woocommerce/checkout-order-summary-totals-block",
	"version": "1.0.0",
	"title": "Totals",
	"description": "Shows the subtotal, fees, discounts, shipping and taxes.",
	"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": false
			}
		}
	},
	"parent": [
		"woocommerce/checkout-order-summary-block"
	],
	"textdomain": "woocommerce",
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3
}

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

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

export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
	const blockProps = useBlockProps();
	const allowedBlocks = getAllowedBlocks(
		innerBlockAreas.CHECKOUT_ORDER_SUMMARY_TOTALS
	);
	const defaultTemplate = [
		[ 'woocommerce/checkout-order-summary-subtotal-block', {}, [] ],
		[ 'woocommerce/checkout-order-summary-fee-block', {}, [] ],
		[ 'woocommerce/checkout-order-summary-discount-block', {}, [] ],
		[ 'woocommerce/checkout-order-summary-shipping-block', {}, [] ],
		[ 'woocommerce/checkout-order-summary-taxes-block', {}, [] ],
	] as TemplateArray;

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

	return (
		<div { ...blockProps }>
			<InnerBlocks
				allowedBlocks={ allowedBlocks }
				template={ defaultTemplate }
			/>
		</div>
	);
};

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


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

[User] Develop a versatile text block component that allows dynamic configuration of ordering, value settings, type selection, and three additional customization parameters.

[Assistant]
// File: packages/block-library/src/list/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/list",
	"title": "List",
	"category": "text",
	"allowedBlocks": [ "core/list-item" ],
	"description": "An organized collection of items displayed in a specific order.",
	"keywords": [ "bullet list", "ordered list", "numbered list" ],
	"textdomain": "default",
	"attributes": {
		"ordered": {
			"type": "boolean",
			"default": false,
			"role": "content"
		},
		"values": {
			"type": "string",
			"source": "html",
			"selector": "ol,ul",
			"multiline": "li",
			"default": "",
			"role": "content"
		},
		"type": {
			"type": "string"
		},
		"start": {
			"type": "number"
		},
		"reversed": {
			"type": "boolean"
		},
		"placeholder": {
			"type": "string"
		}
	},
	"supports": {
		"anchor": true,
		"html": false,
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"color": {
			"gradients": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"spacing": {
			"margin": true,
			"padding": true,
			"__experimentalDefaultControls": {
				"margin": false,
				"padding": false
			}
		},
		"__unstablePasteTextInline": true,
		"__experimentalOnMerge": true,
		"__experimentalSlashInserter": true,
		"interactivity": {
			"clientNavigation": true
		}
	},
	"selectors": {
		"border": ".wp-block-list:not(.wp-block-list .wp-block-list)"
	},
	"editorStyle": "wp-block-list-editor",
	"style": "wp-block-list"
}

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

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

const { name } = metadata;

export { metadata, name };

const settings = {
	icon,
	example: {
		innerBlocks: [
			{
				name: 'core/list-item',
				attributes: { content: __( 'Alice.' ) },
			},
			{
				name: 'core/list-item',
				attributes: { content: __( 'The White Rabbit.' ) },
			},
			{
				name: 'core/list-item',
				attributes: { content: __( 'The Cheshire Cat.' ) },
			},
			{
				name: 'core/list-item',
				attributes: { content: __( 'The Mad Hatter.' ) },
			},
			{
				name: 'core/list-item',
				attributes: { content: __( 'The Queen of Hearts.' ) },
			},
		],
	},
	transforms,
	edit,
	save,
	deprecated,
};

export { settings };

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

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

export default function save( { attributes } ) {
	const { ordered, type, reversed, start } = attributes;
	const TagName = ordered ? 'ol' : 'ul';
	return (
		<TagName
			{ ...useBlockProps.save( {
				reversed,
				start,
				style: {
					listStyleType:
						ordered && type !== 'decimal' ? type : undefined,
				},
			} ) }
		>
			<InnerBlocks.Content />
		</TagName>
	);
}


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

[User] Develop a block for Display an image to represent this site. Update this block and the changes apply everywhere. that allows users to configure: width, is link, link target, should sync icon

[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/site-logo/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/site-logo",
	"title": "Site Logo",
	"category": "theme",
	"description": "Display an image to represent this site. Update this block and the changes apply everywhere.",
	"textdomain": "default",
	"attributes": {
		"width": {
			"type": "number"
		},
		"isLink": {
			"type": "boolean",
			"default": true,
			"role": "content"
		},
		"linkTarget": {
			"type": "string",
			"default": "_self",
			"role": "content"
		},
		"shouldSyncIcon": {
			"type": "boolean"
		}
	},
	"example": {
		"viewportWidth": 500,
		"attributes": {
			"width": 350,
			"className": "block-editor-block-types-list__site-logo-example"
		}
	},
	"supports": {
		"html": false,
		"align": true,
		"alignWide": false,
		"color": {
			"text": false,
			"background": false
		},
		"spacing": {
			"margin": true,
			"padding": true,
			"__experimentalDefaultControls": {
				"margin": false,
				"padding": false
			}
		},
		"interactivity": {
			"clientNavigation": true
		},
		"filter": {
			"duotone": true
		}
	},
	"styles": [
		{
			"name": "default",
			"label": "Default",
			"isDefault": true
		},
		{ "name": "rounded", "label": "Rounded" }
	],
	"selectors": {
		"filter": {
			"duotone": ".wp-block-site-logo img, .wp-block-site-logo .components-placeholder__illustration, .wp-block-site-logo .components-placeholder::before"
		}
	},
	"editorStyle": "wp-block-site-logo-editor",
	"style": "wp-block-site-logo"
}

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

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

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

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

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


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

[User] Build a Gutenberg block that Enable customers to filter the product grid by rating. with these attributes: class name, show counts, display style, 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: plugins/woocommerce/client/blocks/assets/js/blocks/rating-filter/block.json
{
	"name": "woocommerce/rating-filter",
	"title": "Filter by Rating Controls",
	"description": "Enable customers to filter the product grid by rating.",
	"category": "woocommerce",
	"keywords": [ "WooCommerce" ],
	"supports": {
		"interactivity": {
			"clientNavigation": false
		},
		"html": false,
		"multiple": false,
		"color": {
			"background": true,
			"text": true,
			"button": true
		},
		"inserter": false,
		"lock": false
	},
	"attributes": {
		"className": {
			"type": "string",
			"default": ""
		},
		"showCounts": {
			"type": "boolean",
			"default": false
		},
		"displayStyle": {
			"type": "string",
			"default": "list"
		},
		"showFilterButton": {
			"type": "boolean",
			"default": false
		},
		"selectType": {
			"type": "string",
			"default": "multiple"
		},
		"isPreview": {
			"type": "boolean",
			"default": false
		}
	},
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/rating-filter/edit.tsx
/**
 * External dependencies
 */
import { __, _x } from '@wordpress/i18n';
import clsx from 'clsx';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import type { BlockEditProps } from '@wordpress/blocks';
import {
	Disabled,
	Notice,
	PanelBody,
	ToggleControl,
	withSpokenMessages,
	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
	__experimentalToggleGroupControl as ToggleGroupControl,
	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from '@wordpress/components';

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

const noRatingsNotice = (
	<Notice status="warning" isDismissible={ false }>
		<p>
			{ __(
				"Your store doesn't have any products with ratings yet. This filter option will display when a product receives a review.",
				'woocommerce'
			) }
		</p>
	</Notice>
);

const Edit = ( {
	attributes,
	setAttributes,
	clientId,
}: BlockEditProps< Attributes > ) => {
	const {
		className,
		displayStyle,
		showCounts,
		showFilterButton,
		selectType,
	} = attributes;

	const blockProps = useBlockProps( {
		className: clsx( 'wc-block-rating-filter', className ),
	} );

	const getInspectorControls = () => {
		return (
			<InspectorControls key="inspector">
				<PanelBody>
					<UpgradeNotice clientId={ clientId } />
				</PanelBody>
				<PanelBody title={ __( 'Display Settings', 'woocommerce' ) }>
					<ToggleControl
						label={ __( 'Display product count', 'woocommerce' ) }
						checked={ showCounts }
						onChange={ () =>
							setAttributes( {
								showCounts: ! showCounts,
							} )
						}
					/>
					<ToggleGroupControl
						label={ __(
							'Allow selecting multiple options?',
							'woocommerce'
						) }
						isBlock
						value={ selectType || 'multiple' }
						onChange={ ( value: string ) =>
							setAttributes( {
								selectType: value,
							} )
						}
						className="wc-block-attribute-filter__multiple-toggle"
					>
						<ToggleGroupControlOption
							value="multiple"
							label={ _x(
								'Multiple',
								'Number of filters',
								'woocommerce'
							) }
						/>
						<ToggleGroupControlOption
							value="single"
							label={ _x(
								'Single',
								'Number of filters',
								'woocommerce'
							) }
						/>
					</ToggleGroupControl>
					<ToggleGroupControl
						label={ __( 'Display Style', 'woocommerce' ) }
						isBlock
						value={ displayStyle }
						onChange={ ( value: string ) =>
							setAttributes( {
								displayStyle: value,
							} )
						}
						className="wc-block-attribute-filter__display-toggle"
					>
						<ToggleGroupControlOption
							value="list"
							label={ __( 'List', 'woocommerce' ) }
						/>
						<ToggleGroupControlOption
							value="dropdown"
							label={ __( 'Dropdown', 'woocommerce' ) }
						/>
					</ToggleGroupControl>
					<ToggleControl
						label={ __(
							"Show 'Apply filters' button",
							'woocommerce'
						) }
						help={ __(
							'Products will update when the button is clicked.',
							'woocommerce'
						) }
						checked={ showFilterButton }
						onChange={ ( value ) =>
							setAttributes( {
								showFilterButton: value,
							} )
						}
					/>
				</PanelBody>
			</InspectorControls>
		);
	};

	return (
		<>
			{ getInspectorControls() }
			{
				<div { ...blockProps }>
					<Disabled>
						<Block
							attributes={ attributes }
							isEditor={ true }
							noRatingsNotice={ noRatingsNotice }
						/>
					</Disabled>
				</div>
			}
		</>
	);
};

export default withSpokenMessages( Edit );