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

[User] Create a theme block with customizable label

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

// File: packages/block-library/src/query-pagination-previous/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/query-pagination-previous",
	"title": "Previous Page",
	"category": "theme",
	"parent": [ "core/query-pagination" ],
	"description": "Displays the previous posts page link.",
	"textdomain": "default",
	"attributes": {
		"label": {
			"type": "string"
		}
	},
	"usesContext": [
		"queryId",
		"query",
		"paginationArrow",
		"showLabel",
		"enhancedPagination"
	],
	"supports": {
		"reusable": false,
		"html": false,
		"color": {
			"gradients": true,
			"text": false,
			"__experimentalDefaultControls": {
				"background": true
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		}
	}
}

// File: packages/block-library/src/query-pagination-previous/index.js
/**
 * WordPress dependencies
 */
import { queryPaginationPrevious 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] Develop a block for Add custom HTML code and preview it as you edit. that allows users to configure: content

[Assistant]
// File: packages/block-library/src/html/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/html",
	"title": "Custom HTML",
	"category": "widgets",
	"description": "Add custom HTML code and preview it as you edit.",
	"keywords": [ "embed" ],
	"textdomain": "default",
	"attributes": {
		"content": {
			"type": "string",
			"source": "raw",
			"role": "content"
		}
	},
	"supports": {
		"customClassName": false,
		"className": false,
		"html": false,
		"interactivity": {
			"clientNavigation": true
		}
	},
	"editorStyle": "wp-block-html-editor"
}

