[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 selecting one or more attributes, such as color. with these attributes: attribute id, show counts, query type, and 5 more options

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

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/attribute-filter/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"name": "woocommerce/product-filter-attribute",
	"title": "Attribute Filter",
	"description": "Enable customers to filter the product grid by selecting one or more attributes, such as color.",
	"category": "woocommerce",
	"keywords": [ "WooCommerce" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"ancestor": [ "woocommerce/product-filters" ],
	"supports": {
		"interactivity": true,
		"color": {
			"text": true,
			"background": false,
			"__experimentalDefaultControls": {
				"text": false
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontWeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": false
			}
		},
		"spacing": {
			"margin": true,
			"padding": true,
			"blockGap": true,
			"__experimentalDefaultControls": {
				"margin": false,
				"padding": false,
				"blockGap": false
			}
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true,
			"__experimentalDefaultControls": {
				"color": false,
				"radius": false,
				"style": false,
				"width": false
			}
		}
	},
	"usesContext": [ "query", "filterParams" ],
	"attributes": {
		"attributeId": {
			"type": "number",
			"default": 0
		},
		"showCounts": {
			"type": "boolean",
			"default": false
		},
		"queryType": {
			"type": "string",
			"default": "or"
		},
		"displayStyle": {
			"type": "string",
			"default": "woocommerce/product-filter-checkbox-list"
		},
		"selectType": {
			"type": "string",
			"default": "multiple"
		},
		"isPreview": {
			"type": "boolean",
			"default": false
		},
		"sortOrder": {
			"type": "string",
			"default": "count-desc"
		},
		"hideEmpty": {
			"type": "boolean",
			"default": true
		}
	},
	"example": {
		"attributes": {
			"isPreview": true
		}
	},
	"style": "woocommerce/product-filter-attribute-view-style"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/attribute-filter/edit.tsx
/**
 * External dependencies
 */
import {
	useCollection,
	useCollectionData,
} from '@woocommerce/base-context/hooks';
import {
	AttributeSetting,
	AttributeTerm,
	objectHasProp,
} from '@woocommerce/types';
import {
	useBlockProps,
	useInnerBlocksProps,
	BlockContextProvider,
} from '@wordpress/block-editor';
import { withSpokenMessages } from '@wordpress/components';
import { useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { getSetting } from '@woocommerce/settings';

/**
 * Internal dependencies
 */
import { Inspector } from './inspector';
import { attributeOptionsPreview } from './constants';
import './style.scss';
import { EditProps, isAttributeCounts } from './types';
import { getAttributeFromId } from './utils';
import { getAllowedBlocks } from '../../utils/get-allowed-blocks';
import { EXCLUDED_BLOCKS } from '../../constants';
import { FilterOptionItem } from '../../types';
import { InitialDisabled } from '../../components/initial-disabled';
import { Notice } from '../../components/notice';
import { sortFilterOptions } from '../../utils/sort-filter-options';

const ATTRIBUTES = getSetting< AttributeSetting[] >( 'attributes', [] );

const Edit = ( props: EditProps ) => {
	const { attributes: blockAttributes } = props;

	const {
		attributeId,
		queryType,
		isPreview,
		displayStyle,
		showCounts,
		sortOrder,
		hideEmpty,
	} = blockAttributes;

	const attributeObject = getAttributeFromId( attributeId );

	const [ attributeOptions, setAttributeOptions ] = useState<
		FilterOptionItem[]
	>( [] );
	const [ isOptionsLoading, setIsOptionsLoading ] =
		useState< boolean >( true );

	const { results: attributeTerms, isLoading: isTermsLoading } =
		useCollection< AttributeTerm >( {
			namespace: '/wc/store/v1',
			resourceName: 'products/attributes/terms',
			resourceValues: [ attributeObject?.id || 0 ],
			shouldSelect: !! attributeObject?.id,
			query: { orderby: 'menu_order', hide_empty: hideEmpty },
		} );

	const { data: filteredCounts, isLoading: isFilterCountsLoading } =
		useCollectionData( {
			queryAttribute: {
				taxonomy: attributeObject?.taxonomy || '',
				queryType,
			},
			queryState: {},
			isEditor: true,
		} );

	useEffect( () => {
		if ( isTermsLoading || isFilterCountsLoading ) return;

		const termIdHasProducts =
			objectHasProp( filteredCounts, 'attribute_counts' ) &&
			isAttributeCounts( filteredCounts.attribute_counts )
				? filteredCounts.attribute_counts.map( ( term ) => term.term )
				: [];

		if ( termIdHasProducts.length === 0 && hideEmpty ) {
			setAttributeOptions( [] );
		} else {
			const filteredOptions = attributeTerms
				.filter( ( term ) => {
					if ( hideEmpty )
						return termIdHasProducts.includes( term.id );
					return true;
				} )
				.map( ( term, index ) => ( {
					label: term.name,
					value: term.id.toString(),
					selected: index === 0,
					count: term.count,
				} ) );

			setAttributeOptions(
				sortFilterOptions( filteredOptions, sortOrder )
			);
		}

		setIsOptionsLoading( false );
	}, [
		showCounts,
		attributeTerms,
		filteredCounts,
		sortOrder,
		hideEmpty,
		isTermsLoading,
		isFilterCountsLoading,
		attributeObject,
	] );

	const { children, ...innerBlocksProps } = useInnerBlocksProps(
		useBlockProps(),
		{
			allowedBlocks: getAllowedBlocks( EXCLUDED_BLOCKS ),
			template: [
				[
					'core/heading',
					{
						level: 3,
						content:
							attributeObject?.label ||
							__( 'Attribute', 'woocommerce' ),
						style: {
							spacing: {
								margin: {
									bottom: '0.625rem',
									top: '0',
								},
							},
						},
					},
				],
				[ displayStyle ],
			],
		}
	);

	const isLoading =
		isTermsLoading || isFilterCountsLoading || isOptionsLoading;

	if ( Object.keys( ATTRIBUTES ).length === 0 )
		return (

				<Inspector { ...props } />
				<Notice>

						{ __(
							"Attributes are needed for filtering your products. You haven't created any attributes yet.",
							'woocommerce'
						) }

				</Notice>

		);

	if ( ! attributeId || ! attributeObject )
		return (

				<Inspector { ...props } />
				<Notice>

						{ __(
							'Please select an attribute to use this filter!',
							'woocommerce'
						) }

				</Notice>

		);

	if ( ! isLoading && attributeTerms.length === 0 )
		return (

				<Inspector { ...props } />
				<Notice>

						{ __(
							'There are no products with the selected attributes.',
							'woocommerce'
						) }

				</Notice>

		);

	return (

			<Inspector { ...props } />
			<InitialDisabled>
				<BlockContextProvider
					value={ {
						filterData: {
							items:
								attributeOptions.length === 0 && isPreview
									? attributeOptionsPreview
									: attributeOptions,
							isLoading,
							showCounts,
						},
					} }
				>
					{ children }
				</BlockContextProvider>
			</InitialDisabled>

	);
};

export default withSpokenMessages( Edit );

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

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

export default Save;


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

[User] Design a flexible theme block in WordPress that allows adjustable text properties, including type, alignment, level, plus three extra user-defined options.

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

// File: packages/block-library/src/query-title/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/query-title",
	"title": "Query Title",
	"category": "theme",
	"description": "Display the query title.",
	"textdomain": "default",
	"attributes": {
		"type": {
			"type": "string"
		},
		"textAlign": {
			"type": "string"
		},
		"level": {
			"type": "number",
			"default": 1
		},
		"levelOptions": {
			"type": "array"
		},
		"showPrefix": {
			"type": "boolean",
			"default": true
		},
		"showSearchTerm": {
			"type": "boolean",
			"default": true
		}
	},
	"example": {
		"attributes": {
			"type": "search"
		}
	},
	"usesContext": [ "query" ],
	"supports": {
		"align": [ "wide", "full" ],
		"html": false,
		"color": {
			"gradients": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"spacing": {
			"margin": true,
			"padding": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontStyle": true,
			"__experimentalFontWeight": true,
			"__experimentalLetterSpacing": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": 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-query-title"
}

// File: packages/block-library/src/query-title/index.js
/**
 * WordPress dependencies
 */
import { title 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';
import deprecated from './deprecated';

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

export const settings = {
	icon,
	edit,
	variations,
	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] Build a Gutenberg block that Display your most popular content. with these attributes: layout, display author, display date, and 5 more options

[Assistant]
// File: projects/plugins/jetpack/extensions/blocks/top-posts/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/top-posts",
	"title": "Top Posts & Pages",
	"description": "Display your most popular content.",
	"keywords": [ "ranking", "views", "trending", "popular" ],
	"version": "1.0",
	"textdomain": "jetpack",
	"category": "embed",
	"icon": "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><rect fill='none' height='24' width='24'/><path d='M19,5h-2V3H7v2H5C3.9,5,3,5.9,3,7v1c0,2.55,1.92,4.63,4.39,4.94c0.63,1.5,1.98,2.63,3.61,2.96V19H7v2h10v-2h-4v-3.1 c1.63-0.33,2.98-1.46,3.61-2.96C19.08,12.63,21,10.55,21,8V7C21,5.9,20.1,5,19,5z M5,8V7h2v3.82C5.84,10.4,5,9.3,5,8z M19,8 c0,1.3-0.84,2.4-2,2.82V7h2V8z'/></svg>",
	"supports": {
		"align": [ "wide", "full" ],
		"html": false,
		"multiple": true,
		"reusable": true,
		"color": {
			"gradients": true,
			"link": true
		},
		"spacing": {
			"margin": true,
			"padding": true
		},
		"typography": {
			"__experimentalFontFamily": true,
			"fontSize": true,
			"lineHeight": true
		}
	},
	"attributes": {
		"layout": {
			"type": "string",
			"default": "grid"
		},
		"displayAuthor": {
			"type": "boolean",
			"default": true
		},
		"displayDate": {
			"type": "boolean",
			"default": true
		},
		"displayThumbnail": {
			"type": "boolean",
			"default": true
		},
		"displayContext": {
			"type": "boolean",
			"default": false
		},
		"period": {
			"type": "string",
			"default": "7"
		},
		"postsToShow": {
			"type": "number",
			"default": 3
		},
		"postTypes": {
			"type": "object",
			"default": {
				"post": true,
				"page": true
			}
		}
	}
}

// File: projects/plugins/jetpack/extensions/blocks/top-posts/edit.js
import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils';
import apiFetch from '@wordpress/api-fetch';
import { BlockControls, InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { useState, useEffect } from '@wordpress/element';
import clsx from 'clsx';
import { LoadingPostsGrid } from '../../shared/components/loading-posts-grid';
import { TopPostsBlockControls, TopPostsInspectorControls } from './controls';
import { InactiveStatsPlaceholder } from './inactive-placeholder';
import './style.scss';
import './editor.scss';

function TopPostsPreviewItem( props ) {
	return (

			{ props.displayThumbnail && props.thumbnail && (

			) }
			{ props.displayThumbnail && ! props.thumbnail && (

			) }

				{ props.title }

			{ props.displayDate && (
				{ props.date }
			) }
			{ props.displayAuthor && (
				{ props.author }
			) }
			{ props.displayContext && props.context && (

					{ props.context[ 0 ].cat_name }

			) }

	);
}

function TopPostsEdit( { attributes, setAttributes } ) {
	const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } =
		useModuleStatus( 'stats' );
	const blockProps = useBlockProps();
	const { className } = blockProps;

	const [ postsData, setPostsData ] = useState();
	const [ postsToDisplay, setPostsToDisplay ] = useState();
	const [ postTypesData, setPostTypesData ] = useState();
	const [ toggleAttributes, setToggleAttributes ] = useState( {} );

	const {
		displayAuthor,
		displayContext,
		displayDate,
		displayThumbnail,
		layout,
		period,
		postsToShow,
		postTypes,
	} = attributes;

	useEffect( () => {
		apiFetch( { path: `/wpcom/v2/post-types` } ).then( response => {
			setPostTypesData( response );
			response.forEach( type => {
				if ( postTypes && postTypes[ type.id ] ) {
					setToggleAttributes( prevToggleAttributes => ( {
						...prevToggleAttributes,
						[ type.id ]: true,
					} ) );
				}
			} );
		} );
	}, [ postTypes ] );

	useEffect( () => {
		if ( isModuleActive ) {
			apiFetch( {
				path: `/wpcom/v2/top-posts?period=${ period }`,
			} ).then( response => {
				setPostsData( response );
			} );
		}
	}, [ period, isModuleActive ] );

	useEffect( () => {
		const data = postsData;

		if ( ! data ) {
			return;
		}

		const newPosts = [];
		for ( let i = 0; newPosts.length !== postsToShow; i++ ) {
			if ( data[ i ] && postTypes[ data[ i ].type ] ) {
				newPosts.push(
					<TopPostsPreviewItem
						key={ 'jetpack-top-posts-' + data[ i ].id }
						title={ data[ i ].title }
						date={ data[ i ].date }
						author={ data[ i ].author }
						thumbnail={ data[ i ].thumbnail }
						context={ data[ i ].context }
						displayDate={ displayDate }
						displayAuthor={ displayAuthor }
						displayThumbnail={ displayThumbnail }
						displayContext={ displayContext }
					/>
				);
			}

			// Out of posts.
			if ( ! data[ i ] ) {
				break;
			}
		}

		setPostsToDisplay( newPosts );
	}, [
		displayAuthor,
		displayContext,
		displayDate,
		displayThumbnail,
		postsData,
		postTypes,
		postsToShow,
		setPostsToDisplay,
	] );

	let content;

	if ( ! isModuleActive && ! isLoadingModules ) {
		content = (
			<InactiveStatsPlaceholder
				className={ className }
				changeStatus={ changeStatus }
				isLoading={ isChangingStatus }
			/>
		);
	} else if ( ! postsToDisplay ) {
		content = <LoadingPostsGrid />;
	} else {
		content = (
			<>
				<InspectorControls>
					<TopPostsInspectorControls
						attributes={ attributes }
						setAttributes={ setAttributes }
						toggleAttributes={ toggleAttributes }
						setToggleAttributes={ setToggleAttributes }
						postTypesData={ postTypesData }
					/>
				</InspectorControls>

				<BlockControls>
					<TopPostsBlockControls attributes={ attributes } setAttributes={ setAttributes } />
				</BlockControls>

{ postsToDisplay }

			</>
		);
	}

	return (
		<div { ...blockProps } className={ clsx( className, `is-${ layout }-layout` ) }>
			{ content }

	);
}

export default TopPostsEdit;


[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 custom WordPress block to implement a clickable page number sequence that enables users to browse through product review sections efficiently.

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

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/reviews-pagination-numbers/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "woocommerce/product-reviews-pagination-numbers",
	"title": "Reviews Page Numbers",
	"category": "woocommerce",
	"ancestor": [ "woocommerce/product-reviews-pagination" ],
	"description": "Displays a list of page numbers for product reviews pagination.",
	"textdomain": "woocommerce",
	"usesContext": [ "postId" ],
	"supports": {
		"reusable": false,
		"html": false,
		"color": {
			"gradients": true,
			"text": false,
			"__experimentalDefaultControls": {
				"background": true
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		}
	}
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/reviews-pagination-numbers/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps } from '@wordpress/block-editor';
import type { ElementType } from 'react';

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

const PaginationItem = ( {
	content,
	tag: Tag = 'a',
	extraClass = '',
}: {
	content: string;
	tag?: ElementType;
	extraClass?: string;
} ) =>
	Tag === 'a' ? (
		<Tag
			className={ `page-numbers ${ extraClass }` }
			href="#comments-pagination-numbers-pseudo-link"
			onClick={ ( event ) => event.preventDefault() }
		>
			{ content }
		</Tag>
	) : (
		<Tag className={ `page-numbers ${ extraClass }` }>{ content }</Tag>
	);

export default function Edit() {
	return (
		<div { ...useBlockProps() }>
			<PaginationItem content="1" />
			<PaginationItem content="2" />
			<PaginationItem content="3" tag="span" extraClass="current" />
			<PaginationItem content="4" />
			<PaginationItem content="5" />
			<PaginationItem content="..." tag="span" extraClass="dots" />
			<PaginationItem content="8" />
		</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 Embed a Google Document. that allows users to configure: url, aspect ratio, variation

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

// File: projects/plugins/jetpack/extensions/blocks/google-docs-embed/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/google-docs-embed",
	"title": "Google Docs (Beta)",
	"description": "Embed a Google Document.",
	"keywords": [ "document", "gsuite", "doc" ],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "embed",
	"icon": "<svg viewBox='0 0 64 88' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M58,88H6c-3.3,0-6-2.7-6-6V6c0-3.3,2.7-6,6-6h36l22,22v60C64,85.3,61.3,88,58,88z' /><path fill='#FDFFFF' d='M42,0l22,22H42V0z' /><path fill='#FDFFFF' d='M50,39H14v-5h36V39z M50,46H14v5h36V46z M40,58H14v5h26V58z' /></svg>",
	"supports": {
		"align": [ "left", "right", "center", "wide", "full" ],
		"anchor": true
	},
	"attributes": {
		"url": {
			"type": "string",
			"default": ""
		},
		"aspectRatio": {
			"type": "string"
		},
		"variation": {
			"type": "string"
		}
	}
}

// File: projects/plugins/jetpack/extensions/blocks/google-docs-embed/edit.js
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, SelectControl } from '@wordpress/components';
import { Fragment, useEffect } from '@wordpress/element';
import { __, _x } from '@wordpress/i18n';
import Embed from './embed';
import variations from './variations';

const docsVariation = variations?.find( v => v.name === 'jetpack/google-docs' );
const sheetsVariation = variations?.find( v => v.name === 'jetpack/google-sheets' );
const slidesVariation = variations?.find( v => v.name === 'jetpack/google-slides' );

const GOOGLE_DOCUMENT = {
	type: 'document',
	title: docsVariation?.title,
	icon: docsVariation.icon,
	patterns: [ /^(http|https):\/\/(docs\.google.com)\/document\/d\/([A-Za-z0-9_-]+).*?$/i ],
};

const GOOGLE_SPREADSHEET = {
	type: 'spreadsheets',
	title: sheetsVariation?.title,
	icon: sheetsVariation.icon,
	patterns: [ /^(http|https):\/\/(docs\.google.com)\/spreadsheets\/d\/([A-Za-z0-9_-]+).*?$/i ],
};

const GOOGLE_SLIDE = {
	type: 'presentation',
	title: slidesVariation?.title,
	icon: slidesVariation.icon,
	patterns: [ /^(http|https):\/\/(docs\.google.com)\/presentation\/d\/([A-Za-z0-9_-]+).*?$/i ],
};

/**
 * Edit component.
 * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#edit
 *
 * @param {object}   props                  - The block props.
 * @param {object}   props.attributes       - Block attributes.
 * @param {string}   props.attributes.title - Custom title to be displayed.
 * @param {string}   props.className        - Class name for the block.
 * @param {Function} props.setAttributes    - Sets the value for block attributes.
 * @return {Function} Render the edit screen
 */
const GsuiteBlockEdit = props => {
	const {
		attributes: { aspectRatio },
		attributes: { variation },
		attributes: { url },
		setAttributes,
	} = props;

	let icon = '';
	let title = '';
	let patterns = [];
	let type = '';

	useEffect( () => {
		/**
		 * Parse the URL to detect the variation type.
		 *
		 * @return {string} The variation.
		 */
		const detectVariation = () => {
			const regex = /^(http|https):\/\/(docs\.google\.com)\/(.*)\/d\//;
			const matches = url.match( regex );

			switch ( matches[ 3 ] ) {
				case 'document':
					return 'google-docs';

				case 'spreadsheets':
					return 'google-sheets';

				case 'presentation':
					return 'google-slides';
			}

			return '';
		};

		if ( ! variation ) {
			setAttributes( { variation: detectVariation() } );
		}
	}, [ variation, url, setAttributes ] );

	switch ( variation.replace( 'jetpack/', '' ) ) {
		case 'google-docs':
			icon = GOOGLE_DOCUMENT.icon;
			title = GOOGLE_DOCUMENT.title;
			patterns = GOOGLE_DOCUMENT.patterns;
			type = GOOGLE_DOCUMENT.type;
			break;

		case 'google-sheets':
			icon = GOOGLE_SPREADSHEET.icon;
			title = GOOGLE_SPREADSHEET.title;
			patterns = GOOGLE_SPREADSHEET.patterns;
			type = GOOGLE_SPREADSHEET.type;
			break;

		case 'google-slides':
			icon = GOOGLE_SLIDE.icon;
			title = GOOGLE_SLIDE.title;
			patterns = GOOGLE_SLIDE.patterns;
			type = GOOGLE_SLIDE.type;
			break;
	}

	/**
	 * Convert GSuite URL to a preview URL.
	 *
	 * @return {string} The URL pattern.
	 */
	const mapGSuiteURL = () => {
		/**
		 * If the block is not the expected one, return the
		 * original URL as is.
		 */
		if ( patterns.length === 0 || '' === type ) {
			return url;
		}

		/**
		 * Check if the URL is valid.
		 *
		 * If not, return the original URL as is.
		 */
		const matches = url.match( patterns[ 0 ] );
		if (
			null === matches ||
			'undefined' === typeof matches[ 1 ] ||
			'undefined' === typeof matches[ 2 ] ||
			'undefined' === typeof matches[ 3 ]
		) {
			return url;
		}

		return `${ matches[ 1 ] }://${ matches[ 2 ] }/${ type }/d/${ matches[ 3 ] }/preview`;
	};

	const aspectRatios = [
		// translators: default aspect ratio for the embedded Google document.
		{ label: __( 'Default', 'jetpack' ), value: '' },
		// translators: aspect ratio for the embedded Google document.
		{ label: __( '100% - Show the whole document', 'jetpack' ), value: 'ar-100' },
		// translators: aspect ratio for the embedded Google document.
		{ label: __( '50% - Show half of the document', 'jetpack' ), value: 'ar-50' },
	];

	return (
		<>
			<Fragment>
				<Embed
					icon={ icon.src }
					instructions={ [
						__( 'Copy and paste your document link below.', 'jetpack' ),
						__(
							'If your document is private, only readers logged into a Google account with shared access to the document may view it.',
							'jetpack'
						),
					].join( ' ' ) }
					label={ title }
					patterns={ patterns }
					placeholder={ _x( 'Enter the link here…', 'Embed block placeholder', 'jetpack' ) }
					mapUrl={ mapGSuiteURL }
					mismatchErrorMessage={ __(
						'The document couldn’t be embedded. To embed a document, use the link in your browser address bar when editing the document.',
						'jetpack'
					) }
					checkGoogleDocVisibility={ true }
					{ ...props }
				/>
			</Fragment>
			<Fragment>
				<InspectorControls>
					<PanelBody>

							{ __(
								'Select a different aspect-ratio to show more (or less) of your embedded document.',
								'jetpack'
							) }

						<SelectControl
							label={ __( 'Aspect Ratio', 'jetpack' ) }
							value={ aspectRatio }
							options={ aspectRatios }
							onChange={ value => setAttributes( { aspectRatio: value } ) }
							__nextHasNoMarginBottom={ true }
							__next40pxDefaultSize={ true }
						/>
					</PanelBody>
				</InspectorControls>
			</Fragment>
		</>
	);
};
export default GsuiteBlockEdit;

// File: projects/plugins/jetpack/extensions/blocks/google-docs-embed/save.js
const Save = props => {
	const { attributes } = props;

	return (

				{ `\n${ attributes.url }\n` /* URL on its own line as in core embeds. */ }

	);
};

export default Save;


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

[User] Create a woocommerce-product-elements block with customizable product id, text align, width, and 2 more options

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

// File: plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/button/block.json
{
	"name": "woocommerce/product-button",
	"title": "Add to Cart Button",
	"description": "Display a call to action button which either adds the product to the cart, or links to the product page.",
	"category": "woocommerce-product-elements",
	"keywords": [ "WooCommerce" ],
	"usesContext": [
		"query",
		"queryId",
		"postId",
		"collection",
		"woocommerce/isDescendantOfAddToCartWithOptions"
	],
	"textdomain": "woocommerce",
	"attributes": {
		"productId": {
			"type": "number",
			"default": 0
		},
		"textAlign": {
			"type": "string",
			"default": ""
		},
		"width": {
			"type": "number"
		},
		"isDescendentOfSingleProductBlock": {
			"type": "boolean",
			"default": false
		},
		"isDescendentOfQueryLoop": {
			"type": "boolean",
			"default": false
		}
	},
	"supports": {
		"align": [ "wide", "full" ],
		"color": {
			"text": true,
			"background": true,
			"link": false,
			"__experimentalSkipSerialization": true
		},
		"interactivity": true,
		"html": false,
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontWeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"__experimentalBorder": {
			"radius": true,
			"__experimentalSkipSerialization": true
		},
		"spacing": {
			"margin": true,
			"padding": true,
			"__experimentalSkipSerialization": true
		},
		"email": true,
		"__experimentalSelector": ".wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button"
	},
	"ancestor": [
		"woocommerce/all-products",
		"woocommerce/single-product",
		"core/post-template",
		"woocommerce/product-template"
	],
	"styles": [
		{
			"name": "fill",
			"label": "Fill",
			"isDefault": true
		},
		{
			"name": "outline",
			"label": "Outline"
		}
	],
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"viewScriptModule": "woocommerce/product-button",
	"style": "file:../woocommerce/product-button-style.css"
}

// File: plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/button/edit.tsx
/**
 * External dependencies
 */
import clsx from 'clsx';
import {
	Disabled,
	Button,
	ButtonGroup,
	PanelBody,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import {
	AlignmentToolbar,
	BlockControls,
	useBlockProps,
	InspectorControls,
} from '@wordpress/block-editor';
import type { BlockEditProps } from '@wordpress/blocks';
import { useEffect } from '@wordpress/element';
import { ProductQueryContext as Context } from '@woocommerce/blocks/product-query/types';
import { useProduct } from '@woocommerce/entities';

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

function WidthPanel( {
	selectedWidth,
	setAttributes,
}: {
	selectedWidth: number | undefined;
	setAttributes: ( attributes: BlockAttributes ) => void;
} ) {
	function handleChange( newWidth: number ) {
		// Check if we are toggling the width off
		const width = selectedWidth === newWidth ? undefined : newWidth;

		// Update attributes.
		setAttributes( { width } );
	}

	return (
		<PanelBody title={ __( 'Width settings', 'woocommerce' ) }>
			<ButtonGroup aria-label={ __( 'Button width', 'woocommerce' ) }>
				{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
					return (
						<Button
							key={ widthValue }
							isSmall
							variant={
								widthValue === selectedWidth
									? 'primary'
									: undefined
							}
							onClick={ () => handleChange( widthValue ) }
						>
							{ widthValue }%
						</Button>
					);
				} ) }
			</ButtonGroup>
		</PanelBody>
	);
}

const Edit = ( {
	attributes,
	setAttributes,
	context,
}: BlockEditProps< BlockAttributes > & {
	context?: Context | undefined;
} ): JSX.Element => {
	const blockProps = useBlockProps();
	const { product } = useProduct( context?.postId );
	const isDescendentOfQueryLoop = Number.isFinite( context?.queryId );
	const { width } = attributes;

	useEffect(
		() => setAttributes( { isDescendentOfQueryLoop } ),
		[ setAttributes, isDescendentOfQueryLoop ]
	);
	return (
		<>
			<BlockControls>
				<AlignmentToolbar
					value={ attributes.textAlign }
					onChange={ ( newAlign ) => {
						setAttributes( { textAlign: newAlign || '' } );
					} }
				/>
			</BlockControls>
			<InspectorControls>
				<WidthPanel
					selectedWidth={ width }
					setAttributes={ setAttributes }
				/>
			</InspectorControls>
			<div { ...blockProps }>
				<Disabled>
					<Block
						{ ...{ ...attributes, ...context } }
						product={ {
							...product,
							button_text: product?.button_text || '',
						} }
						isAdmin={ true }
						blockClientId={ blockProps?.id }
						className={ clsx( attributes.className, {
							[ `has-custom-width wp-block-button__width-${ width }` ]:
								width,
						} ) }
					/>
				</Disabled>
			</div>
		</>
	);
};

export default Edit;

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

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

type Props = {
	attributes: BlockAttributes;
};

const Save = ( { attributes, innerBlocks }: Props ): JSX.Element | null => {
	if (
		attributes.isDescendentOfQueryLoop ||
		attributes.isDescendentOfSingleProductBlock ||
		! innerBlocks ||
		innerBlocks?.length === 0
	) {
		return null;
	}

	return (
		<div
			{ ...useBlockProps.save( {
				className: clsx( 'is-loading', attributes.className, {
					[ `has-custom-width wp-block-button__width-${ attributes.width }` ]:
						attributes.width,
				} ),
			} ) }
		/>
	);
};

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] Implement a Gutenberg block for Displays a list of page numbers for comments pagination.

[Assistant]
// File: packages/block-library/src/comments-pagination-numbers/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/comments-pagination-numbers",
	"title": "Comments Page Numbers",
	"category": "theme",
	"parent": [ "core/comments-pagination" ],
	"description": "Displays a list of page numbers for comments pagination.",
	"textdomain": "default",
	"usesContext": [ "postId" ],
	"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
		},
		"spacing": {
			"margin": true,
			"padding": true,
			"__experimentalDefaultControls": {
				"padding": true
			}
		}
	}
}

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

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

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

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

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


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

[User] Create a WordPress block specifically for displaying cart tax details, enabling customization of class names and lock settings for enhanced flexibility.

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

// File: plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/edit.tsx
/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ToggleControl } from '@wordpress/components';
import { getSetting } from '@woocommerce/settings';

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

