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

[User] Create a Gutenberg block designed to transform spoken language into a publication-ready post through AI-driven content conversion, featuring a dedicated content attribute.

[Assistant]
// File: projects/plugins/jetpack/extensions/blocks/voice-to-content/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/voice-to-content",
	"title": "Voice to content",
	"description": "Transform your spoken words into a post ready to publish with AI.",
	"keywords": [ "AI", "GPT", "AL", "Magic", "help", "assistant" ],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "media",
	"icon": "<svg viewBox='0 0 20 20' width='20' height='20' xmlns='http://www.w3.org/2000/svg'><path d='M12 9V3c0-1.1-.89-2-2-2-1.12 0-2 .94-2 2v6c0 1.1.9 2 2 2 1.13 0 2-.94 2-2zm4 0c0 2.97-2.16 5.43-5 5.91V17h2c.56 0 1 .45 1 1s-.44 1-1 1H7c-.55 0-1-.45-1-1s.45-1 1-1h2v-2.09C6.17 14.43 4 11.97 4 9c0-.55.45-1 1-1 .56 0 1 .45 1 1 0 2.21 1.8 4 4 4 2.21 0 4-1.79 4-4 0-.55.45-1 1-1 .56 0 1 .45 1 1z'/></svg>",
	"supports": {
		"html": false,
		"multiple": true,
		"reusable": false
	},
	"attributes": {
		"content": {
			"type": "string"
		}
	}
}

