@wordpress/edit-site 5.24.1 → 5.25.0

package/src/components/header-edit-mode/document-actions/style.scss

@@ -1,145 +0,0 @@
-.edit-site-document-actions {
-	display: flex;
-	align-items: center;
-	height: $button-size;
-	justify-content: space-between;
-	// Flex items will, by default, refuse to shrink below a minimum
-	// intrinsic width. In order to shrink this flexbox item, and
-	// subsequently truncate child text, we set an explicit min-width.
-	// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
-	min-width: 0;
-	background: $gray-100;
-	border-radius: $grid-unit-05;
-	width: min(100%, 450px);
-
-	// Make the document title shorter in top-toolbar mode, as it has to be covered.
-	.has-fixed-toolbar & {
-		width: min(100%, 380px);
-	}
-
-	&:hover {
-		background-color: $gray-200;
-	}
-
-	.components-button {
-		border-radius: $grid-unit-05;
-
-		&:hover {
-			color: var(--wp-block-synced-color);
-			background: $gray-200;
-		}
-	}
-
-	@include break-large() {
-		width: min(100%, 450px);
-	}
-
-	&.is-synced-entity {
-		.edit-site-document-actions__title {
-			color: var(--wp-block-synced-color);
-			h1 {
-				color: var(--wp-block-synced-color);
-			}
-		}
-	}
-}
-
-.edit-site-document-actions__command {
-	flex-grow: 1;
-	color: var(--wp-block-synced-color);
-	overflow: hidden;
-}
-
-.edit-site-document-actions__title {
-	flex-grow: 1;
-	overflow: hidden;
-
-	// Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned.
-	@include break-small() {
-		padding-left: $grid-unit-40;
-	}
-
-	&:hover {
-		color: var(--wp-block-synced-color);
-	}
-
-	.block-editor-block-icon {
-		min-width: $grid-unit-30;
-		flex-shrink: 0;
-	}
-
-	h1 {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		max-width: 50%;
-	}
-
-	.edit-site-document-actions.is-page & {
-		color: $gray-800;
-
-		h1 {
-			color: $gray-800;
-		}
-	}
-
-	.edit-site-document-actions.is-animated & {
-		animation: edit-site-document-actions__slide-in-left 0.3s;
-		@include reduce-motion("animation");
-	}
-
-	.edit-site-document-actions.is-animated.is-page & {
-		animation: edit-site-document-actions__slide-in-right 0.3s;
-		@include reduce-motion("animation");
-	}
-}
-
-.edit-site-document-actions__shortcut {
-	color: $gray-800;
-	min-width: $grid-unit-40;
-	display: none;
-	@include break-small() {
-		display: initial;
-	}
-}
-
-.edit-site-document-actions__back.components-button.has-icon.has-text {
-	min-width: $button-size;
-	flex-shrink: 0;
-	color: $gray-700;
-	gap: 0;
-	z-index: 1;
-	position: absolute;
-
-	&:hover {
-		color: currentColor;
-		background-color: transparent;
-	}
-
-	.edit-site-document-actions.is-animated & {
-		animation: edit-site-document-actions__slide-in-left 0.3s;
-		@include reduce-motion("animation");
-	}
-}
-
-@keyframes edit-site-document-actions__slide-in-right {
-	from {
-		transform: translateX(-15%);
-		opacity: 0;
-	}
-	to {
-		transform: translateX(0);
-		opacity: 1;
-	}
-}
-
-@keyframes edit-site-document-actions__slide-in-left {
-	from {
-		transform: translateX(15%);
-		opacity: 0;
-	}
-	to {
-		transform: translateX(0);
-		opacity: 1;
-	}
-}

package/src/components/page-content-focus-notifications/back-to-page-notification.js

@@ -1,58 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
-import { store as noticesStore } from '@wordpress/notices';
-import { __ } from '@wordpress/i18n';
-import { store as editorStore } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-
-/**
- * Component that displays a 'You are editing a template' notification when the
- * user switches from focusing on editing page content to editing a template.
- */
-export default function BackToPageNotification() {
-	useBackToPageNotification();
-	return null;
-}
-
-/**
- * Hook that displays a 'You are editing a template' notification when the user
- * switches from focusing on editing page content to editing a template.
- */
-export function useBackToPageNotification() {
-	const renderingMode = useSelect(
-		( select ) => select( editorStore ).getRenderingMode(),
-		[]
-	);
-	const { isPage } = useSelect( editSiteStore );
-	const { setRenderingMode } = useDispatch( editorStore );
-	const { createInfoNotice } = useDispatch( noticesStore );
-
-	const alreadySeen = useRef( false );
-
-	useEffect( () => {
-		if (
-			isPage() &&
-			! alreadySeen.current &&
-			renderingMode === 'template-only'
-		) {
-			createInfoNotice( __( 'You are editing a template.' ), {
-				isDismissible: true,
-				type: 'snackbar',
-				actions: [
-					{
-						label: __( 'Back to page' ),
-						onClick: () => setRenderingMode( 'template-locked' ),
-					},
-				],
-			} );
-			alreadySeen.current = true;
-		}
-	}, [ isPage, renderingMode, createInfoNotice, setRenderingMode ] );
-}