// File: packages/block-library/src/html/index.js
/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { html 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';

const { name } = metadata;

export { metadata, name };

export const settings = {
	icon,
	example: {
		attributes: {
			content:
				'<marquee>' +
				__( 'Welcome to the wonderful world of blocks…' ) +
				'</marquee>',
		},
	},
	edit,
	save,
	transforms,
};

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

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

export default function save( { attributes } ) {
	return <RawHTML>{ attributes.content }</RawHTML>;
}


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

[User] Create a woocommerce block with customizable align, columns, content visibility, and 4 more options

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

// File: plugins/woocommerce/client/blocks/assets/js/blocks/handpicked-products/block.json
{
	"name": "woocommerce/handpicked-products",
	"title": "Hand-picked Products",
	"category": "woocommerce",
	"keywords": [ "Handpicked Products", "WooCommerce" ],
	"description": "Display a selection of hand-picked products in a grid.",
	"supports": {
		"interactivity": {
			"clientNavigation": false
		},
		"align": [ "wide", "full" ],
		"html": false,
		"inserter": false
	},
	"attributes": {
		"align": {
			"type": "string"
		},
		"columns": {
			"type": "number",
			"default": 3
		},
		"contentVisibility": {
			"type": "object",
			"default": {
				"image": true,
				"title": true,
				"price": true,
				"rating": true,
				"button": true
			},
			"properties": {
				"image": {
					"type": "boolean",
					"image": true
				},
				"title": {
					"type": "boolean",
					"title": true
				},
				"price": {
					"type": "boolean",
					"price": true
				},
				"rating": {
					"type": "boolean",
					"rating": true
				},
				"button": {
					"type": "boolean",
					"button": true
				}
			}
		},
		"orderby": {
			"type": "string",
			"enum": [
				"date",
				"popularity",
				"price_asc",
				"price_desc",
				"rating",
				"title",
				"menu_order"
			],
			"default": "date"
		},
		"products": {
			"type": "array",
			"default": []
		},
		"alignButtons": {
			"type": "boolean",
			"default": false
		},
		"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/handpicked-products/edit.tsx
/**
 * External dependencies
 */
import { BlockControls, useBlockProps } from '@wordpress/block-editor';
import {
	ToolbarGroup,
	Disabled,
	withSpokenMessages,
} from '@wordpress/components';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
/**
 * Internal dependencies
 */
import './editor.scss';
import { Props } from './types';
import { HandpickedProductsInspectorControls } from './inspector-controls';
import { HandpickedProductsEditMode } from './edit-mode';
import { HandpickedProductsBlock } from './block';

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

	const {
		attributes: { products },
	} = props;

	const [ isEditing, setIsEditing ] = useState( ! products.length );

	return (
		<div { ...blockProps }>
			<BlockControls>
				<ToolbarGroup
					controls={ [
						{
							icon: 'edit',
							title: __(
								'Edit selected products',
								'woocommerce'
							),
							onClick: () => setIsEditing( ! isEditing ),
							isActive: isEditing,
						},
					] }
				/>
			</BlockControls>
			<HandpickedProductsInspectorControls { ...props } />
			{ isEditing ? (
				<HandpickedProductsEditMode
					isEditing={ isEditing }
					setIsEditing={ setIsEditing }
					{ ...props }
				/>
			) : (
				<Disabled>
					<HandpickedProductsBlock { ...props } />
				</Disabled>
			) }
		</div>
	);
};

export const Edit = withSpokenMessages( EditBlock );


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

[User] Craft a custom Gutenberg block to showcase the Mini-Cart block's title, incorporating the specified lock attributes.

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json
{
	"name": "woocommerce/mini-cart-title-block",
	"version": "1.0.0",
	"title": "Mini-Cart Title",
	"description": "Block that displays the title of the Mini-Cart block.",
	"category": "woocommerce",
	"supports": {
		"align": false,
		"html": false,
		"multiple": false,
		"reusable": false,
		"inserter": false,
		"lock": false,
		"color": {
			"text": true,
			"background": false
		},
		"typography": {
			"fontSize": true
		},
		"interactivity": {
			"clientNavigation": true
		}
	},
	"attributes": {
		"lock": {
			"type": "object",
			"default": {
				"remove": true,
				"move": true
			}
		}
	},
	"parent": [ "woocommerce/filled-mini-cart-contents-block" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

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

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

	const TEMPLATE = [
		[ 'woocommerce/mini-cart-title-label-block', {} ],
		[ 'woocommerce/mini-cart-title-items-counter-block', {} ],
	];

	return (
		<h2 { ...blockProps }>
			<InnerBlocks
				allowedBlocks={ [
					'woocommerce/mini-cart-title-label-block',
					'woocommerce/mini-cart-title-items-counter-block',
				] }
				template={ TEMPLATE }
				templateLock="all"
			/>
		</h2>
	);
};

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


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

[User] Create a theme block with customizable text align, display as range, display mode, average reading speed

[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-time-to-read/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/post-time-to-read",
	"title": "Time to Read",
	"category": "theme",
	"description": "Show minutes required to finish reading the post. Can also show a word count.",
	"textdomain": "default",
	"usesContext": [ "postId", "postType" ],
	"attributes": {
		"textAlign": {
			"type": "string"
		},
		"displayAsRange": {
			"type": "boolean",
			"default": true
		},
		"displayMode": {
			"type": "string",
			"default": "time"
		},
		"averageReadingSpeed": {
			"type": "number",
			"default": 189
		}
	},
	"supports": {
		"color": {
			"gradients": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"html": false,
		"spacing": {
			"margin": true,
			"padding": true,
			"__experimentalDefaultControls": {
				"margin": false,
				"padding": false
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true
		}
	}
}

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

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

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

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

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


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

[User] Develop a block for Display the downloadable products section. that allows users to configure: heading

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/order-confirmation/downloads-wrapper/block.json
{
	"name": "woocommerce/order-confirmation-downloads-wrapper",
	"version": "1.0.0",
	"title": "Downloads Section",
	"description": "Display the downloadable products 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/downloads-wrapper/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
import { getSetting } from '@woocommerce/settings';
import clsx from 'clsx';

/**
 * Internal dependencies
 */
import './editor.scss';

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

	return (
		<div
			{ ...blockProps }
			className={ clsx( blockProps.className, {
				'store-has-downloads': hasDownloadableProducts,
			} ) }
		>
			<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-downloads',
						{
							lock: {
								remove: true,
							},
						},
					],
				] }
			/>
		</div>
	);
};

export default Edit;


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

[User] Develop a flexible Gutenberg block that enables numerical ratings across different content types, featuring configurable attributes including rating scale, visual color, and three supplementary options.

[Assistant]
// File: projects/plugins/jetpack/extensions/blocks/rating-star/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/rating-star",
	"title": "Star Rating",
	"description": "Rate movies, books, songs, recipes — anything you can put a number on.",
	"keywords": [ "star", "rating", "review" ],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "widgets",
	"icon": "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z'/></svg>",
	"supports": {
		"html": false
	},
	"styles": [
		{
			"name": "filled",
			"label": "Filled",
			"isDefault": true
		},
		{
			"name": "outlined",
			"label": "Outlined"
		}
	],
	"attributes": {
		"rating": {
			"type": "number",
			"default": 1
		},
		"maxRating": {
			"type": "number",
			"default": 5
		},
		"color": {
			"type": "string"
		},
		"ratingStyle": {
			"type": "string",
			"default": "star"
		},
		"className": {
			"type": "string"
		},
		"align": {
			"type": "string",
			"default": "left"
		}
	},
	"example": {}
}

// File: projects/plugins/jetpack/extensions/blocks/rating-star/edit.js
import {
	AlignmentToolbar,
	BlockControls,
	InspectorControls,
	PanelColorSettings,
	useBlockProps,
} from '@wordpress/block-editor';
import { PanelBody, RangeControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

export const Rating = ( { id, setRating, children } ) => {
	const setNewRating = newRating => () => setRating( newRating );
	const maybeSetNewRating =
		newRating =>
		( { code } ) =>
			code === 'Enter' ? setRating( newRating ) : null;

	return (

			{ children }

	);
};

export default Symbol =>
	function ( { setAttributes, attributes: { align, color, rating, maxRating } } ) {
		const blockProps = useBlockProps();

		const setNewMaxRating = newMaxRating => setAttributes( { maxRating: newMaxRating } );
		const setNewColor = newColor => setAttributes( { color: newColor } );
		const setNewRating = newRating => {
			if ( newRating === rating ) {
				// Same number clicked twice.
				// Check if a half rating.
				if ( Math.ceil( rating ) === rating ) {
					// Whole number.
					newRating = newRating - 0.5;
				}
			} else if ( rating === 0.5 && newRating === 1 ) {
				// Clicking the 0.5 star updates to 0 stars.
				newRating = 0;
			}

			setAttributes( { rating: newRating } );
		};

		return (

				<BlockControls>
					<AlignmentToolbar
						value={ align }
						onChange={ nextAlign => setAttributes( { align: nextAlign } ) }
					/>
				</BlockControls>

					{ Array.from( Array( Math.ceil( maxRating ) ), ( _, i ) => i + 1 ).map( position => (
						<Rating key={ position } id={ position } setRating={ setNewRating }>

								<Symbol
									className={ rating >= position - 0.5 ? null : 'is-rating-unfilled' }
									color={ color }
								/>

								<Symbol
									className={ rating >= position ? null : 'is-rating-unfilled' }
									color={ color }
								/>

						</Rating>
					) ) }

				<InspectorControls>
					<PanelBody title={ __( 'Settings', 'jetpack' ) }>
						<RangeControl
							label={ __( 'Highest rating', 'jetpack' ) }
							value={ maxRating }
							onChange={ setNewMaxRating }
							min={ 2 }
							max={ 10 }
							__nextHasNoMarginBottom={ true }
							__next40pxDefaultSize={ true }
						/>
					</PanelBody>
					<PanelColorSettings
						title={ __( 'Color', 'jetpack' ) }
						initialOpen
						colorSettings={ [
							{
								value: color,
								onChange: setNewColor,
								label: __( 'Color', 'jetpack' ),
							},
						] }
					/>
				</InspectorControls>

		);
	};

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

// This is a dynamic block, meaning that its content is created on the server.
// This function is only to provide a fallback in case the block is deactivated
// or there is any problem with the render_callback in the server.
//
// Note that, unlike the normal ratings block, here we render as many symbols
// as the rating, not as the maxRating. This is for consistency: some symbols (star)
// have filled and stroke UTF-8 equivalents but other symbols don't (dollar, chilli).
// We can't provide the full styled experience using UTF-8, so we optimize
// for consistency.
export default fallbackSymbol =>
	function ( { attributes: { align, rating, color } } ) {
		const blockProps = useBlockProps.save();

		return (

				{ Array.from( Array( Math.ceil( rating ) ), ( _, i ) => i + 1 ).map( position => (

						{ fallbackSymbol }

				) ) }

		);
	};


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

[User] Create a custom WordPress block that helps customers navigate store layouts and parent page relationships, featuring configurable typography and alignment settings for improved user experience.

[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] Craft a customizable WordPress block enabling the collection of customer contact details with configurable locking mechanisms.

[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-contact-information-block/block.json
{
	"name": "woocommerce/checkout-contact-information-block",
	"version": "1.0.0",
	"title": "Contact Information",
	"description": "Collect your customer's contact information.",
	"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-contact-information-block/edit.tsx
/**
 * External dependencies
 */
import clsx from 'clsx';
import { __ } from '@wordpress/i18n';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, ExternalLink } from '@wordpress/components';
import { ADMIN_URL } from '@woocommerce/settings';
import { innerBlockAreas } from '@woocommerce/blocks-checkout';
import Noninteractive from '@woocommerce/base-components/noninteractive';

/**
 * 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 => {
	return (
		<FormStepBlock
			attributes={ attributes }
			setAttributes={ setAttributes }
			className={ clsx(
				'wc-block-checkout__contact-fields',
				attributes?.className
			) }
		>
			<InspectorControls>
				<PanelBody
					title={ __(
						'Account creation and guest checkout',
						'woocommerce'
					) }
				>
					<p className="wc-block-checkout__controls-text">
						{ __(
							'Account creation and guest checkout settings can be managed in your store settings.',
							'woocommerce'
						) }
					</p>
					<ExternalLink
						href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=account` }
					>
						{ __( 'Manage account settings', 'woocommerce' ) }
					</ExternalLink>
				</PanelBody>
			</InspectorControls>
			<Noninteractive>
				<Block />
			</Noninteractive>
			<AdditionalFields block={ innerBlockAreas.CONTACT_INFORMATION } />
		</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] Design a customizable theme block with the ability to dynamically modify and personalize comment identification 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/post-comment/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"__experimental": "fse",
	"name": "core/post-comment",
	"title": "Comment (deprecated)",
	"category": "theme",
	"allowedBlocks": [
		"core/avatar",
		"core/comment-author-name",
		"core/comment-content",
		"core/comment-date",
		"core/comment-edit-link",
		"core/comment-reply-link"
	],
	"description": "This block is deprecated. Please use the Comments block instead.",
	"textdomain": "default",
	"attributes": {
		"commentId": {
			"type": "number"
		}
	},
	"providesContext": {
		"commentId": "commentId"
	},
	"supports": {
		"html": false,
		"inserter": false,
		"interactivity": {
			"clientNavigation": true
		}
	}
}

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

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

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

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

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

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

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


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

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

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

// File: packages/block-library/src/comment-author-avatar/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"__experimental": "fse",
	"name": "core/comment-author-avatar",
	"title": "Comment Author Avatar (deprecated)",
	"category": "theme",
	"ancestor": [ "core/comment-template" ],
	"description": "This block is deprecated. Please use the Avatar block instead.",
	"textdomain": "default",
	"attributes": {
		"width": {
			"type": "number",
			"default": 96
		},
		"height": {
			"type": "number",
			"default": 96
		}
	},
	"usesContext": [ "commentId" ],
	"supports": {
		"html": false,
		"inserter": false,
		"__experimentalBorder": {
			"radius": true,
			"width": true,
			"color": true,
			"style": true
		},
		"color": {
			"background": true,
			"text": false,
			"__experimentalDefaultControls": {
				"background": true
			}
		},
		"spacing": {
			"__experimentalSkipSerialization": true,
			"margin": true,
			"padding": true
		},
		"interactivity": {
			"clientNavigation": true
		}
	}
}

// File: packages/block-library/src/comment-author-avatar/index.js
/**
 * WordPress dependencies
 */
import { commentAuthorAvatar 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] Construct a block for rendering cart shipping information with integrated user-configurable lock settings within the WordPress environment.

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

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

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

export const Edit = ( {
	attributes,
}: {
	attributes: {
		className: string;
	};
} ): JSX.Element => {
	const { className } = attributes;
	const blockProps = useBlockProps();

	return (
		<div { ...blockProps }>
			<Noninteractive>
				<Block className={ className } />
			</Noninteractive>
		</div>
	);
};

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


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

[User] Build a Gutenberg block that Create structured content in rows and columns to display information. with these attributes: has fixed layout, caption, head, and 2 more options

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

// File: packages/block-library/src/table/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/table",
	"title": "Table",
	"category": "text",
	"description": "Create structured content in rows and columns to display information.",
	"textdomain": "default",
	"attributes": {
		"hasFixedLayout": {
			"type": "boolean",
			"default": true
		},
		"caption": {
			"type": "rich-text",
			"source": "rich-text",
			"selector": "figcaption",
			"role": "content"
		},
		"head": {
			"type": "array",
			"default": [],
			"source": "query",
			"selector": "thead tr",
			"query": {
				"cells": {
					"type": "array",
					"default": [],
					"source": "query",
					"selector": "td,th",
					"query": {
						"content": {
							"type": "rich-text",
							"source": "rich-text",
							"role": "content"
						},
						"tag": {
							"type": "string",
							"default": "td",
							"source": "tag"
						},
						"scope": {
							"type": "string",
							"source": "attribute",
							"attribute": "scope"
						},
						"align": {
							"type": "string",
							"source": "attribute",
							"attribute": "data-align"
						},
						"colspan": {
							"type": "string",
							"source": "attribute",
							"attribute": "colspan"
						},
						"rowspan": {
							"type": "string",
							"source": "attribute",
							"attribute": "rowspan"
						}
					}
				}
			}
		},
		"body": {
			"type": "array",
			"default": [],
			"source": "query",
			"selector": "tbody tr",
			"query": {
				"cells": {
					"type": "array",
					"default": [],
					"source": "query",
					"selector": "td,th",
					"query": {
						"content": {
							"type": "rich-text",
							"source": "rich-text",
							"role": "content"
						},
						"tag": {
							"type": "string",
							"default": "td",
							"source": "tag"
						},
						"scope": {
							"type": "string",
							"source": "attribute",
							"attribute": "scope"
						},
						"align": {
							"type": "string",
							"source": "attribute",
							"attribute": "data-align"
						},
						"colspan": {
							"type": "string",
							"source": "attribute",
							"attribute": "colspan"
						},
						"rowspan": {
							"type": "string",
							"source": "attribute",
							"attribute": "rowspan"
						}
					}
				}
			}
		},
		"foot": {
			"type": "array",
			"default": [],
			"source": "query",
			"selector": "tfoot tr",
			"query": {
				"cells": {
					"type": "array",
					"default": [],
					"source": "query",
					"selector": "td,th",
					"query": {
						"content": {
							"type": "rich-text",
							"source": "rich-text",
							"role": "content"
						},
						"tag": {
							"type": "string",
							"default": "td",
							"source": "tag"
						},
						"scope": {
							"type": "string",
							"source": "attribute",
							"attribute": "scope"
						},
						"align": {
							"type": "string",
							"source": "attribute",
							"attribute": "data-align"
						},
						"colspan": {
							"type": "string",
							"source": "attribute",
							"attribute": "colspan"
						},
						"rowspan": {
							"type": "string",
							"source": "attribute",
							"attribute": "rowspan"
						}
					}
				}
			}
		}
	},
	"supports": {
		"anchor": true,
		"align": true,
		"color": {
			"__experimentalSkipSerialization": true,
			"gradients": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"spacing": {
			"margin": true,
			"padding": true,
			"__experimentalDefaultControls": {
				"margin": false,
				"padding": false
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontStyle": true,
			"__experimentalFontWeight": true,
			"__experimentalLetterSpacing": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"__experimentalBorder": {
			"__experimentalSkipSerialization": true,
			"color": true,
			"style": true,
			"width": true,
			"__experimentalDefaultControls": {
				"color": true,
				"style": true,
				"width": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		}
	},
	"selectors": {
		"root": ".wp-block-table > table",
		"spacing": ".wp-block-table"
	},
	"styles": [
		{
			"name": "regular",
			"label": "Default",
			"isDefault": true
		},
		{ "name": "stripes", "label": "Stripes" }
	],
	"editorStyle": "wp-block-table-editor",
	"style": "wp-block-table"
}

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

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

const { name } = metadata;

export { metadata, name };

export const settings = {
	icon,
	example: {
		attributes: {
			head: [
				{
					cells: [
						{
							content: __( 'Version' ),
							tag: 'th',
						},
						{
							content: __( 'Jazz Musician' ),
							tag: 'th',
						},
						{
							content: __( 'Release Date' ),
							tag: 'th',
						},
					],
				},
			],
			body: [
				{
					cells: [
						{
							content: '5.2',
							tag: 'td',
						},
						{
							content: __( 'Jaco Pastorius' ),
							tag: 'td',
						},
						{
							content: __( 'May 7, 2019' ),
							tag: 'td',
						},
					],
				},
				{
					cells: [
						{
							content: '5.1',
							tag: 'td',
						},
						{
							content: __( 'Betty Carter' ),
							tag: 'td',
						},
						{
							content: __( 'February 21, 2019' ),
							tag: 'td',
						},
					],
				},
				{
					cells: [
						{
							content: '5.0',
							tag: 'td',
						},
						{
							content: __( 'Bebo Valdés' ),
							tag: 'td',
						},
						{
							content: __( 'December 6, 2018' ),
							tag: 'td',
						},
					],
				},
			],
		},
		viewportWidth: 450,
	},
	transforms,
	edit,
	save,
	deprecated,
};

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

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

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

export default function save( { attributes } ) {
	const { hasFixedLayout, head, body, foot, caption } = attributes;
	const isEmpty = ! head.length && ! body.length && ! foot.length;

	if ( isEmpty ) {
		return null;
	}

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

	const classes = clsx( colorProps.className, borderProps.className, {
		'has-fixed-layout': hasFixedLayout,
	} );

	const hasCaption = ! RichText.isEmpty( caption );

	const Section = ( { type, rows } ) => {
		if ( ! rows.length ) {
			return null;
		}

		const Tag = `t${ type }`;

		return (
			<Tag>
				{ rows.map( ( { cells }, rowIndex ) => (

						{ cells.map(
							(
								{
									content,
									tag,
									scope,
									align,
									colspan,
									rowspan,
								},
								cellIndex
							) => {
								const cellClasses = clsx( {
									[ `has-text-align-${ align }` ]: align,
								} );

								return (
									<RichText.Content
										className={
											cellClasses
												? cellClasses
												: undefined
										}
										data-align={ align }
										tagName={ tag }
										value={ content }
										key={ cellIndex }
										scope={
											tag === 'th' ? scope : undefined
										}
										colSpan={ colspan }
										rowSpan={ rowspan }
									/>
								);
							}
						) }

				) ) }
			</Tag>
		);
	};

	return (

			{ hasCaption && (
				<RichText.Content
					tagName="figcaption"
					value={ caption }
					className={ __experimentalGetElementClassName( 'caption' ) }
				/>
			) }

	);
}


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

[User] Create a custom WordPress block that lets users effortlessly insert and adjust Google Calendar displays by specifying the calendar's web address and visual dimensions.

[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/google-calendar/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/google-calendar",
	"title": "Google Calendar",
	"description": "Embed a Google Calendar.",
	"keywords": [ "events", "dates", "schedule", "appointments" ],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "embed",
	"icon": "<svg viewBox='0 0 24 23' width='24' height='23' xmlns='http://www.w3.org/2000/svg'><path d='M19.5,23h-15c-2.2,0-4-1.8-4-4V4c0-2.2,1.8-4,4-4h15c2.2,0,4,1.8,4,4v15C23.5,21.2,21.7,23,19.5,23z M4.5,2 c-1.1,0-2,0.9-2,2v15c0,1.1,0.9,2,2,2h15c1.1,0,2-0.9,2-2V4c0-1.1-0.9-2-2-2H4.5z M6.9,3.9L6.9,3.9c0.5,0,0.9,0.4,0.9,0.9V5 c0,0.5-0.4,0.9-0.9,0.9l0,0C6.5,5.9,6.1,5.5,6.1,5V4.7C6.1,4.3,6.5,3.9,6.9,3.9z M17,3.9L17,3.9c0.5,0,0.9,0.4,0.9,0.9V5 c0,0.5-0.4,0.9-0.9,0.9l0,0c-0.5,0-0.9-0.4-0.9-0.9V4.7C16.2,4.3,16.5,3.9,17,3.9z M8.8,17.6c1.8,0,3.2-1,3.2-2.4 c0-1.1-0.7-1.8-1.8-1.9v-0.1c0.9-0.2,1.5-0.9,1.5-1.8c0-1.3-1.2-2.2-2.9-2.2c-1.8,0-2.9,1-3,2.5h1.6c0-0.7,0.6-1.1,1.4-1.1 c0.8,0,1.3,0.4,1.3,1.1c0,0.7-0.5,1.1-1.3,1.1h-1v1.3h1c0.9,0,1.5,0.4,1.5,1.1c0,0.7-0.6,1.2-1.4,1.2c-0.9,0-1.4-0.4-1.5-1.1H5.7 C5.8,16.6,7,17.6,8.8,17.6z M17.6,17.4V9.3h-1.7l-2.1,1.4v1.6l2-1.4h0.1v6.4H17.6z'/></svg>",
	"supports": { "align": true, "alignWide": true, "html": false },
	"attributes": {
		"url": {
			"type": "string"
		},
		"height": {
			"type": "integer",
			"default": 600
		}
	},
	"example": {
		"attributes": {
			"url": "https://calendar.google.com/calendar/embed?src=jb4bu80jirp0u11a6niie21pp4%40group.calendar.google.com&ctz=America/New_York"
		}
	}
}

// File: projects/plugins/jetpack/extensions/blocks/google-calendar/edit.js
import { isWpcomPlatformSite } from '@automattic/jetpack-script-data';
import { getBlockIconComponent } from '@automattic/jetpack-shared-extension-utils';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { getBlockDefaultClassName } from '@wordpress/blocks';
import { Placeholder, SandBox, Button, ExternalLink, withNotices } from '@wordpress/components';
import { compose } from '@wordpress/compose';
import { useEffect, useState } from '@wordpress/element';
import { __, _x } from '@wordpress/i18n';
import { withViewportMatch } from '@wordpress/viewport';
import metadata from './block.json';
import GoogleCalendarInspectorControls from './controls';
import { URL_REGEX, parseEmbed } from './utils';

const icon = getBlockIconComponent( metadata );

export function GoogleCalendarEdit( props ) {
	const {
		attributes: { url, height },
		isMobile,
		isSelected,
		name,
		noticeOperations,
		noticeUI,
		setAttributes,
	} = props;

	const blockProps = useBlockProps();

	const [ editedEmbed, setEditedEmbed ] = useState( url || '' );
	const [ editingUrl, setEditingUrl ] = useState( false );
	const [ interactive, setInteractive ] = useState( false );

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

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

	const setErrorNotice = () => {
		noticeOperations.removeAllNotices();
		noticeOperations.createErrorNotice(
			__(
				"Your calendar couldn't be embedded. Please double check your URL or Embed Code. Please note, you need to use the 'Public URL' or 'Embed Code', the 'Shareable Link' will not work.",
				'jetpack'
			)
		);
	};

	const handleEmbed = event => {
		if ( event ) {
			event.preventDefault();
		}

		const newAttributes = parseEmbed( editedEmbed.trim() );

		if ( ! URL_REGEX.test( newAttributes.url ) ) {
			setErrorNotice();
			return;
		}

		setAttributes( newAttributes );
		setEditingUrl( false );
		noticeOperations.removeAllNotices();
	};

	const getEditForm = formClassName => (
		<form onSubmit={ handleEmbed } className={ formClassName }>
			<textarea
				type="text"
				value={ editedEmbed }
				className="components-placeholder__input"
				aria-label={ __( 'Google Calendar URL or iframe', 'jetpack' ) }
				placeholder={ __( 'Enter URL or iframe to embed here…', 'jetpack' ) }
				onChange={ event => setEditedEmbed( event.target.value ) }
			/>
			<Button variant="secondary" type="submit">
				{ _x( 'Embed', 'button label', 'jetpack' ) }
			</Button>
		</form>
	);

	const defaultClassName = getBlockDefaultClassName( name );
	const iframeHeight = isMobile ? '300' : height;

	const html = `<iframe src="${ url }" style="border:0" scrolling="no" frameborder="0" height="${ iframeHeight }"></iframe>`;

	const permissionsLink = (
		<ExternalLink href="https://en.support.wordpress.com/google-calendar/">
			{ __( 'Enable Permissions for the calendar you want to share', 'jetpack' ) }
		</ExternalLink>
	);

	const controls = (
		<InspectorControls>
			<GoogleCalendarInspectorControls
				className={ `${ defaultClassName }-embed-form-sidebar` }
				embedValue={ editedEmbed }
				onChange={ event => setEditedEmbed( event.target.value ) }
				onSubmit={ handleEmbed }
			/>
		</InspectorControls>
	);

	let content;

	if ( editingUrl || ! url ) {
		const supportLink = isWpcomPlatformSite()
			? 'https://en.support.wordpress.com/wordpress-editor/blocks/google-calendar/'
			: 'https://jetpack.com/support/jetpack-blocks/google-calendar/';

		content = (
			<>
				{ controls }
				<Placeholder
					label={ __( 'Google Calendar', 'jetpack' ) }
					icon={ icon }
					notices={ noticeUI }
				>
					<ol className={ `${ defaultClassName }-placeholder-instructions` }>

{ permissionsLink }

							{ __( 'Paste the embed code you copied from your Google Calendar below', 'jetpack' ) }

					{ getEditForm( `${ defaultClassName }-embed-form-editor` ) }
					<div className={ `${ defaultClassName }-placeholder-links` }>
						<ExternalLink href={ supportLink }>{ __( 'Learn more', 'jetpack' ) }</ExternalLink>

				</Placeholder>
			</>
		);
	} else {
		// Disabled because the overlay div doesn't actually have a role or functionality
		// as far as the user is concerned. We're just catching the first click so that
		// the block can be selected without interacting with the embed preview that the overlay covers.
		/* eslint-disable jsx-a11y/no-static-element-interactions */
		content = (
			<>
				{ controls }

					<SandBox html={ html } onFocus={ hideOverlay } />
					{ ! interactive && (

					) }

			</>
		);
	}

	return
{ content }
;
}

export default compose(
	withNotices,
	withViewportMatch( { isMobile: ' {
	const blockProps = useBlockProps.save();

	return (

			{ url }

	);
};


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

[User] Develop a block for Displays the rating of a product review. that allows users to configure: text align

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

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-rating/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "woocommerce/product-review-rating",
	"title": "Review Rating",
	"category": "woocommerce",
	"ancestor": [ "woocommerce/product-reviews" ],
	"description": "Displays the rating of a product review.",
	"textdomain": "woocommerce",
	"usesContext": [ "commentId" ],
	"attributes": {
		"textAlign": {
			"type": "string"
		}
	},
	"supports": {
		"interactivity": {
			"clientNavigation": true
		},
		"color": {
			"gradients": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		}
	}
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-rating/edit.tsx
/**
 * External dependencies
 */
import clsx from 'clsx';
import { __, sprintf } from '@wordpress/i18n';
import {
	AlignmentToolbar,
	BlockControls,
	useBlockProps,
} from '@wordpress/block-editor';
import type { BlockEditProps } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
import { REVIEWS_STORE_NAME } from '@woocommerce/data';

export default function Edit( {
	// commentId is the ID of the review.
	context: { commentId: reviewId },
	attributes,
	setAttributes,
}: BlockEditProps< {
	textAlign: string;
} > & {
	context: { commentId: string };
} ) {
	const { textAlign } = attributes;
	const className = clsx( 'wc-block-product-review-rating', {
		[ `has-text-align-${ textAlign }` ]: textAlign,
	} );
	const blockProps = useBlockProps( {
		className,
	} );
	const rating = useSelect(
		( select ) => {
			const { getReview } = select( REVIEWS_STORE_NAME );
			const review = reviewId ? getReview( Number( reviewId ) ) : null;
			return review?.rating ?? 4;
		},
		[ reviewId ]
	);

	const starStyle = {
		width: ( rating / 5 ) * 100 + '%',
	};

	const ratingText = sprintf(
		/* translators: %f is referring to the average rating value */
		__( 'Rated %f out of 5', 'woocommerce' ),
		rating
	);

	const ratingHTML = {
		__html: sprintf(
			/* translators: %s is the rating value wrapped in HTML strong tags. */
			__( 'Rated %s out of 5', 'woocommerce' ),
			sprintf( '%f', rating )
		),
	};

	return (
		<>
			<BlockControls>
				<AlignmentToolbar
					value={ attributes.textAlign }
					onChange={ ( newAlign ) => {
						setAttributes( { textAlign: newAlign || '' } );
					} }
				/>
			</BlockControls>

		</>
	);
}


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

[User] Craft a Gutenberg block to showcase dynamically refreshed Instagram post thumbnails, incorporating configuration settings for authentication, user selection, grid layout, and additional customization parameters.

[Assistant]
// File: projects/plugins/jetpack/extensions/blocks/instagram-gallery/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/instagram-gallery",
	"title": "Latest Instagram Posts",
	"description": "Display an automatically updating list of the latest posts from your Instagram feed.",
	"keywords": [ "images", "photos", "pictures" ],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "embed",
	"icon": "<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12 4.622c2.403 0 2.688.01 3.637.052.877.04 1.354.187 1.67.31.42.163.72.358 1.036.673.315.315.51.615.673 1.035.123.317.27.794.31 1.67.043.95.052 1.235.052 3.638s-.01 2.688-.052 3.637c-.04.877-.187 1.354-.31 1.67-.163.42-.358.72-.673 1.036-.315.315-.615.51-1.035.673-.317.123-.794.27-1.67.31-.95.043-1.234.052-3.638.052s-2.688-.01-3.637-.052c-.877-.04-1.354-.187-1.67-.31-.42-.163-.72-.358-1.036-.673-.315-.315-.51-.615-.673-1.035-.123-.317-.27-.794-.31-1.67-.043-.95-.052-1.235-.052-3.638s.01-2.688.052-3.637c.04-.877.187-1.354.31-1.67.163-.42.358-.72.673-1.036.315-.315.615-.51 1.035-.673.317-.123.794-.27 1.67-.31.95-.043 1.235-.052 3.638-.052M12 3c-2.444 0-2.75.01-3.71.054s-1.613.196-2.185.418c-.592.23-1.094.538-1.594 1.04-.5.5-.807 1-1.037 1.593-.223.572-.375 1.226-.42 2.184C3.01 9.25 3 9.555 3 12s.01 2.75.054 3.71.196 1.613.418 2.186c.23.592.538 1.094 1.038 1.594s1.002.808 1.594 1.038c.572.222 1.227.375 2.185.418.96.044 1.266.054 3.71.054s2.75-.01 3.71-.054 1.613-.196 2.186-.418c.592-.23 1.094-.538 1.594-1.038s.808-1.002 1.038-1.594c.222-.572.375-1.227.418-2.185.044-.96.054-1.266.054-3.71s-.01-2.75-.054-3.71-.196-1.613-.418-2.186c-.23-.592-.538-1.094-1.038-1.594s-1.002-.808-1.594-1.038c-.572-.222-1.227-.375-2.185-.418C14.75 3.01 14.445 3 12 3zm0 4.378c-2.552 0-4.622 2.07-4.622 4.622s2.07 4.622 4.622 4.622 4.622-2.07 4.622-4.622S14.552 7.378 12 7.378zM12 15c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3zm4.804-8.884c-.596 0-1.08.484-1.08 1.08s.484 1.08 1.08 1.08c.596 0 1.08-.484 1.08-1.08s-.483-1.08-1.08-1.08z'></path></svg>",
	"supports": { "align": true, "html": false },
	"attributes": {
		"accessToken": {
			"type": "string"
		},
		"instagramUser": {
			"type": "string"
		},
		"columns": {
			"type": "number",
			"default": 3,
			"min": 1,
			"max": 6
		},
		"count": {
			"type": "number",
			"default": 9,
			"min": 1,
			"max": 30
		},
		"spacing": {
			"type": "number",
			"default": 10,
			"min": 0,
			"max": 50
		},
		"isStackedOnMobile": {
			"type": "boolean",
			"default": true
		}
	}
}

// File: projects/plugins/jetpack/extensions/blocks/instagram-gallery/edit.js
import { isCurrentUserConnected } from '@automattic/jetpack-shared-extension-utils';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { Button, Placeholder, RadioControl, Spinner, withNotices } from '@wordpress/components';
import { useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import clsx from 'clsx';
import { isEmpty, isEqual } from 'lodash';
import { getValidatedAttributes } from '../../shared/get-validated-attributes';
import metadata from './block.json';
import { NEW_INSTAGRAM_CONNECTION } from './constants';
import InstagramGalleryInspectorControls from './controls';
import ImageTransition from './image-transition';
import useConnectInstagram from './use-connect-instagram';
import useConnectWpcom from './use-connect-wpcom';
import useInstagramGallery from './use-instagram-gallery';
import './editor.scss';

const InstagramGalleryEdit = props => {
	const blockProps = useBlockProps();
	const { attributes, isSelected, noticeOperations, noticeUI, setAttributes } = props;
	const { accessToken, align, columns, count, isStackedOnMobile, spacing } = attributes;
	useEffect( () => {
		const validatedAttributes = getValidatedAttributes( metadata.attributes, attributes );
		if ( ! isEqual( validatedAttributes, attributes ) ) {
			setAttributes( validatedAttributes );
		}
	}, [ attributes, setAttributes ] );

	const [ selectedAccount, setSelectedAccount ] = useState( accessToken );
	const { isRequestingWpcomConnectUrl, wpcomConnectUrl } = useConnectWpcom();
	const { images, isLoadingGallery, setImages } = useInstagramGallery( {
		accessToken,
		noticeOperations,
		setAttributes,
		setSelectedAccount,
	} );
	const {
		connectToService,
		disconnectFromService,
		isConnecting,
		isRequestingUserConnections,
		userConnections,
	} = useConnectInstagram( {
		accessToken,
		noticeOperations,
		selectedAccount,
		setAttributes,
		setImages,
		setSelectedAccount,
	} );

	const currentUserConnected = isCurrentUserConnected();
	const unselectedCount = count > images.length ? images.length : count;

	const showPlaceholder = ! isLoadingGallery && ( ! accessToken || isEmpty( images ) );
	const showSidebar = ! showPlaceholder;
	const showLoadingSpinner = accessToken && isLoadingGallery && isEmpty( images );
	const showGallery = ! showPlaceholder && ! showLoadingSpinner;

	const blockClasses = clsx( blockProps.className, { [ `align${ align }` ]: align } );
	const gridClasses = clsx(
		'wp-block-jetpack-instagram-gallery__grid',
		`wp-block-jetpack-instagram-gallery__grid-columns-${ columns }`,
		{ 'is-stacked-on-mobile': isStackedOnMobile }
	);
	const gridStyle = {
		gridGap: spacing,
		// Used to only apply padding when stacked in mobile viewport.
		[ `--latest-instagram-posts-spacing` ]: spacing ? `${ spacing }px` : undefined,
	};
	const photoStyle = { padding: spacing }; // Needed so the updates to the grid gap render when changed.

	const shouldRenderSidebarNotice = () =>
		showSidebar && ! showLoadingSpinner && images.length < count;

	const renderImage = index => {
		if ( images[ index ] ) {
			const image = images[ index ];
			return (
				<ImageTransition
					alt={ image.title || image.url }
					src={ image.url }
					attributes={ attributes }
					spacing={ spacing }
				/>
			);
		}

		return (

		);
	};

	const connectBlockToInstagram = () => {
		if ( selectedAccount && NEW_INSTAGRAM_CONNECTION !== selectedAccount ) {
			setAttributes( {
				accessToken: selectedAccount,
				instagramUser: userConnections.find( v => v.token === selectedAccount ).username,
			} );
			return;
		}
		connectToService();
	};

	const renderPlaceholderInstructions = () => {
		if ( ! currentUserConnected ) {
			return __( "First, you'll need to connect your WordPress.com account.", 'jetpack' );
		}
		if ( ! isRequestingUserConnections && ! userConnections.length ) {
			return __( 'Connect to Instagram to start sharing your images.', 'jetpack' );
		}
	};

	const renderInstagramConnection = () => {
		const hasUserConnections = userConnections.length > 0;
		const radioOptions = [
			...userConnections.map( connection => ( {
				label: `@${ connection.username }`,
				value: connection.token,
			} ) ),
			{
				label: __( 'Add a new account', 'jetpack' ),
				value: NEW_INSTAGRAM_CONNECTION,
			},
		];
		const isButtonDisabled =
			isConnecting || isRequestingUserConnections || ( hasUserConnections && ! selectedAccount );

		return (

				{ hasUserConnections && (
					<RadioControl
						label={ __( 'Select your Instagram account:', 'jetpack' ) }
						onChange={ value => setSelectedAccount( value ) }
						options={ radioOptions }
						selected={ selectedAccount }
					/>
				) }
				{ NEW_INSTAGRAM_CONNECTION === selectedAccount && (

						{ __(
							'If you are currently logged in to Instagram on this device, you might need to log out of it first.',
							'jetpack'
						) }

				) }
				<Button disabled={ isButtonDisabled } variant="primary" onClick={ connectBlockToInstagram }>
					{ isConnecting && __( 'Connecting…', 'jetpack' ) }
					{ isRequestingUserConnections && __( 'Loading your connections…', 'jetpack' ) }
					{ ! isConnecting &&
						! isRequestingUserConnections &&
						__( 'Connect to Instagram', 'jetpack' ) }
				</Button>

		);
	};

	return (

			{ showPlaceholder && (
				<Placeholder
					icon="instagram"
					instructions={ renderPlaceholderInstructions() }
					label={ __( 'Latest Instagram Posts', 'jetpack' ) }
					notices={ noticeUI }
				>
					{ currentUserConnected ? (
						renderInstagramConnection()
					) : (
						<Button
							disabled={ isRequestingWpcomConnectUrl || ! wpcomConnectUrl }
							href={ wpcomConnectUrl }
							variant="secondary"
						>
							{ __( 'Connect to WordPress.com', 'jetpack' ) }
						</Button>
					) }
				</Placeholder>
			) }

			{ showLoadingSpinner && (

					<Spinner />

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

			) }

			{ showGallery && (

					{ Array.from( Array( isSelected ? count : unselectedCount ), ( _, index ) => (

							{ renderImage( index ) }

					) ) }

			) }

			{ showSidebar && (
				<InspectorControls>
					<InstagramGalleryInspectorControls
						accountImageTotal={ images.length }
						attributes={ attributes }
						currentUserConnected={ currentUserConnected }
						disconnectFromService={ disconnectFromService }
						shouldRenderSidebarNotice={ shouldRenderSidebarNotice() }
						setAttributes={ setAttributes }
					/>
				</InspectorControls>
			) }

	);
};

export default withNotices( InstagramGalleryEdit );

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

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

	return (
		instagramUser && (

				<a
					href={ `https://www.instagram.com/${ instagramUser }/` }
					rel="noopener noreferrer"
					target="_blank"
				>{ `https://www.instagram.com/${ instagramUser }/` }

		)
	);
};


[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 change the sorting order of the products. with these attributes: font size, use label

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/catalog-sorting/block.json
{
	"name": "woocommerce/catalog-sorting",
	"title": "Catalog Sorting",
	"description": "Enable customers to change the sorting order of the products.",
	"category": "woocommerce",
	"keywords": [ "WooCommerce" ],
	"supports": {
		"interactivity": {
			"clientNavigation": true
		},
		"color": {
			"text": true,
			"background": false
		},
		"typography": {
			"fontSize": true
		}
	},
	"attributes": {
		"fontSize": {
			"type": "string",
			"default": "small"
		},
		"useLabel": {
			"type": "boolean",
			"default": false
		}
	},
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/catalog-sorting/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { Disabled, PanelBody, ToggleControl } from '@wordpress/components';
import type { BlockEditProps } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

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

const CatalogSorting = ( {
	useLabel,
}: Pick< BlockAttributes, 'useLabel' > ) => {
	return (
		<>
			{ useLabel ? (
				<>
					<label
						className="orderby-label"
						htmlFor="woocommerce-orderby"
					>
						{ __( 'Sort by', 'woocommerce' ) }
					</label>
					<select className="orderby" id="woocommerce-orderby">
						<option>{ __( 'Default', 'woocommerce' ) }</option>
					</select>
				</>
			) : (
				<select className="orderby">
					<option>{ __( 'Default sorting', 'woocommerce' ) }</option>
				</select>
			) }
		</>
	);
};

const Edit = ( {
	attributes,
	setAttributes,
}: BlockEditProps< BlockAttributes > ) => {
	const { useLabel } = attributes;
	const blockProps = useBlockProps( {
		className: 'woocommerce wc-block-catalog-sorting',
	} );

	return (
		<>
			<InspectorControls>
				<PanelBody title={ __( 'Accessibility', 'woocommerce' ) }>
					<ToggleControl
						label={ __( 'Show visual label', 'woocommerce' ) }
						help={ __(
							'Displays "Sort by" text before the dropdown menu to improve clarity and accessibility.',
							'woocommerce'
						) }
						checked={ useLabel }
						onChange={ ( isChecked ) =>
							setAttributes( {
								useLabel: isChecked,
							} )
						}
					/>
				</PanelBody>
			</InspectorControls>
			<div { ...blockProps }>
				<Disabled>
					<CatalogSorting useLabel={ useLabel } />
				</Disabled>
			</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] Implement a flexible text component allowing dynamic content, source attribution, and text alignment options within a WordPress block.

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

// File: packages/block-library/src/pullquote/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/pullquote",
	"title": "Pullquote (deprecated)",
	"category": "text",
	"description": "This block is deprecated. Please use the Quote block instead.",
	"textdomain": "default",
	"attributes": {
		"value": {
			"type": "rich-text",
			"source": "rich-text",
			"selector": "p",
			"role": "content"
		},
		"citation": {
			"type": "rich-text",
			"source": "rich-text",
			"selector": "cite",
			"role": "content"
		},
		"textAlign": {
			"type": "string"
		}
	},
	"supports": {
		"anchor": true,
		"align": [ "left", "right", "wide", "full" ],
		"background": {
			"backgroundImage": true,
			"backgroundSize": true,
			"__experimentalDefaultControls": {
				"backgroundImage": true
			}
		},
		"color": {
			"gradients": true,
			"background": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"dimensions": {
			"minHeight": true,
			"__experimentalDefaultControls": {
				"minHeight": false
			}
		},
		"inserter": false,
		"spacing": {
			"margin": true,
			"padding": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true,
			"__experimentalDefaultControls": {
				"color": true,
				"radius": true,
				"style": true,
				"width": true
			}
		},
		"__experimentalStyle": {
			"typography": {
				"fontSize": "1.5em",
				"lineHeight": "1.6"
			}
		},
		"interactivity": {
			"clientNavigation": true
		}
	},
	"editorStyle": "wp-block-pullquote-editor",
	"style": "wp-block-pullquote"
}

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

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

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

const { name } = metadata;

export { metadata, name };

export const settings = {
	icon,
	example: {
		attributes: {
			value:
				// translators: Quote serving as example for the Pullquote block. Attributed to Matt Mullenweg.
				__(
					'One of the hardest things to do in technology is disrupt yourself.'
				),
			citation: __( 'Matt Mullenweg' ),
		},
	},
	transforms,
	edit,
	save,
	deprecated,
};

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

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

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

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

export default function save( { attributes } ) {
	const { textAlign, citation, value } = attributes;
	const shouldShowCitation = ! RichText.isEmpty( citation );

	return (
		<figure
			{ ...useBlockProps.save( {
				className: clsx( {
					[ `has-text-align-${ textAlign }` ]: textAlign,
				} ),
			} ) }
		>
			<blockquote>
				<RichText.Content tagName="p" value={ value } />
				{ shouldShowCitation && (
					<RichText.Content tagName="cite" value={ citation } />
				) }
			</blockquote>
		</figure>
	);
}


[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 media block with customizable image before, image after, caption, 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: projects/plugins/jetpack/extensions/blocks/image-compare/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/image-compare",
	"title": "Image Compare",
	"description": "Compare two images with a slider. Works best with images of the same size.",
	"keywords": [ "juxtapose", "photos", "pictures", "side by side", "slider" ],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "media",
	"icon": "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M21 4h-6v1.5h6c.3 0 .5.2.5.5v.4l-3.6 3.5L15 8.1v1.8l2.6 1.7c.1.1.3.1.4.1.2 0 .4-.1.5-.2l3-2.9V18c0 .3-.2.5-.5.5h-6V20h6c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM1 6v12c0 1.1.9 2 2 2h10.5V4H3c-1.1 0-2 .9-2 2zm11 12.5H3c-.3 0-.5-.2-.5-.5v-1.4L5 14.7l1.5-1.1.1-.1 3 1.9c.1.1.3.1.4.1.2 0 .4-.1.5-.2L12 14v4.5zm0-6.6l-2.1 2L7 12c-.1-.1-.3-.1-.4-.1h-.1c-.1 0-.3.1-.4.1l-1.1.9-2.5 1.8V6c0-.3.2-.5.5-.5h9v6.4z'/></svg>",
	"supports": { "align": [ "wide", "full" ] },
	"attributes": {
		"imageBefore": {
			"type": "object",
			"default": {}
		},
		"imageAfter": {
			"type": "object",
			"default": {}
		},
		"caption": {
			"type": "string"
		},
		"orientation": {
			"type": "string",
			"default": "horizontal"
		}
	}
}

// File: projects/plugins/jetpack/extensions/blocks/image-compare/edit.js
import { InspectorControls, RichText, useBlockProps } from '@wordpress/block-editor';
import { Placeholder } from '@wordpress/components';
import { useResizeObserver } from '@wordpress/compose';
import { useLayoutEffect, useRef, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { photonizedImgProps } from '../tiled-gallery/utils';
import ImageCompareControls from './controls';
import ImgUpload from './img-upload';
import useDebounce from './use-debounce';
import './editor.scss';
import './view.js';

/* global juxtapose */

const Edit = ( { attributes, clientId, isSelected, setAttributes } ) => {
	const { align, imageBefore, imageAfter, caption, orientation } = attributes;

	const blockProps = useBlockProps();
	const juxtaposeRef = useRef( undefined );
	const [ containerWidth, setContainerWidth ] = useState( 0 );

	// Let's look for resize so we can trigger the thing.
	const setElement = useResizeObserver(
		resizeObserverEntries => {
			const width = resizeObserverEntries[ 0 ]?.contentRect.width;
			if ( width ) {
				setContainerWidth( width );
			}
		},
		{ box: 'border-box' }
	);

	useDebounce(
		sz => {
			if ( sz > 0 ) {
				if ( typeof juxtapose !== 'undefined' && juxtapose.sliders ) {
					// only update for *this* slide
					juxtapose.sliders.forEach( elem => {
						const parentElem = elem.wrapper.parentElement;
						if ( parentElem.id === clientId ) {
							elem.optimizeWrapper( sz );
						}
					} );
				}
			}
		},
		200,
		containerWidth
	);

	// Initial state if attributes already set or not.
	// If both images are set, add juxtapose class, which is picked up by the library.
	const isComplete = imageBefore && imageBefore.url && imageAfter && imageAfter.url;
	const classes = isComplete ? 'image-compare__comparison juxtapose' : 'image-compare__placeholder';

	// Watching for changes to key variables to trigger scan.
	useLayoutEffect( () => {
		if ( imageBefore.url && imageAfter.url && typeof juxtapose !== 'undefined' ) {
			if ( juxtaposeRef.current ) {
				setElement( juxtaposeRef.current );
				juxtapose.makeSlider( juxtaposeRef?.current );
			}
		}
	}, [ align, imageBefore, imageAfter, orientation, setElement ] );

	return (

			<InspectorControls key="controls">
				<ImageCompareControls { ...{ attributes, setAttributes } } />
			</InspectorControls>

				<Placeholder label={ null }>

						<ImgUpload
							image={ {
								id: imageBefore.id,
								url: imageBefore.url,
								alt: imageBefore.alt,
							} }
							placeHolderLabel={ __( 'Image before', 'jetpack' ) }
							onChange={ img => {
								if ( img.media_type === 'image' || img.type === 'image' ) {
									const { src } = photonizedImgProps( img );
									const { alt, id, media_details } = img;
									const width = media_details?.width ?? img.width;
									const height = media_details?.height ?? img.height;

									setAttributes( {
										imageBefore: {
											id,
											url: src ? src : img.url,
											alt,
											width,
											height,
										},
									} );
								}
							} }
						/>

						<ImgUpload
							image={ {
								id: imageAfter.id,
								url: imageAfter.url,
								alt: imageAfter.alt,
							} }
							placeHolderLabel={ __( 'Image after', 'jetpack' ) }
							onChange={ img => {
								if ( img.media_type === 'image' || img.type === 'image' ) {
									const { src } = photonizedImgProps( img );
									const { alt, id, media_details } = img;
									const width = media_details?.width ?? img.width;
									const height = media_details?.height ?? img.height;

									setAttributes( {
										imageAfter: {
											id,
											url: src ? src : img.url,
											alt,
											width,
											height,
										},
									} );
								}
							} }
						/>

				</Placeholder>

			{ ( ! RichText.isEmpty( caption ) ||
				( isSelected && imageBefore.url && imageAfter.url ) ) && (
				<RichText
					tagName="figcaption"
					placeholder={ __( 'Write caption', 'jetpack' ) }
					value={ caption }
					onChange={ value => setAttributes( { caption: value } ) }
					inlineToolbar
				/>
			) }

	);
};

export default Edit;

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

const save = ( { attributes } ) => {
	const blockProps = useBlockProps.save();
	const { imageBefore, imageAfter, caption, orientation } = attributes;

	return (

			{ ! RichText.isEmpty( caption ) && (
				<RichText.Content tagName="figcaption" value={ caption } />
			) }

	);
};

export default save;


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

[User] Build a Gutenberg block that Displays the post count of a taxonomy term. with these attributes: bracket type

[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-count/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/term-count",
	"title": "Term Count",
	"category": "theme",
	"description": "Displays the post count of a taxonomy term.",
	"textdomain": "default",
	"usesContext": [ "termId", "taxonomy" ],
	"attributes": {
		"bracketType": {
			"type": "string",
			"enum": [ "none", "round", "square", "curly", "angle" ],
			"default": "round"
		}
	},
	"supports": {
		"html": false,
		"color": {
			"gradients": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": 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-count"
}

// File: packages/block-library/src/term-count/index.js
/**
 * WordPress dependencies
 */
import { termCount 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] Develop a revenue-generating WordPress block that allows flexible URL customization for monetization purposes.

[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/tock/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/tock",
	"title": "Tock",
	"description": "Reserve a table at your restaurant with Tock.",
	"keywords": [ "booking", "reservation", "restaurant" ],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "monetize",
	"icon": "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M10 15.619C6.84915 15.619 4.28572 13.0542 4.28572 9.90176C4.28572 7.24269 6.10957 5.00183 8.57143 4.36551V0C3.72557 0.693782 0 4.86162 0 9.90176C0 15.4274 4.47715 19.9069 10 19.9069C12.2461 19.9069 14.3193 19.1658 15.9887 17.9148L12.9003 14.825C12.0494 15.3287 11.0581 15.619 10 15.619 M15.7135 9.90176C15.7135 10.9604 15.4233 11.9522 14.9199 12.8035L18.0082 15.8935C19.2585 14.2232 19.9992 12.149 19.9992 9.90176C19.9992 4.86162 16.2736 0.693782 11.4277 0V4.36551C13.8896 5.00183 15.7135 7.24269 15.7135 9.90176'/></svg>",
	"supports": {
		"align": true,
		"html": false,
		"multiple": false
	},
	"attributes": {
		"url": {
			"type": "string"
		}
	},
	"example": {
		"attributes": {
			"url": "roister"
		},
		"viewportWidth": 250
	}
}

// File: projects/plugins/jetpack/extensions/blocks/tock/edit.js
import { useBlockProps, BlockControls } from '@wordpress/block-editor';
import {
	SandBox,
	TextControl,
	ToolbarGroup,
	ToolbarButton,
	Button,
	BaseControl,
	Dropdown,
} from '@wordpress/components';
import {
	createInterpolateElement,
	useCallback,
	useEffect,
	useState,
	useRef,
} from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { keyboardReturn } from '@wordpress/icons';
import { ENTER, ESCAPE } from '@wordpress/keycodes';

import './editor.scss';

const UrlDropdown = ( { tockUrl, setEditedUrl, setUrl, cancel } ) => {
	const firstRender = useRef( true );
	const committedChanges = useRef( false );
	const handleSubmitOrCancel = ( event, onClose ) => {
		const { keyCode } = event;

		if (
			keyCode === ENTER &&
			'' !== tockUrl // Disallow submitting empty values.
		) {
			event.preventDefault();
			commitChanges( onClose );
		}

		if ( keyCode === ESCAPE ) {
			event.preventDefault();
			cancel();
			onClose();
		}
	};

	const commitChanges = close => {
		setUrl();
		committedChanges.current = true;
		close();
	};

	return (
		<ToolbarGroup>
			<Dropdown
				popoverProps={ {
					variant: 'toolbar',
				} }
				onClose={ () =>
					committedChanges.current ? ( committedChanges.current = false ) : cancel()
				}
				placement="bottom-start"
				renderToggle={ ( { isOpen, onToggle } ) => {
					if ( firstRender.current && ! isOpen && ! tockUrl ) {
						firstRender.current = false;
						onToggle();
					}

					return (
						<ToolbarButton
							className="components-toolbar__control"
							label={ __( 'Edit Tock business name', 'jetpack' ) }
							onClick={ () => {
								onToggle();
								isOpen && cancel();
							} }
						>
							{ __( 'Edit', 'jetpack' ) }
						</ToolbarButton>
					);
				} }
				renderContent={ ( { onClose } ) => (
					<BaseControl
						className="jetpack-tock-url-settings"
						help={ createInterpolateElement(
							__(
								'The Tock business can be found in the URL of your public Tock page. For example: www.exploretock.com/myname',
								'jetpack'
							),
							{
								b: ,
							}
						) }
						__nextHasNoMarginBottom={ true }
					>

							<TextControl
								placeholder={ __( 'Add Tock business name', 'jetpack' ) }
								onChange={ setEditedUrl }
								value={ tockUrl }
								onKeyDownCapture={ event => handleSubmitOrCancel( event, onClose ) }
								className="jetpack-tock-url-input"
								__nextHasNoMarginBottom={ true }
								__next40pxDefaultSize={ true }
							/>

								<Button
									type="submit"
									label={ __( 'Submit', 'jetpack' ) }
									icon={ keyboardReturn }
									className="jetpack-tock-url-input-submit"
									onClick={ () => commitChanges( onClose ) }
								/>

					</BaseControl>
				) }
			/>
		</ToolbarGroup>
	);
};

const TockPreview = ( { url, popoverAnchor } ) => {
	const html = `

	`;

	return (

			{
				// Related to this bug (https://github.com/WordPress/gutenberg/issues/16831), the
				// `SandBox` component won't rerun the scripts correctly when the injected `html` prop changes.
				// To work around that, we change the key of the component to force a new one render
			 }
			<SandBox html={ html } key={ `tock-${ url }` } />
			{ /* Use an overlay to prevent interactivity with the preview, since the preview does not always resize correctly. */ }

	);
};

export default function TockBlockEdit( { attributes, setAttributes, isSelected } ) {
	const tockUrl = attributes.url ?? '';
	const [ editedUrl, setEditedUrl ] = useState( tockUrl );

	const setUrl = () => {
		const newUrl = editedUrl.replace( /.*exploretock.com\//, '' );
		setEditedUrl( newUrl );
		setAttributes( { url: newUrl } );
	};

	const cancel = useCallback( () => {
		setEditedUrl( tockUrl );
	}, [ tockUrl ] );

	useEffect( () => {
		if ( ! isSelected ) {
			cancel();
		}
	}, [ isSelected, cancel ] );

	return (

			<BlockControls>
				<UrlDropdown
					tockUrl={ editedUrl }
					setEditedUrl={ setEditedUrl }
					setUrl={ setUrl }
					cancel={ cancel }
				/>
			</BlockControls>
			<TockPreview url={ tockUrl } />

	);
}