@wordpress/edit-site 6.3.0 → 6.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.3.0",
+	"version": "6.5.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,45 +29,45 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.3.0",
-		"@wordpress/api-fetch": "^7.3.0",
-		"@wordpress/blob": "^4.3.0",
-		"@wordpress/block-editor": "^13.3.0",
-		"@wordpress/block-library": "^9.3.0",
-		"@wordpress/blocks": "^13.3.0",
-		"@wordpress/commands": "^1.3.0",
-		"@wordpress/components": "^28.3.0",
-		"@wordpress/compose": "^7.3.0",
-		"@wordpress/core-commands": "^1.3.0",
-		"@wordpress/core-data": "^7.3.0",
-		"@wordpress/data": "^10.3.0",
-		"@wordpress/dataviews": "^3.0.0",
-		"@wordpress/date": "^5.3.0",
-		"@wordpress/deprecated": "^4.3.0",
-		"@wordpress/dom": "^4.3.0",
-		"@wordpress/editor": "^14.3.0",
-		"@wordpress/element": "^6.3.0",
-		"@wordpress/escape-html": "^3.3.0",
-		"@wordpress/hooks": "^4.3.0",
-		"@wordpress/html-entities": "^4.3.0",
-		"@wordpress/i18n": "^5.3.0",
-		"@wordpress/icons": "^10.3.0",
-		"@wordpress/keyboard-shortcuts": "^5.3.0",
-		"@wordpress/keycodes": "^4.3.0",
-		"@wordpress/notices": "^5.3.0",
-		"@wordpress/patterns": "^2.3.0",
-		"@wordpress/plugins": "^7.3.0",
-		"@wordpress/preferences": "^4.3.0",
-		"@wordpress/primitives": "^4.3.0",
-		"@wordpress/priority-queue": "^3.3.0",
-		"@wordpress/private-apis": "^1.3.0",
-		"@wordpress/reusable-blocks": "^5.3.0",
-		"@wordpress/router": "^1.3.0",
-		"@wordpress/style-engine": "^2.3.0",
-		"@wordpress/url": "^4.3.0",
-		"@wordpress/viewport": "^6.3.0",
-		"@wordpress/widgets": "^4.3.0",
-		"@wordpress/wordcount": "^4.3.0",
+		"@wordpress/a11y": "^4.5.0",
+		"@wordpress/api-fetch": "^7.5.0",
+		"@wordpress/blob": "^4.5.0",
+		"@wordpress/block-editor": "^14.0.0",
+		"@wordpress/block-library": "^9.5.0",
+		"@wordpress/blocks": "^13.5.0",
+		"@wordpress/commands": "^1.5.0",
+		"@wordpress/components": "^28.5.0",
+		"@wordpress/compose": "^7.5.0",
+		"@wordpress/core-commands": "^1.5.0",
+		"@wordpress/core-data": "^7.5.0",
+		"@wordpress/data": "^10.5.0",
+		"@wordpress/dataviews": "^4.1.0",
+		"@wordpress/date": "^5.5.0",
+		"@wordpress/deprecated": "^4.5.0",
+		"@wordpress/dom": "^4.5.0",
+		"@wordpress/editor": "^14.5.0",
+		"@wordpress/element": "^6.5.0",
+		"@wordpress/escape-html": "^3.5.0",
+		"@wordpress/hooks": "^4.5.0",
+		"@wordpress/html-entities": "^4.5.0",
+		"@wordpress/i18n": "^5.5.0",
+		"@wordpress/icons": "^10.5.0",
+		"@wordpress/keyboard-shortcuts": "^5.5.0",
+		"@wordpress/keycodes": "^4.5.0",
+		"@wordpress/notices": "^5.5.0",
+		"@wordpress/patterns": "^2.5.0",
+		"@wordpress/plugins": "^7.5.0",
+		"@wordpress/preferences": "^4.5.0",
+		"@wordpress/primitives": "^4.5.0",
+		"@wordpress/priority-queue": "^3.5.0",
+		"@wordpress/private-apis": "^1.5.0",
+		"@wordpress/reusable-blocks": "^5.5.0",
+		"@wordpress/router": "^1.5.0",
+		"@wordpress/style-engine": "^2.5.0",
+		"@wordpress/url": "^4.5.0",
+		"@wordpress/viewport": "^6.5.0",
+		"@wordpress/widgets": "^4.5.0",
+		"@wordpress/wordcount": "^4.5.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "122867d355ca4edc63d3a3bbd9411d3a2e1458df"
+	"gitHead": "c3101ab024e2bfc85d525c6d247e0d57cafc9fd9"
 }