package/src/components/page-content-focus-notifications/edit-template-notification.js

@@ -1,104 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useState, useRef } from '@wordpress/element';
-import { store as noticesStore } from '@wordpress/notices';
-import { __ } from '@wordpress/i18n';
-import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
-import { store as editorStore } from '@wordpress/editor';
-
-/**
- * Component that:
- *
- * - Displays a 'Edit your template to edit this block' notification when the
- *   user is focusing on editing page content and clicks on a disabled template
- *   block.
- * - Displays a 'Edit your template to edit this block' dialog when the user
- *   is focusing on editing page conetnt and double clicks on a disabled
- *   template block.
- *
- * @param {Object}                                 props
- * @param {import('react').RefObject<HTMLElement>} props.contentRef Ref to the block
- *                                                                  editor iframe canvas.
- */
-export default function EditTemplateNotification( { contentRef } ) {
-	const renderingMode = useSelect(
-		( select ) => select( editorStore ).getRenderingMode(),
-		[]
-	);
-	const { getNotices } = useSelect( noticesStore );
-
-	const { createInfoNotice, removeNotice } = useDispatch( noticesStore );
-	const { setRenderingMode } = useDispatch( editorStore );
-
-	const [ isDialogOpen, setIsDialogOpen ] = useState( false );
-
-	const lastNoticeId = useRef( 0 );
-
-	useEffect( () => {
-		const handleClick = async ( event ) => {
-			if ( renderingMode === 'template-only' ) {
-				return;
-			}
-			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
-				return;
-			}
-			const isNoticeAlreadyShowing = getNotices().some(
-				( notice ) => notice.id === lastNoticeId.current
-			);
-			if ( isNoticeAlreadyShowing ) {
-				return;
-			}
-			const { notice } = await createInfoNotice(
-				__( 'Edit your template to edit this block.' ),
-				{
-					isDismissible: true,
-					type: 'snackbar',
-					actions: [
-						{
-							label: __( 'Edit template' ),
-							onClick: () => setRenderingMode( 'template-only' ),
-						},
-					],
-				}
-			);
-			lastNoticeId.current = notice.id;
-		};
-
-		const handleDblClick = ( event ) => {
-			if ( renderingMode === 'template-only' ) {
-				return;
-			}
-			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
-				return;
-			}
-			if ( lastNoticeId.current ) {
-				removeNotice( lastNoticeId.current );
-			}
-			setIsDialogOpen( true );
-		};
-
-		const canvas = contentRef.current;
-		canvas?.addEventListener( 'click', handleClick );
-		canvas?.addEventListener( 'dblclick', handleDblClick );
-		return () => {
-			canvas?.removeEventListener( 'click', handleClick );
-			canvas?.removeEventListener( 'dblclick', handleDblClick );
-		};
-	}, [ lastNoticeId, renderingMode, contentRef.current ] );
-
-	return (
-		<ConfirmDialog
-			isOpen={ isDialogOpen }
-			confirmButtonText={ __( 'Edit template' ) }
-			onConfirm={ () => {
-				setIsDialogOpen( false );
-				setRenderingMode( 'template-only' );
-			} }
-			onCancel={ () => setIsDialogOpen( false ) }
-		>
-			{ __( 'Edit your template to edit this block.' ) }
-		</ConfirmDialog>
-	);
-}

package/src/components/page-content-focus-notifications/index.js

@@ -1,14 +0,0 @@
-/**
- * Internal dependencies
- */
-import EditTemplateNotification from './edit-template-notification';
-import BackToPageNotification from './back-to-page-notification';
-
-export default function PageContentFocusNotifications( { contentRef } ) {
-	return (
-		<>
-			<EditTemplateNotification contentRef={ contentRef } />
-			<BackToPageNotification />
-		</>
-	);
-}

package/src/components/sidebar-edit-mode/page-panels/edit-template.js

