@wordpress/edit-post 7.24.1 → 7.26.0

package/src/components/sidebar/plugin-post-excerpt/index.js

@@ -1,61 +0,0 @@
-/**
- * Defines as extensibility slot for the Excerpt panel.
- */
-
-/**
- * WordPress dependencies
- */
-import { createSlotFill, PanelRow } from '@wordpress/components';
-
-const { Fill, Slot } = createSlotFill( 'PluginPostExcerpt' );
-
-/**
- * Renders a post excerpt panel in the post sidebar.
- *
- * @param {Object}  props             Component properties.
- * @param {string}  [props.className] An optional class name added to the row.
- * @param {Element} props.children    Children to be rendered.
- *
- * @example
- * ```js
- * // Using ES5 syntax
- * var __ = wp.i18n.__;
- * var PluginPostExcerpt = wp.editPost.PluginPostExcerpt;
- *
- * function MyPluginPostExcerpt() {
- * 	return React.createElement(
- * 		PluginPostExcerpt,
- * 		{
- * 			className: 'my-plugin-post-excerpt',
- * 		},
- * 		__( 'Post excerpt custom content' )
- * 	)
- * }
- * ```
- *
- * @example
- * ```jsx
- * // Using ESNext syntax
- * import { __ } from '@wordpress/i18n';
- * import { PluginPostExcerpt } from '@wordpress/edit-post';
- *
- * const MyPluginPostExcerpt = () => (
- * 	<PluginPostExcerpt className="my-plugin-post-excerpt">
- * 		{ __( 'Post excerpt custom content' ) }
- * 	</PluginPostExcerpt>
- * );
- * ```
- *
- * @return {Component} The component to be rendered.
- */
-const PluginPostExcerpt = ( { children, className } ) => {
-	return (
-		<Fill>
-			<PanelRow className={ className }>{ children }</PanelRow>
-		</Fill>
-	);
-};
-
-PluginPostExcerpt.Slot = Slot;
-
-export default PluginPostExcerpt;

package/src/components/sidebar/plugin-post-excerpt/test/index.js

@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { SlotFillProvider } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import PluginPostExcerptPanel from '../';
-
-describe( 'PluginPostExcerptPanel', () => {
-	test( 'renders fill properly', () => {
-		render(
-			<SlotFillProvider>
-				<PluginPostExcerptPanel className="my-plugin-post-excerpt-custom-content">
-					Post Excerpt - Custom content
-				</PluginPostExcerptPanel>
-				<div role="tabpanel">
-					<PluginPostExcerptPanel.Slot />
-				</div>
-			</SlotFillProvider>
-		);
-
-		expect( screen.getByRole( 'tabpanel' ) ).toHaveTextContent(
-			'Post Excerpt - Custom content'
-		);
-		expect(
-			screen.getByText( 'Post Excerpt - Custom content' )
-		).toHaveClass( 'my-plugin-post-excerpt-custom-content' );
-	} );
-} );

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

