@wordpress/edit-post 7.11.0 → 7.12.0

package/src/components/header/template-title/delete-template.js

@@ -1,106 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	MenuGroup,
-	MenuItem,
-	__experimentalConfirmDialog as ConfirmDialog,
-} from '@wordpress/components';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-export default function DeleteTemplate() {
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const { setIsEditingTemplate } = useDispatch( editPostStore );
-	const { getEditorSettings } = useSelect( editorStore );
-	const { updateEditorSettings, editPost } = useDispatch( editorStore );
-	const { deleteEntityRecord } = useDispatch( coreStore );
-	const { template } = useSelect( ( select ) => {
-		const { isEditingTemplate, getEditedPostTemplate } =
-			select( editPostStore );
-		const _isEditing = isEditingTemplate();
-		return {
-			template: _isEditing ? getEditedPostTemplate() : null,
-		};
-	}, [] );
-	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
-
-	if ( ! template || ! template.wp_id ) {
-		return null;
-	}
-	let templateTitle = template.slug;
-	if ( template?.title ) {
-		templateTitle = template.title;
-	}
-
-	const isRevertable = template?.has_theme_file;
-
-	const onDelete = () => {
-		clearSelectedBlock();
-		setIsEditingTemplate( false );
-		setShowConfirmDialog( false );
-
-		editPost( {
-			template: '',
-		} );
-		const settings = getEditorSettings();
-		const newAvailableTemplates = Object.fromEntries(
-			Object.entries( settings.availableTemplates ?? {} ).filter(
-				( [ id ] ) => id !== template.slug
-			)
-		);
-		updateEditorSettings( {
-			availableTemplates: newAvailableTemplates,
-		} );
-		deleteEntityRecord( 'postType', 'wp_template', template.id, {
-			throwOnError: true,
-		} );
-	};
-
-	return (
-		<MenuGroup className="edit-post-template-top-area__second-menu-group">
-			<>
-				<MenuItem
-					className="edit-post-template-top-area__delete-template-button"
-					isDestructive={ ! isRevertable }
-					onClick={ () => {
-						setShowConfirmDialog( true );
-					} }
-					info={
-						isRevertable
-							? __( 'Use the template as supplied by the theme.' )
-							: undefined
-					}
-				>
-					{ isRevertable
-						? __( 'Clear customizations' )
-						: __( 'Delete template' ) }
-				</MenuItem>
-				<ConfirmDialog
-					isOpen={ showConfirmDialog }
-					onConfirm={ onDelete }
-					onCancel={ () => {
-						setShowConfirmDialog( false );
-					} }
-				>
-					{ sprintf(
-						/* translators: %s: template name */
-						__(
-							'Are you sure you want to delete the %s template? It may be used by other pages or posts.'
-						),
-						templateTitle
-					) }
-				</ConfirmDialog>
-			</>
-		</MenuGroup>
-	);
-}

package/src/components/header/template-title/edit-template-title.js

@@ -1,78 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { TextControl } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { store as editorStore } from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-export default function EditTemplateTitle() {
-	const [ forceEmpty, setForceEmpty ] = useState( false );
-	const { template } = useSelect( ( select ) => {
-		const { getEditedPostTemplate } = select( editPostStore );
-		return {
-			template: getEditedPostTemplate(),
-		};
-	}, [] );
-
-	const { editEntityRecord } = useDispatch( coreStore );
-	const { getEditorSettings } = useSelect( editorStore );
-	const { updateEditorSettings } = useDispatch( editorStore );
-
-	// Only user-created and non-default templates can change the name.
-	if ( ! template.is_custom || template.has_theme_file ) {
-		return null;
-	}
-
-	let templateTitle = __( 'Default' );
-	if ( template?.title ) {
-		templateTitle = template.title;
-	} else if ( !! template ) {
-		templateTitle = template.slug;
-	}
-
-	return (
-		<div className="edit-site-template-details__group">
-			<TextControl
-				__nextHasNoMarginBottom
-				label={ __( 'Title' ) }
-				value={ forceEmpty ? '' : templateTitle }
-				help={ __(
-					'Give the template a title that indicates its purpose, e.g. "Full Width".'
-				) }
-				onChange={ ( newTitle ) => {
-					// Allow having the field temporarily empty while typing.
-					if ( ! newTitle && ! forceEmpty ) {
-						setForceEmpty( true );
-						return;
-					}
-					setForceEmpty( false );
-
-					const settings = getEditorSettings();
-					const newAvailableTemplates = Object.fromEntries(
-						Object.entries( settings.availableTemplates ?? {} ).map(
-							( [ id, existingTitle ] ) => [
-								id,
-								id !== template.slug ? existingTitle : newTitle,
-							]
-						)
-					);
-					updateEditorSettings( {
-						availableTemplates: newAvailableTemplates,
-					} );
-					editEntityRecord( 'postType', 'wp_template', template.id, {
-						title: newTitle,
-					} );
-				} }
-				onBlur={ () => setForceEmpty( false ) }
-			/>
-		</div>
-	);
-}

package/src/components/header/template-title/index.js

