Ensure the classic block allows diplaying at fullscreen, allowing for…

… toggling (#53449)

Update the height so that more content is displayed in the tinymce editor in smaller viewports

packages/block-library/src/freeform/editor.scss

@@ -376,14 +376,20 @@ div[data-type="core/freeform"] {
 }
 
 .block-editor-freeform-modal {
-	.components-modal__frame {
+	.block-editor-freeform-modal__content {
+		.mce-edit-area iframe {
+			height: 50vh !important;
+		}
 		// On large screens, make the TinyMCE edit area grow to take all the
 		// available height so that the Cancel/Save buttons are always into the
 		// view. On smaller screens, the modal content is scrollable.
 		@include break-large() {
+
 			// On medium and large screens, the modal component sets a max-height.
 			// We want the modal to be as tall as possible also when the content is short.
-			height: 9999rem;
+			&:not(.is-full-screen) {
+				height: 9999rem;
+			}
 
 			.components-modal__header + div {
 				height: 100%;
@@ -397,6 +403,7 @@ div[data-type="core/freeform"] {
 				height: 100%;
 				display: flex;
 				flex-direction: column;
+				min-width: 50vw;
 			}
 
 			.mce-edit-area {

packages/block-library/src/freeform/modal.js

@@ -13,6 +13,29 @@ import {
 import { useEffect, useState, RawHTML } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+import { fullscreen } from '@wordpress/icons';
+import { useViewportMatch } from '@wordpress/compose';
+
+function ModalAuxiliaryActions( { onClick, isModalFullScreen } ) {
+	// 'small' to match the rules in editor.scss.
+	const isMobileViewport = useViewportMatch( 'small', '<' );
+	if ( isMobileViewport ) {
+		return null;
+	}
+
+	return (
+		<Button
+			onClick={ onClick }
+			icon={ fullscreen }
+			isPressed={ isModalFullScreen }
+			label={
+				isModalFullScreen
+					? __( 'Exit fullscreen' )
+					: __( 'Enter fullscreen' )
+			}
+		/>
+	);
+}
 
 function ClassicEdit( props ) {
 	const styles = useSelect(
@@ -58,6 +81,7 @@ export default function ModalEdit( props ) {
 		onReplace,
 	} = props;
 	const [ isOpen, setOpen ] = useState( false );
+	const [ isModalFullScreen, setIsModalFullScreen ] = useState( false );
 	const id = `editor-${ clientId }`;
 
 	const onClose = () => ( content ? setOpen( false ) : onReplace( [] ) );
@@ -78,6 +102,16 @@ export default function ModalEdit( props ) {
 					onRequestClose={ onClose }
 					shouldCloseOnClickOutside={ false }
 					overlayClassName="block-editor-freeform-modal"
+					isFullScreen={ isModalFullScreen }
+					className="block-editor-freeform-modal__content"
+					headerActions={
+						<ModalAuxiliaryActions
+							onClick={ () =>
+								setIsModalFullScreen( ! isModalFullScreen )
+							}
+							isModalFullScreen={ isModalFullScreen }
+						/>
+					}
 				>
 					<ClassicEdit id={ id } defaultValue={ content } />
 					<Flex