@wordpress/edit-site 5.3.6 → 5.5.0

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

@@ -4,9 +4,11 @@
 import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
+	BlockList,
+	BlockTools,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -34,9 +36,16 @@ const ALLOWED_BLOCKS = {
 		'core/navigation-link',
 		'core/navigation-submenu',
 	],
+	'core/page-list': [ 'core/page-list-item' ],
 };
 
 export default function NavigationMenu( { innerBlocks, onSelect } ) {
+	const { clientIdsTree } = useSelect( ( select ) => {
+		const { __unstableGetClientIdsTree } = select( blockEditorStore );
+		return {
+			clientIdsTree: __unstableGetClientIdsTree(),
+		};
+	} );
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 
 	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
@@ -56,11 +65,20 @@ export default function NavigationMenu( { innerBlocks, onSelect } ) {
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
 
+	// The hidden block is needed because it makes block edit side effects trigger.
+	// For example a navigation page list load its items has an effect on edit to load its items.
 	return (
-		<OffCanvasEditor
-			blocks={ innerBlocks }
-			onSelect={ onSelect }
-			LeafMoreMenu={ LeafMoreMenu }
-		/>
+		<>
+			<OffCanvasEditor
+				blocks={ clientIdsTree }
+				onSelect={ onSelect }
+				LeafMoreMenu={ LeafMoreMenu }
+			/>
+			<div style={ { display: 'none' } }>
+				<BlockTools>
+					<BlockList />
+				</BlockTools>
+			</div>
+		</>
 	);
 }

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

@@ -69,7 +69,7 @@ export function SidebarComplementaryAreaFills() {
 				identifier={ sidebarName }
 				title={ __( 'Settings' ) }
 				icon={ isRTL() ? drawerLeft : drawerRight }
-				closeLabel={ __( 'Close settings sidebar' ) }
+				closeLabel={ __( 'Close settings' ) }
 				header={ <SettingsHeader sidebarName={ sidebarName } /> }
 				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
 			>

package/src/components/sidebar-edit-mode/template-card/index.js

@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { Icon } from '@wordpress/components';
+import { PanelRow, Icon } from '@wordpress/components';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -13,6 +14,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { store as editSiteStore } from '../../../store';
 import TemplateActions from './template-actions';
 import TemplateAreas from './template-areas';
+import LastRevision from './last-revision';
 
 export default function TemplateCard() {
 	const {
@@ -38,20 +40,28 @@ export default function TemplateCard() {
 	}
 
 	return (
-		<div className="edit-site-template-card">
-			<Icon className="edit-site-template-card__icon" icon={ icon } />
-			<div className="edit-site-template-card__content">
-				<div className="edit-site-template-card__header">
-					<h2 className="edit-site-template-card__title">
-						{ decodeEntities( title ) }
-					</h2>
-					<TemplateActions template={ template } />
+		<>
+			<div className="edit-site-template-card">
+				<Icon className="edit-site-template-card__icon" icon={ icon } />
+				<div className="edit-site-template-card__content">
+					<div className="edit-site-template-card__header">
+						<h2 className="edit-site-template-card__title">
+							{ decodeEntities( title ) }
+						</h2>
+						<TemplateActions template={ template } />
+					</div>
+					<div className="edit-site-template-card__description">
+						{ decodeEntities( description ) }
+					</div>
+					<TemplateAreas />
 				</div>
-				<div className="edit-site-template-card__description">
-					{ decodeEntities( description ) }
-				</div>
-				<TemplateAreas />
 			</div>
-		</div>
+			<PanelRow
+				header={ __( 'Editing history' ) }
+				className="edit-site-template-revisions"
+			>
+				<LastRevision />
+			</PanelRow>
+		</>
 	);
 }

package/src/components/sidebar-edit-mode/template-card/last-revision.js

@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { sprintf, _n } from '@wordpress/i18n';
+import { backup } from '@wordpress/icons';
+import { addQueryArgs } from '@wordpress/url';
+import { PostTypeSupportCheck } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import useEditedEntityRecord from '../../use-edited-entity-record';
+
+const useRevisionData = () => {
+	const { record: currentTemplate } = useEditedEntityRecord();
+
+	const lastRevisionId =
+		currentTemplate?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
+
+	const revisionsCount =
+		( currentTemplate?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0 ) +
+		1;
+
+	return {
+		currentTemplate,
+		lastRevisionId,
+		revisionsCount,
+	};
+};
+
+function PostLastRevisionCheck( { children } ) {
+	const { lastRevisionId, revisionsCount } = useRevisionData();
+
+	if ( ! lastRevisionId || revisionsCount < 2 ) {
+		return null;
+	}
+
+	return (
+		<PostTypeSupportCheck supportKeys="revisions">
+			{ children }
+		</PostTypeSupportCheck>
+	);
+}
+
+const PostLastRevision = () => {
+	const { lastRevisionId, revisionsCount } = useRevisionData();
+
+	return (
+		<PostLastRevisionCheck>
+			<Button
+				href={ addQueryArgs( 'revision.php', {
+					revision: lastRevisionId,
+					gutenberg: true,
+				} ) }
+				className="edit-site-template-last-revision__title"
+				icon={ backup }
+			>
+				{ sprintf(
+					/* translators: %d: number of revisions */
+					_n( '%d Revision', '%d Revisions', revisionsCount ),
+					revisionsCount
+				) }
+			</Button>
+		</PostLastRevisionCheck>
+	);
+};
+
+export default function LastRevision() {
+	return (
+		<PostLastRevisionCheck>
+			<PostLastRevision />
+		</PostLastRevisionCheck>
+	);
+}

package/src/components/sidebar-edit-mode/template-card/style.scss

@@ -59,6 +59,10 @@
 	}
 }
 
+.edit-site-template-revisions {
+	margin-left: math.div(-$grid-unit-10, 2);
+}
+
 h3.edit-site-template-card__template-areas-title {
 	font-weight: 500;
 	margin: 0 0 $grid-unit-10;

package/src/components/sidebar-navigation-screen-navigation-menus/index.js

@@ -15,7 +15,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 	const history = useHistory();
 	const onSelect = useCallback(
 		( selectedBlock ) => {
-			const { attributes } = selectedBlock;
+			const { attributes, name } = selectedBlock;
 			if (
 				attributes.kind === 'post-type' &&
 				attributes.id &&
@@ -27,6 +27,12 @@ export default function SidebarNavigationScreenNavigationMenus() {
 					postId: attributes.id,
 				} );
 			}
+			if ( name === 'core/page-list-item' && attributes.id && history ) {
+				history.push( {
+					postType: 'page',
+					postId: attributes.id,
+				} );
+			}
 		},
 		[ history ]
 	);

package/src/components/sidebar-navigation-screen-navigation-menus/style.scss

@@ -1,8 +1,4 @@
 .edit-site-sidebar-navigation-screen-navigation-menus {
-	.block-editor-list-view-block__menu-edit,
-	.edit-site-navigation-inspector__select-menu {
-		display: none;
-	}
 	.offcanvas-editor-list-view-leaf {
 		max-width: calc(100% - #{ $grid-unit-05 });
 	}

package/src/components/start-template-options/index.js

@@ -0,0 +1,171 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useAsyncList } from '@wordpress/compose';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { parse } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+
+function useFallbackTemplateContent( slug, isCustom = false ) {
+	const [ templateContent, setTemplateContent ] = useState( '' );
+
+	useEffect( () => {
+		apiFetch( {
+			path: addQueryArgs( '/wp/v2/templates/lookup', {
+				slug,
+				is_custom: isCustom,
+				ignore_empty: true,
+			} ),
+		} ).then( ( { content } ) => setTemplateContent( content.raw ) );
+	}, [ slug ] );
+	return templateContent;
+}
+
+const START_BLANK_TITLE = __( 'Start blank' );
+
+function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
+	const [ , , onChange ] = useEntityBlockEditor( 'postType', postType );
+	const blockPatterns = useMemo(
+		() => [
+			{
+				name: 'fallback',
+				blocks: parse( fallbackContent ),
+				title: __( 'Fallback content' ),
+			},
+			{
+				name: 'start-blank',
+				blocks: parse(
+					'<!-- wp:paragraph --><p></p><!-- /wp:paragraph -->'
+				),
+				title: START_BLANK_TITLE,
+			},
+		],
+		[ fallbackContent ]
+	);
+	const shownBlockPatterns = useAsyncList( blockPatterns );
+
+	return (
+		<div
+			className="edit-site-start-template-options__pattern-container"
+			style={ {
+				'--wp-edit-site-start-template-options-start-blank': `"${ START_BLANK_TITLE }"`,
+			} }
+		>
+			<BlockPatternsList
+				blockPatterns={ blockPatterns }
+				shownPatterns={ shownBlockPatterns }
+				onClickPattern={ ( pattern, blocks ) => {
+					onChange( 'start-blank' === pattern.name ? [] : blocks, {
+						selection: undefined,
+					} );
+					onChoosePattern();
+				} }
+			/>
+		</div>
+	);
+}
+
+function StartModal( { slug, isCustom, onClose, postType } ) {
+	const fallbackContent = useFallbackTemplateContent( slug, isCustom );
+	if ( ! fallbackContent ) {
+		return null;
+	}
+	return (
+		<Modal
+			className="edit-site-start-template-options__modal"
+			title={ __( 'Choose a pattern' ) }
+			closeLabel={ __( 'Cancel' ) }
+			focusOnMount="firstElement"
+			onRequestClose={ onClose }
+		>
+			<div className="edit-site-start-template-options__modal-content">
+				<PatternSelection
+					fallbackContent={ fallbackContent }
+					slug={ slug }
+					isCustom={ isCustom }
+					postType={ postType }
+					onChoosePattern={ () => {
+						onClose();
+					} }
+				/>
+			</div>
+		</Modal>
+	);
+}
+
+const START_TEMPLATE_MODAL_STATES = {
+	INITIAL: 'INITIAL',
+	CLOSED: 'CLOSED',
+};
+
+export default function StartTemplateOptions() {
+	const [ modalState, setModalState ] = useState(
+		START_TEMPLATE_MODAL_STATES.INITIAL
+	);
+	const { shouldOpenModel, slug, isCustom, postType } = useSelect(
+		( select ) => {
+			const { getEditedPostType, getEditedPostId } =
+				select( editSiteStore );
+			const _postType = getEditedPostType();
+			const postId = getEditedPostId();
+			const {
+				__experimentalGetDirtyEntityRecords,
+				getEditedEntityRecord,
+			} = select( coreStore );
+			const templateRecord = getEditedEntityRecord(
+				'postType',
+				_postType,
+				postId
+			);
+
+			const hasDirtyEntityRecords =
+				__experimentalGetDirtyEntityRecords().length > 0;
+
+			return {
+				shouldOpenModel:
+					! hasDirtyEntityRecords &&
+					'' === templateRecord.content &&
+					'wp_template' === _postType &&
+					! select( preferencesStore ).get(
+						'core/edit-site',
+						'welcomeGuide'
+					),
+				slug: templateRecord.slug,
+				isCustom: templateRecord.is_custom,
+				postType: _postType,
+			};
+		},
+		[]
+	);
+
+	if (
+		( modalState === START_TEMPLATE_MODAL_STATES.INITIAL &&
+			! shouldOpenModel ) ||
+		modalState === START_TEMPLATE_MODAL_STATES.CLOSED
+	) {
+		return null;
+	}
+
+	return (
+		<StartModal
+			slug={ slug }
+			isCustom={ isCustom }
+			postType={ postType }
+			onClose={ () =>
+				setModalState( START_TEMPLATE_MODAL_STATES.CLOSED )
+			}
+		/>
+	);
+}

package/src/components/start-template-options/style.scss

@@ -0,0 +1,76 @@
+.edit-site-start-template-options__modal.components-modal__frame {
+	// To keep modal dimensions consistent as subsections are navigated, width
+	// and height are used instead of max-(width/height).
+	@include break-small() {
+		width: calc(100% - #{ $grid-unit-20 * 2 });
+		height: calc(100% - #{ $header-height * 2 });
+	}
+	@include break-medium() {
+		width: 50%;
+	}
+	@include break-large() {
+		height: fit-content;
+	}
+}
+
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
+	display: grid;
+	width: 100%;
+	margin-top: $grid-unit-05;
+	gap: $grid-unit-30;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(240px, 100%/10)), 1fr));
+	.block-editor-block-patterns-list__list-item {
+		break-inside: avoid-column;
+		margin-bottom: 0;
+		width: 100%;
+		aspect-ratio: 3/4;
+
+		.block-editor-block-preview__container {
+			height: 100%;
+			box-shadow: 0 0 0 1px $gray-300;
+		}
+
+		.block-editor-block-preview__content {
+			width: 100%;
+			position: absolute;
+		}
+
+		.block-editor-block-patterns-list__item-title {
+			display: none;
+		}
+
+		&:hover {
+			.block-editor-block-preview__container {
+				box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+			}
+		}
+
+		&:focus {
+			.block-editor-block-preview__container {
+				box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+				// Windows High Contrast mode will show this outline, but not the box-shadow.
+				outline: 2px solid transparent;
+			}
+		}
+	}
+
+	// The start blank pattern is the last and we are selecting it.
+	.block-editor-block-patterns-list__list-item:nth-last-child(2) {
+		.block-editor-block-preview__container {
+			position: absolute;
+			padding: 0;
+			background: #f0f0f0;
+			&::after {
+				width: 100%;
+				top: 50%;
+				margin-top: -1em;
+				content: var(--wp-edit-site-start-template-options-start-blank);
+				text-align: center;
+			}
+		}
+		iframe {
+			display: none;
+		}
+	}
+}

