@wordpress/edit-site 6.14.0 → 6.15.0

package/src/components/sidebar-global-styles-wrapper/index.js

@@ -5,11 +5,9 @@ import { __ } from '@wordpress/i18n';
 import { useMemo, useState } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useViewportMatch } from '@wordpress/compose';
-import {
-	Button,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { addQueryArgs } from '@wordpress/url';
+import { Button } from '@wordpress/components';
+import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
+import { seen } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -17,58 +15,42 @@ import { addQueryArgs } from '@wordpress/url';
 import GlobalStylesUI from '../global-styles/ui';
 import Page from '../page';
 import { unlock } from '../../lock-unlock';
-import StyleBook from '../style-book';
-import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
-const { Menu } = unlock( componentsPrivateApis );
 
 const GlobalStylesPageActions = ( {
 	isStyleBookOpened,
 	setIsStyleBookOpened,
+	path,
 } ) => {
+	const history = useHistory();
 	return (
-		<Menu
-			trigger={
-				<Button __next40pxDefaultSize variant="tertiary" size="compact">
-					{ __( 'Preview' ) }
-				</Button>
-			}
-		>
-			<Menu.RadioItem
-				value
-				checked={ isStyleBookOpened }
-				name="styles-preview-actions"
-				onChange={ () => setIsStyleBookOpened( true ) }
-				defaultChecked
-			>
-				<Menu.ItemLabel>{ __( 'Style book' ) }</Menu.ItemLabel>
-				<Menu.ItemHelpText>
-					{ __( 'Preview blocks and styles.' ) }
-				</Menu.ItemHelpText>
-			</Menu.RadioItem>
-			<Menu.RadioItem
-				value={ false }
-				checked={ ! isStyleBookOpened }
-				name="styles-preview-actions"
-				onChange={ () => setIsStyleBookOpened( false ) }
-			>
-				<Menu.ItemLabel>{ __( 'Site' ) }</Menu.ItemLabel>
-				<Menu.ItemHelpText>
-					{ __( 'Preview your site.' ) }
-				</Menu.ItemHelpText>
-			</Menu.RadioItem>
-		</Menu>
+		<Button
+			isPressed={ isStyleBookOpened }
+			icon={ seen }
+			label={ __( 'Style Book' ) }
+			onClick={ () => {
+				setIsStyleBookOpened( ! isStyleBookOpened );
+				const updatedPath = ! isStyleBookOpened
+					? addQueryArgs( path, { preview: 'stylebook' } )
+					: removeQueryArgs( path, 'preview' );
+				// Navigate to the updated path.
+				history.navigate( updatedPath );
+			} }
+			size="compact"
+		/>
 	);
 };
 
-export default function GlobalStylesUIWrapper() {
+/**
+ * Hook to deal with navigation and location state.
+ *
+ * @return {Array}  The current section and a function to update it.
+ */
+export const useSection = () => {
 	const { path, query } = useLocation();
 	const history = useHistory();
-	const { canvas = 'view' } = query;
-	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false );
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const [ section, onChangeSection ] = useMemo( () => {
+	return useMemo( () => {
 		return [
 			query.section ?? '/',
 			( updatedSection ) => {
@@ -80,6 +62,16 @@ export default function GlobalStylesUIWrapper() {
 			},
 		];
 	}, [ path, query.section, history ] );
+};
+
+export default function GlobalStylesUIWrapper() {
+	const { path } = useLocation();
+
+	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState(
+		path.includes( 'preview=stylebook' )
+	);
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const [ section, onChangeSection ] = useSection();
 
 	return (
 		<>
@@ -89,6 +81,7 @@ export default function GlobalStylesUIWrapper() {
 						<GlobalStylesPageActions
 							isStyleBookOpened={ isStyleBookOpened }
 							setIsStyleBookOpened={ setIsStyleBookOpened }
+							path={ path }
 						/>
 					) : null
 				}
@@ -100,45 +93,6 @@ export default function GlobalStylesUIWrapper() {
 					onPathChange={ onChangeSection }
 				/>
 			</Page>
-			{ canvas === 'view' && isStyleBookOpened && (
-				<StyleBook
-					enableResizing={ false }
-					showCloseButton={ false }
-					showTabs={ false }
-					isSelected={ ( blockName ) =>
-						// Match '/blocks/core%2Fbutton' and
-						// '/blocks/core%2Fbutton/typography', but not
-						// '/blocks/core%2Fbuttons'.
-						section ===
-							`/blocks/${ encodeURIComponent( blockName ) }` ||
-						section.startsWith(
-							`/blocks/${ encodeURIComponent( blockName ) }/`
-						)
-					}
-					path={ section }
-					onSelect={ ( blockName ) => {
-						if (
-							STYLE_BOOK_COLOR_GROUPS.find(
-								( group ) => group.slug === blockName
-							)
-						) {
-							// Go to color palettes Global Styles.
-							onChangeSection( '/colors/palette' );
-							return;
-						}
-						if ( blockName === 'typography' ) {
-							// Go to typography Global Styles.
-							onChangeSection( '/typography' );
-							return;
-						}
-
-						// Now go to the selected block.
-						onChangeSection(
-							`/blocks/${ encodeURIComponent( blockName ) }`
-						);
-					} }
-				/>
-			) }
 		</>
 	);
 }

package/src/components/sidebar-global-styles-wrapper/style.scss

@@ -33,3 +33,25 @@
 		color: $gray-900;
 	}
 }
+
+.show-icon-labels {
+	.edit-site-styles .edit-site-page-content {
+		.edit-site-page-header__actions {
+			.components-button.has-icon {
+				width: auto;
+				padding: 0 $grid-unit-10;
+
+				// Hide the button icons when labels are set to display...
+				svg {
+					display: none;
+				}
+				// ... and display labels.
+				&::after {
+					content: attr(aria-label);
+					font-size: $helptext-font-size;
+				}
+			}
+
+		}
+	}
+}

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

@@ -18,6 +18,12 @@
 	&[aria-current="true"] {
 		background: $gray-800;
 		color: $white;
+		font-weight: $font-weight-medium;
+	}
+
+	// Make sure the focus style is drawn on top of the current item background.
+	&:focus-visible {
+		transform: translateZ(0);
 	}
 
 	.edit-site-sidebar-navigation-item__drilldown-indicator {

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

@@ -19,7 +19,7 @@ import { store as editSiteStore } from '../../store';
 
 export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 	return (
-		<ItemGroup>
+		<ItemGroup className="edit-site-sidebar-navigation-screen-main">
 			{ isBlockBasedTheme && (
 				<>
 					<SidebarNavigationItem

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

@@ -22,7 +22,7 @@ export const stylebookRoute = {
 				) }
 			/>
 		),
-		preview: <StyleBookPreview />,
-		mobile: <StyleBookPreview />,
+		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-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/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 = `
@@ -239,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/index.js

@@ -32,8 +32,11 @@ import {
 	useContext,
 	useRef,
 	useLayoutEffect,
+	useEffect,
 } from '@wordpress/element';
 import { ENTER, SPACE } from '@wordpress/keycodes';
+import { uploadMedia } from '@wordpress/media-utils';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -47,6 +50,12 @@ import {
 } from './categories';
 import { getExamples } from './examples';
 import { store as siteEditorStore } from '../../store';
+import { useSection } from '../sidebar-global-styles-wrapper';
+import { GlobalStylesRenderer } from '../global-styles-renderer';
+import {
+	STYLE_BOOK_COLOR_GROUPS,
+	STYLE_BOOK_PREVIEW_CATEGORIES,
+} from '../style-book/constants';
 
 const {
 	ExperimentalBlockEditorProvider,
@@ -85,35 +94,24 @@ const scrollToSection = ( anchorId, iframe ) => {
 };
 
 /**
- * Parses a Block Editor navigation path to extract the block name and
- * build a style book navigation path. The object can be extended to include a category,
- * representing a style book tab/section.
+ * Parses a Block Editor navigation path to build a style book navigation path.
+ * The object can be extended to include a category, representing a style book tab/section.
  *
  * @param {string} path An internal Block Editor navigation path.
  * @return {null|{block: string}} An object containing the example to navigate to.
  */
 const getStyleBookNavigationFromPath = ( path ) => {
 	if ( path && typeof path === 'string' ) {
-		if ( path === '/' ) {
+		if (
+			path === '/' ||
+			path.startsWith( '/typography' ) ||
+			path.startsWith( '/colors' ) ||
+			path.startsWith( '/blocks' )
+		) {
 			return {
 				top: true,
 			};
 		}
-
-		if ( path.startsWith( '/typography' ) ) {
-			return {
-				block: 'typography',
-			};
-		}
-		let block = path.includes( '/blocks/' )
-			? decodeURIComponent( path.split( '/blocks/' )[ 1 ] )
-			: null;
-		// Default to theme-colors if the path ends with /colors.
-		block = path.endsWith( '/colors' ) ? 'theme-colors' : block;
-
-		return {
-			block,
-		};
 	}
 	return null;
 };
@@ -307,29 +305,43 @@ function StyleBook( {
 								) ) }
 							</Tabs.TabList>
 						</div>
-						{ tabs.map( ( tab ) => (
-							<Tabs.TabPanel
-								key={ tab.slug }
-								tabId={ tab.slug }
-								focusable={ false }
-								className="edit-site-style-book__tabpanel"
-							>
-								<StyleBookBody
-									category={ tab.slug }
-									examples={ examples }
-									isSelected={ isSelected }
-									onSelect={ onSelect }
-									settings={ settings }
-									sizes={ sizes }
-									title={ tab.title }
-									goTo={ goTo }
-								/>
-							</Tabs.TabPanel>
-						) ) }
+						{ tabs.map( ( tab ) => {
+							const categoryDefinition = tab.slug
+								? getTopLevelStyleBookCategories().find(
+										( _category ) =>
+											_category.slug === tab.slug
+								  )
+								: null;
+							const filteredExamples = categoryDefinition
+								? getExamplesByCategory(
+										categoryDefinition,
+										examples
+								  )
+								: { examples };
+							return (
+								<Tabs.TabPanel
+									key={ tab.slug }
+									tabId={ tab.slug }
+									focusable={ false }
+									className="edit-site-style-book__tabpanel"
+								>
+									<StyleBookBody
+										category={ tab.slug }
+										examples={ filteredExamples }
+										isSelected={ isSelected }
+										onSelect={ onSelect }
+										settings={ settings }
+										sizes={ sizes }
+										title={ tab.title }
+										goTo={ goTo }
+									/>
+								</Tabs.TabPanel>
+							);
+						} ) }
 					</Tabs>
 				) : (
 					<StyleBookBody
-						examples={ examplesForSinglePageUse }
+						examples={ { examples: examplesForSinglePageUse } }
 						isSelected={ isSelected }
 						onClick={ onClick }
 						onSelect={ onSelect }
@@ -346,33 +358,113 @@ function StyleBook( {
 /**
  * Style Book Preview component renders the stylebook without the Editor dependency.
  *
- * @param {Object}   props            Component props.
- * @param {string}   props.path       Path to the selected block.
- * @param {Object}   props.userConfig User configuration.
- * @param {Function} props.isSelected Function to check if a block is selected.
- * @param {Function} props.onSelect   Function to select a block.
+ * @param {Object}  props            Component props.
+ * @param {Object}  props.userConfig User configuration.
+ * @param {boolean} props.isStatic   Whether the stylebook is static or clickable.
  * @return {Object} Style Book Preview component.
  */
-export const StyleBookPreview = ( {
-	path = '',
-	userConfig = {},
-	isSelected,
-	onSelect,
-} ) => {
+export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 	const siteEditorSettings = useSelect(
 		( select ) => select( siteEditorStore ).getSettings(),
 		[]
 	);
+
+	const canUserUploadMedia = useSelect(
+		( select ) =>
+			select( coreStore ).canUser( 'create', {
+				kind: 'root',
+				name: 'media',
+			} ),
+		[]
+	);
+
 	// Update block editor settings because useMultipleOriginColorsAndGradients fetch colours from there.
-	dispatch( blockEditorStore ).updateSettings( siteEditorSettings );
+	useEffect( () => {
+		dispatch( blockEditorStore ).updateSettings( {
+			...siteEditorSettings,
+			mediaUpload: canUserUploadMedia ? uploadMedia : undefined,
+		} );
+	}, [ siteEditorSettings, canUserUploadMedia ] );
+
+	const [ section, onChangeSection ] = useSection();
+
+	const isSelected = ( blockName ) => {
+		// Match '/blocks/core%2Fbutton' and
+		// '/blocks/core%2Fbutton/typography', but not
+		// '/blocks/core%2Fbuttons'.
+		return (
+			section === `/blocks/${ encodeURIComponent( blockName ) }` ||
+			section.startsWith(
+				`/blocks/${ encodeURIComponent( blockName ) }/`
+			)
+		);
+	};
+
+	const onSelect = ( blockName ) => {
+		if (
+			STYLE_BOOK_COLOR_GROUPS.find(
+				( group ) => group.slug === blockName
+			)
+		) {
+			// Go to color palettes Global Styles.
+			onChangeSection( '/colors/palette' );
+			return;
+		}
+		if ( blockName === 'typography' ) {
+			// Go to typography Global Styles.
+			onChangeSection( '/typography' );
+			return;
+		}
+
+		// Now go to the selected block.
+		onChangeSection( `/blocks/${ encodeURIComponent( blockName ) }` );
+	};
 
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const colors = useMultiOriginPalettes();
 	const examples = getExamples( colors );
 	const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );
 
+	let previewCategory = null;
+	if ( section.includes( '/colors' ) ) {
+		previewCategory = 'colors';
+	} else if ( section.includes( '/typography' ) ) {
+		previewCategory = 'text';
+	} else if ( section.includes( '/blocks' ) ) {
+		previewCategory = 'blocks';
+		const blockName =
+			decodeURIComponent( section ).split( '/blocks/' )[ 1 ];
+		if (
+			blockName &&
+			examples.find( ( example ) => example.name === blockName )
+		) {
+			previewCategory = blockName;
+		}
+	} else if ( ! isStatic ) {
+		previewCategory = 'overview';
+	}
+	const categoryDefinition = STYLE_BOOK_PREVIEW_CATEGORIES.find(
+		( category ) => category.slug === previewCategory
+	);
+
+	// If there's no category definition there may be a single block.
+	const filteredExamples = categoryDefinition
+		? getExamplesByCategory( categoryDefinition, examples )
+		: {
+				examples: [
+					examples.find(
+						( example ) => example.name === previewCategory
+					),
+				],
+		  };
+
+	// If there's no preview category, show all examples.
+	const displayedExamples = previewCategory
+		? filteredExamples
+		: { examples: examplesForSinglePageUse };
+
 	const { base: baseConfig } = useContext( GlobalStylesContext );
-	const goTo = getStyleBookNavigationFromPath( path );
+	const goTo = getStyleBookNavigationFromPath( section );
 
 	const mergedConfig = useMemo( () => {
 		if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {
@@ -399,13 +491,14 @@ export const StyleBookPreview = ( {
 		<div className="edit-site-style-book">
 			{ resizeObserver }
 			<BlockEditorProvider settings={ settings }>
+				<GlobalStylesRenderer disableRootPadding />
 				<StyleBookBody
-					examples={ examplesForSinglePageUse }
+					examples={ displayedExamples }
 					settings={ settings }
 					goTo={ goTo }
 					sizes={ sizes }
-					isSelected={ isSelected }
-					onSelect={ onSelect }
+					isSelected={ ! isStatic ? isSelected : null }
+					onSelect={ ! isStatic ? onSelect : null }
 				/>
 			</BlockEditorProvider>
 		</div>
@@ -413,7 +506,6 @@ export const StyleBookPreview = ( {
 };
 
 export const StyleBookBody = ( {
-	category,
 	examples,
 	isSelected,
 	onClick,
@@ -459,13 +551,6 @@ export const StyleBookBody = ( {
 		if ( hasIframeLoaded && iframeRef?.current ) {
 			if ( goTo?.top ) {
 				scrollToSection( 'top', iframeRef?.current );
-				return;
-			}
-			if ( goTo?.block ) {
-				scrollToSection(
-					`example-${ goTo?.block }`,
-					iframeRef?.current
-				);
 			}
 		}
 	}, [ iframeRef?.current, goTo, scrollToSection, hasIframeLoaded ] );
@@ -492,8 +577,7 @@ export const StyleBookBody = ( {
 				className={ clsx( 'edit-site-style-book__examples', {
 					'is-wide': sizes.width > 600,
 				} ) }
-				examples={ examples }
-				category={ category }
+				filteredExamples={ examples }
 				label={
 					title
 						? sprintf(
@@ -505,24 +589,14 @@ export const StyleBookBody = ( {
 				}
 				isSelected={ isSelected }
 				onSelect={ onSelect }
-				key={ category }
+				key={ title }
 			/>
 		</Iframe>
 	);
 };
 
 const Examples = memo(
-	( { className, examples, category, label, isSelected, onSelect } ) => {
-		const categoryDefinition = category
-			? getTopLevelStyleBookCategories().find(
-					( _category ) => _category.slug === category
-			  )
-			: null;
-
-		const filteredExamples = categoryDefinition
-			? getExamplesByCategory( categoryDefinition, examples )
-			: { examples };
-
+	( { className, filteredExamples, label, isSelected, onSelect } ) => {
 		return (
 			<Composite
 				orientation="vertical"