@wordpress/edit-site 3.0.27 → 4.0.1-next.f435e9e01b.0

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

@@ -0,0 +1,130 @@
+/**
+ * External dependencies
+ */
+import { isEqual } from 'lodash';
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo, useContext } from '@wordpress/element';
+import { ENTER } from '@wordpress/keycodes';
+import {
+	__experimentalGrid as Grid,
+	Card,
+	CardBody,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { mergeBaseAndUserConfigs } from './global-styles-provider';
+import { GlobalStylesContext } from './context';
+import StylesPreview from './preview';
+import ScreenHeader from './header';
+
+function compareVariations( a, b ) {
+	return isEqual( a.styles, b.styles ) && isEqual( a.settings, b.settings );
+}
+
+function Variation( { variation } ) {
+	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"
+			>
+				<StylesPreview height={ 100 } />
+			</div>
+		</GlobalStylesContext.Provider>
+	);
+}
+
+function ScreenStyleVariations() {
+	const { variations } = useSelect( ( select ) => {
+		return {
+			variations: select(
+				coreStore
+			).__experimentalGetCurrentThemeGlobalStylesVariations(),
+		};
+	}, [] );
+
+	const withEmptyVariation = useMemo( () => {
+		return [
+			{
+				name: __( 'Default' ),
+				settings: {},
+				styles: {},
+			},
+			...variations,
+		];
+	}, [ variations ] );
+
+	return (
+		<>
+			<ScreenHeader
+				back="/"
+				title={ __( 'Other styles' ) }
+				description={ __(
+					'Choose a different style combination for the theme styles'
+				) }
+			/>
+
+			<Card size="small" isBorderless>
+				<CardBody>
+					<Grid columns={ 2 }>
+						{ withEmptyVariation?.map( ( variation, index ) => (
+							<Variation key={ index } variation={ variation } />
+						) ) }
+					</Grid>
+				</CardBody>
+			</Card>
+		</>
+	);
+}
+
+export default ScreenStyleVariations;

package/src/components/global-styles/screen-text-color.js