package/src/components/add-new-pattern/index.js

@@ -56,8 +56,14 @@ export default function AddNewPattern() {
 			addNewTemplatePartLabel: getPostType( TEMPLATE_PART_POST_TYPE )
 				?.labels?.add_new_item,
 			// Blocks refers to the wp_block post type, this checks the ability to create a post of that type.
-			canCreatePattern: canUser( 'create', 'blocks' ),
-			canCreateTemplatePart: canUser( 'create', 'template-parts' ),
+			canCreatePattern: canUser( 'create', {
+				kind: 'postType',
+				name: PATTERN_TYPES.user,
+			} ),
+			canCreateTemplatePart: canUser( 'create', {
+				kind: 'postType',
+				name: TEMPLATE_PART_POST_TYPE,
+			} ),
 		};
 	}, [] );
 
@@ -167,9 +173,14 @@ export default function AddNewPattern() {
 						// When we're not handling template parts, we should
 						// add or create the proper pattern category.
 						if ( postType !== TEMPLATE_PART_POST_TYPE ) {
-							const currentCategory = categoryMap
-								.values()
-								.find( ( term ) => term.name === categoryId );
+							/*
+							 * categoryMap.values() returns an iterator.
+							 * Iterator.prototype.find() is not yet widely supported.
+							 * Convert to array to use the Array.prototype.find method.
+							 */
+							const currentCategory = Array.from(
+								categoryMap.values()
+							).find( ( term ) => term.name === categoryId );
 							if ( currentCategory ) {
 								currentCategoryId =
 									currentCategory.id ||

package/src/components/add-new-post/index.js

@@ -95,9 +95,10 @@ export default function AddNewPostModal( { postType, onSave, onClose } ) {
 			size="small"
 		>
 			<form onSubmit={ createPost }>
-				<VStack spacing={ 3 }>
+				<VStack spacing={ 4 }>
 					<TextControl
 						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						label={ __( 'Title' ) }
 						onChange={ setTitle }
 						placeholder={ __( 'No title' ) }

package/src/components/add-new-template/index.js

@@ -19,6 +19,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { useState, memo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { useViewportMatch } from '@wordpress/compose';
 import {
 	archive,
 	blockMeta,
@@ -161,6 +162,8 @@ function NewTemplateModal( { onClose } ) {
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
 
+	const isMobile = useViewportMatch( 'medium', '<' );
+
 	const { homeUrl } = useSelect( ( select ) => {
 		const {
 			getUnstableBase, // Site index.
@@ -266,7 +269,7 @@ function NewTemplateModal( { onClose } ) {
 		>
 			{ modalContent === modalContentMap.templatesList && (
 				<Grid
-					columns={ 3 }
+					columns={ isMobile ? 2 : 3 }
 					gap={ 4 }
 					align="flex-start"
 					justify="center"

package/src/components/add-new-template/style.scss

@@ -97,13 +97,12 @@
 }
 
 .edit-site-add-new-template__modal {
-	max-width: $grid-unit-80 * 13;
-	width: calc(100% - #{$grid-unit-80});
-	margin-top: $grid-unit-80;
-	max-height: calc(100% - #{$grid-unit-80 * 2});
 
 	@include break-large() {
+		max-width: $grid-unit-80 * 13;
+		margin-top: $grid-unit-80;
 		width: calc(100% - #{$grid-unit-80 * 2});
+		max-height: calc(100% - #{$grid-unit-80 * 2});
 	}
 
 	.edit-site-add-new-template__template-button,
@@ -175,8 +174,7 @@
 
 	.edit-site-add-new-template__custom-template-button,
 	.edit-site-add-new-template__template-list__prompt {
-		grid-column-start: 1;
-		grid-column-end: 4;
+		grid-column: 1 / -1;
 	}
 }
 

package/src/components/add-new-template/utils.js

@@ -166,9 +166,11 @@ export function usePostTypeArchiveMenuItems() {
 						// `icon` is the `menu_icon` property of a post type. We
 						// only handle `dashicons` for now, even if the `menu_icon`
 						// also supports urls and svg as values.
-						icon: postType.icon?.startsWith( 'dashicons-' )
-							? postType.icon.slice( 10 )
-							: archive,
+						icon:
+							typeof postType.icon === 'string' &&
+							postType.icon.startsWith( 'dashicons-' )
+								? postType.icon.slice( 10 )
+								: archive,
 						templatePrefix: 'archive',
 					};
 				} ) || [],
@@ -272,9 +274,11 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 						// `icon` is the `menu_icon` property of a post type. We
 						// only handle `dashicons` for now, even if the `menu_icon`
 						// also supports urls and svg as values.
-						icon: icon?.startsWith( 'dashicons-' )
-							? icon.slice( 10 )
-							: post,
+						icon:
+							typeof icon === 'string' &&
+							icon.startsWith( 'dashicons-' )
+								? icon.slice( 10 )
+								: post,
 						templatePrefix: templatePrefixes[ slug ],
 				  };
 			const hasEntities = postTypesInfo?.[ slug ]?.hasEntities;

package/src/components/block-editor/use-site-editor-settings.js

@@ -3,7 +3,6 @@
  */
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { usePrevious } from '@wordpress/compose';
@@ -19,78 +18,6 @@ import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 const { useBlockEditorSettings } = unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
-function useArchiveLabel( templateSlug ) {
-	const taxonomyMatches = templateSlug?.match(
-		/^(category|tag|taxonomy-([^-]+))$|^(((category|tag)|taxonomy-([^-]+))-(.+))$/
-	);
-	let taxonomy;
-	let term;
-	let isAuthor = false;
-	let authorSlug;
-	if ( taxonomyMatches ) {
-		// If is for a all taxonomies of a type
-		if ( taxonomyMatches[ 1 ] ) {
-			taxonomy = taxonomyMatches[ 2 ]
-				? taxonomyMatches[ 2 ]
-				: taxonomyMatches[ 1 ];
-		}
-		// If is for a all taxonomies of a type
-		else if ( taxonomyMatches[ 3 ] ) {
-			taxonomy = taxonomyMatches[ 6 ]
-				? taxonomyMatches[ 6 ]
-				: taxonomyMatches[ 4 ];
-			term = taxonomyMatches[ 7 ];
-		}
-		taxonomy = taxonomy === 'tag' ? 'post_tag' : taxonomy;
-
-		//getTaxonomy( 'category' );
-		//wp.data.select('core').getEntityRecords( 'taxonomy', 'category', {slug: 'newcat'} );
-	} else {
-		const authorMatches = templateSlug?.match( /^(author)$|^author-(.+)$/ );
-		if ( authorMatches ) {
-			isAuthor = true;
-			if ( authorMatches[ 2 ] ) {
-				authorSlug = authorMatches[ 2 ];
-			}
-		}
-	}
-	return useSelect(
-		( select ) => {
-			const { getEntityRecords, getTaxonomy, getAuthors } =
-				select( coreStore );
-			let archiveTypeLabel;
-			let archiveNameLabel;
-			if ( taxonomy ) {
-				archiveTypeLabel =
-					getTaxonomy( taxonomy )?.labels?.singular_name;
-			}
-			if ( term ) {
-				const records = getEntityRecords( 'taxonomy', taxonomy, {
-					slug: term,
-					per_page: 1,
-				} );
-				if ( records && records[ 0 ] ) {
-					archiveNameLabel = records[ 0 ].name;
-				}
-			}
-			if ( isAuthor ) {
-				archiveTypeLabel = 'Author';
-				if ( authorSlug ) {
-					const authorRecords = getAuthors( { slug: authorSlug } );
-					if ( authorRecords && authorRecords[ 0 ] ) {
-						archiveNameLabel = authorRecords[ 0 ].name;
-					}
-				}
-			}
-			return {
-				archiveTypeLabel,
-				archiveNameLabel,
-			};
-		},
-		[ authorSlug, isAuthor, taxonomy, term ]
-	);
-}
-
 function useNavigateToPreviousEntityRecord() {
 	const location = useLocation();
 	const previousLocation = usePrevious( location );
@@ -114,39 +41,21 @@ function useNavigateToPreviousEntityRecord() {
 
 export function useSpecificEditorSettings() {
 	const onNavigateToEntityRecord = useNavigateToEntityRecord();
-	const {
-		templateSlug,
-		canvasMode,
-		settings,
-		shouldUseTemplateAsDefaultRenderingMode,
-	} = useSelect( ( select ) => {
-		const {
-			getEditedPostType,
-			getEditedPostId,
-			getEditedPostContext,
-			getCanvasMode,
-			getSettings,
-		} = unlock( select( editSiteStore ) );
-		const { getEditedEntityRecord } = select( coreStore );
-		const usedPostType = getEditedPostType();
-		const usedPostId = getEditedPostId();
-		const _record = getEditedEntityRecord(
-			'postType',
-			usedPostType,
-			usedPostId
-		);
-		const _context = getEditedPostContext();
-		return {
-			templateSlug: _record.slug,
-			canvasMode: getCanvasMode(),
-			settings: getSettings(),
-			// TODO: The `postType` check should be removed when the default rendering mode per post type is merged.
-			// @see https://github.com/WordPress/gutenberg/pull/62304/
-			shouldUseTemplateAsDefaultRenderingMode:
-				_context?.postId && _context?.postType !== 'post',
-		};
-	}, [] );
-	const archiveLabels = useArchiveLabel( templateSlug );
+	const { canvasMode, settings, shouldUseTemplateAsDefaultRenderingMode } =
+		useSelect( ( select ) => {
+			const { getEditedPostContext, getCanvasMode, getSettings } = unlock(
+				select( editSiteStore )
+			);
+			const _context = getEditedPostContext();
+			return {
+				canvasMode: getCanvasMode(),
+				settings: getSettings(),
+				// TODO: The `postType` check should be removed when the default rendering mode per post type is merged.
+				// @see https://github.com/WordPress/gutenberg/pull/62304/
+				shouldUseTemplateAsDefaultRenderingMode:
+					_context?.postId && _context?.postType !== 'post',
+			};
+		}, [] );
 	const defaultRenderingMode = shouldUseTemplateAsDefaultRenderingMode
 		? 'template-locked'
 		: 'post-only';
@@ -162,9 +71,6 @@ export function useSpecificEditorSettings() {
 			defaultRenderingMode,
 			onNavigateToEntityRecord,
 			onNavigateToPreviousEntityRecord,
-			// I wonder if they should be set in the post editor too
-			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
-			__experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel,
 			__unstableIsPreviewMode: canvasMode === 'view',
 		};
 	}, [
@@ -173,8 +79,6 @@ export function useSpecificEditorSettings() {
 		defaultRenderingMode,
 		onNavigateToEntityRecord,
 		onNavigateToPreviousEntityRecord,
-		archiveLabels.archiveTypeLabel,
-		archiveLabels.archiveNameLabel,
 	] );
 
 	return defaultEditorSettings;

package/src/components/editor/index.js

@@ -7,8 +7,8 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Button } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { Button, __unstableMotion as motion } from '@wordpress/components';
+import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import {
 	EditorKeyboardShortcutsRegister,
 	privateApis as editorPrivateApis,
@@ -22,6 +22,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { decodeEntities } from '@wordpress/html-entities';
+import { Icon, homeButton } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -51,7 +52,32 @@ const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
+const toggleHomeIconVariants = {
+	edit: {
+		opacity: 0,
+		scale: 0.2,
+	},
+	hover: {
+		opacity: 1,
+		scale: 1,
+		clipPath: 'inset( 22% round 2px )',
+	},
+};
+
+const siteIconVariants = {
+	edit: {
+		clipPath: 'inset(0% round 0)',
+	},
+	hover: {
+		clipPath: 'inset( 22% round 2px )',
+	},
+	tap: {
+		clipPath: 'inset(0% round 0)',
+	},
+};
+
 export default function EditSiteEditor( { isPostsList = false } ) {
+	const disableMotion = useReducedMotion();
 	const { params } = useLocation();
 	const isLoading = useIsSiteEditorLoading();
 	const {
@@ -65,6 +91,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		showIconLabels,
 		editorCanvasView,
 		currentPostIsTrashed,
+		hasSiteIcon,
 	} = useSelect( ( select ) => {
 		const {
 			getEditorCanvasContainerView,
@@ -75,8 +102,9 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 			getEditedPostId,
 		} = unlock( select( editSiteStore ) );
 		const { get } = select( preferencesStore );
-		const { getCurrentTheme } = select( coreDataStore );
+		const { getCurrentTheme, getEntityRecord } = select( coreDataStore );
 		const _context = getEditedPostContext();
+		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
 
 		// The currently selected entity to display.
 		// Typically template or template part in the site editor.
@@ -93,6 +121,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 			currentPostIsTrashed:
 				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
 				'trash',
+			hasSiteIcon: !! siteData?.site_icon_url,
 		};
 	}, [] );
 	useEditorTitle();
@@ -179,6 +208,9 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		getEditorCanvasContainerTitleAndIcon( editorCanvasView );
 
 	const isReady = ! isLoading;
+	const transition = {
+		duration: disableMotion ? 0 : 0.2,
+	};
 
 	return (
 		<>
@@ -217,26 +249,52 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 						<BackButton>
 							{ ( { length } ) =>
 								length <= 1 && (
-									<Button
-										label={ __( 'Open Navigation' ) }
-										className="edit-site-layout__view-mode-toggle"
-										onClick={ () => {
-											setCanvasMode( 'view' );
-											// TODO: this is a temporary solution to navigate to the posts list if we are
-											// come here through `posts list` and are in focus mode editing a template, template part etc..
-											if (
-												isPostsList &&
-												params?.focusMode
-											) {
-												history.push( {
-													page: 'gutenberg-posts-dashboard',
-													postType: 'post',
-												} );
-											}
-										} }
+									<motion.div
+										className="edit-site-editor__view-mode-toggle"
+										transition={ transition }
+										animate="edit"
+										initial="edit"
+										whileHover="hover"
+										whileTap="tap"
 									>
-										<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-									</Button>
+										<Button
+											label={ __( 'Open Navigation' ) }
+											showTooltip
+											tooltipPosition="middle right"
+											onClick={ () => {
+												setCanvasMode( 'view' );
+												// TODO: this is a temporary solution to navigate to the posts list if we are
+												// come here through `posts list` and are in focus mode editing a template, template part etc..
+												if (
+													isPostsList &&
+													params?.focusMode
+												) {
+													history.push( {
+														page: 'gutenberg-posts-dashboard',
+														postType: 'post',
+													} );
+												}
+											} }
+										>
+											<motion.div
+												variants={ siteIconVariants }
+											>
+												<SiteIcon className="edit-site-editor__view-mode-toggle-icon" />
+											</motion.div>
+										</Button>
+										<motion.div
+											className={ clsx(
+												'edit-site-editor__back-icon',
+												{
+													'has-site-icon':
+														hasSiteIcon,
+												}
+											) }
+											variants={ toggleHomeIconVariants }
+										>
+											<Icon icon={ homeButton } />
+										</motion.div>
+									</motion.div>
 								)
 							}
 						</BackButton>

package/src/components/editor/style.scss

@@ -1,7 +1,7 @@
 .edit-site-editor__editor-interface {
 	opacity: 1;
 	transition: opacity 0.1s ease-out;
-	@include reduce-motion("transition");
+	@include reduce-motion( "transition" );
 
 	&.is-loading {
 		opacity: 0;
@@ -17,3 +17,61 @@
 	display: flex;
 	justify-content: center;
 }
+
+.edit-site-editor__view-mode-toggle {
+	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+	view-transition-name: toggle;
+	/* stylelint-enable */
+	top: 0;
+	left: 0;
+	height: $header-height;
+	width: $header-height;
+	z-index: 100;
+
+	.components-button {
+		color: $white;
+		height: 100%;
+		width: 100%;
+		border-radius: 0;
+		overflow: hidden;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		&:hover,
+		&:active {
+			color: $white;
+		}
+
+		&:focus {
+			box-shadow: none;
+		}
+	}
+
+	.edit-site-editor__view-mode-toggle-icon {
+		svg,
+		img {
+			background: $gray-900;
+			display: block;
+		}
+	}
+}
+
+.edit-site-editor__back-icon {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 60px;
+	height: 60px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: hsla(0, 0%, 80%);
+	pointer-events: none;
+
+	&.has-site-icon {
+		background-color: hsla(0, 0%, 100%, 0.6);
+		-webkit-backdrop-filter: saturate(180%) blur(15px);
+		backdrop-filter: saturate(180%) blur(15px);
+	}
+}

package/src/components/global-styles/block-preview-panel.js

@@ -32,8 +32,15 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 		return getBlockFromExample( name, example );
 	}, [ name, blockExample, variation ] );
 
-	const viewportWidth = blockExample?.viewportWidth ?? null;
-	const previewHeight = 150;
+	const viewportWidth = blockExample?.viewportWidth ?? 500;
+	// Same as height of InserterPreviewPanel.
+	const previewHeight = 144;
+	const sidebarWidth = 235;
+	const scale = sidebarWidth / viewportWidth;
+	const minHeight =
+		scale !== 0 && scale < 1 && previewHeight
+			? previewHeight / scale
+			: previewHeight;
 
 	if ( ! blockExample ) {
 		return null;
@@ -49,16 +56,22 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 					blocks={ blocks }
 					viewportWidth={ viewportWidth }
 					minHeight={ previewHeight }
-					additionalStyles={ [
-						{
-							css: `
+					additionalStyles={
+						//We want this CSS to be in sync with the one in InserterPreviewPanel.
+						[
+							{
+								css: `
 								body{
-									min-height:${ previewHeight }px;
-									display:flex;align-items:center;justify-content:center;
+									padding: 24px;
+									min-height:${ Math.round( minHeight ) }px;
+									display:flex;
+									align-items:center;
 								}
+								.is-root-container { width: 100%; }
 							`,
-						},
-					] }
+							},
+						]
+					}
 				/>
 			</div>
 		</Spacer>