Global Styles: Add Style Book to Global Styles

packages/block-editor/src/components/block-preview/README.md

@@ -28,9 +28,28 @@ 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`
 -   **Default** `undefined`
 
 Padding for the preview container body.
+
+### `__experimentalStyles`
+
+List of additional editor styles to load into the preview iframe. Each object
+should contain a `css` attribute. See `EditorStyles` for more info.
+
+```jsx
+<BlockPreview
+    blocks={ blocks }
+	__experimentalStyles={ [
+		{ css: '.wp-block { margin: 16px; }' },
+	] }
+/>
+```
+
+-   **Type** `Int`
+-   **Default** `[]`

packages/block-editor/src/components/block-preview/auto.js

@@ -25,7 +25,12 @@ function ScaledBlockPreview( {
 	containerWidth,
 	__experimentalPadding,
 	__experimentalMinHeight,
+	__experimentalStyles,
 } ) {
+	if ( ! viewportWidth ) {
+		viewportWidth = containerWidth;
+	}
+
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
 	const { styles, assets, duotone } = useSelect( ( select ) => {
@@ -42,6 +47,7 @@ function ScaledBlockPreview( {
 		if ( styles ) {
 			return [
 				...styles,
+				...__experimentalStyles,
 				{
 					css: 'body{height:auto;overflow:hidden;}',
 					__unstableType: 'presets',
@@ -50,7 +56,7 @@ function ScaledBlockPreview( {
 		}
 
 		return styles;
-	}, [ styles ] );
+	}, [ styles, __experimentalStyles ] );
 
 	const svgFilters = useMemo( () => {
 		return [ ...( duotone?.default ?? [] ), ...( duotone?.theme ?? [] ) ];

packages/block-editor/src/components/block-preview/index.js

@@ -23,6 +23,7 @@ export function BlockPreview( {
 	__experimentalPadding = 0,
 	viewportWidth = 1200,
 	__experimentalMinHeight,
+	__experimentalStyles = [],
 } ) {
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
@@ -45,6 +46,7 @@ export function BlockPreview( {
 				viewportWidth={ viewportWidth }
 				__experimentalPadding={ __experimentalPadding }
 				__experimentalMinHeight={ __experimentalMinHeight }
+				__experimentalStyles={ __experimentalStyles }
 			/>
 		</BlockEditorProvider>
 	);

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;

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,72 @@ 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>
+			{ /* Potentially this could be a generic slot (e.g. EditorCanvas.Slot) if there are other uses for it. */ }
+			<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>
 	);