// File: projects/plugins/jetpack/extensions/blocks/voice-to-content/edit.tsx
import {
	useMediaRecording,
	useAudioValidation,
	TRANSCRIPTION_POST_PROCESSING_ACTION_SIMPLE_DRAFT,
} from '@automattic/jetpack-ai-client';
import { ThemeProvider } from '@automattic/jetpack-components';
import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { type BlockInstance } from '@wordpress/blocks';
import { Button, Modal, Icon } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import { useCallback, useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { external } from '@wordpress/icons';
import ActionButtons from './components/action-buttons';
import AudioStatusPanel from './components/audio-status-panel';
import useTranscriptionCreator from './hooks/use-transcription-creator';
import useTranscriptionInserter from './hooks/use-transcription-inserter';
import type {
	RecordingState,
	TranscriptionState,
	ValidatedAudioInformation,
} from '@automattic/jetpack-ai-client';

/**
 * Helper to determine the state of the transcription.
 *
 * @param {boolean}        isCreatingTranscription - The transcription creation state
 * @param {boolean}        isValidatingAudio       - The audio validation state
 * @param {RecordingState} recordingState          - The recording state
 * @return {TranscriptionState} - The transcription state
 */
const transcriptionStateHelper = (
	isCreatingTranscription: boolean,
	isValidatingAudio: boolean,
	recordingState: RecordingState
): TranscriptionState => {
	if ( isValidatingAudio ) {
		return 'validating';
	}

	if ( isCreatingTranscription ) {
		return 'processing';
	}

	return recordingState;
};

export default function VoiceToContentEdit( { clientId } ) {
	const [ audio, setAudio ] = useState< Blob >( null );

	const { removeBlock } = useDispatch( blockEditorStore );
	// TODO: The second `deps` argument shouldn't be needed, but it's added to make the type checker happy.
	// This can be removed when the core data types are updated to fix the issue.
	const { getBlocks } = useSelect( blockEditorStore, [] ) as {
		getBlocks: () => BlockInstance[];
	};

	const destroyBlock = useCallback( () => {
		// Remove the block from the editor
		setTimeout( () => {
			removeBlock( clientId );
		}, 100 );
	}, [ removeBlock, clientId ] );

	// Track the usage of the feature
	const { tracks } = useAnalytics();

	const { isValidatingAudio, validateAudio } = useAudioValidation();

	const { upsertTranscription } = useTranscriptionInserter();
	const { isCreatingTranscription, createTranscription, cancelTranscription } =
		useTranscriptionCreator( {
			onReady: ( content: string ) => {
				// When transcription is ready, insert it into the editor
				upsertTranscription( content );

				// Then check if there is a single empty paragraph block before the transcription and remove it
				// This is to ensure the P2 title is correct as it's based on the first block
				const blocks = getBlocks();
				// One block is the voice-to-content block itself, so we check the first two blocks
				for ( let i = 0; i < 2; i++ ) {
					if ( blocks[ i ].name === 'core/paragraph' && blocks[ i ].attributes?.content === '' ) {
						removeBlock( String( blocks[ i ].clientId ) );
					}
				}

				handleClose();
			},
			onUpdate: ( content: string ) => {
				// When transcription is updated, insert it into the editor
				upsertTranscription( content );
			},
			onError: ( error: string ) => {
				// When transcription fails, show an error message
				onError( error );
			},
		} );

	const handleClose = () => {
		cancelTranscription();
		destroyBlock();
	};

	const { state, controls, error, onError, duration, analyser } = useMediaRecording( {
		onDone: lastBlob => {
			// When recording is done, set the audio to be transcribed
			onAudioHandler( lastBlob );
		},
	} );

	const onAudioHandler = useCallback(
		( audioFile: Blob ) => {
			if ( audioFile ) {
				setAudio( audioFile );
			}
		},
		[ setAudio ]
	);

	/**
	 * When the audio changes, create the transcription. In the future,
	 * we can trigger this action (and others) from a button in the UI.
	 */
	useEffect( () => {
		if ( audio ) {
			validateAudio(
				audio,
				( audioInfo: ValidatedAudioInformation ) => {
					// Track the transcription event
					tracks.recordEvent( 'jetpack_ai_voice_to_content_transcription_started', {
						post_processing_action: TRANSCRIPTION_POST_PROCESSING_ACTION_SIMPLE_DRAFT,
						type: audioInfo.isFile ? 'upload' : 'record',
						audio_duration: audioInfo.duration,
						audio_file_size: audioInfo.size,
					} );

					createTranscription( audio, TRANSCRIPTION_POST_PROCESSING_ACTION_SIMPLE_DRAFT );
				},
				onError
			);
		}
	}, [ audio, tracks, validateAudio, createTranscription, onError ] );

	// Destructure controls
	const {
		start: controlStart,
		pause: controlPause,
		resume: controlResume,
		stop: controlStop,
		reset: controlReset,
	} = controls;

	const onUploadHandler = useCallback(
		event => {
			if ( event.currentTarget.files.length > 0 ) {
				const file = event.currentTarget.files[ 0 ];
				onAudioHandler( file );
			}
		},
		[ onAudioHandler ]
	);

	const onCancelHandler = useCallback( () => {
		cancelTranscription();
		controlReset();
	}, [ cancelTranscription, controlReset ] );

	const onRecordHandler = useCallback( () => {
		controlStart( 1000 ); // Stream audio on 1 second intervals
	}, [ controlStart ] );

	const onPauseHandler = useCallback( () => {
		controlPause();
	}, [ controlPause ] );

	const onResumeHandler = useCallback( () => {
		controlResume();
	}, [ controlResume ] );

	const onDoneHandler = useCallback( () => {
		controlStop();
	}, [ controlStop ] );

	// To avoid a wrong TS warning
	const iconProps = { className: 'icon' };

	const transcriptionState = transcriptionStateHelper(
		isCreatingTranscription,
		isValidatingAudio,
		state
	);

	return (
		<Modal
			onRequestClose={ handleClose }
			title={ __( 'Jetpack AI Voice to content', 'jetpack' ) }
			className="jetpack-ai-voice-to-content__modal"
			shouldCloseOnEsc={ false }
			shouldCloseOnClickOutside={ false }
		>
			<ThemeProvider>

							{ __(
								'Transform your spoken words into a post ready to publish with AI.',
								'jetpack'
							) }

							<AudioStatusPanel
								state={ transcriptionState }
								error={ error }
								duration={ duration }
								analyser={ analyser }
							/>

						<ActionButtons
							state={ transcriptionState }
							onUpload={ onUploadHandler }
							onCancel={ onCancelHandler }
							onRecord={ onRecordHandler }
							onPause={ onPauseHandler }
							onResume={ onResumeHandler }
							onDone={ onDoneHandler }
						/>

						<Button
							variant="link"
							className="jetpack-ai-voice-to-content__feedback-button"
							href="https://a8c.slack.com/archives/C054LN8RNVA" // Jetpack AI Slack channel
							target="_blank"
						>
							{ __( 'Provide feedback', 'jetpack' ) }
							<Icon icon={ external } { ...iconProps } />
						</Button>

			</ThemeProvider>
		</Modal>
	);
}


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

[User] Build a Gutenberg block that Display the order summary on the order confirmation page. with these attributes: align, class name

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

// File: plugins/woocommerce/client/blocks/assets/js/blocks/order-confirmation/summary/block.json
{
	"name": "woocommerce/order-confirmation-summary",
	"version": "1.0.0",
	"title": "Order Summary",
	"description": "Display the order summary on the order confirmation page.",
	"category": "woocommerce",
	"keywords": [
		"WooCommerce"
	],
	"supports": {
		"multiple": false,
		"align": [
			"wide",
			"full"
		],
		"html": false,
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalTextDecoration": true,
			"__experimentalFontStyle": true,
			"__experimentalFontWeight": true,
			"__experimentalLetterSpacing": true,
			"__experimentalTextTransform": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"color": {
			"background": true,
			"text": true,
			"gradients": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"width": true,
			"__experimentalDefaultControls": {
				"width": true,
				"color": true
			}
		},
		"spacing": {
			"padding": true,
			"margin": true,
			"__experimentalDefaultControls": {
				"margin": false,
				"padding": false
			}
		}
	},
	"attributes": {
		"align": {
			"type": "string",
			"default": "wide"
		},
		"className": {
			"type": "string",
			"default": ""
		}
	},
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/order-confirmation/summary/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps } from '@wordpress/block-editor';
import { Disabled } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { formatPrice } from '@woocommerce/price-format';
import { date } from '@wordpress/date';
import { getSetting } from '@woocommerce/settings';

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

const Edit = (): JSX.Element => {
	const blockProps = useBlockProps( {
		className: 'wc-block-order-confirmation-summary',
	} );

	return (

			<Disabled>

							{ __( 'Order number:', 'woocommerce' ) }
						{ ' ' }

							123

							{ __( 'Date:', 'woocommerce' ) }
						{ ' ' }

							{ date(
								getSetting( 'dateFormat' ),
								new Date(),
								undefined
							) }

							{ __( 'Total:', 'woocommerce' ) }
						{ ' ' }

							{ formatPrice( 4000 ) }

							{ __( 'Email:', 'woocommerce' ) }
						{ ' ' }

							test@test.com

							{ __( 'Payment method:', 'woocommerce' ) }
						{ ' ' }

							{ __( 'Credit Card', 'woocommerce' ) }

			</Disabled>

	);
};

export default Edit;


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

[User] Develop a block for A single column within a columns block. that allows users to configure: vertical alignment, width, template lock

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

// File: packages/block-library/src/column/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/column",
	"title": "Column",
	"category": "design",
	"parent": [ "core/columns" ],
	"description": "A single column within a columns block.",
	"textdomain": "default",
	"attributes": {
		"verticalAlignment": {
			"type": "string"
		},
		"width": {
			"type": "string"
		},
		"templateLock": {
			"type": [ "string", "boolean" ],
			"enum": [ "all", "insert", "contentOnly", false ]
		}
	},
	"supports": {
		"__experimentalOnEnter": true,
		"anchor": true,
		"reusable": false,
		"html": false,
		"color": {
			"gradients": true,
			"heading": true,
			"button": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"shadow": true,
		"spacing": {
			"blockGap": true,
			"padding": true,
			"__experimentalDefaultControls": {
				"padding": true,
				"blockGap": true
			}
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true,
			"__experimentalDefaultControls": {
				"color": true,
				"radius": true,
				"style": true,
				"width": true
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"layout": true,
		"interactivity": {
			"clientNavigation": true
		},
		"allowedBlocks": true
	}
}

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

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

const { name } = metadata;

export { metadata, name };

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

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

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

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

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

	const wrapperClasses = clsx( {
		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
	} );

	let style;

	if ( width && /\d/.test( width ) ) {
		// Numbers are handled for backward compatibility as they can be still provided with templates.
		let flexBasis = Number.isFinite( width ) ? width + '%' : width;
		// In some cases we need to round the width to a shorter float.
		if ( ! Number.isFinite( width ) && width?.endsWith( '%' ) ) {
			const multiplier = 1000000000000;
			// Shrink the number back to a reasonable float.
			flexBasis =
				Math.round( Number.parseFloat( width ) * multiplier ) /
					multiplier +
				'%';
		}
		style = { flexBasis };
	}

	const blockProps = useBlockProps.save( {
		className: wrapperClasses,
		style,
	} );
	const innerBlocksProps = useInnerBlocksProps.save( blockProps );

	return <div { ...innerBlocksProps } />;
}


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

[User] Construct a customizable WooCommerce block that allows users to adjust text alignment settings with ease.

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-form/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "woocommerce/product-review-form",
	"title": "Reviews Form",
	"category": "woocommerce",
	"description": "Display a product's reviews form.",
	"textdomain": "woocommerce",
	"attributes": {
		"textAlign": {
			"type": "string"
		}
	},
	"usesContext": [ "postId", "postType" ],
	"supports": {
		"interactivity": true,
		"html": false,
		"color": {
			"gradients": true,
			"heading": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"spacing": {
			"margin": true,
			"padding": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontStyle": true,
			"__experimentalFontWeight": true,
			"__experimentalLetterSpacing": true,
			"__experimentalTextTransform": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true,
			"__experimentalDefaultControls": {
				"radius": true,
				"color": true,
				"width": true,
				"style": true
			}
		}
	},
	"example": {
		"attributes": {
			"textAlign": "center"
		}
	},
	"viewScriptModule": "woocommerce/product-review-form",
	"style": "file:../woocommerce/product-review-form-style.css",
	"editorStyle": "file:../woocommerce/product-review-form-editor.css"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-form/edit.tsx
/**
 * External dependencies
 */
import clsx from 'clsx';
import {
	AlignmentControl,
	BlockControls,
	useBlockProps,
} from '@wordpress/block-editor';
import { VisuallyHidden } from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';
import { __, sprintf } from '@wordpress/i18n';
import type { BlockEditProps } from '@wordpress/blocks';

/**
 * Internal dependencies
 */
import CommentsForm from './form';

export default function PostCommentsFormEdit( {
	attributes,
	context,
	setAttributes,
}: BlockEditProps< {
	textAlign: string;
} > & {
	context: { postId: string; postType: string };
} ) {
	const { textAlign } = attributes;
	const { postId, postType } = context;

	const instanceId = useInstanceId( PostCommentsFormEdit );
	const instanceIdDesc = sprintf( 'comments-form-edit-%d-desc', instanceId );

	const blockProps = useBlockProps( {
		className: clsx( 'comment-respond', {
			[ `has-text-align-${ textAlign }` ]: textAlign,
		} ),
		'aria-describedby': instanceIdDesc,
	} );

	return (
		<>
			<BlockControls group="block">
				<AlignmentControl
					value={ textAlign }
					onChange={ ( nextAlign: string ) => {
						setAttributes( { textAlign: nextAlign } );
					} }
				/>
			</BlockControls>
			<div { ...blockProps }>
				<CommentsForm postId={ postId } postType={ postType } />
				<VisuallyHidden id={ instanceIdDesc }>
					{ __( 'Reviews form disabled in editor.', 'woocommerce' ) }
				</VisuallyHidden>
			</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 Add a link to a downloadable file. with these attributes: id, blob, href, and 8 more options

[Assistant]
// File: packages/block-library/src/file/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/file",
	"title": "File",
	"category": "media",
	"description": "Add a link to a downloadable file.",
	"keywords": [ "document", "pdf", "download" ],
	"textdomain": "default",
	"attributes": {
		"id": {
			"type": "number"
		},
		"blob": {
			"type": "string",
			"role": "local"
		},
		"href": {
			"type": "string",
			"role": "content"
		},
		"fileId": {
			"type": "string",
			"source": "attribute",
			"selector": "a:not([download])",
			"attribute": "id"
		},
		"fileName": {
			"type": "rich-text",
			"source": "rich-text",
			"selector": "a:not([download])",
			"role": "content"
		},
		"textLinkHref": {
			"type": "string",
			"source": "attribute",
			"selector": "a:not([download])",
			"attribute": "href",
			"role": "content"
		},
		"textLinkTarget": {
			"type": "string",
			"source": "attribute",
			"selector": "a:not([download])",
			"attribute": "target"
		},
		"showDownloadButton": {
			"type": "boolean",
			"default": true
		},
		"downloadButtonText": {
			"type": "rich-text",
			"source": "rich-text",
			"selector": "a[download]",
			"role": "content"
		},
		"displayPreview": {
			"type": "boolean"
		},
		"previewHeight": {
			"type": "number",
			"default": 600
		}
	},
	"supports": {
		"anchor": true,
		"align": true,
		"spacing": {
			"margin": true,
			"padding": true
		},
		"color": {
			"gradients": true,
			"link": true,
			"text": false,
			"__experimentalDefaultControls": {
				"background": true,
				"link": true
			}
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true,
			"__experimentalDefaultControls": {
				"radius": true,
				"color": true,
				"width": true,
				"style": true
			}
		},
		"interactivity": true
	},
	"editorStyle": "wp-block-file-editor",
	"style": "wp-block-file"
}

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

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

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

const { name } = metadata;

export { metadata, name };

export const settings = {
	icon,
	example: {
		attributes: {
			href: 'https://upload.wikimedia.org/wikipedia/commons/d/dd/Armstrong_Small_Step.ogg',
			fileName: _x( 'Armstrong_Small_Step', 'Name of the file' ),
		},
	},
	transforms,
	deprecated,
	edit,
	save,
};

if ( window.__experimentalContentOnlyInspectorFields ) {
	settings[ fieldsKey ] = [
		{
			id: 'file',
			label: __( 'File' ),
			type: 'media',
			mapping: {
				id: 'id',
				url: 'href',
			},
			args: {
				allowedTypes: [],
				multiple: false,
			},
		},
		{
			id: 'fileName',
			label: __( 'Filename' ),
			type: 'richtext',
		},
		{
			id: 'downloadButtonText',
			label: __( 'Button Text' ),
			type: 'richtext',
		},
	];
	settings[ formKey ] = {
		fields: [ 'file' ],
	};
}

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

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

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

export default function save( { attributes } ) {
	const {
		href,
		fileId,
		fileName,
		textLinkHref,
		textLinkTarget,
		showDownloadButton,
		downloadButtonText,
		displayPreview,
		previewHeight,
	} = attributes;

	const pdfEmbedLabel = RichText.isEmpty( fileName )
		? 'PDF embed'
		: // To do: use toPlainText, but we need ensure it's RichTextData. See
		  // https://github.com/WordPress/gutenberg/pull/56710.
		  fileName.toString();

	const hasFilename = ! RichText.isEmpty( fileName );

	// Only output an `aria-describedby` when the element it's referring to is
	// actually rendered.
	const describedById = hasFilename ? fileId : undefined;

	return (
		href && (
			<div { ...useBlockProps.save() }>
				{ displayPreview && (
					<>
						<object
							className="wp-block-file__embed"
							data={ href }
							type="application/pdf"
							style={ {
								width: '100%',
								height: `${ previewHeight }px`,
							} }
							aria-label={ pdfEmbedLabel }
						/>
					</>
				) }
				{ hasFilename && (
					<a
						id={ describedById }
						href={ textLinkHref }
						target={ textLinkTarget }
						rel={
							textLinkTarget ? 'noreferrer noopener' : undefined
						}
					>
						<RichText.Content value={ fileName } />
					</a>
				) }
				{ showDownloadButton && (
					<a
						href={ href }
						className={ clsx(
							'wp-block-file__button',
							__experimentalGetElementClassName( 'button' )
						) }
						download
						aria-describedby={ describedById }
					>
						<RichText.Content value={ downloadButtonText } />
					</a>
				) }
			</div>
		)
	);
}


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

[User] Craft a custom Gutenberg block that enables users to create an interactive set of call-to-action buttons for engaging website visitors.

[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/buttons/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/buttons",
	"title": "Buttons",
	"category": "design",
	"allowedBlocks": [ "core/button" ],
	"description": "Prompt visitors to take action with a group of button-style links.",
	"keywords": [ "link" ],
	"textdomain": "default",
	"supports": {
		"anchor": true,
		"align": [ "wide", "full" ],
		"html": false,
		"__experimentalExposeControlsToChildren": true,
		"color": {
			"gradients": true,
			"text": false,
			"__experimentalDefaultControls": {
				"background": true
			}
		},
		"spacing": {
			"blockGap": [ "horizontal", "vertical" ],
			"padding": true,
			"margin": [ "top", "bottom" ],
			"__experimentalDefaultControls": {
				"blockGap": true
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true,
			"__experimentalDefaultControls": {
				"color": true,
				"radius": true,
				"style": true,
				"width": true
			}
		},
		"layout": {
			"allowSwitching": false,
			"allowInheriting": false,
			"default": {
				"type": "flex"
			}
		},
		"interactivity": {
			"clientNavigation": true
		},
		"contentRole": true
	},
	"editorStyle": "wp-block-buttons-editor",
	"style": "wp-block-buttons"
}

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

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

const { name } = metadata;

export { metadata, name };

export const settings = {
	icon,
	example: {
		attributes: {
			layout: {
				type: 'flex',
				justifyContent: 'center',
			},
		},
		innerBlocks: [
			{
				name: 'core/button',
				attributes: { text: __( 'Find out more' ) },
			},
			{
				name: 'core/button',
				attributes: { text: __( 'Contact us' ) },
			},
		],
	},
	deprecated,
	transforms,
	edit,
	save,
};

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

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

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

export default function save( { attributes, className } ) {
	const { fontSize, style } = attributes;
	const blockProps = useBlockProps.save( {
		className: clsx( className, {
			'has-custom-font-size': fontSize || style?.typography?.fontSize,
		} ),
	} );
	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
	return <div { ...innerBlocksProps } />;
}


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

[User] Develop a widget block that allows dynamic parent page selection and supports nested configuration.

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

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

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

const { name } = metadata;

export { metadata, name };

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

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


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

[User] Create a woocommerce block with customizable lock

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

// File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/empty-mini-cart-contents-block/block.json
{
	"name": "woocommerce/empty-mini-cart-contents-block",
	"version": "1.0.0",
	"title": "Empty Mini-Cart view",
	"description": "Blocks that are displayed when the Mini-Cart is empty.",
	"category": "woocommerce",
	"supports": {
		"align": false,
		"html": false,
		"multiple": false,
		"reusable": false,
		"inserter": false,
		"lock": false,
		"interactivity": true
	},
	"attributes": {
		"lock": {
			"type": "object",
			"default": {
				"remove": true,
				"move": true
			}
		}
	},
	"parent": [ "woocommerce/mini-cart-contents" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

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

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

export const Edit = (): JSX.Element => {
	const blockProps = useBlockProps();
	const { currentView } = useEditorContext();

	return (
		<div
			{ ...blockProps }
			hidden={
				currentView !== 'woocommerce/empty-mini-cart-contents-block'
			}
		>
			<InnerBlocks
				allowedBlocks={ getMiniCartAllowedBlocks() }
				renderAppender={ InnerBlocks.ButtonBlockAppender }
			/>
		</div>
	);
};

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


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

[User] Develop a WordPress block that implements a pagination control displaying sequential page indicators, incorporating a mid-size range parameter.

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

// File: packages/block-library/src/query-pagination-numbers/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/query-pagination-numbers",
	"title": "Page Numbers",
	"category": "theme",
	"parent": [ "core/query-pagination" ],
	"description": "Displays a list of page numbers for pagination.",
	"textdomain": "default",
	"attributes": {
		"midSize": {
			"type": "number",
			"default": 2
		}
	},
	"usesContext": [ "queryId", "query", "enhancedPagination" ],
	"supports": {
		"reusable": false,
		"html": false,
		"color": {
			"gradients": true,
			"text": false,
			"__experimentalDefaultControls": {
				"background": true
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		}
	},
	"editorStyle": "wp-block-query-pagination-numbers-editor"
}

// File: packages/block-library/src/query-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 woocommerce block with customizable class name, lock

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

// File: plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.json
{
	"name": "woocommerce/cart-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/cart-order-summary-totals-block"
	],
	"textdomain": "woocommerce",
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-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 WordPress block displaying a keyword tag cloud with customizable parameters like tag quantity, taxonomy selection, count visibility, and additional configurable 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/tag-cloud/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/tag-cloud",
	"title": "Tag Cloud",
	"category": "widgets",
	"description": "A cloud of popular keywords, each sized by how often it appears.",
	"textdomain": "default",
	"attributes": {
		"numberOfTags": {
			"type": "number",
			"default": 45,
			"minimum": 1,
			"maximum": 100
		},
		"taxonomy": {
			"type": "string",
			"default": "post_tag"
		},
		"showTagCounts": {
			"type": "boolean",
			"default": false
		},
		"smallestFontSize": {
			"type": "string",
			"default": "8pt"
		},
		"largestFontSize": {
			"type": "string",
			"default": "22pt"
		}
	},
	"styles": [
		{ "name": "default", "label": "Default", "isDefault": true },
		{ "name": "outline", "label": "Outline" }
	],
	"supports": {
		"html": false,
		"align": true,
		"spacing": {
			"margin": true,
			"padding": true
		},
		"typography": {
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalLetterSpacing": true
		},
		"interactivity": {
			"clientNavigation": true
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true,
			"__experimentalDefaultControls": {
				"radius": true,
				"color": true,
				"width": true,
				"style": true
			}
		}
	},
	"editorStyle": "wp-block-tag-cloud-editor"
}

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

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

const { name } = metadata;

export { metadata, name };

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

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


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

[User] Create a text block with customizable content, drop cap, placeholder, direction

[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/paragraph/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/paragraph",
	"title": "Paragraph",
	"category": "text",
	"description": "Start with the basic building block of all narrative.",
	"keywords": [ "text" ],
	"textdomain": "default",
	"attributes": {
		"content": {
			"type": "rich-text",
			"source": "rich-text",
			"selector": "p",
			"role": "content"
		},
		"dropCap": {
			"type": "boolean",
			"default": false
		},
		"placeholder": {
			"type": "string"
		},
		"direction": {
			"type": "string",
			"enum": [ "ltr", "rtl" ]
		}
	},
	"supports": {
		"splitting": true,
		"anchor": true,
		"className": false,
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true
		},
		"color": {
			"gradients": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"spacing": {
			"margin": true,
			"padding": true,
			"__experimentalDefaultControls": {
				"margin": false,
				"padding": false
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"textAlign": true,
			"__experimentalFontFamily": true,
			"__experimentalTextDecoration": true,
			"__experimentalFontStyle": true,
			"__experimentalFontWeight": true,
			"__experimentalLetterSpacing": true,
			"__experimentalTextTransform": true,
			"__experimentalWritingMode": true,
			"fitText": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"__experimentalSelector": "p",
		"__unstablePasteTextInline": true,
		"interactivity": {
			"clientNavigation": true
		}
	},
	"editorStyle": "wp-block-paragraph-editor",
	"style": "wp-block-paragraph"
}

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

/**
 * Internal dependencies
 */
import initBlock from '../utils/init-block';
import deprecated from './deprecated';
import edit from './edit';
import metadata from './block.json';
import save from './save';
import transforms from './transforms';
import 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: {
			content: __(
				'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.'
			),
		},
	},
	__experimentalLabel( attributes, { context } ) {
		const customName = attributes?.metadata?.name;

		if ( context === 'list-view' && customName ) {
			return customName;
		}

		if ( context === 'accessibility' ) {
			if ( customName ) {
				return customName;
			}

			const { content } = attributes;
			return ! content || content.length === 0 ? __( 'Empty' ) : content;
		}
	},
	transforms,
	deprecated,
	merge( attributes, attributesToMerge ) {
		return {
			content:
				( attributes.content || '' ) +
				( attributesToMerge.content || '' ),
		};
	},
	edit,
	save,
	variations,
};

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/paragraph/save.js
/**
 * External dependencies
 */
import clsx from 'clsx';

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

export default function save( { attributes } ) {
	const { content, dropCap, direction, style } = attributes;
	const textAlign = style?.typography?.textAlign;
	const className = clsx( {
		'has-drop-cap':
			textAlign === ( isRTL() ? 'left' : 'right' ) ||
			textAlign === 'center'
				? false
				: dropCap,
	} );

	return (
		<p { ...useBlockProps.save( { className, dir: direction } ) }>
			<RichText.Content value={ content } />
		</p>
	);
}


[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 Contains blocks that display the content of the Mini-Cart. that allows users to configure: lock

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

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

// File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx
/**
 * External dependencies
 */
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
import { innerBlockAreas } from '@woocommerce/blocks-checkout';
import type { TemplateArray } from '@wordpress/blocks';
import { EditorProvider, useEditorContext } from '@woocommerce/base-context';
import { previewCart } from '@woocommerce/resource-previews';

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

export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
	const blockProps = useBlockProps();
	const allowedBlocks = getAllowedBlocks( innerBlockAreas.FILLED_MINI_CART );
	const { currentView } = useEditorContext();

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

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

	return (
		<div
			{ ...blockProps }
			hidden={
				currentView !== 'woocommerce/filled-mini-cart-contents-block'
			}
		>
			<EditorProvider
				currentView={ currentView }
				previewData={ { previewCart } }
			>
				<InnerBlocks
					template={ defaultTemplate }
					allowedBlocks={ allowedBlocks }
					templateLock="insert"
				/>
			</EditorProvider>
		</div>
	);
};

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


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

[User] Design a Gutenberg block for generating dynamic breadcrumb trails that supports flexible settings including taxonomy selection, path separator, home page link, and two extra customization 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/breadcrumbs/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/breadcrumbs",
	"title": "Breadcrumbs",
	"__experimental": true,
	"category": "theme",
	"description": "Display a breadcrumb trail for hierarchical post types or based on taxonomy terms.",
	"textdomain": "default",
	"attributes": {
		"prefersTaxonomy": {
			"type": "boolean",
			"default": false
		},
		"separator": {
			"type": "string",
			"default": "/"
		},
		"showHomeItem": {
			"type": "boolean",
			"default": true
		},
		"showCurrentItem": {
			"type": "boolean",
			"default": true
		},
		"showOnHomePage": {
			"type": "boolean",
			"default": false
		}
	},
	"usesContext": [ "postId", "postType", "templateSlug" ],
	"supports": {
		"html": false,
		"align": [ "wide", "full" ],
		"spacing": {
			"margin": true,
			"padding": true
		},
		"color": {
			"gradients": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true,
			"__experimentalDefaultControls": {
				"radius": false,
				"color": true,
				"width": true,
				"style": true
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		}
	},
	"style": "wp-block-breadcrumbs"
}

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

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

const { name } = metadata;

export { metadata, name };

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

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


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

[User] Create a custom WordPress block that renders a real-time Instagram feed preview, allowing configuration through an access token, specified user profile, column arrangement, and three supplementary display options.

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

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

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

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

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

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

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

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

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

		return (

		);
	};

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

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

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

		return (

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

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

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

		);
	};

	return (

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

			{ showLoadingSpinner && (

					<Spinner />

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

			) }

			{ showGallery && (

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

							{ renderImage( index ) }

					) ) }

			) }

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

	);
};