@@ -1,59 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
-import {
-	PostExcerpt as PostExcerptForm,
-	PostExcerptCheck,
-} from '@wordpress/editor';
-import { useDispatch, useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-import PluginPostExcerpt from '../plugin-post-excerpt';
-
-/**
- * Module Constants
- */
-const PANEL_NAME = 'post-excerpt';
-
-export default function PostExcerpt() {
-	const { isOpened, isEnabled } = useSelect( ( select ) => {
-		const { isEditorPanelOpened, isEditorPanelEnabled } =
-			select( editPostStore );
-
-		return {
-			isOpened: isEditorPanelOpened( PANEL_NAME ),
-			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
-		};
-	}, [] );
-
-	const { toggleEditorPanelOpened } = useDispatch( editPostStore );
-	const toggleExcerptPanel = () => toggleEditorPanelOpened( PANEL_NAME );
-
-	if ( ! isEnabled ) {
-		return null;
-	}
-
-	return (
-		<PostExcerptCheck>
-			<PanelBody
-				title={ __( 'Excerpt' ) }
-				opened={ isOpened }
-				onToggle={ toggleExcerptPanel }
-			>
-				<PluginPostExcerpt.Slot>
-					{ ( fills ) => (
-						<>
-							<PostExcerptForm />
-							{ fills }
-						</>
-					) }
-				</PluginPostExcerpt.Slot>
-			</PanelBody>
-		</PostExcerptCheck>
-	);
-}

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

@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	PostTaxonomies as PostTaxonomiesForm,
-	PostTaxonomiesCheck,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import TaxonomyPanel from './taxonomy-panel';
-
-function PostTaxonomies() {
-	return (
-		<PostTaxonomiesCheck>
-			<PostTaxonomiesForm
-				taxonomyWrapper={ ( content, taxonomy ) => {
-					return (
-						<TaxonomyPanel taxonomy={ taxonomy }>
-							{ content }
-						</TaxonomyPanel>
-					);
-				} }
-			/>
-		</PostTaxonomiesCheck>
-	);
-}
-
-export default PostTaxonomies;

package/src/components/sidebar/post-taxonomies/taxonomy-panel.js

@@ -1,48 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { PanelBody } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-function TaxonomyPanel( { taxonomy, children } ) {
-	const slug = taxonomy?.slug;
-	const panelName = slug ? `taxonomy-panel-${ slug }` : '';
-	const { isEnabled, isOpened } = useSelect(
-		( select ) => {
-			const { isEditorPanelEnabled, isEditorPanelOpened } =
-				select( editPostStore );
-			return {
-				isEnabled: slug ? isEditorPanelEnabled( panelName ) : false,
-				isOpened: slug ? isEditorPanelOpened( panelName ) : false,
-			};
-		},
-		[ panelName, slug ]
-	);
-	const { toggleEditorPanelOpened } = useDispatch( editPostStore );
-
-	if ( ! isEnabled ) {
-		return null;
-	}
-
-	const taxonomyMenuName = taxonomy?.labels?.menu_name;
-	if ( ! taxonomyMenuName ) {
-		return null;
-	}
-
-	return (
-		<PanelBody
-			title={ taxonomyMenuName }
-			opened={ isOpened }
-			onToggle={ () => toggleEditorPanelOpened( panelName ) }
-		>
-			{ children }
-		</PanelBody>
-	);
-}
-
-export default TaxonomyPanel;

package/src/components/sidebar/post-template/create-modal.js

@@ -1,140 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import { useState } from '@wordpress/element';
-import { serialize, createBlock } from '@wordpress/blocks';
-import {
-	Modal,
-	TextControl,
-	Button,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { cleanForSlug } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-const DEFAULT_TITLE = __( 'Custom Template' );
-
-export default function PostTemplateCreateModal( { onClose } ) {
-	const defaultBlockTemplate = useSelect(
-		( select ) =>
-			select( editorStore ).getEditorSettings().defaultBlockTemplate,
-		[]
-	);
-
-	const { __unstableCreateTemplate, __unstableSwitchToTemplateMode } =
-		useDispatch( editPostStore );
-
-	const [ title, setTitle ] = useState( '' );
-
-	const [ isBusy, setIsBusy ] = useState( false );
-
-	const cancel = () => {
-		setTitle( '' );
-		onClose();
-	};
-
-	const submit = async ( event ) => {
-		event.preventDefault();
-
-		if ( isBusy ) {
-			return;
-		}
-
-		setIsBusy( true );
-
-		const newTemplateContent =
-			defaultBlockTemplate ??
-			serialize( [
-				createBlock(
-					'core/group',
-					{
-						tagName: 'header',
-						layout: { inherit: true },
-					},
-					[
-						createBlock( 'core/site-title' ),
-						createBlock( 'core/site-tagline' ),
-					]
-				),
-				createBlock( 'core/separator' ),
-				createBlock(
-					'core/group',
-					{
-						tagName: 'main',
-					},
-					[
-						createBlock(
-							'core/group',
-							{
-								layout: { inherit: true },
-							},
-							[ createBlock( 'core/post-title' ) ]
-						),
-						createBlock( 'core/post-content', {
-							layout: { inherit: true },
-						} ),
-					]
-				),
-			] );
-
-		await __unstableCreateTemplate( {
-			slug: cleanForSlug( title || DEFAULT_TITLE ),
-			content: newTemplateContent,
-			title: title || DEFAULT_TITLE,
-		} );
-
-		setIsBusy( false );
-		cancel();
-
-		__unstableSwitchToTemplateMode( true );
-	};
-
-	return (
-		<Modal
-			title={ __( 'Create custom template' ) }
-			onRequestClose={ cancel }
-			className="edit-post-post-template__create-modal"
-		>
-			<form
-				className="edit-post-post-template__create-form"
-				onSubmit={ submit }
-			>
-				<VStack spacing="3">
-					<TextControl
-						__nextHasNoMarginBottom
-						label={ __( 'Name' ) }
-						value={ title }
-						onChange={ setTitle }
-						placeholder={ DEFAULT_TITLE }
-						disabled={ isBusy }
-						help={ __(
-							'Describe the template, e.g. "Post with sidebar". A custom template can be manually applied to any post or page.'
-						) }
-					/>
-					<HStack justify="right">
-						<Button variant="tertiary" onClick={ cancel }>
-							{ __( 'Cancel' ) }
-						</Button>
-
-						<Button
-							variant="primary"
-							type="submit"
-							isBusy={ isBusy }
-							aria-disabled={ isBusy }
-						>
-							{ __( 'Create' ) }
-						</Button>
-					</HStack>
-				</VStack>
-			</form>
-		</Modal>
-	);
-}

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;
-	}
-}