Add Style Book

WordPress · Dec 4, 2022 · a26d321 · a26d321
1 parent f523187
commit a26d321
Show file tree

Hide file tree

Showing 12 changed files with 482 additions and 132 deletions.
diff --git a/packages/block-editor/src/components/block-preview/README.md b/packages/block-editor/src/components/block-preview/README.md
@@ -28,6 +28,8 @@ Width of the preview container in pixels. Controls at what size the blocks will
 
 `viewportWidth` can be used to simulate how blocks look on different device sizes or to make sure make sure multiple previews will be rendered with the same scale, regardless of their content.
 
+Set `viewportWidth` to `0` to make the viewport the same width as the container.
+
 ### `__experimentalPadding`
 
 -   **Type** `Int`

diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
@@ -26,6 +26,10 @@ function ScaledBlockPreview( {
 	__experimentalPadding,
 	__experimentalMinHeight,
 } ) {
+	if ( ! viewportWidth ) {
+		viewportWidth = containerWidth;
+	}
+
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
 	const { styles, assets, duotone } = useSelect( ( select ) => {

diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js
@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalUseResizeCanvas as useResizeCanvas,
+	__unstableEditorStyles as EditorStyles,
+	__unstableIframe as Iframe,
+	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+function EditorCanvas( { enableResizing, settings, children, ...props } ) {
+	const { deviceType, isZoomOutMode } = useSelect(
+		( select ) => ( {
+			deviceType:
+				select( editSiteStore ).__experimentalGetPreviewDeviceType(),
+			isZoomOutMode:
+				select( blockEditorStore ).__unstableGetEditorMode() ===
+				'zoom-out',
+		} ),
+		[]
+	);
+	const deviceStyles = useResizeCanvas( deviceType );
+	const mouseMoveTypingRef = useMouseMoveTypingReset();
+	return (
+		<Iframe
+			scale={ ( isZoomOutMode && 0.45 ) || undefined }
+			frameSize={ isZoomOutMode ? 100 : undefined }
+			style={ enableResizing ? {} : deviceStyles }
+			head={
+				<>
+					<EditorStyles styles={ settings.styles } />
+					<style>{
+						// Forming a "block formatting context" to prevent margin collapsing.
+						// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+						`.is-root-container { display: flow-root; }
+							body { position: relative; }`
+					}</style>
+					{ enableResizing && (
+						<style>
+							{
+								// Some themes will have `min-height: 100vh` for the root container,
+								// which isn't a requirement in auto resize mode.
+								`.is-root-container { min-height: 0 !important; }`
+							}
+						</style>
+					) }
+				</>
+			}
+			assets={ settings.__unstableResolvedAssets }
+			ref={ mouseMoveTypingRef }
+			name="editor-canvas"
+			className="edit-site-visual-editor__editor-canvas"
+			{ ...props }
+		>
+			{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
+			{ settings.svgFilters }
+			{ children }
+		</Iframe>
+	);
+}
+
+export default EditorCanvas;
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
@@ -26,7 +26,11 @@ import {
 	store as blockEditorStore,
 	__unstableBlockNameContext,
 } from '@wordpress/block-editor';
-import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	useViewportMatch,
+	useResizeObserver,
+} from '@wordpress/compose';
 import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
 import { listView } from '@wordpress/icons';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
@@ -43,6 +47,8 @@ import { store as editSiteStore } from '../../store';
 import BlockInspectorButton from './block-inspector-button';
 import BackButton from './back-button';
 import ResizableEditor from './resizable-editor';
+import EditorCanvas from './editor-canvas';
+import StyleBook from '../style-book';
 
 const LAYOUT = {
 	type: 'default',
@@ -59,10 +65,16 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		templateId,
 		page,
 		isNavigationSidebarOpen,
+		canvasMode,
 	} = useSelect(
 		( select ) => {
-			const { getSettings, getEditedPostType, getEditedPostId, getPage } =
-				select( editSiteStore );
+			const {
+				getSettings,
+				getEditedPostType,
+				getEditedPostId,
+				getPage,
+				__unstableGetCanvasMode,
+			} = select( editSiteStore );
 
 			return {
 				storedSettings: getSettings( setIsInserterOpen ),
@@ -73,6 +85,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 					select( interfaceStore ).getActiveComplementaryArea(
 						editSiteStore.name
 					) === NAVIGATION_SIDEBAR_NAME,
+				canvasMode: __unstableGetCanvasMode(),
 			};
 		},
 		[ setIsInserterOpen ]
@@ -158,9 +171,15 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const [ resizeObserver, sizes ] = useResizeObserver();
 
 	const isTemplatePart = templateType === 'wp_template_part';
 	const hasBlocks = blocks.length !== 0;
+	const enableResizing =
+		isTemplatePart &&
+		canvasMode !== 'view' &&
+		// Disable resizing in mobile viewport.
+		! isMobileViewport;
 
 	const NavMenuSidebarToggle = () => (
 		<ToolbarGroup>
@@ -211,54 +230,71 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 			<SidebarInspectorFill>
 				<BlockInspector />
 			</SidebarInspectorFill>
-			<BlockTools
-				className={ classnames( 'edit-site-visual-editor', {
-					'is-focus-mode': isTemplatePart,
-				} ) }
-				__unstableContentRef={ contentRef }
-				onClick={ ( event ) => {
-					// Clear selected block when clicking on the gray background.
-					if ( event.target === event.currentTarget ) {
-						clearSelectedBlock();
-					}
-				} }
-			>
-				<BlockEditorKeyboardShortcuts.Register />
-				<BackButton />
-				<ResizableEditor
-					// Reinitialize the editor and reset the states when the template changes.
-					key={ templateId }
-					enableResizing={
-						isTemplatePart &&
-						// Disable resizing in mobile viewport.
-						! isMobileViewport
-					}
-					settings={ settings }
-					contentRef={ mergedRefs }
-				>
-					<BlockList
-						className="edit-site-block-editor__block-list wp-site-blocks"
-						__experimentalLayout={ LAYOUT }
-						renderAppender={
-							isTemplatePart && hasBlocks ? false : undefined
-						}
-					/>
-				</ResizableEditor>
-				<__unstableBlockSettingsMenuFirstItem>
-					{ ( { onClose } ) => (
-						<BlockInspectorButton onClick={ onClose } />
-					) }
-				</__unstableBlockSettingsMenuFirstItem>
-				<__unstableBlockToolbarLastItem>
-					<__unstableBlockNameContext.Consumer>
-						{ ( blockName ) =>
-							blockName === 'core/navigation' && (
-								<MaybeNavMenuSidebarToggle />
-							)
-						}
-					</__unstableBlockNameContext.Consumer>
-				</__unstableBlockToolbarLastItem>
-			</BlockTools>
+			<StyleBook.Slot>
+				{ ( [ styleBook ] ) =>
+					styleBook ? (
+						<div className="edit-site-visual-editor is-focus-mode">
+							<ResizableEditor enableResizing>
+								{ styleBook }
+							</ResizableEditor>
+						</div>
+					) : (
+						<BlockTools
+							className={ classnames( 'edit-site-visual-editor', {
+								'is-focus-mode': isTemplatePart || !! styleBook,
+							} ) }
+							__unstableContentRef={ contentRef }
+							onClick={ ( event ) => {
+								// Clear selected block when clicking on the gray background.
+								if ( event.target === event.currentTarget ) {
+									clearSelectedBlock();
+								}
+							} }
+						>
+							<BlockEditorKeyboardShortcuts.Register />
+							<BackButton />
+							<ResizableEditor
+								// Reinitialize the editor and reset the states when the template changes.
+								key={ templateId }
+								enableResizing={ enableResizing }
+								height={ sizes.height }
+							>
+								<EditorCanvas
+									enableResizing={ enableResizing }
+									settings={ settings }
+									contentRef={ mergedRefs }
+									readonly={ canvasMode === 'view' }
+								>
+									{ resizeObserver }
+									<BlockList
+										className="edit-site-block-editor__block-list wp-site-blocks"
+										__experimentalLayout={ LAYOUT }
+										renderAppender={
+											isTemplatePart && hasBlocks
+												? false
+												: undefined
+										}
+									/>
+								</EditorCanvas>
+							</ResizableEditor>
+							<__unstableBlockSettingsMenuFirstItem>
+								{ ( { onClose } ) => (
+									<BlockInspectorButton onClick={ onClose } />
+								) }
+							</__unstableBlockSettingsMenuFirstItem>
+							<__unstableBlockToolbarLastItem>
+								<__unstableBlockNameContext.Consumer>
+									{ ( blockName ) =>
+										blockName === 'core/navigation' && (
+											<MaybeNavMenuSidebarToggle />
+										)
+									}
+								</__unstableBlockNameContext.Consumer>
+							</__unstableBlockToolbarLastItem>
+						</BlockTools>
+					)
+				}
+			</StyleBook.Slot>
 			<ReusableBlocksMenuItems />
 		</BlockEditorProvider>
 	);