export default withNotices( InstagramGalleryEdit );

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

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

	return (
		instagramUser && (

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

		)
	);
};


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

[User] Develop a WordPress theme block that allows flexible text alignment configurations.

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

// File: packages/block-library/src/term-description/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/term-description",
	"title": "Term Description",
	"category": "theme",
	"description": "Display the description of categories, tags and custom taxonomies when viewing an archive.",
	"textdomain": "default",
	"usesContext": [ "termId", "taxonomy" ],
	"attributes": {
		"textAlign": {
			"type": "string"
		}
	},
	"supports": {
		"align": [ "wide", "full" ],
		"html": false,
		"color": {
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"spacing": {
			"padding": true,
			"margin": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalFontWeight": true,
			"__experimentalFontStyle": true,
			"__experimentalTextTransform": true,
			"__experimentalTextDecoration": true,
			"__experimentalLetterSpacing": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"interactivity": {
			"clientNavigation": true
		},
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true,
			"__experimentalDefaultControls": {
				"radius": true,
				"color": true,
				"width": true,
				"style": true
			}
		}
	}
}

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

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

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

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

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


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

[User] Construct a custom block for presenting order cost components, with configurable styling and lock options for enhanced user control.

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

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

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

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

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

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

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

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


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

[User] Build a Gutenberg block that Block that displays the cart button when the Mini-Cart has products. with these attributes: lock, cart button label

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

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

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

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

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

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

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


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

