@wordpress/edit-site 5.3.7 → 5.3.9

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

@@ -7,7 +7,8 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
-	NavigableMenu,
+	Tooltip,
+	VisuallyHidden,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
@@ -179,6 +180,11 @@ export default function NewTemplate( {
 	if ( ! missingTemplates.length ) {
 		return null;
 	}
+
+	const customTemplateDescription = __(
+		'A custom template can be manually applied to any post or page.'
+	);
+
 	return (
 		<>
 			<DropdownMenu
@@ -196,7 +202,7 @@ export default function NewTemplate( {
 						{ isCreatingTemplate && (
 							<TemplateActionsLoadingScreen />
 						) }
-						<NavigableMenu className="edit-site-new-template-dropdown__popover">
+						<div className="edit-site-new-template-dropdown__menu-groups">
 							<MenuGroup label={ postType.labels.add_new_item }>
 								{ missingTemplates.map( ( template ) => {
 									const {
@@ -207,44 +213,63 @@ export default function NewTemplate( {
 										icon,
 									} = template;
 									return (
-										<MenuItem
-											icon={
-												icon ||
-												TEMPLATE_ICONS[ slug ] ||
-												post
-											}
-											iconPosition="left"
-											info={ description }
+										<Tooltip
 											key={ slug }
-											onClick={ () =>
-												onClick
-													? onClick( template )
-													: createTemplate( template )
-											}
+											position="top right"
+											text={ description }
+											className="edit-site-new-template-dropdown__menu-item-tooltip"
 										>
-											{ title }
-										</MenuItem>
+											<MenuItem
+												icon={
+													icon ||
+													TEMPLATE_ICONS[ slug ] ||
+													post
+												}
+												iconPosition="left"
+												onClick={ () =>
+													onClick
+														? onClick( template )
+														: createTemplate(
+																template
+														  )
+												}
+											>
+												{ title }
+												{ /* TODO: This probably won't be needed if the <Tooltip> component is accessible.
+												 * @see https://github.com/WordPress/gutenberg/issues/48222 */ }
+												<VisuallyHidden>
+													{ description }
+												</VisuallyHidden>
+											</MenuItem>
+										</Tooltip>
 									);
 								} ) }
 							</MenuGroup>
 							<MenuGroup>
-								<MenuItem
-									icon={ customGenericTemplateIcon }
-									iconPosition="left"
-									info={ __(
-										'Custom templates can be applied to any post or page.'
-									) }
-									key="custom-template"
-									onClick={ () =>
-										setShowCustomGenericTemplateModal(
-											true
-										)
-									}
+								<Tooltip
+									position="top right"
+									text={ customTemplateDescription }
+									className="edit-site-new-template-dropdown__menu-item-tooltip"
 								>
-									{ __( 'Custom template' ) }
-								</MenuItem>
+									<MenuItem
+										icon={ customGenericTemplateIcon }
+										iconPosition="left"
+										onClick={ () =>
+											setShowCustomGenericTemplateModal(
+												true
+											)
+										}
+									>
+										{ __( 'Custom template' ) }
+										{ /* TODO: This probably won't be needed if the <Tooltip> component is accessible.
+										 * @see https://github.com/WordPress/gutenberg/issues/48222 */ }
+										<VisuallyHidden>
+											{ customTemplateDescription }
+										</VisuallyHidden>
+									</MenuItem>
+								</Tooltip>
 							</MenuGroup>
-						</NavigableMenu>
+						</div>
 					</>
 				) }
 			</DropdownMenu>

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

@@ -1,9 +1,20 @@
 .edit-site-new-template-dropdown {
-	.edit-site-new-template-dropdown__popover {
+	.edit-site-new-template-dropdown__menu-groups {
 		@include break-small() {
 			min-width: 300px;
 		}
 	}
+
+	// The specificity is needed to override the default tooltip styles.
+	&__menu-item-tooltip.components-tooltip .components-popover__content {
+		max-width: 320px;
+		padding: $grid-unit-10 $grid-unit-15;
+		border-radius: 2px;
+		white-space: pre-wrap;
+		min-width: 0;
+		width: auto;
+		text-align: left;
+	}
 }
 
 .edit-site-custom-template-modal {

package/src/components/sidebar-navigation-item/style.scss

@@ -1,13 +1,12 @@
 .edit-site-sidebar-navigation-item.components-item {
 	color: $gray-600;
-	border-width: $border-width-tab;
+	margin: 0 $grid-unit-05;
 
 	&:hover,
 	&:focus,
 	&[aria-current] {
 		color: $white;
 		background: $gray-800;
-		border-width: $border-width-tab;
 	}
 
 	&[aria-current] {
@@ -17,6 +16,5 @@
 
 .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
 	cursor: grab;
-	width: calc(100% - #{ $border-width-focus });
 	padding: $grid-unit-10;
 }

package/src/components/sidebar-navigation-screen-main/index.js

@@ -27,6 +27,9 @@ export default function SidebarNavigationScreenMain() {
 		};
 	} );
 
+	const showNavigationScreen = process.env.IS_GUTENBERG_PLUGIN
+		? navigationMenus?.length > 0
+		: false;
 	return (
 		<SidebarNavigationScreen
 			isRoot
@@ -36,7 +39,7 @@ export default function SidebarNavigationScreenMain() {
 			) }
 			content={
 				<ItemGroup>
-					{ !! navigationMenus && navigationMenus.length > 0 && (
+					{ showNavigationScreen && (
 						<NavigatorButton
 							as={ SidebarNavigationItem }
 							path="/navigation"

package/src/components/sidebar-navigation-screen-navigation-menus/index.js

@@ -5,10 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import {
-	BlockEditorProvider,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { BlockEditorProvider } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 
 /**
@@ -17,7 +14,6 @@ import { createBlock } from '@wordpress/blocks';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { useHistory } from '../routes';
 import NavigationMenuContent from './navigation-menu-content';
-import SidebarButton from '../sidebar-button';
 import { NavigationMenuLoader } from './loader';
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
@@ -38,11 +34,6 @@ function SidebarNavigationScreenWrapper( { children, actions } ) {
 	);
 }
 
-const prioritizedInserterBlocks = [
-	'core/navigation-link/page',
-	'core/navigation-link',
-];
-
 export default function SidebarNavigationScreenNavigationMenus() {
 	const history = useHistory();
 	const { navigationMenus, hasResolvedNavigationMenus, storedSettings } =
@@ -109,18 +100,6 @@ export default function SidebarNavigationScreenNavigationMenus() {
 		},
 		[ history ]
 	);
-	const orderInitialBlockItems = useCallback( ( items ) => {
-		items.sort( ( { id: aName }, { id: bName } ) => {
-			// Sort block items according to `prioritizedInserterBlocks`.
-			let aIndex = prioritizedInserterBlocks.indexOf( aName );
-			let bIndex = prioritizedInserterBlocks.indexOf( bName );
-			// All other block items should come after that.
-			if ( aIndex < 0 ) aIndex = prioritizedInserterBlocks.length;
-			if ( bIndex < 0 ) bIndex = prioritizedInserterBlocks.length;
-			return aIndex - bIndex;
-		} );
-		return items;
-	}, [] );
 
 	if ( hasResolvedNavigationMenus && ! hasNavigationMenus ) {
 		return (
@@ -137,7 +116,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 			</SidebarNavigationScreenWrapper>
 		);
 	}
-	const { PrivateInserter } = unlock( blockEditorPrivateApis );
+
 	return (
 		<BlockEditorProvider
 			settings={ storedSettings }
@@ -145,23 +124,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 			onChange={ noop }
 			onInput={ noop }
 		>
-			<SidebarNavigationScreenWrapper
-				actions={
-					<PrivateInserter
-						rootClientId={ blocks[ 0 ].clientId }
-						position="bottom right"
-						isAppender
-						selectBlockOnInsert={ false }
-						shouldDirectInsert={ false }
-						__experimentalIsQuick
-						toggleProps={ {
-							as: SidebarButton,
-							label: __( 'Add menu item' ),
-						} }
-						orderInitialBlockItems={ orderInitialBlockItems }
-					/>
-				}
-			>
+			<SidebarNavigationScreenWrapper>
 				<div className="edit-site-sidebar-navigation-screen-navigation-menus__content">
 					<NavigationMenuContent
 						rootClientId={ blocks[ 0 ].clientId }

package/src/components/sidebar-navigation-screen-navigation-menus/style.scss

@@ -61,3 +61,7 @@
 		}
 	}
 }
+
+.edit-site-sidebar-navigation-screen-navigation-menus__content .popover-slot .wp-block-navigation-submenu {
+	display: none;
+}

package/src/components/sidebar-navigation-screen-templates-browse/index.js

@@ -19,7 +19,7 @@ const config = {
 	wp_template_part: {
 		title: __( 'All template parts' ),
 		description: __(
-			'Create new template parts, or reset any customisations made to the template parts supplied by your theme.'
+			'Create new template parts, or reset any customizations made to the template parts supplied by your theme.'
 		),
 	},
 };

package/src/components/site-hub/index.js

@@ -95,7 +95,11 @@ const SiteHub = forwardRef( ( props, ref ) => {
 					</Button>
 				</motion.div>
 
-				{ showLabels && <div>{ siteTitle }</div> }
+				{ showLabels && (
+					<div className="edit-site-site-hub__site-title">
+						{ siteTitle }
+					</div>
+				) }
 			</HStack>
 		</motion.div>
 	);

package/src/components/site-hub/style.scss

@@ -11,7 +11,7 @@
 
 .edit-site-site-hub__view-mode-toggle-container {
 	height: $header-height;
-	width: $header-height + 4px;
+	width: $header-height;
 	flex-shrink: 0;
 	background: $gray-900;
 }
@@ -26,3 +26,7 @@
 	white-space: nowrap;
 	overflow: hidden;
 }
+
+.edit-site-site-hub__site-title {
+	margin-left: $grid-unit-05;
+}

package/src/components/style-book/index.js

@@ -8,6 +8,10 @@ import classnames from 'classnames';
  */
 import {
 	Button,
+	__unstableComposite as Composite,
+	__unstableUseCompositeState as useCompositeState,
+	__unstableCompositeItem as CompositeItem,
+	Disabled,
 	TabPanel,
 	createSlotFill,
 	__experimentalUseSlotFills as useSlotFills,
@@ -20,9 +24,13 @@ import {
 	createBlock,
 } from '@wordpress/blocks';
 import {
-	BlockPreview,
+	BlockList,
 	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+	__unstableEditorStyles as EditorStyles,
+	__unstableIframe as Iframe,
 } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 import { closeSmall } from '@wordpress/icons';
 import {
 	useResizeObserver,
@@ -38,12 +46,84 @@ import { ESCAPE } from '@wordpress/keycodes';
  */
 import { unlock } from '../../private-apis';
 
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
+	blockEditorPrivateApis
+);
 
 const SLOT_FILL_NAME = 'EditSiteStyleBook';
 const { Slot: StyleBookSlot, Fill: StyleBookFill } =
 	createSlotFill( SLOT_FILL_NAME );
 
+// The content area of the Style Book is rendered within an iframe so that global styles
+// are applied to elements within the entire content area. To support elements that are
+// not part of the block previews, such as headings and layout for the block previews,
+// additional CSS rules need to be passed into the iframe. These are hard-coded below.
+// Note that button styles are unset, and then focus rules from the `Button` component are
+// applied to the `button` element, targeted via `.edit-site-style-book__example`.
+// This is to ensure that browser default styles for buttons are not applied to the previews.
+const STYLE_BOOK_IFRAME_STYLES = `
+	.edit-site-style-book__examples {
+		max-width: 900px;
+		margin: 0 auto;
+	}
+
+	.edit-site-style-book__example {
+		border-radius: 2px;
+		cursor: pointer;
+		display: flex;
+		flex-direction: column;
+		gap: 40px;
+		margin-bottom: 40px;
+		padding: 16px;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	.edit-site-style-book__example.is-selected {
+		box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+	}
+
+	.edit-site-style-book__example:focus:not(:disabled) {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		outline: 3px solid transparent;
+	}
+
+	.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
+		flex-direction: row;
+	}
+
+	.edit-site-style-book__example-title {
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+		font-size: 11px;
+		font-weight: 500;
+		line-height: normal;
+		margin: 0;
+		text-align: left;
+		text-transform: uppercase;
+	}
+
+	.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {
+		text-align: right;
+		width: 120px;
+	}
+
+	.edit-site-style-book__example-preview {
+		width: 100%;
+	}
+
+	.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,
+	.edit-site-style-book__example-preview .block-list-appender {
+		display: none;
+	}
+
+	.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {
+		margin-top: 0;
+	}
+	.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {
+		margin-bottom: 0;
+	}
+`;
+
 function getExamples() {
 	// Use our own example for the Heading block so that we can show multiple
 	// heading levels.
@@ -118,6 +198,15 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 		[ examples ]
 	);
 
+	const originalSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+	const settings = useMemo(
+		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		[ originalSettings ]
+	);
+
 	function closeOnEscape( event ) {
 		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
 			event.preventDefault();
@@ -156,12 +245,47 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 					tabs={ tabs }
 				>
 					{ ( tab ) => (
-						<Examples
-							examples={ examples }
-							category={ tab.name }
-							isSelected={ isSelected }
-							onSelect={ onSelect }
-						/>
+						<Iframe
+							className="edit-site-style-book__iframe"
+							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; padding: 32px !important; }` +
+												STYLE_BOOK_IFRAME_STYLES
+										}
+									</style>
+								</>
+							}
+							name="style-book-canvas"
+							tabIndex={ 0 }
+						>
+							{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
+							{ settings.svgFilters }
+							<Examples
+								className={ classnames(
+									'edit-site-style-book__examples',
+									{
+										'is-wide': sizes.width > 600,
+									}
+								) }
+								examples={ examples }
+								category={ tab.name }
+								label={ sprintf(
+									// translators: %s: Category of blocks, e.g. Text.
+									__(
+										'Examples of blocks in the %s category'
+									),
+									tab.title
+								) }
+								isSelected={ isSelected }
+								onSelect={ onSelect }
+							/>
+						</Iframe>
 					) }
 				</TabPanel>
 			</section>
@@ -169,52 +293,83 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 	);
 }
 
-const Examples = memo( ( { examples, category, isSelected, onSelect } ) => (
-	<div className="edit-site-style-book__examples">
-		{ examples
-			.filter( ( example ) => example.category === category )
-			.map( ( example ) => (
-				<Example
-					key={ example.name }
-					title={ example.title }
-					blocks={ example.blocks }
-					isSelected={ isSelected( example.name ) }
-					onClick={ () => {
-						onSelect( example.name );
-					} }
-				/>
-			) ) }
-	</div>
-) );
-
-const Example = memo( ( { title, blocks, isSelected, onClick } ) => (
-	<button
-		className={ classnames( 'edit-site-style-book__example', {
-			'is-selected': isSelected,
-		} ) }
-		aria-label={ sprintf(
-			// translators: %s: Title of a block, e.g. Heading.
-			__( 'Open %s styles in Styles panel' ),
-			title
-		) }
-		onClick={ onClick }
-	>
-		<span className="edit-site-style-book__example-title">{ title }</span>
-		<div className="edit-site-style-book__example-preview">
-			<BlockPreview
-				blocks={ blocks }
-				viewportWidth={ 0 }
-				additionalStyles={ [
-					{
-						css:
-							'.wp-block:first-child { margin-top: 0; }' +
-							'.wp-block:last-child { margin-bottom: 0; }',
-					},
-				] }
-			/>
-		</div>
-	</button>
-) );
+const Examples = memo(
+	( { className, examples, category, label, isSelected, onSelect } ) => {
+		const composite = useCompositeState( { orientation: 'vertical' } );
+		return (
+			<Composite
+				{ ...composite }
+				className={ className }
+				aria-label={ label }
+			>
+				{ examples
+					.filter( ( example ) => example.category === category )
+					.map( ( example ) => (
+						<Example
+							key={ example.name }
+							id={ `example-${ example.name }` }
+							composite={ composite }
+							title={ example.title }
+							blocks={ example.blocks }
+							isSelected={ isSelected( example.name ) }
+							onClick={ () => {
+								onSelect( example.name );
+							} }
+						/>
+					) ) }
+			</Composite>
+		);
+	}
+);
+
+const Example = ( { composite, id, title, blocks, isSelected, onClick } ) => {
+	const originalSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+	const settings = useMemo(
+		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		[ originalSettings ]
+	);
+
+	// Cache the list of blocks to avoid additional processing when the component is re-rendered.
+	const renderedBlocks = useMemo(
+		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+		[ blocks ]
+	);
+
+	return (
+		<CompositeItem
+			{ ...composite }
+			className={ classnames( 'edit-site-style-book__example', {
+				'is-selected': isSelected,
+			} ) }
+			id={ id }
+			aria-label={ sprintf(
+				// translators: %s: Title of a block, e.g. Heading.
+				__( 'Open %s styles in Styles panel' ),
+				title
+			) }
+			onClick={ onClick }
+			role="button"
+			as="div"
+		>
+			<span className="edit-site-style-book__example-title">
+				{ title }
+			</span>
+			<div className="edit-site-style-book__example-preview" aria-hidden>
+				<Disabled className="edit-site-style-book__example-preview__content">
+					<ExperimentalBlockEditorProvider
+						value={ renderedBlocks }
+						settings={ settings }
+					>
+						<BlockList renderAppender={ false } />
+					</ExperimentalBlockEditorProvider>
+				</Disabled>
+			</div>
+		</CompositeItem>
+	);
+};
 
 function useHasStyleBook() {
 	const fills = useSlotFills( SLOT_FILL_NAME );

package/src/components/style-book/style.scss

@@ -26,53 +26,9 @@
 		bottom: 0;
 		left: 0;
 		overflow: auto;
-		padding: $grid-unit-40;
+		padding: 0;
 		position: absolute;
 		right: 0;
 		top: $grid-unit-60; // Height of tabs.
 	}
 }
-
-.edit-site-style-book__examples {
-	max-width: 900px;
-	margin: 0 auto;
-}
-
-.edit-site-style-book__example {
-	background: none;
-	border-radius: $radius-block-ui;
-	border: none;
-	color: inherit;
-	cursor: pointer;
-	display: flex;
-	flex-direction: column;
-	gap: $grid-unit-50;
-	margin-bottom: $grid-unit-50;
-	padding: $grid-unit-20;
-	width: 100%;
-
-	&.is-selected {
-		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-	}
-
-	.edit-site-style-book.is-wide & {
-		flex-direction: row;
-	}
-}
-
-.edit-site-style-book__example-title {
-	font-size: 11px;
-	font-weight: 500;
-	margin: 0;
-	text-align: left;
-	text-transform: uppercase;
-
-	.edit-site-style-book.is-wide & {
-		text-align: right;
-		width: 120px;
-	}
-}
-
-.edit-site-style-book__example-preview {
-	width: 100%;
-}