@wordpress/edit-site 5.11.0 → 5.12.1

package/src/components/page-main/index.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import PageTemplates from '../page-templates';
+import PageLibrary from '../page-library';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+export default function PageMain() {
+	const {
+		params: { path },
+	} = useLocation();
+
+	if ( path === '/wp_template/all' ) {
+		return <PageTemplates />;
+	} else if ( path === '/library' ) {
+		return <PageLibrary />;
+	}
+
+	return null;
+}

package/src/components/page-templates/index.js

@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	VisuallyHidden,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import Table from '../table';
+import Link from '../routes/link';
+import AddedBy from '../list/added-by';
+import TemplateActions from '../template-actions';
+import AddNewTemplate from '../add-new-template';
+import { store as editSiteStore } from '../../store';
+
+export default function PageTemplates() {
+	const { records: templates } = useEntityRecords(
+		'postType',
+		'wp_template',
+		{
+			per_page: -1,
+		}
+	);
+
+	const { canCreate } = useSelect( ( select ) => {
+		const { supportsTemplatePartsMode } =
+			select( editSiteStore ).getSettings();
+		return {
+			postType: select( coreStore ).getPostType( 'wp_template' ),
+			canCreate: ! supportsTemplatePartsMode,
+		};
+	} );
+
+	const columns = [
+		{
+			header: __( 'Template' ),
+			cell: ( template ) => (
+				<VStack>
+					<Heading level={ 5 }>
+						<Link
+							params={ {
+								postId: template.id,
+								postType: template.type,
+								canvas: 'edit',
+							} }
+						>
+							{ decodeEntities(
+								template.title?.rendered || template.slug
+							) }
+						</Link>
+					</Heading>
+					{ template.description && (
+						<Text variant="muted">
+							{ decodeEntities( template.description ) }
+						</Text>
+					) }
+				</VStack>
+			),
+			maxWidth: 400,
+		},
+		{
+			header: __( 'Added by' ),
+			cell: ( template ) => (
+				<AddedBy postType={ template.type } postId={ template.id } />
+			),
+		},
+		{
+			header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
+			cell: ( template ) => (
+				<TemplateActions
+					postType={ template.type }
+					postId={ template.id }
+				/>
+			),
+		},
+	];
+
+	return (
+		<Page
+			title={ __( 'Templates' ) }
+			actions={
+				canCreate && (
+					<AddNewTemplate
+						templateType={ 'wp_template' }
+						showIcon={ false }
+						toggleProps={ { variant: 'primary' } }
+					/>
+				)
+			}
+		>
+			{ templates && <Table data={ templates } columns={ columns } /> }
+		</Page>
+	);
+}

package/src/components/resizable-frame/index.js