[User] Craft a Gutenberg block for showcasing the primary product image, incorporating configurable attributes like product link visibility, sale badge display, badge alignment, and additional customization 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: plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/image/block.json
{
	"name": "woocommerce/product-image",
	"title": "Product Image",
	"description": "Display the main product image.",
	"category": "woocommerce-product-elements",
	"attributes": {
		"showProductLink": { "type": "boolean", "default": true },
		"showSaleBadge": { "type": "boolean", "default": true },
		"saleBadgeAlign": { "type": "string", "default": "right" },
		"imageSizing": { "type": "string", "default": "single" },
		"productId": { "type": "number", "default": 0 },
		"isDescendentOfQueryLoop": { "type": "boolean", "default": false },
		"isDescendentOfSingleProductBlock": {
			"type": "boolean",
			"default": false
		},
		"width": { "type": "string" },
		"height": { "type": "string" },
		"scale": { "type": "string", "default": "cover" },
		"aspectRatio": { "type": "string" }
	},
	"supports": {
		"interactivity": {
			"clientNavigation": true
		},
		"html": false,
		"__experimentalBorder": {
			"radius": true,
			"__experimentalSkipSerialization": true
		},
		"typography": {
			"fontSize": true,
			"__experimentalSkipSerialization": true
		},
		"spacing": {
			"margin": true,
			"padding": true
		},
		"dimensions": {
			"aspectRatio": true,
			"__experimentalSkipSerialization": true
		},
		"email": true,
		"__experimentalSelector": ".wc-block-components-product-image"
	},
	"ancestor": [
		"woocommerce/all-products",
		"woocommerce/single-product",
		"woocommerce/product-template",
		"core/post-template"
	],
	"usesContext": [ "imageId", "postId", "query", "queryId" ],
	"keywords": [ "WooCommerce" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}

// File: plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/image/edit.tsx
/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import {
	InspectorControls,
	useBlockProps,
	useInnerBlocksProps,
	store as blockEditorStore,
} from '@wordpress/block-editor';
import {
	createInterpolateElement,
	useEffect,
	useRef,
} from '@wordpress/element';
import { getAdminLink, getSettingWithCoercion } from '@woocommerce/settings';
import { useProduct } from '@woocommerce/entities';
import { isBoolean } from '@woocommerce/types';
import type { BlockEditProps } from '@wordpress/blocks';
import { ProductQueryContext as Context } from '@woocommerce/blocks/product-query/types';
import {
	PanelBody,
	ToggleControl,
	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
	// @ts-ignore - Ignoring because `__experimentalToggleGroupControl` is not yet in the type definitions.
	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
	__experimentalToggleGroupControl as ToggleGroupControl,
	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
	// @ts-ignore - Ignoring because `__experimentalToggleGroupControl` is not yet in the type definitions.
	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from '@wordpress/components';

/**
 * Internal dependencies
 */
import Block from './block';
import { useIsDescendentOfSingleProductBlock } from '../shared/use-is-descendent-of-single-product-block';
import { BlockAttributes, ImageSizing } from './types';
import { ImageSizeSettings } from './image-size-settings';

const TEMPLATE = [
	[
		'woocommerce/product-sale-badge',
		{
			align: 'right',
		},
	],
];

const Edit = ( {
	attributes,
	setAttributes,
	context,
	clientId,
}: BlockEditProps< BlockAttributes > & { context: Context } ): JSX.Element => {
	const { showProductLink, imageSizing, width, height, scale } = attributes;

	const ref = useRef< HTMLDivElement >( null );

	const blockProps = useBlockProps();
	const { wasBlockJustInserted, isInProductGallery } = useSelect(
		( select ) => {
			return {
				wasBlockJustInserted:
					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
					// @ts-expect-error method exists but not typed
					select( blockEditorStore ).wasBlockJustInserted( clientId ),
				isInProductGallery:
					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
					// @ts-expect-error method exists but not typed
					select( blockEditorStore ).getBlockParentsByBlockName(
						clientId,
						'woocommerce/product-gallery'
					).length > 0,
			};
		},
		[ clientId ]
	);

	const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
	const { isDescendentOfSingleProductBlock } =
		useIsDescendentOfSingleProductBlock( {
			blockClientId: blockProps?.id,
		} );

	useEffect( () => {
		if ( isDescendentOfQueryLoop || isDescendentOfSingleProductBlock ) {
			setAttributes( {
				isDescendentOfQueryLoop,
				isDescendentOfSingleProductBlock,
				showSaleBadge: false,
			} );
		} else {
			setAttributes( {
				isDescendentOfQueryLoop,
				isDescendentOfSingleProductBlock,
			} );
		}
	}, [
		isDescendentOfQueryLoop,
		isDescendentOfSingleProductBlock,
		setAttributes,
	] );

	const showAllControls =
		isDescendentOfQueryLoop || isDescendentOfSingleProductBlock;

	const innerBlockProps = useInnerBlocksProps(
		{
			className: 'wc-block-components-product-image__inner-container',
		},
		{
			dropZoneElement: ref.current,
			template: wasBlockJustInserted ? TEMPLATE : undefined,
		}
	);

	const isBlockTheme = getSettingWithCoercion(
		'isBlockTheme',
		false,
		isBoolean
	);

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

	return (

			{ /* Don't show controls in product gallery as we rely on
			core supports API (aspect ratio setting) */ }
			{ showAllControls && ! isInProductGallery && (
				<InspectorControls>
					<ImageSizeSettings
						scale={ scale }
						width={ width }
						height={ height }
						setAttributes={ setAttributes }
					/>
					<PanelBody title={ __( 'Content', 'woocommerce' ) }>
						<ToggleControl
							label={ __(
								'Link to Product Page',
								'woocommerce'
							) }
							help={ __(
								'Links the image to the single product listing.',
								'woocommerce'
							) }
							checked={ showProductLink }
							onChange={ () =>
								setAttributes( {
									showProductLink: ! showProductLink,
								} )
							}
						/>
						<ToggleGroupControl
							label={ __( 'Resolution', 'woocommerce' ) }
							isBlock
							help={
								! isBlockTheme
									? createInterpolateElement(
											__(
												'Product image cropping can be modified in the Customizer.',
												'woocommerce'
											),
											{
												a: (
													// eslint-disable-next-line jsx-a11y/anchor-has-content

												),
											}
									  )
									: null
							}
							value={ imageSizing }
							onChange={ ( value: ImageSizing ) =>
								setAttributes( { imageSizing: value } )
							}
						>
							<ToggleGroupControlOption
								value={ ImageSizing.SINGLE }
								label={ __( 'Full Size', 'woocommerce' ) }
							/>
							<ToggleGroupControlOption
								value={ ImageSizing.THUMBNAIL }
								label={ __( 'Thumbnail', 'woocommerce' ) }
							/>
						</ToggleGroupControl>
					</PanelBody>
				</InspectorControls>
			) }
			<Block
				{ ...{ ...attributes, ...context } }
				isAdmin={ true }
				product={ product }
				isResolving={ isResolving }
			>
				{ showAllControls &&
 }
			</Block>

	);
};

export default Edit;


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

[User] Create a customizable column block within WordPress that presents cart items and provides locking configuration 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/cart/inner-blocks/cart-items-block/block.json
{
	"name": "woocommerce/cart-items-block",
	"version": "1.0.0",
	"title": "Cart Items",
	"description": "Column containing cart items.",
	"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/filled-cart-block"
	],
	"textdomain": "woocommerce",
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3
}

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

/**
 * Internal dependencies
 */
import {
	useForcedLayout,
	getAllowedBlocks,
} from '../../../cart-checkout-shared';
import crossSells from '../../../product-collection/collections/cross-sells';

interface Props {
	clientId: string;
}

export const Edit = ( { clientId }: Props ): JSX.Element => {
	const blockProps = useBlockProps( { className: 'wc-block-cart__main' } );
	const allowedBlocks = getAllowedBlocks( innerBlockAreas.CART_ITEMS );
	// Product collection is used for the Cross-Sells block.
	// We don't want to set a parent on the product collection block
	// so we add it here manually.
	allowedBlocks.push( 'woocommerce/product-collection' );

	const defaultTemplate = [
		[ 'woocommerce/cart-line-items-block', {}, [] ],
		[
			'woocommerce/product-collection',
			{
				...crossSells.attributes,
				displayLayout: {
					...crossSells.attributes.displayLayout,
					columns: 3,
				},
				query: {
					...crossSells.attributes.query,
					perPage: 3,
				},
				collection: 'woocommerce/product-collection/cross-sells',
			},
			crossSells.innerBlocks,
		],
	] as unknown as TemplateArray;

	useForcedLayout( {
		clientId,
		registeredBlocks: allowedBlocks,
		defaultTemplate,
	} );
	return (
		<Main { ...blockProps }>
			<InnerBlocks
				allowedBlocks={ allowedBlocks }
				template={ defaultTemplate }
				templateLock={ false }
				renderAppender={ InnerBlocks.ButtonBlockAppender }
			/>
		</Main>
	);
};

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] Design a dynamic WordPress block that allows for customizable referencing and content editing to enhance template reusability.

