Testing out zoom mode in the revisions view

Also making the resizable iframe optional
WordPress · May 16, 2023 · 2779610 · 2779610
1 parent b0d2da0
commit 2779610
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 24 deletions.
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
@@ -143,6 +143,7 @@ export default function BlockEditor() {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 
 	const isTemplatePart = templateType === 'wp_template_part';
+
 	const hasBlocks = blocks.length !== 0;
 	const enableResizing =
 		isTemplatePart &&
@@ -169,9 +170,7 @@ export default function BlockEditor() {
 				{ ( [ editorCanvasView ] ) =>
 					editorCanvasView ? (
 						<div className="edit-site-visual-editor is-focus-mode">
-							<ResizableEditor enableResizing>
-								{ editorCanvasView }
-							</ResizableEditor>
+							{ editorCanvasView }
 						</div>
 					) : (
 						<BlockTools

diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js
@@ -18,6 +18,7 @@ import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
  */
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
+import ResizableEditor from '../block-editor/resizable-editor';
 
 /**
  * Returns a translated string for the title of the editor canvas container.
@@ -46,7 +47,12 @@ const {
 	Fill: EditorCanvasContainerFill,
 } = createPrivateSlotFill( SLOT_FILL_NAME );
 
-function EditorCanvasContainer( { children, closeButtonLabel, onClose } ) {
+function EditorCanvasContainer( {
+	children,
+	closeButtonLabel,
+	onClose,
+	enableResizing = false,
+} ) {
 	const editorCanvasContainerView = useSelect(
 		( select ) =>
 			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
@@ -62,6 +68,7 @@ function EditorCanvasContainer( { children, closeButtonLabel, onClose } ) {
 		() => getEditorCanvasContainerTitle( editorCanvasContainerView ),
 		[ editorCanvasContainerView ]
 	);
+
 	function onCloseContainer() {
 		if ( typeof onClose === 'function' ) {
 			onClose();
@@ -97,24 +104,26 @@ function EditorCanvasContainer( { children, closeButtonLabel, onClose } ) {
 
 	return (
 		<EditorCanvasContainerFill>
-			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
-			<section
-				className="edit-site-editor-canvas-container"
-				ref={ shouldShowCloseButton ? focusOnMountRef : null }
-				onKeyDown={ closeOnEscape }
-				aria-label={ title }
-			>
-				{ shouldShowCloseButton && (
-					<Button
-						className="edit-site-editor-canvas-container__close-button"
-						icon={ closeSmall }
-						label={ closeButtonLabel || __( 'Close' ) }
-						onClick={ onCloseContainer }
-						showTooltip={ false }
-					/>
-				) }
-				{ childrenWithProps }
-			</section>
+			<ResizableEditor enableResizing={ enableResizing }>
+				{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
+				<section
+					className="edit-site-editor-canvas-container"
+					ref={ shouldShowCloseButton ? focusOnMountRef : null }
+					onKeyDown={ closeOnEscape }
+					aria-label={ title }
+				>
+					{ shouldShowCloseButton && (
+						<Button
+							className="edit-site-editor-canvas-container__close-button"
+							icon={ closeSmall }
+							label={ closeButtonLabel || __( 'Close' ) }
+							onClick={ onCloseContainer }
+							showTooltip={ false }
+						/>
+					) }
+					{ childrenWithProps }
+				</section>
+			</ResizableEditor>
 		</EditorCanvasContainerFill>
 	);
 }

diff --git a/packages/edit-site/src/components/editor-canvas-container/style.scss b/packages/edit-site/src/components/editor-canvas-container/style.scss
@@ -1,5 +1,4 @@
 .edit-site-editor-canvas-container {
-	background: $white; // Fallback color, overridden by JavaScript.
 	border-radius: $radius-block-ui;
 	bottom: 0;
 	left: 0;

diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js
@@ -79,6 +79,9 @@ function Revisions( { onClose, userConfig, blocks } ) {
 				className="edit-site-revisions__iframe"
 				name="revisions"
 				tabIndex={ 0 }
+				expand={ true }
+				scale={ 0.75 }
+				frameSize={ 100 }
 			>
 				<EditorStyles styles={ editorStyles } />
 				<style>

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
@@ -192,7 +192,10 @@ function StyleBook( { isSelected, onSelect } ) {
 	);
 
 	return (
-		<EditorCanvasContainer closeButtonLabel={ __( 'Close Style Book' ) }>
+		<EditorCanvasContainer
+			enableResizing={ true }
+			closeButtonLabel={ __( 'Close Style Book' ) }
+		>
 			<div
 				className={ classnames( 'edit-site-style-book', {
 					'is-wide': sizes.width > 600,