@wordpress/edit-site 5.3.3 → 5.4.0

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/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/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";