[Assistant]
// File: packages/block-library/src/block/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/block",
	"title": "Pattern",
	"category": "reusable",
	"description": "Reuse this design across your site.",
	"keywords": [ "reusable" ],
	"textdomain": "default",
	"attributes": {
		"ref": {
			"type": "number"
		},
		"content": {
			"type": "object",
			"default": {}
		}
	},
	"providesContext": {
		"pattern/overrides": "content"
	},
	"supports": {
		"customClassName": false,
		"html": false,
		"inserter": false,
		"renaming": false,
		"interactivity": {
			"clientNavigation": true
		}
	}
}

// File: packages/block-library/src/block/index.js
/**
 * WordPress dependencies
 */
import { symbol as icon } from '@wordpress/icons';
import { store as coreStore } from '@wordpress/core-data';
import { select } from '@wordpress/data';
import { decodeEntities } from '@wordpress/html-entities';

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

const { name } = metadata;

export { metadata, name };

export const settings = {
	deprecated,
	edit,
	icon,
	__experimentalLabel: ( { ref } ) => {
		if ( ! ref ) {
			return;
		}

		const entity = select( coreStore ).getEditedEntityRecord(
			'postType',
			'wp_block',
			ref
		);
		if ( ! entity?.title ) {
			return;
		}

		return decodeEntities( entity.title );
	},
};

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


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