@@ -16,7 +16,7 @@ import { useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
 // Removes the inline styles in the drag handles.
@@ -76,6 +76,7 @@ function ResizableFrame( {
 	isReady,
 	children,
 	oversizedClassName,
+	innerContentStyle,
 } ) {
 	const [ frameSize, setFrameSize ] = useState( {
 		width: '100%',
@@ -171,6 +172,18 @@ function ResizableFrame( {
 		},
 	};
 
+	const resizeHandleVariants = {
+		default: {
+			opacity: 1,
+			left: -16,
+		},
+		resizing: {
+			opacity: 1,
+			left: -16,
+			scaleY: 1.3,
+		},
+	};
+
 	return (
 		<ResizableBox
 			as={ motion.div }
@@ -212,20 +225,18 @@ function ResizableFrame( {
 						<motion.div
 							key="handle"
 							className="edit-site-resizable-frame__handle"
+							variants={ resizeHandleVariants }
+							animate={ isResizing ? 'resizing' : 'default' }
 							title="Drag to resize"
 							initial={ {
 								opacity: 0,
 								left: 0,
 							} }
-							animate={ {
-								opacity: 1,
-								left: -15,
-							} }
 							exit={ {
 								opacity: 0,
 								left: 0,
 							} }
-							whileHover={ { scale: 1.1 } }
+							whileHover={ { scaleY: 1.3 } }
 						/>
 					) : null,
 			} }
@@ -243,6 +254,7 @@ function ResizableFrame( {
 					borderRadius: isFullWidth ? 0 : 8,
 				} }
 				transition={ FRAME_TRANSITION }
+				style={ innerContentStyle }
 			>
 				{ children }
 			</motion.div>

package/src/components/resizable-frame/style.scss

@@ -28,42 +28,44 @@
 }
 
 .edit-site-resizable-frame__handle {
-	position: absolute;
-	width: 5px;
-	height: 50px;
-	background-color: rgba(255, 255, 255, 0.3);
-	z-index: 100;
-	border-radius: 5px;
+	align-items: center;
+	background-color: rgba($gray-700, 0.4);
+	border-radius: $grid-unit-05;
 	cursor: col-resize;
 	display: flex;
-	align-items: center;
+	height: $grid-unit-80;
 	justify-content: flex-end;
-	top: 50%;
+	position: absolute;
+	top: calc(50% - #{$grid-unit-40});
+	width: $grid-unit-05;
+	z-index: 100;
+
 	&::before {
-		position: absolute;
-		left: 100%;
-		height: 100%;
-		width: $grid-unit-30;
 		content: "";
+		height: 100%;
+		left: 100%;
+		position: absolute;
+		width: $grid-unit-40;
 	}
 
 	&::after {
+		content: "";
+		height: 100%;
 		position: absolute;
 		right: 100%;
-		height: 100%;
-		width: $grid-unit-30;
-		content: "";
+		width: $grid-unit-40;
 	}
 
-	&:hover {
+	&:hover,
+	.is-resizing & {
 		background-color: var(--wp-admin-theme-color);
 	}
 
 	.edit-site-resizable-frame__handle-label {
-		border-radius: 2px;
 		background: var(--wp-admin-theme-color);
-		padding: 4px 8px;
+		border-radius: 2px;
 		color: #fff;
 		margin-right: $grid-unit-10;
+		padding: 4px 8px;
 	}
 }

package/src/components/revisions/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -23,13 +18,17 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider';
 import EditorCanvasContainer from '../editor-canvas-container';
 
 const { ExperimentalBlockEditorProvider, useGlobalStylesOutputWithConfig } =
 	unlock( blockEditorPrivateApis );
 
+function isObjectEmpty( object ) {
+	return ! object || Object.keys( object ).length === 0;
+}
+
 function Revisions( { onClose, userConfig, blocks } ) {
 	const { baseConfig } = useSelect(
 		( select ) => ( {
@@ -42,7 +41,7 @@ function Revisions( { onClose, userConfig, blocks } ) {
 	);
 
 	const mergedConfig = useMemo( () => {
-		if ( ! isEmpty( userConfig ) && ! isEmpty( baseConfig ) ) {
+		if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {
 			return mergeBaseAndUserConfigs( baseConfig, userConfig );
 		}
 		return {};
@@ -65,7 +64,7 @@ function Revisions( { onClose, userConfig, blocks } ) {
 	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
 
 	const editorStyles =
-		! isEmpty( globalStyles ) && ! isEmpty( userConfig )
+		! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )
 			? globalStyles
 			: settings.styles;
 

package/src/components/routes/link.js

@@ -7,7 +7,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import {
 	isPreviewingTheme,
 	currentlyPreviewingTheme,
@@ -37,7 +37,7 @@ export function useLink( params = {}, state, shouldReplace = false ) {
 	if ( isPreviewingTheme() ) {
 		params = {
 			...params,
-			theme_preview: currentlyPreviewingTheme(),
+			wp_theme_preview: currentlyPreviewingTheme(),
 		};
 	}
 

package/src/components/routes/use-title.js

@@ -12,7 +12,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
 

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

@@ -17,6 +17,7 @@ export default function SaveButton( {
 	className = 'edit-site-save-button__button',
 	variant = 'primary',
 	showTooltip = true,
+	defaultLabel,
 	icon,
 } ) {
 	const { isDirty, isSaving, isSaveViewOpen } = useSelect( ( select ) => {
@@ -38,16 +39,24 @@ export default function SaveButton( {
 	const disabled = isSaving || ! activateSaveEnabled;
 
 	const getLabel = () => {
-		if ( disabled ) {
-			return __( 'Saved' );
-		}
-
-		if ( isPreviewingTheme() && isDirty ) {
-			return __( 'Activate & Save' );
-		} else if ( isPreviewingTheme() ) {
+		if ( isPreviewingTheme() ) {
+			if ( isSaving ) {
+				return __( 'Activating' );
+			} else if ( disabled ) {
+				return __( 'Saved' );
+			} else if ( isDirty ) {
+				return __( 'Activate & Save' );
+			}
 			return __( 'Activate' );
 		}
 
+		if ( isSaving ) {
+			return __( 'Saving' );
+		} else if ( disabled ) {
+			return __( 'Saved' );
+		} else if ( defaultLabel ) {
+			return defaultLabel;
+		}
 		return __( 'Save' );
 	};
 	const label = getLabel();

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

@@ -1,60 +1,165 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { __experimentalHStack as HStack } from '@wordpress/components';
-import { sprintf, _n } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { Button, __experimentalHStack as HStack } from '@wordpress/components';
+import { __, sprintf, _n } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { check } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
 import SaveButton from '../save-button';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+const PUBLISH_ON_SAVE_ENTITIES = [
+	{
+		kind: 'postType',
+		name: 'wp_navigation',
+	},
+];
 
 export default function SaveHub() {
-	const { countUnsavedChanges, isDirty, isSaving } = useSelect(
-		( select ) => {
-			const {
-				__experimentalGetDirtyEntityRecords,
-				isSavingEntityRecord,
-			} = select( coreStore );
-			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-			return {
-				isDirty: dirtyEntityRecords.length > 0,
-				isSaving: dirtyEntityRecords.some( ( record ) =>
-					isSavingEntityRecord( record.kind, record.name, record.key )
-				),
-				countUnsavedChanges: dirtyEntityRecords.length,
-			};
-		},
-		[]
-	);
+	const { params } = useLocation();
+
+	const { __unstableMarkLastChangeAsPersistent } =
+		useDispatch( blockEditorStore );
+
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	const { dirtyCurrentEntity, countUnsavedChanges, isDirty, isSaving } =
+		useSelect(
+			( select ) => {
+				const {
+					__experimentalGetDirtyEntityRecords,
+					isSavingEntityRecord,
+				} = select( coreStore );
+				const dirtyEntityRecords =
+					__experimentalGetDirtyEntityRecords();
+				let calcDirtyCurrentEntity = null;
+
+				if ( dirtyEntityRecords.length === 1 ) {
+					// if we are on global styles
+					if ( params.path?.includes( 'wp_global_styles' ) ) {
+						calcDirtyCurrentEntity = dirtyEntityRecords.find(
+							( record ) => record.name === 'globalStyles'
+						);
+					}
+					// if we are on pages
+					else if ( params.postId ) {
+						calcDirtyCurrentEntity = dirtyEntityRecords.find(
+							( record ) =>
+								record.name === params.postType &&
+								String( record.key ) === params.postId
+						);
+					}
+				}
+
+				return {
+					dirtyCurrentEntity: calcDirtyCurrentEntity,
+					isDirty: dirtyEntityRecords.length > 0,
+					isSaving: dirtyEntityRecords.some( ( record ) =>
+						isSavingEntityRecord(
+							record.kind,
+							record.name,
+							record.key
+						)
+					),
+					countUnsavedChanges: dirtyEntityRecords.length,
+				};
+			},
+			[ params.path, params.postType, params.postId ]
+		);
+
+	const {
+		editEntityRecord,
+		saveEditedEntityRecord,
+		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
+	} = useDispatch( coreStore );
 
 	const disabled = isSaving || ( ! isDirty && ! isPreviewingTheme() );
 
+	// if we have only one unsaved change and it matches current context, we can show a more specific label
+	let label = dirtyCurrentEntity
+		? __( 'Save' )
+		: sprintf(
+				// translators: %d: number of unsaved changes (number).
+				_n(
+					'Review %d change…',
+					'Review %d changes…',
+					countUnsavedChanges
+				),
+				countUnsavedChanges
+		  );
+
+	if ( isSaving ) {
+		label = __( 'Saving' );
+	}
+
+	const saveCurrentEntity = async () => {
+		if ( ! dirtyCurrentEntity ) return;
+
+		const { kind, name, key, property } = dirtyCurrentEntity;
+
+		try {
+			if ( 'root' === dirtyCurrentEntity.kind && 'site' === name ) {
+				await saveSpecifiedEntityEdits( 'root', 'site', undefined, [
+					property,
+				] );
+			} else {
+				if (
+					PUBLISH_ON_SAVE_ENTITIES.some(
+						( typeToPublish ) =>
+							typeToPublish.kind === kind &&
+							typeToPublish.name === name
+					)
+				) {
+					editEntityRecord( kind, name, key, { status: 'publish' } );
+				}
+
+				await saveEditedEntityRecord( kind, name, key );
+			}
+
+			__unstableMarkLastChangeAsPersistent();
+
+			createSuccessNotice( __( 'Site updated.' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			createErrorNotice( `${ __( 'Saving failed.' ) } ${ error }` );
+		}
+	};
+
 	return (
 		<HStack className="edit-site-save-hub" alignment="right" spacing={ 4 }>
-			{ isDirty && (
-				<span>
-					{ sprintf(
-						// translators: %d: number of unsaved changes (number).
-						_n(
-							'%d unsaved change',
-							'%d unsaved changes',
-							countUnsavedChanges
-						),
-						countUnsavedChanges
-					) }
-				</span>
+			{ dirtyCurrentEntity ? (
+				<Button
+					variant="primary"
+					onClick={ saveCurrentEntity }
+					isBusy={ isSaving }
+					disabled={ isSaving }
+					aria-disabled={ isSaving }
+					className="edit-site-save-hub__button"
+				>
+					{ label }
+				</Button>
+			) : (
+				<SaveButton
+					className="edit-site-save-hub__button"
+					variant={ disabled ? null : 'primary' }
+					showTooltip={ false }
+					icon={ disabled && ! isSaving ? check : null }
+					defaultLabel={ label }
+				/>
 			) }
-			<SaveButton
-				className="edit-site-save-hub__button"
-				variant={ disabled ? null : 'primary' }
-				showTooltip={ false }
-				icon={ disabled ? check : null }
-			/>
 		</HStack>
 	);
 }

package/src/components/save-hub/style.scss

@@ -1,9 +1,15 @@
 .edit-site-save-hub {
 	color: $gray-600;
+	border-top: 1px solid $gray-800;
+	flex-shrink: 0;
+	margin: 0;
+	padding: $canvas-padding;
 }
 
 .edit-site-save-hub__button {
 	color: inherit;
+	width: 100%;
+	justify-content: center;
 
 	&[aria-disabled="true"] {
 		opacity: 1;