@@ -1,108 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
-import { check } from '@wordpress/icons';
-import {
-	privateApis as editorPrivateApis,
-	store as editorStore,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-import SwapTemplateButton from './swap-template-button';
-import ResetDefaultTemplate from './reset-default-template';
-import { unlock } from '../../../lock-unlock';
-
-const { PostPanelRow } = unlock( editorPrivateApis );
-
-const POPOVER_PROPS = {
-	className: 'edit-site-page-panels-edit-template__dropdown',
-	placement: 'bottom-start',
-};
-
-export default function EditTemplate() {
-	const { hasResolved, template, isTemplateHidden } = useSelect(
-		( select ) => {
-			const { getEditedPostContext, getEditedPostType, getEditedPostId } =
-				select( editSiteStore );
-			const { getRenderingMode } = unlock( select( editorStore ) );
-			const { getEditedEntityRecord, hasFinishedResolution } =
-				select( coreStore );
-			const _context = getEditedPostContext();
-			const _postType = getEditedPostType();
-			const queryArgs = [ 'postType', _postType, getEditedPostId() ];
-			return {
-				context: _context,
-				hasResolved: hasFinishedResolution(
-					'getEditedEntityRecord',
-					queryArgs
-				),
-				template: getEditedEntityRecord( ...queryArgs ),
-				isTemplateHidden: getRenderingMode() === 'post-only',
-				postType: _postType,
-			};
-		},
-		[]
-	);
-
-	const { setRenderingMode } = useDispatch( editorStore );
-
-	if ( ! hasResolved ) {
-		return null;
-	}
-
-	return (
-		<PostPanelRow label={ __( 'Template' ) }>
-			<DropdownMenu
-				popoverProps={ POPOVER_PROPS }
-				focusOnMount
-				toggleProps={ {
-					variant: 'tertiary',
-					className: 'edit-site-summary-field__trigger',
-				} }
-				label={ __( 'Template options' ) }
-				text={ decodeEntities( template.title ) }
-				icon={ null }
-			>
-				{ ( { onClose } ) => (
-					<>
-						<MenuGroup>
-							<MenuItem
-								onClick={ () => {
-									setRenderingMode( 'template-only' );
-									onClose();
-								} }
-							>
-								{ __( 'Edit template' ) }
-							</MenuItem>
-							<SwapTemplateButton onClick={ onClose } />
-						</MenuGroup>
-						<ResetDefaultTemplate onClick={ onClose } />
-						<MenuGroup>
-							<MenuItem
-								icon={ ! isTemplateHidden ? check : undefined }
-								isPressed={ ! isTemplateHidden }
-								onClick={ () => {
-									setRenderingMode(
-										isTemplateHidden
-											? 'template-locked'
-											: 'post-only'
-									);
-								} }
-							>
-								{ __( 'Template preview' ) }
-							</MenuItem>
-						</MenuGroup>
-					</>
-				) }
-			</DropdownMenu>
-		</PostPanelRow>
-	);
-}

package/src/components/sidebar-edit-mode/page-panels/hooks.js

@@ -1,99 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-import { TEMPLATE_POST_TYPE } from '../../../utils/constants';
-
-export function useEditedPostContext() {
-	return useSelect(
-		( select ) => select( editSiteStore ).getEditedPostContext(),
-		[]
-	);
-}
-
-export function useAllowSwitchingTemplates() {
-	const { postId } = useEditedPostContext();
-	return useSelect(
-		( select ) => {
-			const { getEntityRecord, getEntityRecords } = select( coreStore );
-			const siteSettings = getEntityRecord( 'root', 'site' );
-			const templates = getEntityRecords(
-				'postType',
-				TEMPLATE_POST_TYPE,
-				{ per_page: -1 }
-			);
-			const isPostsPage = +postId === siteSettings?.page_for_posts;
-			// If current page is set front page or posts page, we also need
-			// to check if the current theme has a template for it. If not
-			const isFrontPage =
-				+postId === siteSettings?.page_on_front &&
-				templates?.some( ( { slug } ) => slug === 'front-page' );
-			return ! isPostsPage && ! isFrontPage;
-		},
-		[ postId ]
-	);
-}
-
-function useTemplates() {
-	return useSelect(
-		( select ) =>
-			select( coreStore ).getEntityRecords(
-				'postType',
-				TEMPLATE_POST_TYPE,
-				{
-					per_page: -1,
-					post_type: 'page',
-				}
-			),
-		[]
-	);
-}
-
-export function useAvailableTemplates() {
-	const currentTemplateSlug = useCurrentTemplateSlug();
-	const allowSwitchingTemplate = useAllowSwitchingTemplates();
-	const templates = useTemplates();
-	return useMemo(
-		() =>
-			allowSwitchingTemplate &&
-			templates?.filter(
-				( template ) =>
-					template.is_custom &&
-					template.slug !== currentTemplateSlug &&
-					!! template.content.raw // Skip empty templates.
-			),
-		[ templates, currentTemplateSlug, allowSwitchingTemplate ]
-	);
-}
-
-export function useCurrentTemplateSlug() {
-	const { postType, postId } = useEditedPostContext();
-	const templates = useTemplates();
-	const entityTemplate = useSelect(
-		( select ) => {
-			const post = select( coreStore ).getEditedEntityRecord(
-				'postType',
-				postType,
-				postId
-			);
-			return post?.template;
-		},
-		[ postType, postId ]
-	);
-
-	if ( ! entityTemplate ) {
-		return;
-	}
-	// If a page has a `template` set and is not included in the list
-	// of the theme's templates, do not return it, in order to resolve
-	// to the current theme's default template.
-	return templates?.find( ( template ) => template.slug === entityTemplate )
-		?.slug;
-}

package/src/components/sidebar-edit-mode/page-panels/reset-default-template.js

@@ -1,45 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { MenuGroup, MenuItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import {
-	useAllowSwitchingTemplates,
-	useCurrentTemplateSlug,
-	useEditedPostContext,
-} from './hooks';
-
-export default function ResetDefaultTemplate( { onClick } ) {
-	const currentTemplateSlug = useCurrentTemplateSlug();
-	const allowSwitchingTemplate = useAllowSwitchingTemplates();
-	const { postType, postId } = useEditedPostContext();
-	const { editEntityRecord } = useDispatch( coreStore );
-	// The default template in a post is indicated by an empty string.
-	if ( ! currentTemplateSlug || ! allowSwitchingTemplate ) {
-		return null;
-	}
-	return (
-		<MenuGroup>
-			<MenuItem
-				onClick={ async () => {
-					editEntityRecord(
-						'postType',
-						postType,
-						postId,
-						{ template: '' },
-						{ undoIgnore: true }
-					);
-					onClick();
-				} }
-			>
-				{ __( 'Use default template' ) }
-			</MenuItem>
-		</MenuGroup>
-	);
-}

package/src/components/sidebar-edit-mode/page-panels/swap-template-button.js

@@ -1,83 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useMemo, useState, useCallback } from '@wordpress/element';
-import { decodeEntities } from '@wordpress/html-entities';
-import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
-import { MenuItem, Modal } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { parse } from '@wordpress/blocks';
-import { useAsyncList } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { useAvailableTemplates, useEditedPostContext } from './hooks';
-
-export default function SwapTemplateButton( { onClick } ) {
-	const [ showModal, setShowModal ] = useState( false );
-	const availableTemplates = useAvailableTemplates();
-	const onClose = useCallback( () => {
-		setShowModal( false );
-	}, [] );
-	const { postType, postId } = useEditedPostContext();
-	const { editEntityRecord } = useDispatch( coreStore );
-	if ( ! availableTemplates?.length ) {
-		return null;
-	}
-	const onTemplateSelect = async ( template ) => {
-		editEntityRecord(
-			'postType',
-			postType,
-			postId,
-			{ template: template.name },
-			{ undoIgnore: true }
-		);
-		onClose(); // Close the template suggestions modal first.
-		onClick();
-	};
-	return (
-		<>
-			<MenuItem onClick={ () => setShowModal( true ) }>
-				{ __( 'Swap template' ) }
-			</MenuItem>
-			{ showModal && (
-				<Modal
-					title={ __( 'Choose a template' ) }
-					onRequestClose={ onClose }
-					overlayClassName="edit-site-swap-template-modal"
-					isFullScreen
-				>
-					<div className="edit-site-page-panels__swap-template__modal-content">
-						<TemplatesList onSelect={ onTemplateSelect } />
-					</div>
-				</Modal>
-			) }
-		</>
-	);
-}
-
-function TemplatesList( { onSelect } ) {
-	const availableTemplates = useAvailableTemplates();
-	const templatesAsPatterns = useMemo(
-		() =>
-			availableTemplates.map( ( template ) => ( {
-				name: template.slug,
-				blocks: parse( template.content.raw ),
-				title: decodeEntities( template.title.rendered ),
-				id: template.id,
-			} ) ),
-		[ availableTemplates ]
-	);
-	const shownTemplates = useAsyncList( templatesAsPatterns );
-	return (
-		<BlockPatternsList
-			label={ __( 'Templates' ) }
-			blockPatterns={ templatesAsPatterns }
-			shownPatterns={ shownTemplates }
-			onClickPattern={ onSelect }
-		/>
-	);
-}

package/src/utils/use-debounced-input.js

@@ -1,18 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-import { useDebounce } from '@wordpress/compose';
-
-export default function useDebouncedInput( defaultValue = '' ) {
-	const [ input, setInput ] = useState( defaultValue );
-	const [ debouncedInput, setDebouncedState ] = useState( defaultValue );
-
-	const setDebouncedInput = useDebounce( setDebouncedState, 250 );
-
-	useEffect( () => {
-		setDebouncedInput( input );
-	}, [ input ] );
-
-	return [ input, setInput, debouncedInput ];
-}