@wordpress/edit-site 5.33.0 → 5.35.0

package/src/components/page-templates-template-parts/add-new-template-part.js

@@ -1,62 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { useState, memo } from '@wordpress/element';
-import { Button } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-import CreateTemplatePartModal from '../create-template-part-modal';
-import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
-
-const { useHistory } = unlock( routerPrivateApis );
-
-function AddNewTemplatePart() {
-	const { canCreate, postType } = useSelect( ( select ) => {
-		const { supportsTemplatePartsMode } =
-			select( editSiteStore ).getSettings();
-		return {
-			canCreate: ! supportsTemplatePartsMode,
-			postType: select( coreStore ).getPostType(
-				TEMPLATE_PART_POST_TYPE
-			),
-		};
-	}, [] );
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const history = useHistory();
-
-	if ( ! canCreate || ! postType ) {
-		return null;
-	}
-
-	return (
-		<>
-			<Button variant="primary" onClick={ () => setIsModalOpen( true ) }>
-				{ postType.labels.add_new_item }
-			</Button>
-			{ isModalOpen && (
-				<CreateTemplatePartModal
-					closeModal={ () => setIsModalOpen( false ) }
-					blocks={ [] }
-					onCreate={ ( templatePart ) => {
-						setIsModalOpen( false );
-						history.push( {
-							postId: templatePart.id,
-							postType: TEMPLATE_PART_POST_TYPE,
-							canvas: 'edit',
-						} );
-					} }
-					onError={ () => setIsModalOpen( false ) }
-				/>
-			) }
-		</>
-	);
-}
-
-export default memo( AddNewTemplatePart );

package/src/components/sidebar-edit-mode/index.js

@@ -1,162 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createSlotFill,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { isRTL, __ } from '@wordpress/i18n';
-import { drawerLeft, drawerRight } from '@wordpress/icons';
-import { useCallback, useContext, useEffect, useRef } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import DefaultSidebar from './default-sidebar';
-import GlobalStylesSidebar from './global-styles-sidebar';
-import SettingsHeader from './settings-header';
-import PagePanels from './page-panels';
-import TemplatePanel from './template-panel';
-import { store as editSiteStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-const { Tabs } = unlock( componentsPrivateApis );
-const { interfaceStore, useAutoSwitchEditorSidebars } =
-	unlock( editorPrivateApis );
-const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
-	'EditSiteSidebarInspector'
-);
-export const SidebarInspectorFill = InspectorFill;
-
-const FillContents = ( { tabName, isEditingPage, supportsGlobalStyles } ) => {
-	const tabListRef = useRef( null );
-	// Because `DefaultSidebar` renders a `ComplementaryArea`, we
-	// need to forward the `Tabs` context so it can be passed through the
-	// underlying slot/fill.
-	const tabsContextValue = useContext( Tabs.Context );
-
-	// This effect addresses a race condition caused by tabbing from the last
-	// block in the editor into the settings sidebar. Without this effect, the
-	// selected tab and browser focus can become separated in an unexpected way.
-	// (e.g the "block" tab is focused, but the "post" tab is selected).
-	useEffect( () => {
-		const tabsElements = Array.from(
-			tabListRef.current?.querySelectorAll( '[role="tab"]' ) || []
-		);
-		const selectedTabElement = tabsElements.find(
-			// We are purposefully using a custom `data-tab-id` attribute here
-			// because we don't want rely on any assumptions about `Tabs`
-			// component internals.
-			( element ) => element.getAttribute( 'data-tab-id' ) === tabName
-		);
-		const activeElement = selectedTabElement?.ownerDocument.activeElement;
-		const tabsHasFocus = tabsElements.some( ( element ) => {
-			return activeElement && activeElement.id === element.id;
-		} );
-		if (
-			tabsHasFocus &&
-			selectedTabElement &&
-			selectedTabElement.id !== activeElement?.id
-		) {
-			selectedTabElement?.focus();
-		}
-	}, [ tabName ] );
-
-	return (
-		<>
-			<DefaultSidebar
-				identifier={ tabName }
-				title={ __( 'Settings' ) }
-				icon={ isRTL() ? drawerLeft : drawerRight }
-				closeLabel={ __( 'Close Settings' ) }
-				header={
-					<Tabs.Context.Provider value={ tabsContextValue }>
-						<SettingsHeader ref={ tabListRef } />
-					</Tabs.Context.Provider>
-				}
-				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
-				// This classname is added so we can apply a corrective negative
-				// margin to the panel.
-				// see https://github.com/WordPress/gutenberg/pull/55360#pullrequestreview-1737671049
-				className="edit-site-sidebar__panel"
-				isActiveByDefault
-			>
-				<Tabs.Context.Provider value={ tabsContextValue }>
-					<Tabs.TabPanel
-						tabId="edit-post/document"
-						focusable={ false }
-					>
-						{ isEditingPage ? <PagePanels /> : <TemplatePanel /> }
-					</Tabs.TabPanel>
-					<Tabs.TabPanel tabId="edit-post/block" focusable={ false }>
-						<InspectorSlot bubblesVirtually />
-					</Tabs.TabPanel>
-				</Tabs.Context.Provider>
-			</DefaultSidebar>
-			{ supportsGlobalStyles && <GlobalStylesSidebar /> }
-		</>
-	);
-};
-
-export function SidebarComplementaryAreaFills() {
-	useAutoSwitchEditorSidebars();
-	const { tabName, supportsGlobalStyles, isEditingPage } = useSelect(
-		( select ) => {
-			const sidebar =
-				select( interfaceStore ).getActiveComplementaryArea( 'core' );
-
-			const _isEditorSidebarOpened = [
-				'edit-post/block',
-				'edit-post/document',
-			].includes( sidebar );
-			let _tabName = sidebar;
-			if ( ! _isEditorSidebarOpened ) {
-				_tabName = !! select(
-					blockEditorStore
-				).getBlockSelectionStart()
-					? 'edit-post/block'
-					: 'edit-post/document';
-			}
-
-			return {
-				tabName: _tabName,
-				supportsGlobalStyles:
-					select( coreStore ).getCurrentTheme()?.is_block_theme,
-				isEditingPage: select( editSiteStore ).isPage(),
-			};
-		},
-		[]
-	);
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
-
-	// `newSelectedTabId` could technically be falsey if no tab is selected (i.e.
-	// the initial render) or when we don't want a tab displayed (i.e. the
-	// sidebar is closed). These cases should both be covered by the `!!` check
-	// below, so we shouldn't need any additional falsey handling.
-	const onTabSelect = useCallback(
-		( newSelectedTabId ) => {
-			if ( !! newSelectedTabId ) {
-				enableComplementaryArea( 'core', newSelectedTabId );
-			}
-		},
-		[ enableComplementaryArea ]
-	);
-
-	return (
-		<Tabs
-			selectedTabId={ tabName }
-			onSelect={ onTabSelect }
-			selectOnMove={ false }
-		>
-			<FillContents
-				tabName={ tabName }
-				isEditingPage={ isEditingPage }
-				supportsGlobalStyles={ supportsGlobalStyles }
-			/>
-		</Tabs>
-	);
-}

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