@@ -1,115 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	Dropdown,
-	Button,
-	__experimentalText as Text,
-} from '@wordpress/components';
-import { chevronDown } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as editorStore } from '@wordpress/editor';
-import DeleteTemplate from './delete-template';
-import EditTemplateTitle from './edit-template-title';
-import TemplateDescription from './template-description';
-
-function TemplateTitle() {
-	const { template, isEditing, title } = useSelect( ( select ) => {
-		const { isEditingTemplate, getEditedPostTemplate } =
-			select( editPostStore );
-		const { getEditedPostAttribute } = select( editorStore );
-
-		const _isEditing = isEditingTemplate();
-
-		return {
-			template: _isEditing ? getEditedPostTemplate() : null,
-			isEditing: _isEditing,
-			title: getEditedPostAttribute( 'title' )
-				? getEditedPostAttribute( 'title' )
-				: __( 'Untitled' ),
-		};
-	}, [] );
-
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const { setIsEditingTemplate } = useDispatch( editPostStore );
-
-	if ( ! isEditing || ! template ) {
-		return null;
-	}
-
-	let templateTitle = __( 'Default' );
-	if ( template?.title ) {
-		templateTitle = template.title;
-	} else if ( !! template ) {
-		templateTitle = template.slug;
-	}
-
-	const hasOptions = !! (
-		template.custom ||
-		template.wp_id ||
-		template.description
-	);
-
-	return (
-		<div className="edit-post-template-top-area">
-			<Button
-				className="edit-post-template-post-title"
-				isLink
-				showTooltip
-				label={ sprintf(
-					/* translators: %s: Title of the referring post, e.g: "Hello World!" */
-					__( 'Edit %s' ),
-					title
-				) }
-				onClick={ () => {
-					clearSelectedBlock();
-					setIsEditingTemplate( false );
-				} }
-			>
-				{ title }
-			</Button>
-			{ hasOptions ? (
-				<Dropdown
-					popoverProps={ { placement: 'bottom' } }
-					contentClassName="edit-post-template-top-area__popover"
-					renderToggle={ ( { onToggle } ) => (
-						<Button
-							className="edit-post-template-title"
-							isLink
-							icon={ chevronDown }
-							showTooltip
-							onClick={ onToggle }
-							label={ __( 'Template Options' ) }
-						>
-							{ templateTitle }
-						</Button>
-					) }
-					renderContent={ () => (
-						<>
-							<EditTemplateTitle />
-							<TemplateDescription />
-							<DeleteTemplate />
-						</>
-					) }
-				/>
-			) : (
-				<Text
-					className="edit-post-template-title"
-					size="body"
-					style={ { lineHeight: '24px' } }
-				>
-					{ templateTitle }
-				</Text>
-			) }
-		</div>
-	);
-}
-
-export default TemplateTitle;

package/src/components/header/template-title/style.scss

@@ -1,94 +0,0 @@
-.edit-post-template-top-area {
-	display: flex;
-	flex-direction: column;
-	align-content: space-between;
-	width: 100%;
-	align-items: center;
-
-	.edit-post-template-title,
-	.edit-post-template-post-title {
-		padding: 0;
-		text-decoration: none;
-		height: auto;
-
-		&::before {
-			height: 100%;
-		}
-
-		&.has-icon {
-			svg {
-				order: 1;
-				margin-right: 0;
-			}
-		}
-	}
-
-	.edit-post-template-title {
-		color: $gray-900;
-	}
-
-	.edit-post-template-post-title {
-		margin-top: $grid-unit-05;
-		max-width: 160px;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		display: block;
-
-		&::before {
-			left: 0;
-			right: 0;
-		}
-
-		@include break-xlarge() {
-			max-width: 400px;
-		}
-	}
-}
-
-.edit-post-template-top-area__popover {
-	.components-popover__content {
-		min-width: 280px;
-		padding: 0;
-	}
-
-	.edit-site-template-details__group {
-		padding: $grid-unit-20;
-
-		.components-base-control__help {
-			margin-bottom: 0;
-		}
-	}
-
-	.edit-post-template-details__description {
-		color: $gray-700;
-	}
-}
-
-.edit-post-template-top-area__second-menu-group {
-	border-top: $border-width solid $gray-300;
-	padding: $grid-unit-20 $grid-unit-10;
-
-	.edit-post-template-top-area__delete-template-button {
-		display: flex;
-		justify-content: center;
-		padding: $grid-unit-05 $grid-unit;
-
-		&.is-destructive {
-			padding: inherit;
-			margin-left: $grid-unit-10;
-			margin-right: $grid-unit-10;
-			width: calc(100% - #{($grid-unit * 2)});
-
-			.components-menu-item__item {
-				width: auto;
-			}
-		}
-
-		.components-menu-item__item {
-			margin-right: 0;
-			min-width: 0;
-			width: 100%;
-		}
-	}
-}

package/src/components/header/template-title/template-description.js

@@ -1,42 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import {
-	__experimentalHeading as Heading,
-	__experimentalText as Text,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-export default function TemplateDescription() {
-	const { description, title } = useSelect( ( select ) => {
-		const { getEditedPostTemplate } = select( editPostStore );
-		return {
-			title: getEditedPostTemplate().title,
-			description: getEditedPostTemplate().description,
-		};
-	}, [] );
-	if ( ! description ) {
-		return null;
-	}
-
-	return (
-		<div className="edit-site-template-details__group">
-			<Heading level={ 4 } weight={ 600 }>
-				{ title }
-			</Heading>
-			<Text
-				className="edit-post-template-details__description"
-				size="body"
-				as="p"
-				style={ { marginTop: '12px' } }
-			>
-				{ description }
-			</Text>
-		</div>
-	);
-}