@wordpress/edit-site 4.9.0 → 4.12.0

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

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import { get, find, isString } from 'lodash';
+import { get, find } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { getTypographyFontSizeValue } from './typography-utils';
 
 /* Supporting data. */
 export const ROOT_BLOCK_NAME = 'root';
@@ -58,6 +63,8 @@ export const PRESET_METADATA = [
 	},
 	{
 		path: [ 'typography', 'fontSizes' ],
+		valueFunc: ( preset, { typography: typographySettings } ) =>
+			getTypographyFontSizeValue( preset, typographySettings ),
 		valueKey: 'size',
 		cssVarInfix: 'font-size',
 		classes: [ { classSuffix: 'font-size', propertyName: 'font-size' } ],
@@ -78,6 +85,9 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'elements.link.color.text': 'color',
 	'elements.button.color.text': 'color',
 	'elements.button.backgroundColor': 'background-color',
+	'elements.heading.color': 'color',
+	'elements.heading.backgroundColor': 'background-color',
+	'elements.heading.gradient': 'gradient',
 	'color.gradient': 'gradient',
 	'typography.fontSize': 'font-size',
 	'typography.fontFamily': 'font-family',
@@ -213,7 +223,7 @@ function getValueFromCustomVariable( features, blockName, variable, path ) {
 }
 
 export function getValueFromVariable( features, blockName, variable ) {
-	if ( ! variable || ! isString( variable ) ) {
+	if ( ! variable || typeof variable !== 'string' ) {
 		return variable;
 	}
 	const USER_VALUE_PREFIX = 'var:';
@@ -255,3 +265,34 @@ export function getValueFromVariable( features, blockName, variable ) {
 	}
 	return variable;
 }
+
+/**
+ * Function that scopes a selector with another one. This works a bit like
+ * SCSS nesting except the `&` operator isn't supported.
+ *
+ * @example
+ * ```js
+ * const scope = '.a, .b .c';
+ * const selector = '> .x, .y';
+ * const merged = scopeSelector( scope, selector );
+ * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
+ * ```
+ *
+ * @param {string} scope    Selector to scope to.
+ * @param {string} selector Original selector.
+ *
+ * @return {string} Scoped selector.
+ */
+export function scopeSelector( scope, selector ) {
+	const scopes = scope.split( ',' );
+	const selectors = selector.split( ',' );
+
+	const selectorsScoped = [];
+	scopes.forEach( ( outer ) => {
+		selectors.forEach( ( inner ) => {
+			selectorsScoped.push( `${ outer.trim() } ${ inner.trim() }` );
+		} );
+	} );
+
+	return selectorsScoped.join( ', ' );
+}

package/src/components/header/index.js

@@ -11,8 +11,14 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
 import { _x, __ } from '@wordpress/i18n';
-import { listView, plus } from '@wordpress/icons';
-import { Button, ToolbarItem } from '@wordpress/components';
+import { listView, plus, external } from '@wordpress/icons';
+import {
+	Button,
+	ToolbarItem,
+	MenuGroup,
+	MenuItem,
+	VisuallyHidden,
+} 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';
@@ -48,6 +54,7 @@ export default function Header( {
 		listViewShortcut,
 		isLoaded,
 		isVisualMode,
+		settings,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -56,6 +63,7 @@ export default function Header( {
 			isInserterOpened,
 			isListViewOpened,
 			getEditorMode,
+			getSettings,
 		} = select( editSiteStore );
 		const { getEditedEntityRecord } = select( coreStore );
 		const { __experimentalGetTemplateInfo: getTemplateInfo } =
@@ -79,6 +87,7 @@ export default function Header( {
 				'core/edit-site/toggle-list-view'
 			),
 			isVisualMode: getEditorMode() === 'visual',
+			settings: getSettings(),
 		};
 	}, [] );
 
@@ -106,6 +115,13 @@ export default function Header( {
 
 	const isFocusMode = templateType === 'wp_template_part';
 
+	/* translators: button label text should, if possible, be under 16 characters. */
+	const longLabel = _x(
+		'Toggle block inserter',
+		'Generic label for block inserter button'
+	);
+	const shortLabel = ! isInserterOpen ? __( 'Add' ) : __( 'Close' );
+
 	return (
 		<div className="edit-site-header">
 			<NavigableToolbar
@@ -123,17 +139,9 @@ export default function Header( {
 						onClick={ openInserter }
 						disabled={ ! isVisualMode }
 						icon={ plus }
-						/* translators: button label text should, if possible, be under 16
-				characters. */
-						label={ _x(
-							'Toggle block inserter',
-							'Generic label for block inserter button'
-						) }
+						label={ showIconLabels ? shortLabel : longLabel }
 						showTooltip={ ! showIconLabels }
-					>
-						{ showIconLabels &&
-							( ! isInserterOpen ? __( 'Add' ) : __( 'Close' ) ) }
-					</ToolbarItem>
+					/>
 					{ isLargeViewport && (
 						<>
 							<ToolbarItem
@@ -201,7 +209,23 @@ export default function Header( {
 						<PreviewOptions
 							deviceType={ deviceType }
 							setDeviceType={ setPreviewDeviceType }
-						/>
+						>
+							<MenuGroup>
+								<MenuItem
+									href={ settings?.siteUrl }
+									target="_blank"
+									icon={ external }
+								>
+									{ __( 'View site' ) }
+									<VisuallyHidden as="span">
+										{
+											/* translators: accessibility text */
+											__( '(opens in a new tab)' )
+										}
+									</VisuallyHidden>
+								</MenuItem>
+							</MenuGroup>
+						</PreviewOptions>
 					) }
 					<SaveButton
 						openEntitiesSavedStates={ openEntitiesSavedStates }

package/src/components/header/style.scss

@@ -226,15 +226,17 @@ body.is-navigation-sidebar-open {
 		padding-right: 6px;
 	}
 
-	// The inserter and the template details toggle have custom labels, different from their aria-label, so we don't want to display both.
-	.edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle,
+	// The template details toggle has a custom label, different from its aria-label, so we don't want to display both.
 	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
 		&::after {
 			content: none;
 		}
+	}
 
+	.edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle,
+	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
 		height: 36px;
-		padding: 0 6px;
+		padding: 0 $grid-unit-10;
 	}
 
 	.edit-site-header_start .edit-site-header__toolbar > * + * {

package/src/components/header/undo-redo/redo.js

@@ -5,11 +5,15 @@ import { __, isRTL } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
-import { displayShortcut } from '@wordpress/keycodes';
+import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
 import { forwardRef } from '@wordpress/element';
 
 function RedoButton( props, ref ) {
+	const shortcut = isAppleOS()
+		? displayShortcut.primaryShift( 'z' )
+		: displayShortcut.primary( 'y' );
+
 	const hasRedo = useSelect(
 		( select ) => select( coreStore ).hasRedo(),
 		[]
@@ -21,7 +25,7 @@ function RedoButton( props, ref ) {
 			ref={ ref }
 			icon={ ! isRTL() ? redoIcon : undoIcon }
 			label={ __( 'Redo' ) }
-			shortcut={ displayShortcut.primaryShift( 'z' ) }
+			shortcut={ shortcut }
 			// If there are no undo levels we don't want to actually disable this
 			// button, because it will remove focus for keyboard users.
 			// See: https://github.com/WordPress/gutenberg/issues/3486

package/src/components/keyboard-shortcut-help-modal/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -34,7 +33,7 @@ const ShortcutList = ( { shortcuts } ) => (
 				className="edit-site-keyboard-shortcut-help-modal__shortcut"
 				key={ index }
 			>
-				{ isString( shortcut ) ? (
+				{ typeof shortcut === 'string' ? (
 					<DynamicShortcut name={ shortcut } />
 				) : (
 					<Shortcut { ...shortcut } />

package/src/components/keyboard-shortcut-help-modal/style.scss

@@ -3,11 +3,6 @@
 		margin: 0 0 2rem 0;
 	}
 
-	&__main-shortcuts .edit-site-keyboard-shortcut-help-modal__shortcut-list {
-		// Push the shortcut to be flush with top modal header.
-		margin-top: -$grid-unit-30 -$border-width;
-	}
-
 	&__section-title {
 		font-size: 0.9rem;
 		font-weight: 600;

package/src/components/list/actions/index.js

@@ -79,7 +79,9 @@ export default function Actions( { template } ) {
 					) }
 					{ isRevertable && (
 						<MenuItem
-							info={ __( 'Restore to default state' ) }
+							info={ __(
+								'Use the template as supplied by the theme.'
+							) }
 							onClick={ () => {
 								revertAndSaveTemplate();
 								onClose();

package/src/components/list/style.scss

@@ -131,14 +131,6 @@
 			width: $grid-unit * 40;
 		}
 	}
-
-	.components-modal__header {
-		border-bottom: none;
-	}
-
-	.components-modal__content::before {
-		margin-bottom: $grid-unit-05;
-	}
 }
 
 .edit-site-list__rename-modal-actions {

package/src/components/save-button/index.js

@@ -30,18 +30,15 @@ export default function SaveButton( {
 	const disabled = ! isDirty || isSaving;
 
 	return (
-		<>
-			<Button
-				variant="primary"
-				className="edit-site-save-button__button"
-				aria-disabled={ disabled }
-				aria-expanded={ isEntitiesSavedStatesOpen }
-				disabled={ disabled }
-				isBusy={ isSaving }
-				onClick={ disabled ? undefined : openEntitiesSavedStates }
-			>
-				{ __( 'Save' ) }
-			</Button>
-		</>
+		<Button
+			variant="primary"
+			className="edit-site-save-button__button"
+			aria-disabled={ disabled }
+			aria-expanded={ isEntitiesSavedStatesOpen }
+			isBusy={ isSaving }
+			onClick={ disabled ? undefined : openEntitiesSavedStates }
+		>
+			{ __( 'Save' ) }
+		</Button>
 	);
 }

package/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js

@@ -48,9 +48,5 @@ export default function NavigationMenu( { innerBlocks, id } ) {
 			}
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
-	return (
-		<>
-			<ListView id={ id } />
-		</>
-	);
+	return <ListView id={ id } />;
 }

package/src/components/sidebar/style.scss

@@ -60,6 +60,10 @@
 	grid-column: span 1;
 }
 
+.edit-site-global-styles-sidebar .components-tools-panel .span-columns {
+	grid-column: 1 / -1;
+}
+
 .edit-site-global-styles-sidebar__blocks-group {
 	padding-top: $grid-unit-30;
 	border-top: $border-width solid $gray-200;

package/src/components/sidebar/template-card/template-actions.js

@@ -28,7 +28,9 @@ export default function Actions( { template } ) {
 			{ ( { onClose } ) => (
 				<MenuGroup>
 					<MenuItem
-						info={ __( 'Restore to default state' ) }
+						info={ __(
+							'Use the template as supplied by the theme.'
+						) }
 						onClick={ () => {
 							revertTemplate( template );
 							onClose();

package/src/components/template-details/edit-template-title.js

@@ -4,8 +4,10 @@
 import { __ } from '@wordpress/i18n';
 import { TextControl } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
 
 export default function EditTemplateTitle( { template } ) {
+	const [ forceEmpty, setForceEmpty ] = useState( false );
 	const [ title, setTitle ] = useEntityProp(
 		'postType',
 		template.type,
@@ -16,13 +18,19 @@ export default function EditTemplateTitle( { template } ) {
 	return (
 		<TextControl
 			label={ __( 'Title' ) }
-			value={ title }
+			value={ forceEmpty ? '' : title }
 			help={ __(
 				'Give the template a title that indicates its purpose, e.g. "Full Width".'
 			) }
 			onChange={ ( newTitle ) => {
-				setTitle( newTitle || template.slug );
+				if ( ! newTitle && ! forceEmpty ) {
+					setForceEmpty( true );
+					return;
+				}
+				setForceEmpty( false );
+				setTitle( newTitle );
 			} }
+			onBlur={ () => setForceEmpty( false ) }
 		/>
 	);
 }

package/src/components/template-details/index.js

@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
-import { sprintf, __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	Button,
 	MenuGroup,
@@ -17,10 +16,6 @@ import { store as editorStore } from '@wordpress/editor';
  * Internal dependencies
  */
 import isTemplateRevertable from '../../utils/is-template-revertable';
-import {
-	MENU_TEMPLATES,
-	TEMPLATE_PARTS_SUB_MENUS,
-} from '../navigation-sidebar/navigation-panel/constants';
 import { store as editSiteStore } from '../../store';
 import TemplateAreas from './template-areas';
 import EditTemplateTitle from './edit-template-title';
@@ -34,16 +29,6 @@ export default function TemplateDetails( { template, onClose } ) {
 	);
 	const { revertTemplate } = useDispatch( editSiteStore );
 
-	const templateSubMenu = useMemo( () => {
-		if ( template?.type === 'wp_template' ) {
-			return { title: __( 'templates' ), menu: MENU_TEMPLATES };
-		}
-
-		return TEMPLATE_PARTS_SUB_MENUS.find(
-			( { area } ) => area === template?.area
-		);
-	}, [ template ] );
-
 	const browseAllLinkProps = useLink( {
 		// TODO: We should update this to filter by template part's areas as well.
 		postType: template.type,
@@ -94,7 +79,9 @@ export default function TemplateDetails( { template, onClose } ) {
 				<MenuGroup className="edit-site-template-details__group edit-site-template-details__revert">
 					<MenuItem
 						className="edit-site-template-details__revert-button"
-						info={ __( 'Restore template to default state' ) }
+						info={ __(
+							'Use the template as supplied by the theme.'
+						) }
 						onClick={ revert }
 					>
 						{ __( 'Clear customizations' ) }
@@ -106,11 +93,9 @@ export default function TemplateDetails( { template, onClose } ) {
 				className="edit-site-template-details__show-all-button"
 				{ ...browseAllLinkProps }
 			>
-				{ sprintf(
-					/* translators: the template part's area name ("Headers", "Sidebars") or "templates". */
-					__( 'Browse all %s' ),
-					templateSubMenu.title
-				) }
+				{ template?.type === 'wp_template'
+					? __( 'Browse all templates' )
+					: __( 'Browse all template parts' ) }
 			</Button>
 		</div>
 	);

package/src/components/template-details/template-areas.js

@@ -59,7 +59,9 @@ function TemplatePartItemMore( {
 			{ isTemplateRevertable( templatePart ) && (
 				<MenuGroup>
 					<MenuItem
-						info={ __( 'Restore template to default state' ) }
+						info={ __(
+							'Use the template part as supplied by the theme.'
+						) }
 						onClick={ clearCustomizations }
 					>
 						{ __( 'Clear customizations' ) }

package/src/components/template-part-converter/convert-to-template-part.js

@@ -17,6 +17,7 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
+import { symbolFilled } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -65,11 +66,12 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 			<BlockSettingsMenuControls>
 				{ () => (
 					<MenuItem
+						icon={ symbolFilled }
 						onClick={ () => {
 							setIsModalOpen( true );
 						} }
 					>
-						{ __( 'Make template part' ) }
+						{ __( 'Create Template part' ) }
 					</MenuItem>
 				) }
 			</BlockSettingsMenuControls>

package/src/components/test/error-boundary.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import * as wpHooks from '@wordpress/hooks';
+/**
+ * Internal dependencies
+ */
+import ErrorBoundary from '../error-boundary';
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+const theError = new Error( 'Kaboom' );
+
+const ChildComponent = () => {
+	throw theError;
+};
+
+describe( 'Error Boundary', () => {
+	describe( 'when error is thrown from a Child component', () => {
+		it( 'calls the `editor.ErrorBoundary.errorLogged` hook action with the error object', () => {
+			const doAction = jest.spyOn( wpHooks, 'doAction' );
+
+			render(
+				<ErrorBoundary>
+					<ChildComponent />
+				</ErrorBoundary>
+			);
+
+			expect( doAction ).toHaveBeenCalledWith(
+				'editor.ErrorBoundary.errorLogged',
+				theError
+			);
+			expect( console ).toHaveErrored();
+		} );
+	} );
+} );

package/src/hooks/index.js

@@ -2,3 +2,4 @@
  * Internal dependencies
  */
 import './components';
+import './template-part-edit';

package/src/hooks/template-part-edit.js

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { BlockControls } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { ToolbarButton } from '@wordpress/components';
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { useLocation } from '../components/routes';
+import { useLink } from '../components/routes/link';
+
+function EditTemplatePartMenuItem( { attributes } ) {
+	const { theme, slug } = attributes;
+	const { params } = useLocation();
+	const templatePart = useSelect(
+		( select ) => {
+			return select( coreStore ).getEntityRecord(
+				'postType',
+				'wp_template_part',
+				// Ideally this should be an official public API.
+				`${ theme }//${ slug }`
+			);
+		},
+		[ theme, slug ]
+	);
+
+	const linkProps = useLink(
+		{
+			postId: templatePart?.id,
+			postType: templatePart?.type,
+		},
+		{
+			fromTemplateId: params.postId,
+		}
+	);
+
+	if ( ! templatePart ) {
+		return null;
+	}
+
+	return (
+		<BlockControls group="other">
+			<ToolbarButton
+				{ ...linkProps }
+				onClick={ ( event ) => {
+					linkProps.onClick( event );
+				} }
+			>
+				{ __( 'Edit' ) }
+			</ToolbarButton>
+		</BlockControls>
+	);
+}
+
+export const withEditBlockControls = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const { attributes, name } = props;
+		const isDisplayed = name === 'core/template-part' && attributes.slug;
+
+		return (
+			<>
+				<BlockEdit { ...props } />
+				{ isDisplayed && (
+					<EditTemplatePartMenuItem attributes={ attributes } />
+				) }
+			</>
+		);
+	},
+	'withEditBlockControls'
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/edit-site/template-part-edit-button',
+	withEditBlockControls
+);

package/src/store/selectors.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map, keyBy } from 'lodash';
+import { map } from 'lodash';
 import createSelector from 'rememo';
 
 /**
@@ -341,10 +341,16 @@ export const getCurrentTemplateTemplateParts = createRegistrySelector(
 			'wp_template_part',
 			{ per_page: -1 }
 		);
-		const templatePartsById = keyBy(
-			templateParts,
-			( templatePart ) => templatePart.id
-		);
+		const templatePartsById = templateParts
+			? // Key template parts by their ID.
+			  templateParts.reduce(
+					( newTemplateParts, part ) => ( {
+						...newTemplateParts,
+						[ part.id ]: part,
+					} ),
+					{}
+			  )
+			: {};
 
 		return ( template.blocks ?? [] )
 			.filter( ( block ) => isTemplatePart( block ) )

package/src/style.scss

@@ -26,7 +26,6 @@ html.wp-toolbar {
 	background: $white;
 }
 
-body.appearance_page_gutenberg-edit-site,
 body.site-editor-php {
 	@include wp-admin-reset(".edit-site");
 }