export const Edit = ( {
	attributes,
	setAttributes,
}: {
	attributes: {
		className: string;
		showRateAfterTaxName: boolean;
	};
	setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): JSX.Element => {
	const { className, showRateAfterTaxName } = attributes;
	const blockProps = useBlockProps();
	const taxesEnabled = getSetting( 'taxesEnabled' ) as boolean;
	const displayItemizedTaxes = getSetting(
		'displayItemizedTaxes',
		false
	) as boolean;
	const displayCartPricesIncludingTax = getSetting(
		'displayCartPricesIncludingTax',
		false
	) as boolean;
	return (
		<div { ...blockProps }>
			<InspectorControls>
				{ taxesEnabled &&
					displayItemizedTaxes &&
					! displayCartPricesIncludingTax && (
						<PanelBody title={ __( 'Taxes', 'woocommerce' ) }>
							<ToggleControl
								__nextHasNoMarginBottom
								label={ __(
									'Show rate after tax name',
									'woocommerce'
								) }
								help={ __(
									'Show the percentage rate alongside each tax line in the summary.',
									'woocommerce'
								) }
								checked={ showRateAfterTaxName }
								onChange={ () =>
									setAttributes( {
										showRateAfterTaxName:
											! showRateAfterTaxName,
									} )
								}
							/>
						</PanelBody>
					) }
			</InspectorControls>
			<Block
				className={ className }
				showRateAfterTaxName={ showRateAfterTaxName }
			/>
		</div>
	);
};

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


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

[User] Create a woocommerce block with customizable lock

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.json
{
	"name": "woocommerce/checkout-billing-address-block",
	"version": "1.0.0",
	"title": "Billing Address",
	"description": "Collect your customer's billing address.",
	"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-billing-address-block/edit.tsx
/**
 * External dependencies
 */
import clsx from 'clsx';
import { useBlockProps } from '@wordpress/block-editor';
import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
import { innerBlockAreas } from '@woocommerce/blocks-checkout';
import type { BlockAttributes } from '@wordpress/blocks';
/**
 * Internal dependencies
 */
import {
	FormStepBlock,
	AdditionalFields,
	AdditionalFieldsContent,
} from '../../form-step';
import Block from './block';
import {
	getBillingAddresssBlockTitle,
	getBillingAddresssBlockDescription,
} from './utils';
import { AddressFieldControls } from '../../address-field-controls';

export const Edit = ( {
	attributes,
	setAttributes,
}: {
	attributes: {
		title: string;
		description: string;
		showStepNumber: boolean;
		className: string;
	};
	setAttributes: ( attributes: BlockAttributes ) => void;
} ): JSX.Element | null => {
	const { showBillingFields, forcedBillingAddress, useBillingAsShipping } =
		useCheckoutAddress();

	if ( ! showBillingFields && ! useBillingAsShipping ) {
		return null;
	}
	attributes.title = getBillingAddresssBlockTitle(
		attributes.title,
		forcedBillingAddress
	);
	attributes.description = getBillingAddresssBlockDescription(
		attributes.description,
		forcedBillingAddress
	);

	return (
		<FormStepBlock
			setAttributes={ setAttributes }
			attributes={ attributes }
			className={ clsx(
				'wc-block-checkout__billing-fields',
				attributes?.className
			) }
		>
			<AddressFieldControls />
			<Block />
			<AdditionalFields block={ innerBlockAreas.BILLING_ADDRESS } />
		</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] Build a Gutenberg block that Column containing the checkout totals. with these attributes: class name, checkbox, text

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/block.json
{
	"name": "woocommerce/checkout-totals-block",
	"version": "1.0.0",
	"title": "Checkout Totals",
	"description": "Column containing the checkout totals.",
	"category": "woocommerce",
	"supports": {
		"align": false,
		"html": false,
		"multiple": false,
		"reusable": false,
		"inserter": false,
		"lock": false
	},
	"attributes": {
		"className": {
			"type": "string",
			"default": ""
		},
		"checkbox": {
			"type": "boolean",
			"default": false
		},
		"text": {
			"type": "string",
			"required": false
		}
	},
	"parent": [
		"woocommerce/checkout"
	],
	"textdomain": "woocommerce",
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3
}

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

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

export const Edit = ( {
	clientId,
	attributes,
}: {
	clientId: string;
	attributes: {
		className?: string;
	};
} ): JSX.Element => {
	const blockProps = useBlockProps( {
		className: clsx( 'wc-block-checkout__sidebar', attributes?.className ),
	} );
	const allowedBlocks = getAllowedBlocks( innerBlockAreas.CHECKOUT_TOTALS );

	const defaultTemplate = [
		[ 'woocommerce/checkout-order-summary-block', {}, [] ],
	] as TemplateArray;

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

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

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


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

[User] Construct a WordPress block for widgets that allows extensive personalization through an adjustable label, display option, placeholder field, and a total of seven configurable settings.

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

// File: packages/block-library/src/search/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/search",
	"title": "Search",
	"category": "widgets",
	"description": "Help visitors find your content.",
	"keywords": [ "find" ],
	"textdomain": "default",
	"attributes": {
		"label": {
			"type": "string",
			"role": "content"
		},
		"showLabel": {
			"type": "boolean",
			"default": true
		},
		"placeholder": {
			"type": "string",
			"default": "",
			"role": "content"
		},
		"width": {
			"type": "number"
		},
		"widthUnit": {
			"type": "string"
		},
		"buttonText": {
			"type": "string",
			"role": "content"
		},
		"buttonPosition": {
			"type": "string",
			"default": "button-outside"
		},
		"buttonUseIcon": {
			"type": "boolean",
			"default": false
		},
		"query": {
			"type": "object",
			"default": {}
		},
		"isSearchFieldHidden": {
			"type": "boolean",
			"default": false
		}
	},
	"supports": {
		"align": [ "left", "center", "right" ],
		"color": {
			"gradients": true,
			"__experimentalSkipSerialization": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"interactivity": true,
		"typography": {
			"__experimentalSkipSerialization": true,
			"__experimentalSelector": ".wp-block-search__label, .wp-block-search__input, .wp-block-search__button",
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"width": true,
			"__experimentalSkipSerialization": true,
			"__experimentalDefaultControls": {
				"color": true,
				"radius": true,
				"width": true
			}
		},
		"spacing": {
			"margin": true
		},
		"html": false
	},
	"editorStyle": "wp-block-search-editor",
	"style": "wp-block-search"
}

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

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

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

const { name } = metadata;

export { metadata, name };

export const settings = {
	icon,
	example: {
		attributes: { buttonText: __( 'Search' ), label: __( 'Search' ) },
		viewportWidth: 400,
	},
	variations,
	edit,
};

if ( window.__experimentalContentOnlyInspectorFields ) {
	settings[ fieldsKey ] = [
		{
			id: 'label',
			label: __( 'Label' ),
			type: 'richtext',
			shownByDefault: true,
		},
		{
			id: 'buttonText',
			label: __( 'Button text' ),
			type: 'richtext',
		},
		{
			id: 'placeholder',
			label: __( 'Placeholder' ),
			type: 'richtext',
		},
	];
	settings[ formKey ] = {
		fields: [ 'label' ],
	};
}

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 new Gutenberg block component designed to function as a standalone list element, equipped with configurable placeholder and content properties.

[Assistant]
// File: packages/block-library/src/list-item/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/list-item",
	"title": "List Item",
	"category": "text",
	"parent": [ "core/list" ],
	"allowedBlocks": [ "core/list" ],
	"description": "An individual item within a list.",
	"textdomain": "default",
	"attributes": {
		"placeholder": {
			"type": "string"
		},
		"content": {
			"type": "rich-text",
			"source": "rich-text",
			"selector": "li",
			"role": "content"
		}
	},
	"supports": {
		"anchor": true,
		"className": false,
		"splitting": true,
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true
		},
		"color": {
			"gradients": true,
			"link": true,
			"background": true,
			"__experimentalDefaultControls": {
				"text": true
			}
		},
		"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
		}
	},
	"selectors": {
		"root": ".wp-block-list > li",
		"border": ".wp-block-list:not(.wp-block-list .wp-block-list) > li"
	}
}

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

/**
 * Internal dependencies
 */
import initBlock from '../utils/init-block';
import metadata from './block.json';
import edit from './edit';
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,
	edit,
	save,
	merge( attributes, attributesToMerge ) {
		return {
			...attributes,
			content: attributes.content + attributesToMerge.content,
		};
	},
	transforms,
	[ unlock( privateApis ).requiresWrapperOnCopy ]: true,
};

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

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

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