@@ -1,105 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { PanelBody } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import {
-	PageAttributesPanel,
-	PluginDocumentSettingPanel,
-	PostDiscussionPanel,
-	PostExcerptPanel,
-	PostLastRevisionPanel,
-	PostTaxonomiesPanel,
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useCallback } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-import PageContent from './page-content';
-import PageSummary from './page-summary';
-
-import { unlock } from '../../../lock-unlock';
-
-const { PostCardPanel, PostActions } = unlock( editorPrivateApis );
-const { useHistory } = unlock( routerPrivateApis );
-
-export default function PagePanels() {
-	const { id, type, hasResolved, status, date, password, renderingMode } =
-		useSelect( ( select ) => {
-			const { getEditedPostContext } = select( editSiteStore );
-			const { getEditedEntityRecord, hasFinishedResolution } =
-				select( coreStore );
-			const { getRenderingMode } = select( editorStore );
-			const context = getEditedPostContext();
-			const queryArgs = [ 'postType', context.postType, context.postId ];
-			const page = getEditedEntityRecord( ...queryArgs );
-			return {
-				hasResolved: hasFinishedResolution(
-					'getEditedEntityRecord',
-					queryArgs
-				),
-				id: page?.id,
-				type: page?.type,
-				status: page?.status,
-				date: page?.date,
-				password: page?.password,
-				renderingMode: getRenderingMode(),
-			};
-		}, [] );
-
-	const history = useHistory();
-	const onActionPerformed = useCallback(
-		( actionId, items ) => {
-			if ( actionId === 'move-to-trash' ) {
-				history.push( {
-					path: '/' + items[ 0 ].type,
-					postId: undefined,
-					postType: undefined,
-					canvas: 'view',
-				} );
-			}
-		},
-		[ history ]
-	);
-
-	if ( ! hasResolved ) {
-		return null;
-	}
-
-	return (
-		<>
-			<PostCardPanel
-				actions={
-					<PostActions onActionPerformed={ onActionPerformed } />
-				}
-			/>
-			<PanelBody title={ __( 'Summary' ) }>
-				<PageSummary
-					status={ status }
-					date={ date }
-					password={ password }
-					postId={ id }
-					postType={ type }
-				/>
-			</PanelBody>
-			<PluginDocumentSettingPanel.Slot />
-			{ renderingMode !== 'post-only' && (
-				<PanelBody title={ __( 'Content' ) }>
-					<PageContent />
-				</PanelBody>
-			) }
-			<PostLastRevisionPanel />
-			<PostTaxonomiesPanel />
-			<PostExcerptPanel />
-			<PostDiscussionPanel />
-			<PageAttributesPanel />
-		</>
-	);
-}

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