@@ -16,7 +16,6 @@ import {
 } from './hooks';
 
 function ScreenTextColor( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
@@ -39,7 +38,6 @@ function ScreenTextColor( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu + '/colors' }
 				title={ __( 'Text' ) }
 				description={ __(
 					'Set the default color used for text across the site.'

package/src/components/global-styles/screen-typography-element.js

@@ -21,13 +21,9 @@ const elements = {
 };
 
 function ScreenTypographyElement( { name, element } ) {
-	const parentMenu =
-		name === undefined ? '/typography' : '/blocks/' + name + '/typography';
-
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu }
 				title={ elements[ element ].title }
 				description={ elements[ element ].description }
 			/>

package/src/components/global-styles/screen-typography.js

@@ -13,7 +13,7 @@ import {
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import { useStyle } from './hooks';
 import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
@@ -72,7 +72,6 @@ function ScreenTypography( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu ? parentMenu : '/' }
 				title={ __( 'Typography' ) }
 				description={ __(
 					'Manage the typography settings for different elements.'
@@ -101,7 +100,7 @@ function ScreenTypography( { name } ) {
 				</div>
 			) }
 
-			{ /* no typogrpahy elements support yet for blocks */ }
+			{ /* no typography elements support yet for blocks */ }
 			{ !! name && <TypographyPanel name={ name } element="text" /> }
 		</>
 	);

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

@@ -2,17 +2,13 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	min-height: 152px;
 	line-height: 1;
+	cursor: pointer;
+}
 
-	.component-color-indicator {
-		border-radius: 50%;
-		border: 0;
-		height: 36px;
-		width: 36px;
-		margin-left: 0;
-		padding: 0;
-	}
+.edit-site-global-styles-preview__iframe {
+	max-width: 100%;
+	display: block;
 }
 
 .edit-site-typography-panel__preview {
@@ -43,14 +39,6 @@
 	margin: $grid-unit-20;
 
 	.component-color-indicator {
-		margin-left: 0;
-		display: block;
-		border-radius: 50%;
-		height: 24px;
-		width: 24px;
-		padding: 0;
-		border: $border-width solid $gray-300;
-
 		// Show a diagonal line (crossed out) for empty swatches.
 		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
 	}
@@ -77,16 +65,27 @@
 	}
 }
 
-h2.edit-site-global-styles-gradient-palette-panel__duotone-heading.components-heading {
-	text-transform: uppercase;
-	line-height: $grid-unit-30;
-	font-weight: 500;
-	font-size: 11px;
-	margin-bottom: $grid-unit-10;
-}
-
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
 .edit-site-screen-background-color__control {
 	padding: $grid-unit-20;
 }
+
+.edit-site-global-styles-variations_item {
+	box-sizing: border-box;
+	padding: $border-width * 2;
+	border-radius: $radius-block-ui;
+	border: $gray-200 $border-width solid;
+
+	&.is-active {
+		border: $gray-900 $border-width solid;
+	}
+
+	&:hover {
+		border: var(--wp-admin-theme-color) $border-width solid;
+	}
+
+	&:focus {
+		border: var(--wp-admin-theme-color) $border-width solid;
+	}
+}

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

@@ -21,47 +21,70 @@ import ScreenBackgroundColor from './screen-background-color';
 import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
 import ScreenLayout from './screen-layout';
+import ScreenStyleVariations from './screen-style-variations';
+
+function GlobalStylesNavigationScreen( { className, ...props } ) {
+	return (
+		<NavigatorScreen
+			className={ [
+				'edit-site-global-styles-sidebar__navigator-screen',
+				className,
+			]
+				.filter( Boolean )
+				.join( ' ' ) }
+			{ ...props }
+		/>
+	);
+}
 
 function ContextScreens( { name } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 
 	return (
 		<>
-			<NavigatorScreen path={ parentMenu + '/typography' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>
 				<ScreenTypography name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/typography/text' }>
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/typography/text' }
+			>
 				<ScreenTypographyElement name={ name } element="text" />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/typography/link' }>
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/typography/link' }
+			>
 				<ScreenTypographyElement name={ name } element="link" />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>
 				<ScreenColors name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors/palette' }>
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/colors/palette' }
+			>
 				<ScreenColorPalette name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors/background' }>
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/colors/background' }
+			>
 				<ScreenBackgroundColor name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors/text' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
 				<ScreenTextColor name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors/link' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>
 				<ScreenLinkColor name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/layout' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
 				<ScreenLayout name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 		</>
 	);
 }
@@ -70,22 +93,29 @@ function GlobalStylesUI() {
 	const blocks = getBlockTypes();
 
 	return (
-		<NavigatorProvider initialPath="/">
-			<NavigatorScreen path="/">
+		<NavigatorProvider
+			className="edit-site-global-styles-sidebar__navigator-provider"
+			initialPath="/"
+		>
+			<GlobalStylesNavigationScreen path="/">
 				<ScreenRoot />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/variations">
+				<ScreenStyleVariations />
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path="/blocks">
+			<GlobalStylesNavigationScreen path="/blocks">
 				<ScreenBlockList />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
 			{ blocks.map( ( block ) => (
-				<NavigatorScreen
+				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }
 					path={ '/blocks/' + block.name }
 				>
 					<ScreenBlock name={ block.name } />
-				</NavigatorScreen>
+				</GlobalStylesNavigationScreen>
 			) ) }
 
 			<ContextScreens />

package/src/components/header/document-actions/style.scss

@@ -2,6 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
+	padding: 0 $grid-unit;
 	height: 100%;
 	// Flex items will, by default, refuse to shrink below a minimum
 	// intrinsic width. In order to shrink this flexbox item, and
@@ -40,15 +41,6 @@
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		max-width: 120px;
-
-		@include break-medium() {
-			max-width: 75px;
-		}
-
-		@include break-xlarge() {
-			max-width: 180px;
-		}
 	}
 
 	.edit-site-document-actions__secondary-item {

package/src/components/header/index.js

@@ -11,7 +11,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
 import { _x, __ } from '@wordpress/i18n';
 import { listView, plus } from '@wordpress/icons';
-import { Button } from '@wordpress/components';
+import { Button, ToolbarItem } from '@wordpress/components';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
@@ -45,6 +45,7 @@ export default function Header( {
 		isListViewOpen,
 		listViewShortcut,
 		isLoaded,
+		isVisualMode,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -52,6 +53,7 @@ export default function Header( {
 			getEditedPostId,
 			isInserterOpened,
 			isListViewOpened,
+			getEditorMode,
 		} = select( editSiteStore );
 		const { getEditedEntityRecord } = select( coreStore );
 		const { __experimentalGetTemplateInfo: getTemplateInfo } = select(
@@ -75,6 +77,7 @@ export default function Header( {
 			listViewShortcut: getShortcutRepresentation(
 				'core/edit-site/toggle-list-view'
 			),
+			isVisualMode: getEditorMode() === 'visual',
 		};
 	}, [] );
 
@@ -111,6 +114,7 @@ export default function Header( {
 						variant="primary"
 						isPressed={ isInserterOpen }
 						className="edit-site-header-toolbar__inserter-toggle"
+						disabled={ ! isVisualMode }
 						onMouseDown={ preventDefault }
 						onClick={ openInserter }
 						icon={ plus }
@@ -121,11 +125,15 @@ export default function Header( {
 					/>
 					{ isLargeViewport && (
 						<>
-							<ToolSelector />
+							<ToolbarItem
+								as={ ToolSelector }
+								disabled={ ! isVisualMode }
+							/>
 							<UndoButton />
 							<RedoButton />
 							<Button
 								className="edit-site-header-toolbar__list-view-toggle"
+								disabled={ ! isVisualMode }
 								icon={ listView }
 								isPressed={ isListViewOpen }
 								/* translators: button label text should, if possible, be under 16 characters. */

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

@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MenuItemsChoice, MenuGroup } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+
+/**
+ * Internal dependencies
+ */
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+
+/**
+ * Set of available mode options.
+ *
+ * @type {Array}
+ */
+const MODES = [
+	{
+		value: 'visual',
+		label: __( 'Visual editor' ),
+	},
+	{
+		value: 'text',
+		label: __( 'Code editor' ),
+	},
+];
+
+function ModeSwitcher() {
+	const { shortcut, mode } = useSelect(
+		( select ) => ( {
+			shortcut: select(
+				keyboardShortcutsStore
+			).getShortcutRepresentation( 'core/edit-site/toggle-mode' ),
+			isRichEditingEnabled: select( editSiteStore ).getSettings()
+				.richEditingEnabled,
+			isCodeEditingEnabled: select( editSiteStore ).getSettings()
+				.codeEditingEnabled,
+			mode: select( editSiteStore ).getEditorMode(),
+		} ),
+		[]
+	);
+	const { switchEditorMode } = useDispatch( editSiteStore );
+
+	const choices = MODES.map( ( choice ) => {
+		if ( choice.value !== mode ) {
+			return { ...choice, shortcut };
+		}
+		return choice;
+	} );
+
+	return (
+		<MenuGroup label={ __( 'Editor' ) }>
+			<MenuItemsChoice
+				choices={ choices }
+				value={ mode }
+				onSelect={ switchEditorMode }
+			/>
+		</MenuGroup>
+	);
+}
+
+export default ModeSwitcher;

package/src/components/header/more-menu/copy-content-menu-item.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { useCopyToClipboard } from '@wordpress/compose';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
+import { __unstableSerializeAndClean } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+
+export default function CopyContentMenuItem() {
+	const { createNotice } = useDispatch( noticesStore );
+	const getText = useSelect( ( select ) => {
+		return () => {
+			const { getEditedPostId, getEditedPostType } = select(
+				editSiteStore
+			);
+			const { getEditedEntityRecord } = select( coreStore );
+			const record = getEditedEntityRecord(
+				'postType',
+				getEditedPostType(),
+				getEditedPostId()
+			);
+			if ( record ) {
+				if ( typeof record.content === 'function' ) {
+					return record.content( record );
+				} else if ( record.blocks ) {
+					return __unstableSerializeAndClean( record.blocks );
+				} else if ( record.content ) {
+					return record.content;
+				}
+			}
+			return '';
+		};
+	}, [] );
+
+	function onSuccess() {
+		createNotice( 'info', __( 'All content copied.' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	}
+
+	const ref = useCopyToClipboard( getText, onSuccess );
+
+	return <MenuItem ref={ ref }>{ __( 'Copy all content' ) }</MenuItem>;
+}

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

@@ -22,6 +22,8 @@ import FeatureToggle from '../feature-toggle';
 import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
+import CopyContentMenuItem from './copy-content-menu-item';
+import ModeSwitcher from '../mode-switcher';
 
 const POPOVER_PROPS = {
 	className: 'edit-site-more-menu__content',
@@ -75,6 +77,7 @@ export default function MoreMenu() {
 									'Spotlight mode deactivated'
 								) }
 							/>
+							<ModeSwitcher />
 							<ActionItem.Slot
 								name="core/edit-site/plugin-more-menu"
 								label={ __( 'Plugins' ) }
@@ -91,6 +94,7 @@ export default function MoreMenu() {
 								{ __( 'Keyboard shortcuts' ) }
 							</MenuItem>
 							<WelcomeGuideMenuItem />
+							<CopyContentMenuItem />
 							<MenuItem
 								icon={ external }
 								role="menuitem"

package/src/components/header/style.scss

@@ -25,6 +25,8 @@ $header-toolbar-min-width: 335px;
 		display: flex;
 		align-items: center;
 		height: 100%;
+		flex-grow: 1;
+		justify-content: center;
 		// Flex items will, by default, refuse to shrink below a minimum
 		// intrinsic width. In order to shrink this flexbox item, and
 		// subsequently truncate child text, we set an explicit min-width.
@@ -109,7 +111,6 @@ body.is-navigation-sidebar-open {
 .edit-site-header__actions {
 	display: inline-flex;
 	align-items: center;
-	flex-wrap: wrap;
 	padding-right: $grid-unit-05;
 
 	.interface-pinned-items {

package/src/components/keyboard-shortcuts/index.js

@@ -23,6 +23,7 @@ function KeyboardShortcuts( { openEntitiesSavedStates } ) {
 		__experimentalGetDirtyEntityRecords,
 		isSavingEntityRecord,
 	} = useSelect( coreStore );
+	const { getEditorMode } = useSelect( editSiteStore );
 	const isListViewOpen = useSelect(
 		( select ) => select( editSiteStore ).isListViewOpened(),
 		[]
@@ -35,7 +36,9 @@ function KeyboardShortcuts( { openEntitiesSavedStates } ) {
 		[]
 	);
 	const { redo, undo } = useDispatch( coreStore );
-	const { setIsListViewOpened } = useDispatch( editSiteStore );
+	const { setIsListViewOpened, switchEditorMode } = useDispatch(
+		editSiteStore
+	);
 	const { enableComplementaryArea, disableComplementaryArea } = useDispatch(
 		interfaceStore
 	);
@@ -80,6 +83,10 @@ function KeyboardShortcuts( { openEntitiesSavedStates } ) {
 		}
 	} );
 
+	useShortcut( 'core/edit-site/toggle-mode', () => {
+		switchEditorMode( getEditorMode() === 'visual' ? 'text' : 'visual' );
+	} );
+
 	return null;
 }
 
@@ -178,6 +185,15 @@ function KeyboardShortcutsRegister() {
 				},
 			],
 		} );
+		registerShortcut( {
+			name: 'core/edit-site/toggle-mode',
+			category: 'global',
+			description: __( 'Switch between visual editor and code editor.' ),
+			keyCombination: {
+				modifier: 'secondary',
+				character: 'm',
+			},
+		} );
 	}, [ registerShortcut ] );
 
 	return null;