package/src/hooks/push-changes-to-global-styles/index.js

@@ -26,7 +26,7 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels } from '../../components/global-styles/hooks';
+import { useSupportedStyles } from '../../components/global-styles/hooks';
 import { unlock } from '../../private-apis';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
@@ -90,22 +90,30 @@ const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
 	'typography.fontFamily': 'fontFamily',
 };
 
-function getChangesToPush( name, attributes ) {
-	return getSupportedGlobalStylesPanels( name ).flatMap( ( key ) => {
-		if ( ! STYLE_PROPERTY[ key ] ) {
-			return [];
-		}
-		const { value: path } = STYLE_PROPERTY[ key ];
-		const presetAttributeKey = path.join( '.' );
-		const presetAttributeValue =
-			attributes[
-				STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE[ presetAttributeKey ]
-			];
-		const value = presetAttributeValue
-			? `var:preset|${ STYLE_PATH_TO_CSS_VAR_INFIX[ presetAttributeKey ] }|${ presetAttributeValue }`
-			: get( attributes.style, path );
-		return value ? [ { path, value } ] : [];
-	} );
+function useChangesToPush( name, attributes ) {
+	const supports = useSupportedStyles( name );
+
+	return useMemo(
+		() =>
+			supports.flatMap( ( key ) => {
+				if ( ! STYLE_PROPERTY[ key ] ) {
+					return [];
+				}
+				const { value: path } = STYLE_PROPERTY[ key ];
+				const presetAttributeKey = path.join( '.' );
+				const presetAttributeValue =
+					attributes[
+						STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE[
+							presetAttributeKey
+						]
+					];
+				const value = presetAttributeValue
+					? `var:preset|${ STYLE_PATH_TO_CSS_VAR_INFIX[ presetAttributeKey ] }|${ presetAttributeValue }`
+					: get( attributes.style, path );
+				return value ? [ { path, value } ] : [];
+			} ),
+		[ supports, name, attributes ]
+	);
 }
 
 function cloneDeep( object ) {
@@ -117,10 +125,7 @@ function PushChangesToGlobalStylesControl( {
 	attributes,
 	setAttributes,
 } ) {
-	const changes = useMemo(
-		() => getChangesToPush( name, attributes ),
-		[ name, attributes ]
-	);
+	const changes = useChangesToPush( name, attributes );
 
 	const { user: userConfig, setUserConfig } =
 		useContext( GlobalStylesContext );

package/src/store/actions.js

@@ -526,7 +526,7 @@ export const switchEditorMode =
 
 		if ( mode === 'visual' ) {
 			speak( __( 'Visual editor selected' ), 'assertive' );
-		} else if ( mode === 'mosaic' ) {
-			speak( __( 'Mosaic view selected' ), 'assertive' );
+		} else if ( mode === 'text' ) {
+			speak( __( 'Code editor selected' ), 'assertive' );
 		}
 	};

package/src/style.scss

@@ -17,6 +17,7 @@
 @import "./components/create-template-part-modal/style.scss";
 @import "./components/secondary-sidebar/style.scss";
 @import "./components/welcome-guide/style.scss";
+@import "./components/start-template-options/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/save-panel/style.scss";