@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import {
-	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../../lock-unlock';
-
-const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
-
-const PAGE_CONTENT_BLOCKS = [
-	'core/post-content',
-	'core/post-featured-image',
-	'core/post-title',
-];
-
-export default function PageContent() {
-	const clientIds = useSelect( ( select ) => {
-		const { getBlocksByName } = select( blockEditorStore );
-		return getBlocksByName( PAGE_CONTENT_BLOCKS );
-	}, [] );
-	return <BlockQuickNavigation clientIds={ clientIds } />;
-}

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

@@ -1,249 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	Button,
-	ToggleControl,
-	Dropdown,
-	__experimentalText as Text,
-	__experimentalVStack as VStack,
-	TextControl,
-	RadioControl,
-	VisuallyHidden,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
-import { useState, useMemo } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
-import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
-import { useInstanceId } from '@wordpress/compose';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import StatusLabel from '../../sidebar-navigation-screen-page/status-label';
-import { unlock } from '../../../lock-unlock';
-
-const { PostPanelRow } = unlock( editorPrivateApis );
-
-const STATUS_OPTIONS = [
-	{
-		label: (
-			<>
-				{ __( 'Draft' ) }
-				<Text variant="muted">{ __( 'Not ready to publish.' ) }</Text>
-			</>
-		),
-		value: 'draft',
-	},
-	{
-		label: (
-			<>
-				{ __( 'Pending' ) }
-				<Text variant="muted">
-					{ __( 'Waiting for review before publishing.' ) }
-				</Text>
-			</>
-		),
-		value: 'pending',
-	},
-	{
-		label: (
-			<>
-				{ __( 'Private' ) }
-				<Text variant="muted">
-					{ __( 'Only visible to site admins and editors.' ) }
-				</Text>
-			</>
-		),
-		value: 'private',
-	},
-	{
-		label: (
-			<>
-				{ __( 'Scheduled' ) }
-				<Text variant="muted">
-					{ __( 'Publish automatically on a chosen date.' ) }
-				</Text>
-			</>
-		),
-		value: 'future',
-	},
-	{
-		label: (
-			<>
-				{ __( 'Published' ) }
-				<Text variant="muted">{ __( 'Visible to everyone.' ) }</Text>
-			</>
-		),
-		value: 'publish',
-	},
-];
-
-export default function PageStatus( {
-	postType,
-	postId,
-	status,
-	password,
-	date,
-} ) {
-	const [ showPassword, setShowPassword ] = useState( !! password );
-	const instanceId = useInstanceId( PageStatus );
-
-	const { editEntityRecord } = useDispatch( coreStore );
-	const { createErrorNotice } = useDispatch( noticesStore );
-
-	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
-	// Memoize popoverProps to avoid returning a new object every time.
-	const popoverProps = useMemo(
-		() => ( {
-			// Anchor the popover to the middle of the entire row so that it doesn't
-			// move around when the label changes.
-			anchor: popoverAnchor,
-			'aria-label': __( 'Change status' ),
-			placement: 'bottom-end',
-		} ),
-		[ popoverAnchor ]
-	);
-
-	const saveStatus = async ( {
-		status: newStatus = status,
-		password: newPassword = password,
-		date: newDate = date,
-	} ) => {
-		try {
-			await editEntityRecord( 'postType', postType, postId, {
-				status: newStatus,
-				date: newDate,
-				password: newPassword,
-			} );
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while updating the status' );
-
-			createErrorNotice( errorMessage, {
-				type: 'snackbar',
-			} );
-		}
-	};
-
-	const handleTogglePassword = ( value ) => {
-		setShowPassword( value );
-		if ( ! value ) {
-			saveStatus( { password: '' } );
-		}
-	};
-
-	const handleStatus = ( value ) => {
-		let newDate = date;
-		let newPassword = password;
-		if ( value === 'publish' ) {
-			if ( new Date( date ) > new Date() ) {
-				newDate = null;
-			}
-		} else if ( value === 'future' ) {
-			if ( ! date || new Date( date ) < new Date() ) {
-				newDate = new Date();
-				newDate.setDate( newDate.getDate() + 7 );
-			}
-		} else if ( value === 'private' && password ) {
-			setShowPassword( false );
-			newPassword = '';
-		}
-		saveStatus( {
-			status: value,
-			date: newDate,
-			password: newPassword,
-		} );
-	};
-
-	return (
-		<PostPanelRow label={ __( 'Status' ) }>
-			<Dropdown
-				contentClassName="edit-site-change-status__content"
-				popoverProps={ popoverProps }
-				focusOnMount
-				ref={ setPopoverAnchor }
-				renderToggle={ ( { onToggle } ) => (
-					<Button
-						className="edit-site-summary-field__trigger"
-						variant="tertiary"
-						onClick={ onToggle }
-					>
-						<StatusLabel
-							status={ password ? 'protected' : status }
-						/>
-					</Button>
-				) }
-				renderContent={ ( { onClose } ) => (
-					<>
-						<InspectorPopoverHeader
-							title={ __( 'Status' ) }
-							onClose={ onClose }
-						/>
-						<form>
-							<VStack spacing={ 5 }>
-								<RadioControl
-									className="edit-site-change-status__options"
-									hideLabelFromVision
-									label={ __( 'Status' ) }
-									options={ STATUS_OPTIONS }
-									onChange={ handleStatus }
-									selected={ status }
-								/>
-								{ status !== 'private' && (
-									<fieldset className="edit-site-change-status__password-fieldset">
-										<Text
-											as="legend"
-											className="edit-site-change-status__password-legend"
-											size="11"
-											lineHeight={ 1.4 }
-											weight={ 500 }
-											upperCase
-										>
-											{ __( 'Password' ) }
-										</Text>
-										<ToggleControl
-											label={ __(
-												'Hide this page behind a password'
-											) }
-											checked={ showPassword }
-											onChange={ handleTogglePassword }
-										/>
-										{ showPassword && (
-											<div className="edit-site-change-status__password-input">
-												<VisuallyHidden
-													as="label"
-													htmlFor={ `edit-site-change-status__password-input-${ instanceId }` }
-												>
-													{ __( 'Create password' ) }
-												</VisuallyHidden>
-												<TextControl
-													onChange={ ( value ) =>
-														saveStatus( {
-															password: value,
-														} )
-													}
-													value={ password }
-													placeholder={ __(
-														'Use a secure password'
-													) }
-													type="text"
-													id={ `edit-site-change-status__password-input-${ instanceId }` }
-												/>
-											</div>
-										) }
-									</fieldset>
-								) }
-							</VStack>
-						</form>
-					</>
-				) }
-			/>
-		</PostPanelRow>
-	);
-}

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

@@ -1,49 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalVStack as VStack } from '@wordpress/components';
-import {
-	PluginPostStatusInfo,
-	PostAuthorPanel,
-	PostURLPanel,
-	PostSchedulePanel,
-	PostTemplatePanel,
-	PostFeaturedImagePanel,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import PageStatus from './page-status';
-
-export default function PageSummary( {
-	status,
-	date,
-	password,
-	postId,
-	postType,
-} ) {
-	return (
-		<VStack spacing={ 0 }>
-			<PluginPostStatusInfo.Slot>
-				{ ( fills ) => (
-					<>
-						<PostFeaturedImagePanel withPanelBody={ false } />
-						<PageStatus
-							status={ status }
-							date={ date }
-							password={ password }
-							postId={ postId }
-							postType={ postType }
-						/>
-						<PostSchedulePanel />
-						<PostTemplatePanel />
-						<PostURLPanel />
-						<PostAuthorPanel />
-						{ fills }
-					</>
-				) }
-			</PluginPostStatusInfo.Slot>
-		</VStack>
-	);
-}

package/src/components/sidebar-edit-mode/page-panels/style.scss

@@ -1,34 +0,0 @@
-.edit-site-change-status__content {
-	.components-popover__content {
-		min-width: 320px;
-		padding: $grid-unit-20;
-	}
-
-	.edit-site-change-status__options {
-		.components-base-control__field > .components-v-stack {
-			gap: $grid-unit-10;
-		}
-
-		label {
-			.components-text {
-				display: block;
-			}
-		}
-	}
-
-	.edit-site-change-status__password-legend {
-		padding: 0;
-		margin-bottom: $grid-unit-10;
-	}
-}
-
-.edit-site-summary-field__trigger {
-	max-width: 100%;
-
-	// Truncate
-	display: block;
-	text-align: left;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}