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

[User] Craft a WordPress block enabling users to specify and display your business's operating hours with customizable day 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: projects/plugins/jetpack/extensions/blocks/business-hours/block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "jetpack/business-hours",
	"title": "Business Hours",
	"description": "Display opening hours for your business.",
	"keywords": [ "opening hours", "closing time", "schedule", "working day" ],
	"version": "12.5.0",
	"textdomain": "jetpack",
	"category": "grow",
	"icon": "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/></svg>",
	"supports": {
		"html": true,
		"color": {
			"gradients": true
		},
		"spacing": {
			"margin": true,
			"padding": true
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true
		},
		"align": [ "wide", "full" ]
	},
	"attributes": {
		"days": {
			"type": "array",
			"default": [
				{
					"name": "Sun",
					"hours": []
				},
				{
					"name": "Mon",
					"hours": [
						{
							"opening": "09:00",
							"closing": "17:00"
						}
					]
				},
				{
					"name": "Tue",
					"hours": [
						{
							"opening": "09:00",
							"closing": "17:00"
						}
					]
				},
				{
					"name": "Wed",
					"hours": [
						{
							"opening": "09:00",
							"closing": "17:00"
						}
					]
				},
				{
					"name": "Thu",
					"hours": [
						{
							"opening": "09:00",
							"closing": "17:00"
						}
					]
				},
				{
					"name": "Fri",
					"hours": [
						{
							"opening": "09:00",
							"closing": "17:00"
						}
					]
				},
				{
					"name": "Sat",
					"hours": []
				}
			]
		}
	},
	"example": {
		"attributes": {
			"days": [
				{
					"name": "Sun",
					"hours": []
				},
				{
					"name": "Mon",
					"hours": [
						{
							"opening": "09:00",
							"closing": "17:00"
						}
					]
				},
				{
					"name": "Tue",
					"hours": [
						{
							"opening": "09:00",
							"closing": "17:00"
						}
					]
				},
				{
					"name": "Wed",
					"hours": [
						{
							"opening": "09:00",
							"closing": "17:00"
						}
					]
				},
				{
					"name": "Thu",
					"hours": [
						{
							"opening": "09:00",
							"closing": "17:00"
						}
					]
				},
				{
					"name": "Fri",
					"hours": [
						{
							"opening": "09:00",
							"closing": "17:00"
						}
					]
				},
				{
					"name": "Sat",
					"hours": []
				}
			]
		}
	}
}

// File: projects/plugins/jetpack/extensions/blocks/business-hours/edit.js
import { getBlockIconComponent } from '@automattic/jetpack-shared-extension-utils';
import apiFetch from '@wordpress/api-fetch';
import { useBlockProps } from '@wordpress/block-editor';
import { Placeholder } from '@wordpress/components';
import { getSettings } from '@wordpress/date';
import { useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import metadata from './block.json';
import DayEdit from './components/day-edit';
import DayPreview from './components/day-preview';

const icon = getBlockIconComponent( metadata );

export const defaultLocalization = {
	days: {
		Sun: __( 'Sunday', 'jetpack' ),
		Mon: __( 'Monday', 'jetpack' ),
		Tue: __( 'Tuesday', 'jetpack' ),
		Wed: __( 'Wednesday', 'jetpack' ),
		Thu: __( 'Thursday', 'jetpack' ),
		Fri: __( 'Friday', 'jetpack' ),
		Sat: __( 'Saturday', 'jetpack' ),
	},
	startOfWeek: 0,
};

const BusinessHours = props => {
	const { attributes, isSelected } = props;
	const blockProps = useBlockProps();
	const [ localization, setLocalization ] = useState( defaultLocalization );
	const [ hasFetched, setHasFetched ] = useState( false );

	const { days } = attributes;
	const { startOfWeek } = localization;
	const localizedWeek = days.concat( days.slice( 0, startOfWeek ) ).slice( startOfWeek );

	useEffect( () => {
		apiFetch( { path: '/wpcom/v2/business-hours/localized-week' } ).then(
			data => {
				setLocalization( data );
				setHasFetched( true );
			},
			() => {
				setLocalization( defaultLocalization );
				setHasFetched( true );
			}
		);
	}, [] );

	let content;

	if ( ! hasFetched ) {
		content = <Placeholder icon={ icon } label={ __( 'Loading business hours', 'jetpack' ) } />;
	} else if ( ! isSelected ) {
		const settings = getSettings();
		const {
			formats: { time },
		} = settings;

		content = (

				{ localizedWeek.map( ( day, key ) => {
					return (
						<DayPreview key={ key } day={ day } localization={ localization } timeFormat={ time } />
					);
				} ) }

		);
	} else {
		content = (

				{ localizedWeek.map( ( day, key ) => {
					return <DayEdit key={ key } day={ day } localization={ localization } { ...props } />;
				} ) }

		);
	}

	return
{ content }
;
};

export default BusinessHours;