@wordpress/edit-site 5.5.0 → 5.7.0

package/src/components/add-new-template/new-template.js

@@ -5,7 +5,8 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
-	NavigableMenu,
+	Tooltip,
+	VisuallyHidden,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
@@ -97,9 +98,7 @@ export default function NewTemplate( {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
-	const { setTemplate, setCanvasMode } = unlock(
-		useDispatch( editSiteStore )
-	);
+	const { setTemplate } = unlock( useDispatch( editSiteStore ) );
 	async function createTemplate( template, isWPSuggestion = true ) {
 		if ( isCreatingTemplate ) {
 			return;
@@ -124,20 +123,19 @@ export default function NewTemplate( {
 
 			// Set template before navigating away to avoid initial stale value.
 			setTemplate( newTemplate.id, newTemplate.slug );
-			// Switch to edit mode.
-			setCanvasMode( 'edit' );
 
 			// Navigate to the created template editor.
 			history.push( {
 				postId: newTemplate.id,
 				postType: newTemplate.type,
+				canvas: 'edit',
 			} );
 
 			createSuccessNotice(
 				sprintf(
 					// translators: %s: Title of the created template e.g: "Category".
 					__( '"%s" successfully created.' ),
-					title
+					newTemplate.title?.rendered || title
 				),
 				{
 					type: 'snackbar',
@@ -164,6 +162,11 @@ export default function NewTemplate( {
 	if ( ! missingTemplates.length ) {
 		return null;
 	}
+
+	const customTemplateDescription = __(
+		'A custom template can be manually applied to any post or page.'
+	);
+
 	return (
 		<>
 			<DropdownMenu
@@ -181,7 +184,7 @@ export default function NewTemplate( {
 						{ isCreatingTemplate && (
 							<TemplateActionsLoadingScreen />
 						) }
-						<NavigableMenu className="edit-site-new-template-dropdown__popover">
+						<div className="edit-site-new-template-dropdown__menu-groups">
 							<MenuGroup label={ postType.labels.add_new_item }>
 								{ missingTemplates.map( ( template ) => {
 									const {
@@ -192,44 +195,63 @@ export default function NewTemplate( {
 										icon,
 									} = template;
 									return (
-										<MenuItem
-											icon={
-												icon ||
-												TEMPLATE_ICONS[ slug ] ||
-												post
-											}
-											iconPosition="left"
-											info={ description }
+										<Tooltip
 											key={ slug }
-											onClick={ () =>
-												onClick
-													? onClick( template )
-													: createTemplate( template )
-											}
+											position="top right"
+											text={ description }
+											className="edit-site-new-template-dropdown__menu-item-tooltip"
 										>
-											{ title }
-										</MenuItem>
+											<MenuItem
+												icon={
+													icon ||
+													TEMPLATE_ICONS[ slug ] ||
+													post
+												}
+												iconPosition="left"
+												onClick={ () =>
+													onClick
+														? onClick( template )
+														: createTemplate(
+																template
+														  )
+												}
+											>
+												{ title }
+												{ /* TODO: This probably won't be needed if the <Tooltip> component is accessible.
+												 * @see https://github.com/WordPress/gutenberg/issues/48222 */ }
+												<VisuallyHidden>
+													{ description }
+												</VisuallyHidden>
+											</MenuItem>
+										</Tooltip>
 									);
 								} ) }
 							</MenuGroup>
 							<MenuGroup>
-								<MenuItem
-									icon={ customGenericTemplateIcon }
-									iconPosition="left"
-									info={ __(
-										'Custom templates can be applied to any post or page.'
-									) }
-									key="custom-template"
-									onClick={ () =>
-										setShowCustomGenericTemplateModal(
-											true
-										)
-									}
+								<Tooltip
+									position="top right"
+									text={ customTemplateDescription }
+									className="edit-site-new-template-dropdown__menu-item-tooltip"
 								>
-									{ __( 'Custom template' ) }
-								</MenuItem>
+									<MenuItem
+										icon={ customGenericTemplateIcon }
+										iconPosition="left"
+										onClick={ () =>
+											setShowCustomGenericTemplateModal(
+												true
+											)
+										}
+									>
+										{ __( 'Custom template' ) }
+										{ /* TODO: This probably won't be needed if the <Tooltip> component is accessible.
+										 * @see https://github.com/WordPress/gutenberg/issues/48222 */ }
+										<VisuallyHidden>
+											{ customTemplateDescription }
+										</VisuallyHidden>
+									</MenuItem>
+								</Tooltip>
 							</MenuGroup>
-						</NavigableMenu>
+						</div>
 					</>
 				) }
 			</DropdownMenu>

package/src/components/add-new-template/style.scss

@@ -1,9 +1,20 @@
 .edit-site-new-template-dropdown {
-	.edit-site-new-template-dropdown__popover {
+	.edit-site-new-template-dropdown__menu-groups {
 		@include break-small() {
 			min-width: 300px;
 		}
 	}
+
+	// The specificity is needed to override the default tooltip styles.
+	&__menu-item-tooltip.components-tooltip .components-popover__content {
+		max-width: 320px;
+		padding: $grid-unit-10 $grid-unit-15;
+		border-radius: 2px;
+		white-space: pre-wrap;
+		min-width: 0;
+		width: auto;
+		text-align: left;
+	}
 }
 
 .edit-site-custom-template-modal {

package/src/components/add-new-template/utils.js

@@ -146,7 +146,7 @@ export function usePostTypeArchiveMenuItems() {
 						description: sprintf(
 							// translators: %s: Name of the post type e.g: "Post".
 							__(
-								'Displays an archive with the latests posts of type: %s.'
+								'Displays an archive with the latest posts of type: %s.'
 							),
 							postType.labels.singular_name
 						),

package/src/components/app/index.js

@@ -14,6 +14,7 @@ import { PluginArea } from '@wordpress/plugins';
  */
 import { Routes } from '../routes';
 import Layout from '../layout';
+import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 
 export default function App() {
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -33,12 +34,14 @@ export default function App() {
 	return (
 		<ShortcutProvider style={ { height: '100%' } }>
 			<SlotFillProvider>
-				<Popover.Slot />
-				<UnsavedChangesWarning />
-				<Routes>
-					<Layout />
-					<PluginArea onError={ onPluginAreaError } />
-				</Routes>
+				<GlobalStylesProvider>
+					<Popover.Slot />
+					<UnsavedChangesWarning />
+					<Routes>
+						<Layout />
+						<PluginArea onError={ onPluginAreaError } />
+					</Routes>
+				</GlobalStylesProvider>
 			</SlotFillProvider>
 		</ShortcutProvider>
 	);

package/src/components/block-editor/editor-canvas.js

@@ -31,32 +31,13 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const deviceStyles = useResizeCanvas( deviceType );
 	const mouseMoveTypingRef = useMouseMoveTypingReset();
+
 	return (
 		<Iframe
 			expand={ isZoomOutMode }
 			scale={ ( isZoomOutMode && 0.45 ) || undefined }
 			frameSize={ isZoomOutMode ? 100 : undefined }
 			style={ enableResizing ? {} : deviceStyles }
-			head={
-				<>
-					<EditorStyles styles={ settings.styles } />
-					<style>{
-						// Forming a "block formatting context" to prevent margin collapsing.
-						// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-						`.is-root-container { display: flow-root; }
-							body { position: relative; }`
-					}</style>
-					{ enableResizing && (
-						<style>
-							{
-								// Some themes will have `min-height: 100vh` for the root container,
-								// which isn't a requirement in auto resize mode.
-								`.is-root-container { min-height: 0 !important; }`
-							}
-						</style>
-					) }
-				</>
-			}
 			ref={ mouseMoveTypingRef }
 			name="editor-canvas"
 			className="edit-site-visual-editor__editor-canvas"
@@ -69,8 +50,18 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			}
 			readonly={ canvasMode === 'view' }
 		>
-			{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
-			{ settings.svgFilters }
+			<EditorStyles styles={ settings.styles } />
+			<style>{
+				// Forming a "block formatting context" to prevent margin collapsing.
+				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+				`.is-root-container{display:flow-root;${
+					// Some themes will have `min-height: 100vh` for the root container,
+					// which isn't a requirement in auto resize mode.
+					enableResizing ? 'min-height:0!important;' : ''
+				}}body{position:relative; ${
+					canvasMode === 'view' ? 'cursor: pointer;' : ''
+				}}}`
+			}</style>
 			{ children }
 		</Iframe>
 	);

package/src/components/editor/index.js

@@ -32,7 +32,7 @@ import WelcomeGuide from '../welcome-guide';
 import StartTemplateOptions from '../start-template-options';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
-import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
+
 import useTitle from '../routes/use-title';
 import CanvasSpinner from '../canvas-spinner';
 import { unlock } from '../../private-apis';
@@ -157,70 +157,66 @@ export default function Editor() {
 					type={ editedPostType }
 					id={ editedPostId }
 				>
-					<GlobalStylesProvider>
-						<BlockContextProvider value={ blockContext }>
-							<SidebarComplementaryAreaFills />
-							{ isEditMode && <StartTemplateOptions /> }
-							<InterfaceSkeleton
-								enableRegionNavigation={ false }
-								className={
-									showIconLabels && 'show-icon-labels'
-								}
-								notices={ isEditMode && <EditorSnackbars /> }
-								content={
-									<>
-										<GlobalStylesRenderer />
-										{ isEditMode && <EditorNotices /> }
-										{ showVisualEditor && editedPost && (
-											<BlockEditor />
-										) }
-										{ editorMode === 'text' &&
-											editedPost &&
-											isEditMode && <CodeEditor /> }
-										{ hasLoadedPost && ! editedPost && (
-											<Notice
-												status="warning"
-												isDismissible={ false }
-											>
-												{ __(
-													"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
-												) }
-											</Notice>
-										) }
-										{ isEditMode && (
-											<KeyboardShortcutsEditMode />
-										) }
-									</>
-								}
-								secondarySidebar={
-									isEditMode &&
-									( ( shouldShowInserter && (
-										<InserterSidebar />
-									) ) ||
-										( shouldShowListView && (
-											<ListViewSidebar />
-										) ) )
-								}
-								sidebar={
-									isEditMode &&
-									isRightSidebarOpen && (
-										<ComplementaryArea.Slot scope="core/edit-site" />
-									)
-								}
-								footer={
-									showBlockBreakcrumb && (
-										<BlockBreadcrumb
-											rootLabelText={ __( 'Template' ) }
-										/>
-									)
-								}
-								labels={ {
-									...interfaceLabels,
-									secondarySidebar: secondarySidebarLabel,
-								} }
-							/>
-						</BlockContextProvider>
-					</GlobalStylesProvider>
+					<BlockContextProvider value={ blockContext }>
+						<SidebarComplementaryAreaFills />
+						{ isEditMode && <StartTemplateOptions /> }
+						<InterfaceSkeleton
+							enableRegionNavigation={ false }
+							className={ showIconLabels && 'show-icon-labels' }
+							notices={ isEditMode && <EditorSnackbars /> }
+							content={
+								<>
+									<GlobalStylesRenderer />
+									{ isEditMode && <EditorNotices /> }
+									{ showVisualEditor && editedPost && (
+										<BlockEditor />
+									) }
+									{ editorMode === 'text' &&
+										editedPost &&
+										isEditMode && <CodeEditor /> }
+									{ hasLoadedPost && ! editedPost && (
+										<Notice
+											status="warning"
+											isDismissible={ false }
+										>
+											{ __(
+												"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
+											) }
+										</Notice>
+									) }
+									{ isEditMode && (
+										<KeyboardShortcutsEditMode />
+									) }
+								</>
+							}
+							secondarySidebar={
+								isEditMode &&
+								( ( shouldShowInserter && (
+									<InserterSidebar />
+								) ) ||
+									( shouldShowListView && (
+										<ListViewSidebar />
+									) ) )
+							}
+							sidebar={
+								isEditMode &&
+								isRightSidebarOpen && (
+									<ComplementaryArea.Slot scope="core/edit-site" />
+								)
+							}
+							footer={
+								showBlockBreakcrumb && (
+									<BlockBreadcrumb
+										rootLabelText={ __( 'Template' ) }
+									/>
+								)
+							}
+							labels={ {
+								...interfaceLabels,
+								secondarySidebar: secondarySidebarLabel,
+							} }
+						/>
+					</BlockContextProvider>
 				</EntityProvider>
 			</EntityProvider>
 		</>

package/src/components/global-styles/border-panel.js

@@ -1,215 +1,40 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalBorderRadiusControl as BorderRadiusControl,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import {
-	__experimentalBorderBoxControl as BorderBoxControl,
-	__experimentalHasSplitBorders as hasSplitBorders,
-	__experimentalIsDefinedBorder as isDefinedBorder,
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { useSupportedStyles, useColorsPerOrigin } from './hooks';
 import { unlock } from '../../private-apis';
 
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-export function useHasBorderPanel( name ) {
-	const controls = [
-		useHasBorderColorControl( name ),
-		useHasBorderRadiusControl( name ),
-		useHasBorderStyleControl( name ),
-		useHasBorderWidthControl( name ),
-	];
-
-	return controls.some( Boolean );
-}
-
-function useHasBorderColorControl( name ) {
-	const supports = useSupportedStyles( name );
-	return (
-		useGlobalSetting( 'border.color', name )[ 0 ] &&
-		supports.includes( 'borderColor' )
-	);
-}
-
-function useHasBorderRadiusControl( name ) {
-	const supports = useSupportedStyles( name );
-	return (
-		useGlobalSetting( 'border.radius', name )[ 0 ] &&
-		supports.includes( 'borderRadius' )
-	);
-}
-
-function useHasBorderStyleControl( name ) {
-	const supports = useSupportedStyles( name );
-	return (
-		useGlobalSetting( 'border.style', name )[ 0 ] &&
-		supports.includes( 'borderStyle' )
-	);
-}
-
-function useHasBorderWidthControl( name ) {
-	const supports = useSupportedStyles( name );
-	return (
-		useGlobalSetting( 'border.width', name )[ 0 ] &&
-		supports.includes( 'borderWidth' )
-	);
-}
-
-function applyFallbackStyle( border ) {
-	if ( ! border ) {
-		return border;
-	}
-
-	if ( ! border.style && ( border.color || border.width ) ) {
-		return { ...border, style: 'solid' };
-	}
-
-	return border;
-}
-
-function applyAllFallbackStyles( border ) {
-	if ( ! border ) {
-		return border;
-	}
-
-	if ( hasSplitBorders( border ) ) {
-		return {
-			top: applyFallbackStyle( border.top ),
-			right: applyFallbackStyle( border.right ),
-			bottom: applyFallbackStyle( border.bottom ),
-			left: applyFallbackStyle( border.left ),
-		};
-	}
-
-	return applyFallbackStyle( border );
-}
+const {
+	useGlobalStyle,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+	BorderPanel: StylesBorderPanel,
+} = unlock( blockEditorPrivateApis );
 
 export default function BorderPanel( { name, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	// To better reflect if the user has customized a value we need to
-	// ensure the style value being checked is from the `user` origin.
-	const [ userBorderStyles ] = useGlobalStyle(
-		`${ prefix }border`,
-		name,
-		'user'
-	);
-	const [ border, setBorder ] = useGlobalStyle( `${ prefix }border`, name );
-	const colors = useColorsPerOrigin( name );
-
-	const showBorderColor = useHasBorderColorControl( name );
-	const showBorderStyle = useHasBorderStyleControl( name );
-	const showBorderWidth = useHasBorderWidthControl( name );
-
-	// Border radius.
-	const showBorderRadius = useHasBorderRadiusControl( name );
-	const [ borderRadiusValues, setBorderRadius ] = useGlobalStyle(
-		`${ prefix }border.radius`,
-		name
-	);
-	const hasBorderRadius = () => {
-		const borderValues = userBorderStyles?.radius;
-		if ( typeof borderValues === 'object' ) {
-			return Object.entries( borderValues ).some( Boolean );
-		}
-		return !! borderValues;
-	};
-
-	const resetBorder = () => {
-		if ( hasBorderRadius() ) {
-			return setBorder( { radius: userBorderStyles.radius } );
-		}
-
-		setBorder( undefined );
-	};
-
-	const resetAll = useCallback( () => setBorder( undefined ), [ setBorder ] );
-	const onBorderChange = useCallback(
-		( newBorder ) => {
-			// Ensure we have a visible border style when a border width or
-			// color is being selected.
-			const newBorderWithStyle = applyAllFallbackStyles( newBorder );
-
-			// As we can't conditionally generate styles based on if other
-			// style properties have been set we need to force split border
-			// definitions for user set border styles. Border radius is derived
-			// from the same property i.e. `border.radius` if it is a string
-			// that is used. The longhand border radii styles are only generated
-			// if that property is an object.
-			//
-			// For borders (color, style, and width) those are all properties on
-			// the `border` style property. This means if the theme.json defined
-			// split borders and the user condenses them into a flat border or
-			// vice-versa we'd get both sets of styles which would conflict.
-			const updatedBorder = ! hasSplitBorders( newBorderWithStyle )
-				? {
-						top: newBorderWithStyle,
-						right: newBorderWithStyle,
-						bottom: newBorderWithStyle,
-						left: newBorderWithStyle,
-				  }
-				: {
-						color: null,
-						style: null,
-						width: null,
-						...newBorderWithStyle,
-				  };
+	let prefixParts = [];
+	if ( variation ) {
+		prefixParts = [ 'variations', variation ].concat( prefixParts );
+	}
+	const prefix = prefixParts.join( '.' );
 
-			// As radius is maintained separately to color, style, and width
-			// maintain its value. Undefined values here will be cleaned when
-			// global styles are saved.
-			setBorder( { radius: border?.radius, ...updatedBorder } );
-		},
-		[ setBorder, border?.radius ]
-	);
+	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const settings = useSettingsForBlockElement( rawSettings, name );
 
 	return (
-		<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>
-			{ ( showBorderWidth || showBorderColor ) && (
-				<ToolsPanelItem
-					hasValue={ () => isDefinedBorder( userBorderStyles ) }
-					label={ __( 'Border' ) }
-					onDeselect={ () => resetBorder() }
-					isShownByDefault={ true }
-				>
-					<BorderBoxControl
-						colors={ colors }
-						enableAlpha={ true }
-						enableStyle={ showBorderStyle }
-						onChange={ onBorderChange }
-						popoverOffset={ 40 }
-						popoverPlacement="left-start"
-						value={ border }
-						__experimentalIsRenderedInSidebar={ true }
-						size={ '__unstable-large' }
-					/>
-				</ToolsPanelItem>
-			) }
-			{ showBorderRadius && (
-				<ToolsPanelItem
-					hasValue={ hasBorderRadius }
-					label={ __( 'Radius' ) }
-					onDeselect={ () => setBorderRadius( undefined ) }
-					isShownByDefault={ true }
-				>
-					<BorderRadiusControl
-						values={ borderRadiusValues }
-						onChange={ ( value ) => {
-							setBorderRadius( value || undefined );
-						} }
-					/>
-				</ToolsPanelItem>
-			) }
-		</ToolsPanel>
+		<StylesBorderPanel
+			inheritedValue={ inheritedStyle }
+			value={ style }
+			onChange={ setStyle }
+			settings={ settings }
+		/>
 	);
 }