[User] Design a block component that renders a list-based representation of child products in the Grouped Product Selector functionality.

[Assistant]
// File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/grouped-product-selector/product-item/block.json
{
	"name": "woocommerce/add-to-cart-with-options-grouped-product-item",
	"title": "Grouped Product: Template (Beta)",
	"description": "A list item template that represents a child product within the Grouped Product Selector block.",
	"category": "woocommerce-product-elements",
	"keywords": [ "WooCommerce" ],
	"usesContext": [ "postId" ],
	"ancestor": [
		"woocommerce/add-to-cart-with-options-grouped-product-selector"
	],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"supports": {
		"inserter": false,
		"interactivity": true
	},
	"style": "file:../woocommerce/add-to-cart-with-options-grouped-product-item-style.css"
}

// File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/grouped-product-selector/product-item/edit.tsx
/**
 * External dependencies
 */
import { useState, useEffect } from '@wordpress/element';
import {
	useBlockProps,
	useInnerBlocksProps,
	store as blockEditorStore,
	__experimentalUseBlockPreview as useBlockPreview,
	BlockContextProvider,
} from '@wordpress/block-editor';
import { BlockInstance, type BlockEditProps } from '@wordpress/blocks';
import { withProduct } from '@woocommerce/block-hocs';
import {
	InnerBlockLayoutContextProvider,
	ProductDataContextProvider,
	useProductDataContext,
} from '@woocommerce/shared-context';
import { resolveSelect, useSelect } from '@wordpress/data';
import type { ProductResponseItem } from '@woocommerce/types';
import { productsStore } from '@woocommerce/data';
import { isProductResponseItem } from '@woocommerce/entities';
import { Spinner } from '@wordpress/components';
import { previewProductResponseItems } from '@woocommerce/resource-previews';

