@wordpress/edit-site 5.7.0 → 5.9.0

package/src/components/global-styles/screen-style-variations.js

@@ -1,143 +1,25 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import fastDeepEqual from 'fast-deep-equal/es6';
-
 /**
  * WordPress dependencies
  */
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	useMemo,
-	useContext,
-	useState,
-	useEffect,
-	useRef,
-} from '@wordpress/element';
-import { ENTER } from '@wordpress/keycodes';
-import {
-	__experimentalGrid as Grid,
-	Card,
-	CardBody,
-} from '@wordpress/components';
+import { Card, CardBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import {
-	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useEffect, useRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from './global-styles-provider';
-import StylesPreview from './preview';
 import ScreenHeader from './header';
-import { unlock } from '../../private-apis';
-
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
-
-function compareVariations( a, b ) {
-	return (
-		fastDeepEqual( a.styles, b.styles ) &&
-		fastDeepEqual( a.settings, b.settings )
-	);
-}
-
-function Variation( { variation } ) {
-	const [ isFocused, setIsFocused ] = useState( false );
-	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
-	const context = useMemo( () => {
-		return {
-			user: {
-				settings: variation.settings ?? {},
-				styles: variation.styles ?? {},
-			},
-			base,
-			merged: mergeBaseAndUserConfigs( base, variation ),
-			setUserConfig: () => {},
-		};
-	}, [ variation, base ] );
-
-	const selectVariation = () => {
-		setUserConfig( () => {
-			return {
-				settings: variation.settings,
-				styles: variation.styles,
-			};
-		} );
-	};
-
-	const selectOnEnter = ( event ) => {
-		if ( event.keyCode === ENTER ) {
-			event.preventDefault();
-			selectVariation();
-		}
-	};
-
-	const isActive = useMemo( () => {
-		return compareVariations( user, variation );
-	}, [ user, variation ] );
-
-	return (
-		<GlobalStylesContext.Provider value={ context }>
-			<div
-				className={ classnames(
-					'edit-site-global-styles-variations_item',
-					{
-						'is-active': isActive,
-					}
-				) }
-				role="button"
-				onClick={ selectVariation }
-				onKeyDown={ selectOnEnter }
-				tabIndex="0"
-				aria-label={ variation?.title }
-				aria-current={ isActive }
-				onFocus={ () => setIsFocused( true ) }
-				onBlur={ () => setIsFocused( false ) }
-			>
-				<div className="edit-site-global-styles-variations_item-preview">
-					<StylesPreview
-						label={ variation?.title }
-						isFocused={ isFocused }
-						withHoverView
-					/>
-				</div>
-			</div>
-		</GlobalStylesContext.Provider>
-	);
-}
+import StyleVariationsContainer from './style-variations-container';
 
 function ScreenStyleVariations() {
-	const { variations, mode } = useSelect( ( select ) => {
+	const { mode } = useSelect( ( select ) => {
 		return {
-			variations:
-				select(
-					coreStore
-				).__experimentalGetCurrentThemeGlobalStylesVariations(),
-
 			mode: select( blockEditorStore ).__unstableGetEditorMode(),
 		};
 	}, [] );
 
-	const withEmptyVariation = useMemo( () => {
-		return [
-			{
-				title: __( 'Default' ),
-				settings: {},
-				styles: {},
-			},
-			...variations.map( ( variation ) => ( {
-				...variation,
-				settings: variation.settings ?? {},
-				styles: variation.styles ?? {},
-			} ) ),
-		];
-	}, [ variations ] );
-
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 	const shouldRevertInitialMode = useRef( null );
 	useEffect( () => {
 		// ignore changes to zoom-out mode as we explictily change to it on mount.
@@ -160,8 +42,11 @@ function ScreenStyleVariations() {
 				}
 			};
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+
 	return (
 		<>
 			<ScreenHeader
@@ -178,11 +63,7 @@ function ScreenStyleVariations() {
 				className="edit-site-global-styles-screen-style-variations"
 			>
 				<CardBody>
-					<Grid columns={ 2 }>
-						{ withEmptyVariation?.map( ( variation, index ) => (
-							<Variation key={ index } variation={ variation } />
-						) ) }
-					</Grid>
+					<StyleVariationsContainer />
 				</CardBody>
 			</Card>
 		</>

package/src/components/global-styles/style-variations-container.js

@@ -0,0 +1,136 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import fastDeepEqual from 'fast-deep-equal/es6';
+
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo, useContext, useState } from '@wordpress/element';
+import { ENTER } from '@wordpress/keycodes';
+import { __experimentalGrid as Grid } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { mergeBaseAndUserConfigs } from './global-styles-provider';
+import StylesPreview from './preview';
+import { unlock } from '../../private-apis';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+
+function compareVariations( a, b ) {
+	return (
+		fastDeepEqual( a.styles, b.styles ) &&
+		fastDeepEqual( a.settings, b.settings )
+	);
+}
+
+function Variation( { variation } ) {
+	const [ isFocused, setIsFocused ] = useState( false );
+	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
+	const context = useMemo( () => {
+		return {
+			user: {
+				settings: variation.settings ?? {},
+				styles: variation.styles ?? {},
+			},
+			base,
+			merged: mergeBaseAndUserConfigs( base, variation ),
+			setUserConfig: () => {},
+		};
+	}, [ variation, base ] );
+
+	const selectVariation = () => {
+		setUserConfig( () => {
+			return {
+				settings: variation.settings,
+				styles: variation.styles,
+			};
+		} );
+	};
+
+	const selectOnEnter = ( event ) => {
+		if ( event.keyCode === ENTER ) {
+			event.preventDefault();
+			selectVariation();
+		}
+	};
+
+	const isActive = useMemo( () => {
+		return compareVariations( user, variation );
+	}, [ user, variation ] );
+
+	return (
+		<GlobalStylesContext.Provider value={ context }>
+			<div
+				className={ classnames(
+					'edit-site-global-styles-variations_item',
+					{
+						'is-active': isActive,
+					}
+				) }
+				role="button"
+				onClick={ selectVariation }
+				onKeyDown={ selectOnEnter }
+				tabIndex="0"
+				aria-label={ variation?.title }
+				aria-current={ isActive }
+				onFocus={ () => setIsFocused( true ) }
+				onBlur={ () => setIsFocused( false ) }
+			>
+				<div className="edit-site-global-styles-variations_item-preview">
+					<StylesPreview
+						label={ variation?.title }
+						isFocused={ isFocused }
+						withHoverView
+					/>
+				</div>
+			</div>
+		</GlobalStylesContext.Provider>
+	);
+}
+
+export default function StyleVariationsContainer() {
+	const { variations } = useSelect( ( select ) => {
+		return {
+			variations:
+				select(
+					coreStore
+				).__experimentalGetCurrentThemeGlobalStylesVariations() || [],
+		};
+	}, [] );
+
+	const withEmptyVariation = useMemo( () => {
+		return [
+			{
+				title: __( 'Default' ),
+				settings: {},
+				styles: {},
+			},
+			...variations.map( ( variation ) => ( {
+				...variation,
+				settings: variation.settings ?? {},
+				styles: variation.styles ?? {},
+			} ) ),
+		];
+	}, [ variations ] );
+
+	return (
+		<>
+			<Grid
+				columns={ 2 }
+				className="edit-site-global-styles-style-variations-container"
+			>
+				{ withEmptyVariation?.map( ( variation, index ) => (
+					<Variation key={ index } variation={ variation } />
+				) ) }
+			</Grid>
+		</>
+	);
+}

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

@@ -189,45 +189,6 @@
 	flex-direction: column;
 }
 
-.edit-site-global-styles__shadow-panel {
-	width: 230px;
-}
-
-.edit-site-global-styles__shadow-dropdown {
-	display: block;
-	padding: 0;
-
-	> button {
-		width: 100%;
-		padding: $grid-unit-10;
-
-		&.is-open {
-			background-color: $gray-100;
-		}
-	}
-}
-
-// wrapper to clip the shadow beyond 6px
-.edit-site-global-styles__shadow-indicator-wrapper {
-	padding: 6px;
-	overflow: hidden;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-// These styles are similar to the color palette.
-.edit-site-global-styles__shadow-indicator {
-	color: $gray-800;
-	border: $gray-200 $border-width solid;
-	border-radius: $radius-block-ui;
-	cursor: pointer;
-	padding: 0;
-
-	height: 24px;
-	width: 24px;
-}
-
 .edit-site-global-styles-screen-root.edit-site-global-styles-screen-root,
 .edit-site-global-styles-screen-style-variations.edit-site-global-styles-screen-style-variations {
 	background: unset;

package/src/components/global-styles/ui.js

@@ -10,17 +10,24 @@ import {
 } from '@wordpress/components';
 import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import ScreenRoot from './screen-root';
-import ScreenBlockList from './screen-block-list';
+import {
+	useBlockHasGlobalStyles,
+	default as ScreenBlockList,
+} from './screen-block-list';
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
@@ -35,6 +42,7 @@ import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
 import { unlock } from '../../private-apis';
 import ScreenEffects from './screen-effects';
+import { store as editSiteStore } from '../../store';
 
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
 const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
@@ -232,7 +240,7 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 	);
 }
 
-function GlobalStylesStyleBook( { onClose } ) {
+function GlobalStylesStyleBook() {
 	const navigator = useNavigator();
 	const { path } = navigator.location;
 	return (
@@ -250,14 +258,51 @@ function GlobalStylesStyleBook( { onClose } ) {
 				// Now go to the selected block.
 				navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );
 			} }
-			onClose={ onClose }
 		/>
 	);
 }
 
-function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
-	const blocks = getBlockTypes();
+function GlobalStylesBlockLink() {
+	const navigator = useNavigator();
+	const isMounted = useRef();
+	const { selectedBlockName, selectedBlockClientId } = useSelect(
+		( select ) => {
+			const { getSelectedBlockClientId, getBlockName } =
+				select( blockEditorStore );
+			const clientId = getSelectedBlockClientId();
+			return {
+				selectedBlockName: getBlockName( clientId ),
+				selectedBlockClientId: clientId,
+			};
+		},
+		[]
+	);
+	const blockHasGlobalStyles = useBlockHasGlobalStyles( selectedBlockName );
+	useEffect( () => {
+		// Avoid navigating to the block screen on mount.
+		if ( ! isMounted.current ) {
+			isMounted.current = true;
+			return;
+		}
+		if ( ! selectedBlockClientId || ! blockHasGlobalStyles ) {
+			return;
+		}
+		const path = '/blocks/' + encodeURIComponent( selectedBlockName );
+		// Avoid navigating to the same path. This can happen when selecting
+		// a new block of the same type.
+		if ( path !== navigator.location.path ) {
+			navigator.goTo( path, { skipFocus: true } );
+		}
+	}, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] );
+}
 
+function GlobalStylesUI() {
+	const blocks = getBlockTypes();
+	const editorCanvasContainerView = useSelect(
+		( select ) =>
+			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+		[]
+	);
 	return (
 		<NavigatorProvider
 			className="edit-site-global-styles-sidebar__navigator-provider"
@@ -302,11 +347,12 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 					/>
 				);
 			} ) }
-			{ isStyleBookOpened && (
-				<GlobalStylesStyleBook onClose={ onCloseStyleBook } />
+			{ 'style-book' === editorCanvasContainerView && (
+				<GlobalStylesStyleBook />
 			) }
 
 			<GlobalStylesActionMenu />
+			<GlobalStylesBlockLink />
 		</NavigatorProvider>
 	);
 }

package/src/components/header-edit-mode/index.js

@@ -38,7 +38,8 @@ import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
 import DocumentActions from './document-actions';
 import { store as editSiteStore } from '../../store';
-import { useHasStyleBook } from '../style-book';
+import { getEditorCanvasContainerTitle } from '../editor-canvas-container';
+import { unlock } from '../../private-apis';
 
 const preventDefault = ( event ) => {
 	event.preventDefault();
@@ -56,6 +57,7 @@ export default function HeaderEditMode() {
 		blockEditorMode,
 		homeUrl,
 		showIconLabels,
+		editorCanvasView,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -88,6 +90,9 @@ export default function HeaderEditMode() {
 				'core/edit-site',
 				'showIconLabels'
 			),
+			editorCanvasView: unlock(
+				select( editSiteStore )
+			).getEditorCanvasContainerView(),
 		};
 	}, [] );
 
@@ -117,7 +122,7 @@ export default function HeaderEditMode() {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
-	const hasStyleBook = useHasStyleBook();
+	const hasDefaultEditorCanvasView = ! editorCanvasView;
 
 	const isFocusMode = templateType === 'wp_template_part';
 
@@ -138,7 +143,7 @@ export default function HeaderEditMode() {
 				'show-icon-labels': showIconLabels,
 			} ) }
 		>