export default function save( { attributes } ) {
	return (
		<li { ...useBlockProps.save() }>
			<RichText.Content value={ attributes.content } />
			<InnerBlocks.Content />
		</li>
	);
}


[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 Let shoppers filter products by choosing stock status. with these attributes: show counts, display style, is preview, hide empty

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

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/status-filter/block.json
{
	"name": "woocommerce/product-filter-status",
	"title": "Status Filter",
	"description": "Let shoppers filter products by choosing stock status.",
	"category": "woocommerce",
	"keywords": [ "WooCommerce" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"ancestor": [ "woocommerce/product-filters" ],
	"supports": {
		"interactivity": true,
		"html": false,
		"color": {
			"text": true,
			"background": false,
			"__experimentalDefaultControls": {
				"text": false
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontWeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": false
			}
		},
		"spacing": {
			"margin": true,
			"padding": true,
			"blockGap": true,
			"__experimentalDefaultControls": {
				"margin": false,
				"padding": false,
				"blockGap": false
			}
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true,
			"__experimentalDefaultControls": {
				"color": false,
				"radius": false,
				"style": false,
				"width": false
			}
		}
	},
	"attributes": {
		"showCounts": {
			"type": "boolean",
			"default": false
		},
		"displayStyle": {
			"type": "string",
			"default": "woocommerce/product-filter-checkbox-list"
		},
		"isPreview": {
			"type": "boolean",
			"default": false
		},
		"hideEmpty": {
			"type": "boolean",
			"default": true
		}
	},
	"usesContext": [ "query", "filterParams" ],
	"example": {
		"attributes": {
			"isPreview": true
		}
	}
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/status-filter/edit.tsx
/**
 * External dependencies
 */
import {
	useBlockProps,
	BlockContextProvider,
	useInnerBlocksProps,
} from '@wordpress/block-editor';
import { useCollectionData } from '@woocommerce/base-context/hooks';
import { __ } from '@wordpress/i18n';
import { useMemo } from '@wordpress/element';
import { getSetting } from '@woocommerce/settings';

/**
 * Internal dependencies
 */
import { InitialDisabled } from '../../components/initial-disabled';
import { Inspector } from './inspector';
import type { EditProps } from './types';

const Edit = ( props: EditProps ) => {
	const { showCounts, hideEmpty } = props.attributes;
	const { children, ...innerBlocksProps } = useInnerBlocksProps(
		useBlockProps(),
		{
			template: [
				[
					'core/heading',
					{
						level: 3,
						content: __( 'Status', 'woocommerce' ),
						style: {
							spacing: {
								margin: {
									bottom: '0.625rem',
									top: '0',
								},
							},
						},
					},
				],
				[ 'woocommerce/product-filter-checkbox-list' ],
			],
		}
	);

	const stockStatusOptions: Record< string, string > = getSetting(
		'stockStatusOptions',
		{}
	);

	const { data: filteredCounts, isLoading } = useCollectionData( {
		queryStock: true,
		queryState: {},
		isEditor: true,
	} );

	const items = useMemo( () => {
		return Object.entries( stockStatusOptions )
			.map( ( [ key, value ], index ) => {
				const count =
					filteredCounts?.stock_status_counts?.find(
						( item ) => item.status === key
					)?.count ?? 0;

				return {
					label: value,
					ariaLabel: value,
					value: key,
					selected: index === 0,
					count,
					type: 'status',
				};
			} )
			.filter( ( item ) => ! hideEmpty || item.count > 0 );
	}, [ stockStatusOptions, filteredCounts, hideEmpty ] );

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

export default Edit;

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

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

export default Save;


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

[User] Construct a dedicated WooCommerce block that renders cart taxes with configurable options for class attributes and locking mechanisms to improve user experience.

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

// File: plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/edit.tsx
/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ToggleControl } from '@wordpress/components';
import { getSetting } from '@woocommerce/settings';

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

export const Edit = ( {
	attributes,
	setAttributes,
}: {
	attributes: {
		className: string;
		showRateAfterTaxName: boolean;
	};
	setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): JSX.Element => {
	const { className, showRateAfterTaxName } = attributes;
	const blockProps = useBlockProps();
	const taxesEnabled = getSetting( 'taxesEnabled' ) as boolean;
	const displayItemizedTaxes = getSetting(
		'displayItemizedTaxes',
		false
	) as boolean;
	const displayCartPricesIncludingTax = getSetting(
		'displayCartPricesIncludingTax',
		false
	) as boolean;
	return (
		<div { ...blockProps }>
			<InspectorControls>
				{ taxesEnabled &&
					displayItemizedTaxes &&
					! displayCartPricesIncludingTax && (
						<PanelBody title={ __( 'Taxes', 'woocommerce' ) }>
							<ToggleControl
								__nextHasNoMarginBottom
								label={ __(
									'Show rate after tax name',
									'woocommerce'
								) }
								help={ __(
									'Show the percentage rate alongside each tax line in the summary.',
									'woocommerce'
								) }
								checked={ showRateAfterTaxName }
								onChange={ () =>
									setAttributes( {
										showRateAfterTaxName:
											! showRateAfterTaxName,
									} )
								}
							/>
						</PanelBody>
					) }
			</InspectorControls>
			<Block
				className={ className }
				showRateAfterTaxName={ showRateAfterTaxName }
			/>
		</div>
	);
};

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


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

[User] Craft a versatile Gutenberg block for rating various items, incorporating rating value, maximum rating, color selection, and three additional customizable 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: 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 customizable WordPress block that enables selecting and displaying taxonomy terms through flexible query parameters and design settings, supporting term selection and tag naming.

[Assistant]
// File: packages/block-library/src/terms-query/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/terms-query",
	"title": "Terms Query",
	"category": "theme",
	"description": "An advanced block that allows displaying taxonomy terms based on different query parameters and visual configurations.",
	"keywords": [ "terms", "taxonomy", "categories", "tags", "list" ],
	"textdomain": "default",
	"attributes": {
		"termQuery": {
			"type": "object",
			"default": {
				"perPage": 10,
				"taxonomy": "category",
				"order": "asc",
				"orderBy": "name",
				"include": [],
				"hideEmpty": true,
				"showNested": false,
				"inherit": false
			}
		},
		"tagName": {
			"type": "string",
			"default": "div"
		}
	},
	"usesContext": [ "templateSlug" ],
	"providesContext": {
		"termQuery": "termQuery"
	},
	"supports": {
		"align": [ "wide", "full" ],
		"html": false,
		"layout": true,
		"interactivity": true
	}
}

// File: packages/block-library/src/terms-query/index.js
/**
 * WordPress dependencies
 */
import { loop 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';
import variations from './variations';

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

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

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

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

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


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

[User] Create a woocommerce block with customizable show weight, show dimensions, show attributes

[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-specifications/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "woocommerce/product-specifications",
	"version": "1.0.0",
	"title": "Product Specifications",
	"description": "Display product weight, dimensions, and attributes.",
	"category": "woocommerce",
	"keywords": [ "attributes", "weight", "dimensions", "additional information" ],
	"textdomain": "woocommerce",
	"ancestor": [
		"woocommerce/single-product",
		"woocommerce/product-template",
		"core/post-template"
	],
	"attributes": {
		"showWeight": {
			"type": "boolean",
			"default": true
		},
		"showDimensions": {
			"type": "boolean",
			"default": true
		},
		"showAttributes": {
			"type": "boolean",
			"default": true
		}
	},
	"usesContext": [ "postId", "postType" ],
	"supports": {
		"html": false,
		"align": [ "wide", "full" ],
		"spacing": {
			"margin": true,
			"padding": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true
		}
	}
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-specifications/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { useQueryLoopProductContextValidation } from '@woocommerce/base-hooks';
import { useSelect } from '@wordpress/data';
import { optionsStore, Product, productsStore } from '@woocommerce/data';
import { PanelBody, ToggleControl } from '@wordpress/components';

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

const getFormattedDimensions = (
	dimensions: Product[ 'dimensions' ],
	dimensionUnit: string
) => {
	if ( ! dimensions ) return '';

	const dimensionKeys = [
		'length',
		'width',
		'height',
	] as ( keyof Product[ 'dimensions' ] )[];

	const validDimensions = dimensionKeys
		.map( ( key ) => dimensions[ key ] )
		.filter(
			( value ): value is string =>
				typeof value === 'string' && value.length > 0
		);

	if ( validDimensions.length === 0 ) return '';

	return `${ validDimensions.join( ' × ' ) } ${ dimensionUnit }`;
};

const EMPTY_PRODUCT_RESULT = {
	product: null,
	isLoadingProduct: false,
};

const Edit = ( {
	context: { postId, postType },
	clientId,
	attributes,
	setAttributes,
}: ProductSpecificationsEditProps ) => {
	const { showWeight, showDimensions, showAttributes } = attributes;
	const blockProps = useBlockProps( {
		className: 'wp-block-table',
	} );
	const isSpecificProductContext = !! ( postId && postType === 'product' );

	const { dimensionUnit, weightUnit, isLoadingUnits } = useSelect(
		( select ) => {
			const { getOption } = select( optionsStore );
			return {
				dimensionUnit: getOption(
					'woocommerce_dimension_unit'
				) as string,
				weightUnit: getOption( 'woocommerce_weight_unit' ) as string,
				isLoadingUnits:
					! select( optionsStore ).hasFinishedResolution(
						'getOption',
						[ 'woocommerce_dimension_unit' ]
					) ||
					! select( optionsStore ).hasFinishedResolution(
						'getOption',
						[ 'woocommerce_weight_unit' ]
					),
			};
		},
		[]
	);

	const { product, isLoadingProduct } = useSelect(
		( select ) => {
			if ( ! postId ) return EMPTY_PRODUCT_RESULT;
			const { getProduct } = select( productsStore );
			return {
				product: getProduct( Number( postId ) ),
				isLoadingProduct: ! select(
					productsStore
				).hasFinishedResolution( 'getProduct', [ Number( postId ) ] ),
			};
		},
		[ postId ]
	);

	/**
	 * Validate Query Loop block context
	 */
	const { hasInvalidContext, warningElement } =
		useQueryLoopProductContextValidation( {
			clientId,
			postType,
			blockName: __( 'Product Specifications', 'woocommerce' ),
		} );
	if ( hasInvalidContext ) {
		return warningElement;
	}

	/**
	 * Display loading state
	 */
	if ( isLoadingUnits || ( isLoadingProduct && isSpecificProductContext ) ) {
		return (

					{ __( 'Loading…', 'woocommerce' ) }

		);
	}

	/**
	 * Display no product found message
	 */
	if ( postId && ! product ) {
		return (

{ __( 'No product found', 'woocommerce' ) }

		);
	}

	const productData: Record< string, { label: string; value: string } > = {};

	if ( showWeight ) {
		productData.weight = {
			label: __( 'Weight', 'woocommerce' ),
			value: '',
		};

		if ( isSpecificProductContext ) {
			productData.weight.value = product?.weight
				? `${ product.weight } ${ weightUnit }`
				: '';
		} else {
			productData.weight.value = `10 ${ weightUnit }`;
		}
	}

	if ( showDimensions ) {
		productData.dimensions = {
			label: __( 'Dimensions', 'woocommerce' ),
			value: '',
		};

		if ( isSpecificProductContext ) {
			productData.dimensions.value = product?.dimensions
				? getFormattedDimensions( product.dimensions, dimensionUnit )
				: '';
		} else {
			productData.dimensions.value = `10 × 10 × 10 ${ dimensionUnit }`;
		}
	}

	if ( showAttributes ) {
		if ( isSpecificProductContext ) {
			if ( product?.attributes ) {
				product.attributes.forEach( ( attribute ) => {
					productData[ attribute.name.toLowerCase() ] = {
						label: attribute.name,
						value: attribute.options.join( ', ' ),
					};
				} );
			}
		} else {
			productData.test_attribute = {
				label: __( 'Test Attribute', 'woocommerce' ),
				value: __( 'First, Second, Third', 'woocommerce' ),
			};
		}
	}

	return (
		<>
			<InspectorControls>
				<PanelBody title={ __( 'Display Settings', 'woocommerce' ) }>
					<ToggleControl
						label={ __( 'Show Weight', 'woocommerce' ) }
						checked={ showWeight }
						onChange={ () =>
							setAttributes( { showWeight: ! showWeight } )
						}
					/>
					<ToggleControl
						label={ __( 'Show Dimensions', 'woocommerce' ) }
						checked={ showDimensions }
						onChange={ () =>
							setAttributes( {
								showDimensions: ! showDimensions,
							} )
						}
					/>
					<ToggleControl
						label={ __( 'Show Attributes', 'woocommerce' ) }
						checked={ showAttributes }
						onChange={ () =>
							setAttributes( {
								showAttributes: ! showAttributes,
							} )
						}
					/>
				</PanelBody>
			</InspectorControls>

							{ __( 'Attributes', 'woocommerce' ) }
							{ __( 'Value', 'woocommerce' ) }

						{ Object.entries( productData ).map(
							( [ key, data ] ) =>
								data.value && (
									<tr
										key={ key }
										className={ `wp-block-product-specifications-item wc-block-product-specifications-item-${ key }` }
									>

											{ data.label }

											{ data.value }

								)
						) }

		</>
	);
};

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 Gutenberg block mechanism to dynamically showcase a sale indicator when a product is discounted, with configurable attributes tracking product identification and block/template hierarchical relationships.

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/sale-badge/block.json
{
	"name": "woocommerce/product-sale-badge",
	"title": "On-Sale Badge",
	"description": "Displays an on-sale badge if the product is on-sale.",
	"category": "woocommerce-product-elements",
	"attributes": {
		"productId": { "type": "number", "default": 0 },
		"isDescendentOfQueryLoop": { "type": "boolean", "default": false },
		"isDescendentOfSingleProductBlock": {
			"type": "boolean",
			"default": false
		},
		"isDescendentOfSingleProductTemplate": {
			"type": "boolean",
			"default": false
		}
	},
	"supports": {
		"interactivity": {
			"clientNavigation": true
		},
		"html": false,
		"align": true,
		"color": {
			"gradients": true,
			"background": true,
			"link": false,
			"__experimentalSkipSerialization": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalSkipSerialization": true,
			"__experimentalLetterSpacing": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"width": true,
			"__experimentalSkipSerialization": true
		},
		"spacing": {
			"margin": true
		},
		"email": true,
		"__experimentalSelector": ".wc-block-components-product-sale-badge"
	},
	"ancestor": [
		"woocommerce/single-product",
		"woocommerce/product-template",
		"core/post-template",
		"woocommerce/product-gallery"
	],
	"usesContext": [ "query", "queryId", "postId" ],
	"keywords": [ "WooCommerce" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"example": {},
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

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

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

const Edit = ( {
	attributes,
	context,
}: BlockEditProps< BlockAttributes > & { context: Context } ): JSX.Element => {
	const blockProps = useBlockProps();

	// Remove the `style` prop from the block props to avoid passing it to the wrapper div.
	const { style, ...wrapperProps } = blockProps;
	const { isDescendentOfSingleProductTemplate } =
		useIsDescendentOfSingleProductTemplate();

	const blockAttrs = {
		...attributes,
		...context,
	};

	return (
		<div { ...wrapperProps }>
			<Block
				{ ...blockAttrs }
				isDescendentOfSingleProductTemplate={
					isDescendentOfSingleProductTemplate
				}
			/>
		</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 WordPress block that allows for configurable URL insertion and dynamic growth 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: projects/plugins/jetpack/extensions/blocks/nextdoor/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/nextdoor",
	"title": "Nextdoor",
	"description": "Embed a Nextdoor post for your neighbors on your blog.",
	"keywords": [ "neighbor" ],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "grow",
	"icon": "<svg height='24' width='24' viewBox='0 0 130 130' xmlns='http://www.w3.org/2000/svg'><g><path d='M64.25 3.531c-31.144.337-57.596 24.22-60.469 55.907-3.064 33.799 21.857 63.685 55.657 66.75 33.799 3.064 63.685-21.857 66.75-55.657 3.064-33.8-21.857-63.686-55.657-66.75a62.075 62.075 0 00-6.281-.25zm3.938 34.907C82.468 38.438 93.5 48.58 93.5 61.5v27c0 .685-.565 1.25-1.25 1.25H80.906a1.267 1.267 0 01-1.25-1.25V63.375c0-5.58-4.309-11.938-11.469-11.938-7.47 0-11.468 6.358-11.468 11.938V88.5c0 .685-.565 1.25-1.25 1.25H44.125c-.68 0-1.219-.57-1.219-1.25V64.156c0-.74-.529-1.364-1.25-1.531-13.13-2.93-15.115-10.285-15.375-21.125-.005-.332.142-.67.375-.906.233-.237.543-.375.875-.375l11.688.062c.66.01 1.187.529 1.218 1.188.13 4.44.438 9.406 4.438 9.406.83 0 1.443-1.179 1.813-1.719 4.41-6.48 12.28-10.718 21.5-10.718z'/></g></svg>",
	"supports": {
		"align": true,
		"alignWide": true,
		"html": false
	},
	"attributes": {
		"url": {
			"type": "string"
		}
	}
}

// File: projects/plugins/jetpack/extensions/blocks/nextdoor/edit.js
import { getBlockIconComponent } from '@automattic/jetpack-shared-extension-utils';
import { useBlockProps } from '@wordpress/block-editor';
import { getBlockDefaultClassName } from '@wordpress/blocks';
import { SandBox, Button, Placeholder, withNotices } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { __, _x } from '@wordpress/i18n';
import './editor.scss';
import { isEqual } from 'lodash';
import { getValidatedAttributes } from '../../shared/get-validated-attributes';
import metadata from './block.json';
import NextdoorControls from './controls';
import { parseUrl } from './utils';

const icon = getBlockIconComponent( metadata );

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

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

	const { url } = validatedAttributes;
	const [ iframeUrl, setIframeUrl ] = useState( url ? parseUrl( url ) : null );

	const [ nextdoorShareUrl, setNextdoorShareUrl ] = useState( iframeUrl );

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

	const onFormSubmit = event => {
		if ( ! event ) {
			setIframeUrl( null );
			setErrorNotice();
			return;
		}
		event.preventDefault();

		if ( ! nextdoorShareUrl ) {
			setIframeUrl( null );
			setErrorNotice();
			return;
		}

		const embedUrl = parseUrl( nextdoorShareUrl );

		if ( ! embedUrl ) {
			setIframeUrl( null );
			setErrorNotice();
			return;
		}

		setIframeUrl( embedUrl );
		setAttributes( { url: embedUrl } );
	};

	const blockPlaceholder = (
		<Placeholder
			label={ __( 'Nextdoor', 'jetpack' ) }
			instructions={ __( 'Enter the URL of your Nextdoor post to share below.', 'jetpack' ) }
			icon={ icon }
			notices={ noticeUI }
		>
			<form onSubmit={ onFormSubmit }>
				<input
					type="text"
					id="nextdoorShareUrl"
					onChange={ event => setNextdoorShareUrl( event.target.value ) }
					placeholder={ __( 'Nextdoor post URL', 'jetpack' ) }
					value={ nextdoorShareUrl || '' }
					className="components-placeholder__input"
				/>

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

			</form>
		</Placeholder>
	);

	return (

			<NextdoorControls
				{ ...{ defaultClassName, nextdoorShareUrl, onFormSubmit, setNextdoorShareUrl } }
			/>
			{ iframeUrl ? (
				<BlockPreview
					defaultClassName={ defaultClassName }
					iframeUrl={ iframeUrl }
					clientId={ clientId }
				/>
			) : (
				blockPlaceholder
			) }

	);
}

const BlockPreview = ( { defaultClassName, iframeUrl, clientId } ) => {
	const html = `

		`;

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

			<SandBox html={ html } />
		</>
	);
};

export default withNotices( NextdoorEdit );

// File: projects/plugins/jetpack/extensions/blocks/nextdoor/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] Design a WooCommerce block featuring flexible class name customization and the ability to lock its configuration.

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.json
{
	"name": "woocommerce/checkout-order-summary-coupon-form-block",
	"version": "1.0.0",
	"title": "Coupon Form",
	"description": "Shows the apply coupon form.",
	"category": "woocommerce",
	"supports": {
		"align": false,
		"html": false,
		"multiple": false,
		"reusable": false
	},
	"attributes": {
		"className": {
			"type": "string",
			"default": ""
		},
		"lock": {
			"type": "object",
			"default": {
				"remove": false,
				"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-coupon-form/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;
	};
	setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): 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] Develop a flexible WooCommerce block that allows administrators to modify key attributes such as locking options, cart page selection, cart return link display, and other configurable elements.

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.json
{
	"name": "woocommerce/checkout-actions-block",
	"version": "1.0.0",
	"title": "Actions",
	"description": "Allow customers to place their order.",
	"category": "woocommerce",
	"supports": {
		"align": false,
		"html": false,
		"multiple": false,
		"reusable": false,
		"inserter": false,
		"lock": false
	},
	"attributes": {
		"lock": {
			"type": "object",
			"default": {
				"remove": true,
				"move": true
			}
		},
		"cartPageId": {
			"type": "number",
			"default": 0
		},
		"showReturnToCart": {
			"type": "boolean",
			"default": true
		},
		"className": {
			"type": "string",
			"default": ""
		},
		"priceSeparator": {
			"type": "string",
			"default": "·"
		}
	},
	"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-actions-block/edit.tsx
/**
 * External dependencies
 */
import { useRef } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import {
	InspectorControls,
	RichText,
	useBlockProps,
} from '@wordpress/block-editor';
import PageSelector from '@woocommerce/editor-components/page-selector';
import { PanelBody, ToggleControl, TextControl } from '@wordpress/components';
import { CHECKOUT_PAGE_ID } from '@woocommerce/block-settings';
import {
	PlaceOrderButton,
	ReturnToCartButton,
} from '@woocommerce/base-components/cart-checkout';
import clsx from 'clsx';

/**
 * Internal dependencies
 */
import { BlockAttributes } from './block';
import { defaultReturnToCartButtonLabel } from './constants';

export const Edit = ( {
	attributes,
	setAttributes,
}: {
	attributes: BlockAttributes;
	setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): JSX.Element => {
	const blockProps = useBlockProps();
	const {
		cartPageId = 0,
		showReturnToCart = false,
		placeOrderButtonLabel,
		returnToCartButtonLabel,
	} = attributes;
	const { current: savedCartPageId } = useRef( cartPageId );
	const currentPostId = useSelect(
		( select ) => {
			if ( ! savedCartPageId ) {
				const store = select( 'core/editor' );
				return store.getCurrentPostId();
			}
			return savedCartPageId;
		},
		[ savedCartPageId ]
	);

	const showPrice = blockProps.className.includes( 'is-style-with-price' );

	return (
		<div { ...blockProps }>
			<InspectorControls>
				<PanelBody title={ __( 'Options', 'woocommerce' ) }>
					<ToggleControl
						__nextHasNoMarginBottom
						label={ __(
							'Show a "Return to Cart" link',
							'woocommerce'
						) }
						help={ __(
							'Recommended to enable only if there is no Cart link in the header.',
							'woocommerce'
						) }
						checked={ showReturnToCart }
						onChange={ () =>
							setAttributes( {
								showReturnToCart: ! showReturnToCart,
							} )
						}
					/>

					{ showPrice && (
						<TextControl
							__next40pxDefaultSize
							__nextHasNoMarginBottom
							label={ __( 'Price separator', 'woocommerce' ) }
							id="price-separator"
							value={ attributes.priceSeparator }
							onChange={ ( value ) => {
								setAttributes( {
									priceSeparator: value,
								} );
							} }
						/>
					) }
				</PanelBody>

				{ showReturnToCart &&
					! (
						currentPostId === CHECKOUT_PAGE_ID &&
						savedCartPageId === 0
					) && (
						<PageSelector
							pageId={ cartPageId }
							setPageId={ ( id: number ) =>
								setAttributes( { cartPageId: id } )
							}
							labels={ {
								title: __(
									'Return to Cart button',
									'woocommerce'
								),
								default: __(
									'WooCommerce Cart Page',
									'woocommerce'
								),
							} }
						/>
					) }
			</InspectorControls>
			<div className="wc-block-checkout__actions">
				<div
					className={ clsx( 'wc-block-checkout__actions_row', {
						'wc-block-checkout__actions_row--justify-flex-end':
							! showReturnToCart,
					} ) }
				>
					{ showReturnToCart && (
						<ReturnToCartButton element="span">
							<RichText
								multiline={ false }
								allowedFormats={ [] }
								value={ returnToCartButtonLabel }
								placeholder={ defaultReturnToCartButtonLabel }
								onChange={ ( content ) => {
									setAttributes( {
										returnToCartButtonLabel: content,
									} );
								} }
							/>
						</ReturnToCartButton>
					) }
					<PlaceOrderButton
						label={
							<RichText
								multiline={ false }
								allowedFormats={ [] }
								value={ placeOrderButtonLabel }
								onChange={ ( content ) => {
									setAttributes( {
										placeOrderButtonLabel: content,
									} );
								} }
							/>
						}
						fullWidth={ ! showReturnToCart }
						showPrice={ showPrice }
						priceSeparator={ attributes.priceSeparator }
					/>
				</div>
			</div>
		</div>
	);
};

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