@wordpress/edit-site 6.13.1-next.cd6172eb0.0 → 6.15.0

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

@@ -18,11 +18,6 @@
 .edit-site-sidebar-navigation-screen__content {
 	padding: 0 $grid-unit-20;
 
-	.components-item-group {
-		margin-left: -$grid-unit-20;
-		margin-right: -$grid-unit-20;
-	}
-
 	.components-text {
 		color: $gray-400;
 	}

package/src/components/sidebar-navigation-screen-global-styles/content.js

@@ -2,54 +2,26 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 import { __experimentalVStack as VStack } from '@wordpress/components';
-import { BlockEditorProvider } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import StyleVariationsContainer from '../global-styles/style-variations-container';
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
 import ColorVariations from '../global-styles/variations/variations-color';
 import TypographyVariations from '../global-styles/variations/variations-typography';
 
-const noop = () => {};
-
 export default function SidebarNavigationScreenGlobalStylesContent() {
-	const { storedSettings } = useSelect( ( select ) => {
-		const { getSettings } = unlock( select( editSiteStore ) );
-
-		return {
-			storedSettings: getSettings(),
-		};
-	}, [] );
-
 	const gap = 3;
 
-	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
-	// loaded. This is necessary because the Iframe component waits until
-	// the block editor store's `__internalIsInitialized` is true before
-	// rendering the iframe. Without this, the iframe previews will not render
-	// in mobile viewport sizes, where the editor canvas is hidden.
 	return (
-		<BlockEditorProvider
-			settings={ storedSettings }
-			onChange={ noop }
-			onInput={ noop }
+		<VStack
+			spacing={ 10 }
+			className="edit-site-global-styles-variation-container"
 		>
-			<VStack
-				spacing={ 10 }
-				className="edit-site-global-styles-variation-container"
-			>
-				<StyleVariationsContainer gap={ gap } />
-				<ColorVariations title={ __( 'Palettes' ) } gap={ gap } />
-				<TypographyVariations
-					title={ __( 'Typography' ) }
-					gap={ gap }
-				/>
-			</VStack>
-		</BlockEditorProvider>
+			<StyleVariationsContainer gap={ gap } />
+			<ColorVariations title={ __( 'Palettes' ) } gap={ gap } />
+			<TypographyVariations title={ __( 'Typography' ) } gap={ gap } />
+		</VStack>
 	);
 }

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

@@ -4,8 +4,9 @@
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { layout, symbol, navigation, styles, page } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -16,40 +17,54 @@ import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
-export function MainSidebarNavigationContent() {
+export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 	return (
-		<ItemGroup>
-			<SidebarNavigationItem
-				uid="navigation-navigation-item"
-				to="/navigation"
-				withChevron
-				icon={ navigation }
-			>
-				{ __( 'Navigation' ) }
-			</SidebarNavigationItem>
-			<SidebarNavigationItemGlobalStyles
-				to="/styles"
-				uid="global-styles-navigation-item"
-				icon={ styles }
-			>
-				{ __( 'Styles' ) }
-			</SidebarNavigationItemGlobalStyles>
-			<SidebarNavigationItem
-				uid="page-navigation-item"
-				to="/page"
-				withChevron
-				icon={ page }
-			>
-				{ __( 'Pages' ) }
-			</SidebarNavigationItem>
-			<SidebarNavigationItem
-				uid="template-navigation-item"
-				to="/template"
-				withChevron
-				icon={ layout }
-			>
-				{ __( 'Templates' ) }
-			</SidebarNavigationItem>
+		<ItemGroup className="edit-site-sidebar-navigation-screen-main">
+			{ isBlockBasedTheme && (
+				<>
+					<SidebarNavigationItem
+						uid="navigation-navigation-item"
+						to="/navigation"
+						withChevron
+						icon={ navigation }
+					>
+						{ __( 'Navigation' ) }
+					</SidebarNavigationItem>
+					<SidebarNavigationItemGlobalStyles
+						to="/styles"
+						uid="global-styles-navigation-item"
+						icon={ styles }
+					>
+						{ __( 'Styles' ) }
+					</SidebarNavigationItemGlobalStyles>
+					<SidebarNavigationItem
+						uid="page-navigation-item"
+						to="/page"
+						withChevron
+						icon={ page }
+					>
+						{ __( 'Pages' ) }
+					</SidebarNavigationItem>
+					<SidebarNavigationItem
+						uid="template-navigation-item"
+						to="/template"
+						withChevron
+						icon={ layout }
+					>
+						{ __( 'Templates' ) }
+					</SidebarNavigationItem>
+				</>
+			) }
+			{ ! isBlockBasedTheme && (
+				<SidebarNavigationItem
+					uid="stylebook-navigation-item"
+					to="/stylebook"
+					withChevron
+					icon={ styles }
+				>
+					{ __( 'Styles' ) }
+				</SidebarNavigationItem>
+			) }
 			<SidebarNavigationItem
 				uid="patterns-navigation-item"
 				to="/pattern"
@@ -63,6 +78,10 @@ export function MainSidebarNavigationContent() {
 }
 
 export default function SidebarNavigationScreenMain() {
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
@@ -76,10 +95,20 @@ export default function SidebarNavigationScreenMain() {
 		<SidebarNavigationScreen
 			isRoot
 			title={ __( 'Design' ) }
-			description={ __(
-				'Customize the appearance of your website using the block editor.'
-			) }
-			content={ <MainSidebarNavigationContent /> }
+			description={
+				isBlockBasedTheme
+					? __(
+							'Customize the appearance of your website using the block editor.'
+					  )
+					: __(
+							'Explore block styles and patterns to refine your site'
+					  )
+			}
+			content={
+				<MainSidebarNavigationContent
+					isBlockBasedTheme={ isBlockBasedTheme }
+				/>
+			}
 		/>
 	);
 }

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

@@ -0,0 +1,4 @@
+.edit-site-sidebar-navigation-screen-main {
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+}

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

@@ -116,7 +116,7 @@ export default function SidebarNavigationScreenNavigationMenus( { backPath } ) {
 
 	return (
 		<SidebarNavigationScreenWrapper backPath={ backPath }>
-			<ItemGroup>
+			<ItemGroup className="edit-site-sidebar-navigation-screen-navigation-menus">
 				{ navigationMenus?.map( ( { id, title, status }, index ) => (
 					<NavMenuItem
 						postId={ id }

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

@@ -2,6 +2,11 @@
 	margin: 0 0 $grid-unit-40 0;
 }
 
+.edit-site-sidebar-navigation-screen-navigation-menus {
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+}
+
 .edit-site-sidebar-navigation-screen-navigation-menus__content {
 	.block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
 		width: 100%;

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

@@ -7,8 +7,6 @@ import {
 } from '@wordpress/components';
 import { getTemplatePartIcon } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
 import { file } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
@@ -115,14 +113,9 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
 	const { templatePartAreas, hasTemplateParts, isLoading } =
 		useTemplatePartAreas();
 	const { patternCategories, hasPatterns } = usePatternCategories();
-	const isBlockBasedTheme = useSelect(
-		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
-		[]
-	);
 
 	return (
 		<SidebarNavigationScreen
-			isRoot={ ! isBlockBasedTheme }
 			title={ __( 'Patterns' ) }
 			description={ __(
 				'Manage what patterns are available when editing the site.'

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

@@ -1,5 +1,7 @@
 .edit-site-sidebar-navigation-screen-patterns__group {
 	margin-bottom: $grid-unit-30;
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
 
 	&:last-of-type {
 		border-bottom: 0;

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

@@ -57,7 +57,7 @@ export default function DataviewsTemplatesSidebarContent() {
 	}, [ records ] );
 
 	return (
-		<ItemGroup>
+		<ItemGroup className="edit-site-sidebar-navigation-screen-templates-browse">
 			<SidebarNavigationItem
 				to="/template"
 				icon={ layout }

package/src/components/sidebar-navigation-screen-templates-browse/style.scss

@@ -0,0 +1,4 @@
+.edit-site-sidebar-navigation-screen-templates-browse {
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+}

package/src/components/site-editor-routes/home.js

@@ -1,15 +1,15 @@
 /**
  * Internal dependencies
  */
-import Editor from '../editor';
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import { MaybeEditor } from '../maybe-editor';
 
 export const homeRoute = {
 	name: 'home',
 	path: '/',
 	areas: {
 		sidebar: <SidebarNavigationScreenMain />,
-		preview: <Editor />,
+		preview: <MaybeEditor showEditor={ false } />,
 		mobile: <SidebarNavigationScreenMain />,
 	},
 };

package/src/components/site-editor-routes/index.js

@@ -20,6 +20,7 @@ import { templatesRoute } from './templates';
 import { templateItemRoute } from './template-item';
 import { pagesRoute } from './pages';
 import { pageItemRoute } from './page-item';
+import { stylebookRoute } from './stylebook';
 
 const routes = [
 	pageItemRoute,
@@ -33,6 +34,7 @@ const routes = [
 	navigationRoute,
 	stylesRoute,
 	homeRoute,
+	stylebookRoute,
 ];
 
 export function useRegisterSiteEditorRoutes() {

package/src/components/site-editor-routes/stylebook.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { StyleBookPreview } from '../style-book';
+
+export const stylebookRoute = {
+	name: 'stylebook',
+	path: '/stylebook',
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Styles' ) }
+				backPath="/"
+				description={ __(
+					`Preview your website's visual identity: colors, typography, and blocks.`
+				) }
+			/>
+		),
+		preview: <StyleBookPreview isStatic />,
+		mobile: <StyleBookPreview isStatic />,
+	},
+};

package/src/components/site-editor-routes/styles.js

@@ -10,6 +10,7 @@ import Editor from '../editor';
 import { unlock } from '../../lock-unlock';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
 import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';
+import { StyleBookPreview } from '../style-book';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -30,7 +31,10 @@ export const stylesRoute = {
 	areas: {
 		content: <GlobalStylesUIWrapper />,
 		sidebar: <SidebarNavigationScreenGlobalStyles backPath="/" />,
-		preview: <Editor />,
+		preview( { query } ) {
+			const isStylebook = query.preview === 'stylebook';
+			return isStylebook ? <StyleBookPreview /> : <Editor />;
+		},
 		mobile: <MobileGlobalStylesUI />,
 	},
 	widths: {

package/src/components/site-editor-routes/template-item.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import Editor from '../editor';
+import { MaybeEditor } from '../maybe-editor';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 
 export const templateItemRoute = {
@@ -9,7 +9,7 @@ export const templateItemRoute = {
 	path: '/wp_template/*postId',
 	areas: {
 		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
-		mobile: <Editor />,
-		preview: <Editor />,
+		mobile: <MaybeEditor />,
+		preview: <MaybeEditor />,
 	},
 };

package/src/components/site-editor-routes/template-part-item.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import Editor from '../editor';
+import { MaybeEditor } from '../maybe-editor';
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 
 export const templatePartItemRoute = {
@@ -9,7 +9,7 @@ export const templatePartItemRoute = {
 	path: '/wp_template_part/*postId',
 	areas: {
 		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
-		mobile: <Editor />,
-		preview: <Editor />,
+		mobile: <MaybeEditor />,
+		preview: <MaybeEditor />,
 	},
 };

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

@@ -65,8 +65,10 @@
 		opacity: 0;
 		position: absolute;
 		right: 0;
-		transition: opacity 0.1s linear;
-		@include reduce-motion("transition");
+
+		@media not (prefers-reduced-motion) {
+			transition: opacity 0.1s linear;
+		}
 	}
 
 	&:hover::after,

package/src/components/style-book/color-examples.tsx

@@ -18,13 +18,25 @@ import {
  */
 import type { Color, Gradient } from './types';
 
-const ColorExamples = ( { colors, type } ): JSX.Element | null => {
+type Props = {
+	colors: Color[] | Gradient[];
+	type: 'colors' | 'gradients';
+	templateColumns?: string | number;
+	itemHeight?: string;
+};
+
+const ColorExamples = ( {
+	colors,
+	type,
+	templateColumns = '1fr 1fr',
+	itemHeight = '52px',
+}: Props ): JSX.Element | null => {
 	if ( ! colors ) {
 		return null;
 	}
 
 	return (
-		<Grid columns={ 2 } rowGap={ 8 } columnGap={ 16 }>
+		<Grid templateColumns={ templateColumns } rowGap={ 8 } columnGap={ 16 }>
 			{ colors.map( ( color: Color | Gradient ) => {
 				const className =
 					type === 'gradients'
@@ -35,7 +47,13 @@ const ColorExamples = ( { colors, type } ): JSX.Element | null => {
 					className
 				);
 
-				return <View key={ color.slug } className={ classes } />;
+				return (
+					<View
+						key={ color.slug }
+						className={ classes }
+						style={ { height: itemHeight } }
+					/>
+				);
 			} ) }
 		</Grid>
 	);

package/src/components/style-book/constants.ts

@@ -148,6 +148,55 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
 	},
 ];
 
+// Style book preview subcategories for all blocks section.
+export const STYLE_BOOK_ALL_BLOCKS_SUBCATEGORIES: StyleBookCategory[] = [
+	...STYLE_BOOK_THEME_SUBCATEGORIES,
+	{
+		slug: 'media',
+		title: __( 'Media' ),
+		blocks: [ 'core/post-featured-image' ],
+	},
+	{
+		slug: 'widgets',
+		title: __( 'Widgets' ),
+		blocks: [],
+	},
+	{
+		slug: 'embed',
+		title: __( 'Embeds' ),
+		include: [],
+	},
+];
+
+// Style book preview categories are organised slightly differently to the editor ones.
+export const STYLE_BOOK_PREVIEW_CATEGORIES: StyleBookCategory[] = [
+	{
+		slug: 'overview',
+		title: __( 'Overview' ),
+		blocks: [],
+	},
+	{
+		slug: 'text',
+		title: __( 'Text' ),
+		blocks: [
+			'core/post-content',
+			'core/home-link',
+			'core/navigation-link',
+		],
+	},
+	{
+		slug: 'colors',
+		title: __( 'Colors' ),
+		blocks: [],
+	},
+	{
+		slug: 'blocks',
+		title: __( 'All Blocks' ),
+		blocks: [],
+		subcategories: STYLE_BOOK_ALL_BLOCKS_SUBCATEGORIES,
+	},
+];
+
 // Forming a "block formatting context" to prevent margin collapsing.
 // @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
 const ROOT_CONTAINER = `
@@ -220,7 +269,6 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 	}
 
 	.edit-site-style-book__color-example {
-		height: 32px;
 		border: 1px solid color-mix( in srgb, currentColor 10%, transparent );
 	}
 
@@ -240,7 +288,6 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 	.edit-site-style-book__subcategory-title {
 		font-size: 16px;
 		margin-bottom: 40px;
-    	border-bottom: 1px solid #ddd;
     	padding-bottom: 8px;
 	}
 

package/src/components/style-book/examples.tsx

@@ -12,7 +12,12 @@ import {
 /**
  * Internal dependencies
  */
-import type { BlockExample, ColorOrigin, MultiOriginPalettes } from './types';
+import type {
+	Block,
+	BlockExample,
+	ColorOrigin,
+	MultiOriginPalettes,
+} from './types';
 import ColorExamples from './color-examples';
 import DuotoneExamples from './duotone-examples';
 import { STYLE_BOOK_COLOR_GROUPS } from './constants';
@@ -73,8 +78,8 @@ function getOverviewBlockExamples(
 ): BlockExample[] {
 	const examples: BlockExample[] = [];
 
-	// Get theme palette from colors.
-	const themePalette = colors.colors.find(
+	// Get theme palette from colors if they exist.
+	const themePalette = colors?.colors.find(
 		( origin: ColorOrigin ) => origin.slug === 'theme'
 	);
 
@@ -84,37 +89,45 @@ function getOverviewBlockExamples(
 			title: __( 'Colors' ),
 			category: 'overview',
 			content: (
-				<ColorExamples colors={ themePalette.colors } type={ colors } />
+				<ColorExamples
+					colors={ themePalette.colors }
+					type={ colors }
+					templateColumns="repeat(auto-fill, minmax( 200px, 1fr ))"
+					itemHeight="32px"
+				/>
 			),
 		};
 
 		examples.push( themeColorexample );
 	}
 
-	const headingBlock = createBlock( 'core/heading', {
-		content: __(
-			`AaBbCcDdEeFfGgHhiiJjKkLIMmNnOoPpQakRrssTtUuVVWwXxxYyZzOl23356789X{(…)},2!*&:/A@HELFO™`
-		),
-		level: 1,
-	} );
-	const firstParagraphBlock = createBlock( 'core/paragraph', {
-		content: __(
-			`A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.`
-		),
-	} );
-	const secondParagraphBlock = createBlock( 'core/paragraph', {
-		content: __(
-			`Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.`
-		),
-	} );
+	// Get examples for typography blocks.
+	const typographyBlockExamples: Block[] = [];
+
+	if ( getBlockType( 'core/heading' ) ) {
+		const headingBlock = createBlock( 'core/heading', {
+			content: __(
+				`AaBbCcDdEeFfGgHhiiJjKkLIMmNnOoPpQakRrssTtUuVVWwXxxYyZzOl23356789X{(…)},2!*&:/A@HELFO™`
+			),
+			level: 1,
+		} );
+		typographyBlockExamples.push( headingBlock );
+	}
+
+	if ( getBlockType( 'core/paragraph' ) ) {
+		const firstParagraphBlock = createBlock( 'core/paragraph', {
+			content: __(
+				`A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.`
+			),
+		} );
+		const secondParagraphBlock = createBlock( 'core/paragraph', {
+			content: __(
+				`Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.`
+			),
+		} );
 
-	const textExample = {
-		name: 'typography',
-		title: __( 'Typography' ),
-		category: 'overview',
-		blocks: [
-			headingBlock,
-			createBlock(
+		if ( getBlockType( 'core/group' ) ) {
+			const groupBlock = createBlock(
 				'core/group',
 				{
 					layout: {
@@ -129,10 +142,21 @@ function getOverviewBlockExamples(
 					},
 				},
 				[ firstParagraphBlock, secondParagraphBlock ]
-			),
-		],
-	};
-	examples.push( textExample );
+			);
+			typographyBlockExamples.push( groupBlock );
+		} else {
+			typographyBlockExamples.push( firstParagraphBlock );
+		}
+	}
+
+	if ( !! typographyBlockExamples.length ) {
+		examples.push( {
+			name: 'typography',
+			title: __( 'Typography' ),
+			category: 'overview',
+			blocks: typographyBlockExamples,
+		} );
+	}
 
 	const otherBlockExamples = [
 		'core/image',