interface Attributes {
	className?: string;
}

type ProductItemWithContextProps = {
	attributes: { productId: number };
	isLoading?: boolean;
	product?: ProductResponseItem | null;
	blocks: BlockInstance[];
	isSelected: boolean;
	onSelect(): void;
};

type ProductItemProps = {
	product: ProductResponseItem | null;
	blocks: BlockInstance[];
	isLoading: boolean;
	isSelected: boolean;
	onSelect(): void;
};

const ProductItem = ( {
	product,
	blocks,
	isLoading,
	isSelected,
	onSelect,
}: ProductItemProps ) => {
	const blockPreviewProps = useBlockPreview( {
		blocks,
	} );
	const innerBlocksProps = useInnerBlocksProps(
		{ role: 'listitem' },
		{ templateLock: 'insert' }
	);

	return (
		<ProductDataContextProvider product={ product } isLoading={ isLoading }>
			{ isSelected ? (

			) : (

 {
							if ( e.key === 'Enter' || e.key === ' ' ) {
								e.preventDefault();
								onSelect();
							}
						} }
					/>

			) }
		</ProductDataContextProvider>
	);
};

const ProductItemWithContext = withProduct(
	( {
		attributes,
		isLoading = true,
		product = null,
		blocks,
		isSelected,
		onSelect,
	}: ProductItemWithContextProps ) => {
		return (
			<BlockContextProvider
				value={ { postId: attributes.productId, postType: 'product' } }
			>
				<ProductItem
					product={ product }
					blocks={ blocks }
					isLoading={ isLoading }
					isSelected={ isSelected }
					onSelect={ onSelect }
				/>
			</BlockContextProvider>
		);
	}
);

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

	const blockProps = useBlockProps( {
		className,
	} );

	const { product, isLoading } = useProductDataContext();
	const [ isLoadingProducts, setIsLoadingProducts ] = useState( true );
	const [ products, setProducts ] = useState< ProductResponseItem[] | null >(
		null
	);
	const productsLength = products?.length || 0;

	useEffect( () => {
		const fetchChildProducts = async ( groupedProductIds: number[] ) => {
			if ( ! groupedProductIds || groupedProductIds.length === 0 ) {
				setIsLoadingProducts( false );
				return;
			}

			resolveSelect( productsStore )
				.getProducts( {
					include: groupedProductIds,
					per_page: groupedProductIds.length,
					_fields: [ 'id' ],
				} )
				.then( ( fetchedProducts ) => {
					setProducts( fetchedProducts );
					setIsLoadingProducts( false );
				} );
		};

		if ( ! isLoading && product && productsLength === 0 ) {
			if ( isProductResponseItem( product ) ) {
				fetchChildProducts( product.grouped_products );
			} else {
				// If not editing a specific product, we are editing a template.
				// Fetch an existing grouped product so template can be edited.
				resolveSelect( productsStore )
					.getProducts( { type: 'grouped', per_page: 1 } )
					.then( ( groupedProduct ) => {
						if (
							groupedProduct.length > 0 &&
							groupedProduct[ 0 ]?.grouped_products?.length > 0
						) {
							fetchChildProducts(
								groupedProduct[ 0 ].grouped_products
							);
						} else {
							// If there are no grouped products, query for any three other products.
							resolveSelect( productsStore )
								.getProducts( {
									per_page: 3,
									_fields: [ 'id' ],
								} )
								.then( ( fetchedProducts ) => {
									if ( fetchedProducts.length > 0 ) {
										setProducts( fetchedProducts );
									}
									setIsLoadingProducts( false );
								} );
						}
					} );
			}
		}
	}, [ isLoading, product, productsLength ] );

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

	const [ selectedProductItem, setSelectedProductItem ] =
		useState< number >();

	if ( isLoading || isLoadingProducts ) {
		return <Spinner />;
	}

	const productList = products
		? products?.map( ( productItem ) => (
				<ProductItemWithContext
					key={ productItem.id }
					attributes={ {
						productId: productItem.id,
					} }
					blocks={ blocks }
					isSelected={
						( selectedProductItem ?? products[ 0 ]?.id ) ===
						productItem.id
					}
					onSelect={ () => setSelectedProductItem( productItem.id ) }
				/>
		  ) )
		: previewProductResponseItems?.map( ( productItem ) => (
				<ProductItem
					key={ productItem.id }
					product={ productItem }
					blocks={ blocks }
					isLoading={ false }
					isSelected={
						( selectedProductItem ??
							previewProductResponseItems[ 0 ]?.id ) ===
						productItem.id
					}
					onSelect={ () => setSelectedProductItem( productItem.id ) }
				/>
		  ) );

	return (

			<InnerBlockLayoutContextProvider parentName="woocommerce/add-to-cart-with-options-grouped-product-item">

{ productList }

			</InnerBlockLayoutContextProvider>

	);
}

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

