PreviewOptions: critical error when children not passed

[t-hamano]

Description

It was also reported in:

• Core Ticket: https://core.trac.wordpress.org/ticket/59317
• pattern-directory repo: Error when clicking Preview in Pattern Maker Editor pattern-directory#598

The PreviewOptions component renders child components. However, because it assumes that the child is a function, a critical error will occur if the child is not passed in the proper form.

In the pattern directory, no children are passed, as only a device preview is sufficient.

Step-by-step reproduction instructions

To reproduce this issue, rewrite the Edit component of the code block as follows:

/**
 * WordPress dependencies
 */
import {
	useBlockProps,
	__experimentalPreviewOptions as PreviewOptions,
} from '@wordpress/block-editor';
import { useDispatch, useSelect } from '@wordpress/data';

export default function CodeEdit() {
	const deviceType = useSelect( ( select ) => {
			return select( 'core/edit-post' ).__experimentalGetPreviewDeviceType();
	}, [] );
	const { __experimentalSetPreviewDeviceType: setPreviewDeviceType } =
		useDispatch( 'core/edit-post' );
	const blockProps = useBlockProps();
	return (
		<div { ...blockProps }>
			<PreviewOptions deviceType={ deviceType } setDeviceType={ setPreviewDeviceType } />
		</div>
	);
}

• Insert a code block.
• The block should break.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes