@wordpress/edit-site 5.34.0 → 6.0.0

package/src/components/pattern-modal/rename.js

@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { PATTERN_MODALS } from './';
-import { unlock } from '../../lock-unlock';
-import useEditedEntityRecord from '../use-edited-entity-record';
-
-const { RenamePatternModal } = unlock( patternsPrivateApis );
-const { interfaceStore } = unlock( editorPrivateApis );
-
-export default function PatternRenameModal() {
-	const { record: pattern } = useEditedEntityRecord();
-	const { closeModal } = useDispatch( interfaceStore );
-	const isActive = useSelect( ( select ) =>
-		select( interfaceStore ).isModalActive( PATTERN_MODALS.rename )
-	);
-
-	if ( ! isActive ) {
-		return null;
-	}
-
-	return <RenamePatternModal onClose={ closeModal } pattern={ pattern } />;
-}

package/src/components/rename-post-menu-item/index.js

@@ -1,138 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-import {
-	Button,
-	MenuItem,
-	Modal,
-	TextControl,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-
-export default function RenamePostMenuItem( { post } ) {
-	const title = decodeEntities(
-		typeof post.title === 'string' ? post.title : post.title.rendered
-	);
-	const [ editedTitle, setEditedTitle ] = useState( title );
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-
-	const {
-		editEntityRecord,
-		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
-	} = useDispatch( coreStore );
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
-
-	if ( post.type === TEMPLATE_POST_TYPE && ! post.is_custom ) {
-		return null;
-	}
-
-	async function onRename( event ) {
-		event.preventDefault();
-
-		if ( editedTitle === title ) {
-			return;
-		}
-
-		try {
-			await editEntityRecord( 'postType', post.type, post.id, {
-				title: editedTitle,
-			} );
-
-			// Update state before saving rerenders the list.
-			setEditedTitle( '' );
-			setIsModalOpen( false );
-
-			// Persist edited entity.
-			await saveSpecifiedEntityEdits(
-				'postType',
-				post.type,
-				post.id,
-				[ 'title' ], // Only save title to avoid persisting other edits.
-				{
-					throwOnError: true,
-				}
-			);
-
-			createSuccessNotice( __( 'Name updated.' ), {
-				id: 'template-update',
-				type: 'snackbar',
-			} );
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while updating the name.' );
-
-			createErrorNotice( errorMessage, { type: 'snackbar' } );
-		}
-	}
-
-	return (
-		<>
-			<MenuItem
-				onClick={ () => {
-					setIsModalOpen( true );
-					setEditedTitle( title );
-				} }
-			>
-				{ __( 'Rename' ) }
-			</MenuItem>
-			{ isModalOpen && (
-				<Modal
-					title={ __( 'Rename' ) }
-					onRequestClose={ () => {
-						setIsModalOpen( false );
-					} }
-					overlayClassName="edit-site-list__rename-modal"
-					focusOnMount="firstContentElement"
-				>
-					<form onSubmit={ onRename }>
-						<VStack spacing="5">
-							<TextControl
-								__nextHasNoMarginBottom
-								__next40pxDefaultSize
-								label={ __( 'Name' ) }
-								value={ editedTitle }
-								onChange={ setEditedTitle }
-								required
-							/>
-
-							<HStack justify="right">
-								<Button
-									__next40pxDefaultSize
-									variant="tertiary"
-									onClick={ () => {
-										setIsModalOpen( false );
-									} }
-								>
-									{ __( 'Cancel' ) }
-								</Button>
-
-								<Button
-									__next40pxDefaultSize
-									variant="primary"
-									type="submit"
-								>
-									{ __( 'Save' ) }
-								</Button>
-							</HStack>
-						</VStack>
-					</form>
-				</Modal>
-			) }
-		</>
-	);
-}

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

@@ -1,173 +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 {
-	PageAttributesPanel,
-	PostDiscussionPanel,
-	PostLastRevisionPanel,
-	PostTaxonomiesPanel,
-	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, PatternOverridesPanel } =
-	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 /> }
-						<PostLastRevisionPanel />
-						<PostTaxonomiesPanel />
-						<PostDiscussionPanel />
-						<PageAttributesPanel />
-						<PatternOverridesPanel />
-					</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,133 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { PanelBody } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import {
-	PluginDocumentSettingPanel,
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useCallback } from '@wordpress/element';
-import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * 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 { createSuccessNotice } = useDispatch( noticesStore );
-	const history = useHistory();
-	const onActionPerformed = useCallback(
-		( actionId, items ) => {
-			switch ( actionId ) {
-				case 'move-to-trash':
-					{
-						history.push( {
-							path: '/' + items[ 0 ].type,
-							postId: undefined,
-							postType: undefined,
-							canvas: 'view',
-						} );
-					}
-					break;
-				case 'duplicate-post':
-					{
-						const newItem = items[ 0 ];
-						const title =
-							typeof newItem.title === 'string'
-								? newItem.title
-								: newItem.title?.rendered;
-						createSuccessNotice(
-							sprintf(
-								// translators: %s: Title of the created post e.g: "Post 1".
-								__( '"%s" successfully created.' ),
-								title
-							),
-							{
-								type: 'snackbar',
-								id: 'duplicate-post-action',
-								actions: [
-									{
-										label: __( 'Edit' ),
-										onClick: () => {
-											history.push( {
-												path: undefined,
-												postId: newItem.id,
-												postType: newItem.type,
-												canvas: 'edit',
-											} );
-										},
-									},
-								],
-							}
-						);
-					}
-					break;
-			}
-		},
-		[ history, createSuccessNotice ]
-	);
-
-	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>
-			) }
-		</>
-	);
-}

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-summary.js

@@ -1,61 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalVStack as VStack } from '@wordpress/components';
-import {
-	PluginPostStatusInfo,
-	PostAuthorPanel,
-	PostURLPanel,
-	PostSchedulePanel,
-	PostTemplatePanel,
-	PostFeaturedImagePanel,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../../lock-unlock';
-
-const {
-	PrivatePostExcerptPanel,
-	PostStatus,
-	PostContentInformation,
-	PostLastEditedPanel,
-} = unlock( editorPrivateApis );
-
-export default function PageSummary() {
-	return (
-		<VStack spacing={ 0 }>
-			<PluginPostStatusInfo.Slot>
-				{ ( fills ) => (
-					<>
-						<VStack
-							spacing={ 3 }
-							//  TODO: this needs to be consolidated with the panel in post editor, when we unify them.
-							style={ { marginBlockEnd: '24px' } }
-						>
-							<PostFeaturedImagePanel withPanelBody={ false } />
-							<PrivatePostExcerptPanel />
-							<VStack spacing={ 1 }>
-								<PostContentInformation />
-								<PostLastEditedPanel />
-							</VStack>
-						</VStack>
-						<VStack
-							spacing={ 1 }
-							style={ { marginBlockEnd: '12px' } }
-						>
-							<PostStatus />
-							<PostSchedulePanel />
-							<PostTemplatePanel />
-							<PostURLPanel />
-						</VStack>
-						<PostAuthorPanel />
-						{ fills }
-					</>
-				) }
-			</PluginPostStatusInfo.Slot>
-		</VStack>
-	);
-}

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

@@ -1,43 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../../lock-unlock';
-
-const { Tabs } = unlock( componentsPrivateApis );
-
-const SettingsHeader = ( _, ref ) => {
-	const postTypeLabel = useSelect(
-		( select ) => select( editorStore ).getPostTypeLabel(),
-		[]
-	);
-
-	return (
-		<Tabs.TabList ref={ ref }>
-			<Tabs.Tab
-				tabId="edit-post/document"
-				// Used for focus management in the SettingsSidebar component.
-				data-tab-id="edit-post/document"
-			>
-				{ postTypeLabel }
-			</Tabs.Tab>
-			<Tabs.Tab
-				tabId="edit-post/block"
-				// Used for focus management in the SettingsSidebar component.
-				data-tab-id="edit-post/block"
-			>
-				{ __( 'Block' ) }
-			</Tabs.Tab>
-		</Tabs.TabList>
-	);
-};
-
-export default forwardRef( SettingsHeader );

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

@@ -1,14 +0,0 @@
-.components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
-	padding-left: 0;
-	padding-right: $grid-unit-20;
-
-	.components-button.has-icon {
-		padding: 0;
-		min-width: $icon-size;
-		height: $icon-size;
-
-		@include break-medium() {
-			display: flex;
-		}
-	}
-}