export default function ProductItemTemplateSave() {
	const blockProps = useBlockProps.save();
	const innerBlocksProps = useInnerBlocksProps.save( {
		...blockProps,
		role: 'listitem',
	} );
	return
;
}


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

[User] Construct a custom block designed to render and showcase the active filtering criteria within the current view.

[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/active-filters/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"name": "woocommerce/product-filter-active",
	"title": "Active Filters",
	"description": "Display the currently active filters.",
	"category": "woocommerce",
	"keywords": [ "WooCommerce" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"ancestor": [ "woocommerce/product-filters" ],
	"supports": {
		"interactivity": true,
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true,
			"__experimentalDefaultControls": {
				"color": false,
				"radius": false,
				"style": false,
				"width": false
			}
		},
		"spacing": {
			"margin": true,
			"padding": true,
			"blockGap": false,
			"__experimentalDefaultControls": {
				"margin": false,
				"padding": false,
				"blockGap": false
			}
		}
	},
	"usesContext": [ "activeFilters" ],
	"viewScriptModule": "woocommerce/product-filter-active"
}

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

/**
 * Internal dependencies
 */
import { InitialDisabled } from '../../components/initial-disabled';
import { EXCLUDED_BLOCKS } from '../../constants';
import { getAllowedBlocks } from '../../utils/get-allowed-blocks';
import { filtersPreview } from './constants';

const Edit = () => {
	const { children, ...innerBlocksProps } = useInnerBlocksProps(
		useBlockProps(),
		{
			allowedBlocks: getAllowedBlocks( EXCLUDED_BLOCKS ),
			template: [
				[ 'woocommerce/product-filter-removable-chips' ],
				[ 'woocommerce/product-filter-clear-button' ],
			],
		}
	);

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

export default Edit;

// File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/active-filters/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;