@wordpress/edit-post 7.24.1 → 7.25.0

package/src/components/sidebar/post-template/form.js

@@ -1,141 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useMemo } from '@wordpress/element';
-import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-import { addTemplate } from '@wordpress/icons';
-import { Notice, SelectControl, Button } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-import PostTemplateCreateModal from './create-modal';
-
-export default function PostTemplateForm( { onClose } ) {
-	const {
-		isPostsPage,
-		availableTemplates,
-		fetchedTemplates,
-		selectedTemplateSlug,
-		canCreate,
-		canEdit,
-	} = useSelect( ( select ) => {
-		const { canUser, getEntityRecord, getEntityRecords } =
-			select( coreStore );
-		const editorSettings = select( editorStore ).getEditorSettings();
-		const siteSettings = canUser( 'read', 'settings' )
-			? getEntityRecord( 'root', 'site' )
-			: undefined;
-		const _isPostsPage =
-			select( editorStore ).getCurrentPostId() ===
-			siteSettings?.page_for_posts;
-		const canCreateTemplates = canUser( 'create', 'templates' );
-
-		return {
-			isPostsPage: _isPostsPage,
-			availableTemplates: editorSettings.availableTemplates,
-			fetchedTemplates: canCreateTemplates
-				? getEntityRecords( 'postType', 'wp_template', {
-						post_type: select( editorStore ).getCurrentPostType(),
-						per_page: -1,
-				  } )
-				: undefined,
-			selectedTemplateSlug:
-				select( editorStore ).getEditedPostAttribute( 'template' ),
-			canCreate:
-				canCreateTemplates &&
-				! _isPostsPage &&
-				editorSettings.supportsTemplateMode,
-			canEdit:
-				canCreateTemplates &&
-				editorSettings.supportsTemplateMode &&
-				!! select( editPostStore ).getEditedPostTemplate(),
-		};
-	}, [] );
-
-	const options = useMemo(
-		() =>
-			Object.entries( {
-				...availableTemplates,
-				...Object.fromEntries(
-					( fetchedTemplates ?? [] ).map( ( { slug, title } ) => [
-						slug,
-						title.rendered,
-					] )
-				),
-			} ).map( ( [ slug, title ] ) => ( { value: slug, label: title } ) ),
-		[ availableTemplates, fetchedTemplates ]
-	);
-
-	const selectedOption =
-		options.find( ( option ) => option.value === selectedTemplateSlug ) ??
-		options.find( ( option ) => ! option.value ); // The default option has '' value.
-
-	const { editPost } = useDispatch( editorStore );
-	const { __unstableSwitchToTemplateMode } = useDispatch( editPostStore );
-
-	const [ isCreateModalOpen, setIsCreateModalOpen ] = useState( false );
-
-	return (
-		<div className="edit-post-post-template__form">
-			<InspectorPopoverHeader
-				title={ __( 'Template' ) }
-				help={ __(
-					'Templates define the way content is displayed when viewing your site.'
-				) }
-				actions={
-					canCreate
-						? [
-								{
-									icon: addTemplate,
-									label: __( 'Add template' ),
-									onClick: () => setIsCreateModalOpen( true ),
-								},
-						  ]
-						: []
-				}
-				onClose={ onClose }
-			/>
-			{ isPostsPage ? (
-				<Notice
-					className="edit-post-post-template__notice"
-					status="warning"
-					isDismissible={ false }
-				>
-					{ __( 'The posts page template cannot be changed.' ) }
-				</Notice>
-			) : (
-				<SelectControl
-					__nextHasNoMarginBottom
-					hideLabelFromVision
-					label={ __( 'Template' ) }
-					value={ selectedOption?.value ?? '' }
-					options={ options }
-					onChange={ ( slug ) =>
-						editPost( { template: slug || '' } )
-					}
-				/>
-			) }
-			{ canEdit && (
-				<p>
-					<Button
-						variant="link"
-						onClick={ () => __unstableSwitchToTemplateMode() }
-					>
-						{ __( 'Edit template' ) }
-					</Button>
-				</p>
-			) }
-			{ isCreateModalOpen && (
-				<PostTemplateCreateModal
-					onClose={ () => setIsCreateModalOpen( false ) }
-				/>
-			) }
-		</div>
-	);
-}

package/src/components/sidebar/post-template/index.js