-			{ ! hasStyleBook && (
+			{ hasDefaultEditorCanvasView && (
 				<NavigableToolbar
 					className="edit-site-header-edit-mode__start"
 					aria-label={ __( 'Document tools' ) }
@@ -223,12 +228,16 @@ export default function HeaderEditMode() {
 			) }
 
 			<div className="edit-site-header-edit-mode__center">
-				{ hasStyleBook ? __( 'Style Book' ) : <DocumentActions /> }
+				{ ! hasDefaultEditorCanvasView ? (
+					getEditorCanvasContainerTitle( editorCanvasView )
+				) : (
+					<DocumentActions />
+				) }
 			</div>
 
 			<div className="edit-site-header-edit-mode__end">
 				<div className="edit-site-header-edit-mode__actions">
-					{ ! isFocusMode && ! hasStyleBook && (
+					{ ! isFocusMode && hasDefaultEditorCanvasView && (
 						<div
 							className={ classnames(
 								'edit-site-header-edit-mode__preview-options',

package/src/components/header-edit-mode/more-menu/index.js

@@ -93,7 +93,7 @@ export default function MoreMenu( { showIconLabels } ) {
 								icon={ external }
 								role="menuitem"
 								href={ __(
-									'https://wordpress.org/support/article/site-editor/'
+									'https://wordpress.org/documentation/article/site-editor/'
 								) }
 								target="_blank"
 								rel="noopener noreferrer"