@@ -1,120 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useMemo } from '@wordpress/element';
-import { Dropdown, Button } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import {
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import PostTemplateForm from './form';
-import { store as editPostStore } from '../../../store';
-import { unlock } from '../../../lock-unlock';
-
-const { PostPanelRow } = unlock( editorPrivateApis );
-
-export default function PostTemplate() {
-	// Use internal state instead of a ref to make sure that the component
-	// re-renders when the popover's anchor updates.
-	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
-	// Memoize popoverProps to avoid returning a new object every time.
-	const popoverProps = useMemo(
-		() => ( { anchor: popoverAnchor, placement: 'bottom-end' } ),
-		[ popoverAnchor ]
-	);
-
-	const isVisible = useSelect( ( select ) => {
-		const postTypeSlug = select( editorStore ).getCurrentPostType();
-		const postType = select( coreStore ).getPostType( postTypeSlug );
-		if ( ! postType?.viewable ) {
-			return false;
-		}
-
-		const settings = select( editorStore ).getEditorSettings();
-		const hasTemplates =
-			!! settings.availableTemplates &&
-			Object.keys( settings.availableTemplates ).length > 0;
-		if ( hasTemplates ) {
-			return true;
-		}
-
-		if ( ! settings.supportsTemplateMode ) {
-			return false;
-		}
-
-		const canCreateTemplates =
-			select( coreStore ).canUser( 'create', 'templates' ) ?? false;
-		return canCreateTemplates;
-	}, [] );
-
-	if ( ! isVisible ) {
-		return null;
-	}
-
-	return (
-		<PostPanelRow label={ __( 'Template' ) } ref={ setPopoverAnchor }>
-			<Dropdown
-				popoverProps={ popoverProps }
-				contentClassName="edit-post-post-template__dialog"
-				focusOnMount
-				renderToggle={ ( { isOpen, onToggle } ) => (
-					<PostTemplateToggle
-						isOpen={ isOpen }
-						onClick={ onToggle }
-					/>
-				) }
-				renderContent={ ( { onClose } ) => (
-					<PostTemplateForm onClose={ onClose } />
-				) }
-			/>
-		</PostPanelRow>
-	);
-}
-
-function PostTemplateToggle( { isOpen, onClick } ) {
-	const templateTitle = useSelect( ( select ) => {
-		const templateSlug =
-			select( editorStore ).getEditedPostAttribute( 'template' );
-
-		const { supportsTemplateMode, availableTemplates } =
-			select( editorStore ).getEditorSettings();
-		if ( ! supportsTemplateMode && availableTemplates[ templateSlug ] ) {
-			return availableTemplates[ templateSlug ];
-		}
-		const template =
-			select( coreStore ).canUser( 'create', 'templates' ) &&
-			select( editPostStore ).getEditedPostTemplate();
-		return (
-			template?.title ||
-			template?.slug ||
-			availableTemplates?.[ templateSlug ]
-		);
-	}, [] );
-
-	return (
-		<Button
-			className="edit-post-post-template__toggle"
-			variant="tertiary"
-			aria-expanded={ isOpen }
-			aria-label={
-				templateTitle
-					? sprintf(
-							// translators: %s: Name of the currently selected template.
-							__( 'Select template: %s' ),
-							templateTitle
-					  )
-					: __( 'Select template' )
-			}
-			onClick={ onClick }
-		>
-			{ templateTitle ?? __( 'Default template' ) }
-		</Button>
-	);
-}

package/src/components/sidebar/post-template/style.scss

@@ -1,22 +0,0 @@
-.components-button.edit-post-post-template__toggle {
-	display: inline-block;
-	width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.edit-post-post-template__dialog {
-	z-index: z-index(".edit-post-post-template__dialog");
-}
-
-.edit-post-post-template__form {
-	// sidebar width - popover padding - form margin
-	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
-	margin: $grid-unit-10;
-}
-
-.edit-post-post-template__create-form {
-	@include break-medium() {
-		width: $grid-unit * 40;
-	}
-}

package/src/components/sidebar/settings-header/style.scss

@@ -1,74 +0,0 @@
-// This tab style CSS is duplicated verbatim in
-// /packages/components/src/tab-panel/style.scss
-.components-button.edit-post-sidebar__panel-tab {
-	position: relative;
-	border-radius: 0;
-	height: $grid-unit-60;
-	background: transparent;
-	border: none;
-	box-shadow: none;
-	cursor: pointer;
-	padding: 3px $grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
-	margin-left: 0;
-	font-weight: 500;
-
-	&:focus:not(:disabled) {
-		position: relative;
-		box-shadow: none;
-		outline: none;
-	}
-
-	// Tab indicator
-	&::after {
-		content: "";
-		position: absolute;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		pointer-events: none;
-
-		// Draw the indicator.
-		background: var(--wp-admin-theme-color);
-		height: calc(0 * var(--wp-admin-border-width-focus));
-		border-radius: 0;
-
-		// Animation
-		transition: all 0.1s linear;
-		@include reduce-motion("transition");
-	}
-
-	// Active.
-	&.is-active::after {
-		height: calc(1 * var(--wp-admin-border-width-focus));
-
-		// Windows high contrast mode.
-		outline: 2px solid transparent;
-		outline-offset: -1px;
-	}
-
-	// Focus.
-	&::before {
-		content: "";
-		position: absolute;
-		top: $grid-unit-15;
-		right: $grid-unit-15;
-		bottom: $grid-unit-15;
-		left: $grid-unit-15;
-		pointer-events: none;
-
-		// Draw the indicator.
-		box-shadow: 0 0 0 0 transparent;
-		border-radius: $radius-block-ui;
-
-		// Animation
-		transition: all 0.1s linear;
-		@include reduce-motion("transition");
-	}
-
-	&:focus-visible::before {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-		// Windows high contrast mode.
-		outline: 2px solid transparent;
-	}
-}

package/src/components/sidebar/template/style.scss

@@ -1,35 +0,0 @@
-.edit-post-template__modal {
-	.components-base-control {
-		@include break-medium() {
-			width: $grid-unit * 40;
-		}
-	}
-}
-
-.edit-post-template__modal-actions {
-	margin-top: $grid-unit-15;
-}
-
-.edit-post-template-modal__tip {
-	padding: $grid-unit-20 $grid-unit-30;
-	background: $gray-100;
-	border-radius: $radius-block-ui;
-
-	@include break-medium() {
-		width: $grid-unit * 30;
-	}
-}
-
-.edit-post-template__notice {
-	margin: 0 0 $grid-unit-10 0;
-
-	.components-notice__content {
-		margin: 0;
-	}
-}
-
-.edit-post-template__actions {
-	button:not(:last-child) {
-		margin-right: $grid-unit-10;
-	}
-}