@wordpress/edit-post 7.34.0 → 8.0.0

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

@@ -1,128 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	PanelBody,
-} from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	PluginPostStatusInfo,
-	PostAuthorPanel,
-	PostSchedulePanel,
-	PostSyncStatus,
-	PostURLPanel,
-	PostTemplatePanel,
-	PostFeaturedImagePanel,
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import PostTrash from '../post-trash';
-import PostSticky from '../post-sticky';
-import PostSlug from '../post-slug';
-import PostFormat from '../post-format';
-import { unlock } from '../../../lock-unlock';
-
-const {
-	PostStatus: PostStatusPanel,
-	PrivatePostExcerptPanel,
-	PostContentInformation,
-	PostLastEditedPanel,
-} = unlock( editorPrivateApis );
-
-/**
- * Module Constants
- */
-const PANEL_NAME = 'post-status';
-
-export default function PostStatus() {
-	const { isOpened, isRemoved, showPostContentPanels } = useSelect(
-		( select ) => {
-			// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
-			// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
-			const {
-				isEditorPanelRemoved,
-				isEditorPanelOpened,
-				getCurrentPostType,
-			} = select( editorStore );
-			const postType = getCurrentPostType();
-			return {
-				isRemoved: isEditorPanelRemoved( PANEL_NAME ),
-				isOpened: isEditorPanelOpened( PANEL_NAME ),
-				// Post excerpt panel is rendered in different place depending on the post type.
-				// So we cannot make this check inside the PostExcerpt component based on the current edited entity.
-				showPostContentPanels: ! [
-					'wp_template',
-					'wp_template_part',
-					'wp_block',
-				].includes( postType ),
-			};
-		},
-		[]
-	);
-	const { toggleEditorPanelOpened } = useDispatch( editorStore );
-
-	if ( isRemoved ) {
-		return null;
-	}
-
-	return (
-		<PanelBody
-			className="edit-post-post-status"
-			title={ __( 'Summary' ) }
-			opened={ isOpened }
-			onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
-		>
-			<PluginPostStatusInfo.Slot>
-				{ ( fills ) => (
-					<>
-						{ showPostContentPanels && (
-							<VStack
-								spacing={ 3 }
-								//  TODO: this needs to be consolidated with the panel in site 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' } }
-						>
-							<PostStatusPanel />
-							<PostSchedulePanel />
-							<PostTemplatePanel />
-							<PostURLPanel />
-							<PostSyncStatus />
-						</VStack>
-						<PostSticky />
-						<PostFormat />
-						<PostSlug />
-						<PostAuthorPanel />
-						{ fills }
-						<HStack
-							style={ {
-								marginTop: '16px',
-							} }
-						>
-							<PostTrash />
-						</HStack>
-					</>
-				) }
-			</PluginPostStatusInfo.Slot>
-		</PanelBody>
-	);
-}

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

@@ -1,27 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	PostSticky as PostStickyForm,
-	PostStickyCheck,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../../lock-unlock';
-
-const { PostPanelRow } = unlock( editorPrivateApis );
-
-export function PostSticky() {
-	return (
-		<PostStickyCheck>
-			<PostPanelRow>
-				<PostStickyForm />
-			</PostPanelRow>
-		</PostStickyCheck>
-	);
-}
-
-export default PostSticky;

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

@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { PostTrash as PostTrashLink, PostTrashCheck } from '@wordpress/editor';
-
-export default function PostTrash() {
-	return (
-		<PostTrashCheck>
-			<PostTrashLink />
-		</PostTrashCheck>
-	);
-}

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

@@ -1,88 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { Dropdown, Button } from '@wordpress/components';
-import {
-	PostVisibility as PostVisibilityForm,
-	PostVisibilityLabel,
-	PostVisibilityCheck,
-	usePostVisibilityLabel,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { useMemo, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../../lock-unlock';
-
-const { PostPanelRow } = unlock( editorPrivateApis );
-
-export function PostVisibility() {
-	// 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 the popover to the middle of the entire row so that it doesn't
-			// move around when the label changes.
-			anchor: popoverAnchor,
-			placement: 'bottom-end',
-		} ),
-		[ popoverAnchor ]
-	);
-
-	return (
-		<PostVisibilityCheck
-			render={ ( { canEdit } ) => (
-				<PostPanelRow
-					label={ __( 'Visibility' ) }
-					ref={ setPopoverAnchor }
-				>
-					{ ! canEdit && (
-						<span>
-							<PostVisibilityLabel />
-						</span>
-					) }
-					{ canEdit && (
-						<Dropdown
-							contentClassName="edit-post-post-visibility__dialog"
-							popoverProps={ popoverProps }
-							focusOnMount
-							renderToggle={ ( { isOpen, onToggle } ) => (
-								<PostVisibilityToggle
-									isOpen={ isOpen }
-									onClick={ onToggle }
-								/>
-							) }
-							renderContent={ ( { onClose } ) => (
-								<PostVisibilityForm onClose={ onClose } />
-							) }
-						/>
-					) }
-				</PostPanelRow>
-			) }
-		/>
-	);
-}
-
-function PostVisibilityToggle( { isOpen, onClick } ) {
-	const label = usePostVisibilityLabel();
-	return (
-		<Button
-			__next40pxDefaultSize
-			className="edit-post-post-visibility__toggle"
-			variant="tertiary"
-			aria-expanded={ isOpen }
-			// translators: %s: Current post visibility.
-			aria-label={ sprintf( __( 'Select visibility: %s' ), label ) }
-			onClick={ onClick }
-		>
-			{ label }
-		</Button>
-	);
-}
-
-export default PostVisibility;

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

@@ -1,5 +0,0 @@
-.edit-post-post-visibility__dialog .editor-post-visibility {
-	// sidebar width - popover padding - form margin
-	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
-	margin: $grid-unit-10;
-}

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

@@ -1,49 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
-import { __, _x } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { forwardRef } from '@wordpress/element';
-import { store as editorStore } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../../lock-unlock';
-import { sidebars } from '../settings-sidebar';
-
-const { Tabs } = unlock( componentsPrivateApis );
-
-const SettingsHeader = ( _, ref ) => {
-	const { documentLabel } = useSelect( ( select ) => {
-		const { getPostTypeLabel } = select( editorStore );
-
-		return {
-			// translators: Default label for the Document sidebar tab, not selected.
-			documentLabel: getPostTypeLabel() || _x( 'Document', 'noun' ),
-		};
-	}, [] );
-
-	return (
-		<Tabs.TabList ref={ ref }>
-			<Tabs.Tab
-				tabId={ sidebars.document }
-				// Used for focus management in the SettingsSidebar component.
-				data-tab-id={ sidebars.document }
-			>
-				{ documentLabel }
-			</Tabs.Tab>
-			<Tabs.Tab
-				tabId={ sidebars.block }
-				// Used for focus management in the SettingsSidebar component.
-				data-tab-id={ sidebars.block }
-			>
-				{ /* translators: Text label for the Block Settings Sidebar tab. */ }
-				{ __( 'Block' ) }
-			</Tabs.Tab>
-		</Tabs.TabList>
-	);
-};
-
-export default forwardRef( SettingsHeader );

package/src/components/sidebar/settings-sidebar/index.js

@@ -1,247 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	BlockInspector,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	Platform,
-	useCallback,
-	useContext,
-	useEffect,
-	useRef,
-} from '@wordpress/element';
-import { isRTL, __, sprintf } from '@wordpress/i18n';
-import { drawerLeft, drawerRight } from '@wordpress/icons';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import {
-	store as editorStore,
-	PageAttributesPanel,
-	PluginDocumentSettingPanel,
-	PluginSidebar,
-	PostDiscussionPanel,
-	PostLastRevisionPanel,
-	PostTaxonomiesPanel,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { addQueryArgs } from '@wordpress/url';
-import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
-import SettingsHeader from '../settings-header';
-import PostStatus from '../post-status';
-import MetaBoxes from '../../meta-boxes';
-import { store as editPostStore } from '../../../store';
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
-import { unlock } from '../../../lock-unlock';
-
-const { PostCardPanel, PostActions, interfaceStore } =
-	unlock( editorPrivateApis );
-const { Tabs } = unlock( componentsPrivateApis );
-const { PatternOverridesPanel, useAutoSwitchEditorSidebars } =
-	unlock( editorPrivateApis );
-
-const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
-	web: true,
-	native: false,
-} );
-export const sidebars = {
-	document: 'edit-post/document',
-	block: 'edit-post/block',
-};
-
-const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => {
-	const tabListRef = useRef( null );
-	// Because `PluginSidebar` 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 ] );
-	const { createSuccessNotice } = useDispatch( noticesStore );
-
-	const onActionPerformed = useCallback(
-		( actionId, items ) => {
-			switch ( actionId ) {
-				case 'move-to-trash':
-					{
-						const postType = items[ 0 ].type;
-						document.location.href = addQueryArgs( 'edit.php', {
-							post_type: postType,
-						} );
-					}
-					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: () => {
-											const postId = newItem.id;
-											document.location.href =
-												addQueryArgs( 'post.php', {
-													post: postId,
-													action: 'edit',
-												} );
-										},
-									},
-								],
-							}
-						);
-					}
-					break;
-			}
-		},
-		[ createSuccessNotice ]
-	);
-
-	return (
-		<PluginSidebar
-			identifier={ tabName }
-			header={
-				<Tabs.Context.Provider value={ tabsContextValue }>
-					<SettingsHeader ref={ tabListRef } />
-				</Tabs.Context.Provider>
-			}
-			closeLabel={ __( 'Close Settings' ) }
-			// 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-post-sidebar__panel"
-			headerClassName="edit-post-sidebar__panel-tabs"
-			/* translators: button label text should, if possible, be under 16 characters. */
-			title={ __( 'Settings' ) }
-			toggleShortcut={ keyboardShortcut }
-			icon={ isRTL() ? drawerLeft : drawerRight }
-			isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
-		>
-			<Tabs.Context.Provider value={ tabsContextValue }>
-				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
-					<PostCardPanel
-						actions={
-							<PostActions
-								onActionPerformed={ onActionPerformed }
-							/>
-						}
-					/>
-					{ ! isEditingTemplate && <PostStatus /> }
-					<PluginDocumentSettingPanel.Slot />
-					<PostLastRevisionPanel />
-					<PostTaxonomiesPanel />
-					<PostDiscussionPanel />
-					<PageAttributesPanel />
-					<PatternOverridesPanel />
-					{ ! isEditingTemplate && <MetaBoxes location="side" /> }
-				</Tabs.TabPanel>
-				<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
-					<BlockInspector />
-				</Tabs.TabPanel>
-			</Tabs.Context.Provider>
-		</PluginSidebar>
-	);
-};
-
-const SettingsSidebar = () => {
-	useAutoSwitchEditorSidebars();
-	const { tabName, keyboardShortcut, isEditingTemplate } = useSelect(
-		( select ) => {
-			const shortcut = select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/editor/toggle-sidebar' );
-
-			const sidebar =
-				select( interfaceStore ).getActiveComplementaryArea( 'core' );
-			const _isEditorSidebarOpened = [
-				sidebars.block,
-				sidebars.document,
-			].includes( sidebar );
-			let _tabName = sidebar;
-			if ( ! _isEditorSidebarOpened ) {
-				_tabName = !! select(
-					blockEditorStore
-				).getBlockSelectionStart()
-					? sidebars.block
-					: sidebars.document;
-			}
-
-			return {
-				tabName: _tabName,
-				keyboardShortcut: shortcut,
-				isEditingTemplate:
-					select( editorStore ).getCurrentPostType() ===
-					'wp_template',
-			};
-		},
-		[]
-	);
-
-	const { openGeneralSidebar } = useDispatch( editPostStore );
-
-	const onTabSelect = useCallback(
-		( newSelectedTabId ) => {
-			if ( !! newSelectedTabId ) {
-				openGeneralSidebar( newSelectedTabId );
-			}
-		},
-		[ openGeneralSidebar ]
-	);
-
-	return (
-		<Tabs
-			selectedTabId={ tabName }
-			onSelect={ onTabSelect }
-			selectOnMove={ false }
-		>
-			<SidebarContent
-				tabName={ tabName }
-				keyboardShortcut={ keyboardShortcut }
-				isEditingTemplate={ isEditingTemplate }
-			/>
-		</Tabs>
-	);
-};
-
-export default SettingsSidebar;

package/src/components/sidebar/style.scss

@@ -1,18 +0,0 @@
-.components-panel__header.edit-post-sidebar__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;
-		}
-	}
-}
-
-.edit-post-sidebar__panel {
-	margin-top: -1px;
-}

package/src/components/text-editor/index.js

@@ -1,63 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	PostTextEditor,
-	PostTitleRaw,
-	store as editorStore,
-} from '@wordpress/editor';
-import { Button } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { displayShortcut } from '@wordpress/keycodes';
-import { useEffect, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
-export default function TextEditor() {
-	const isRichEditingEnabled = useSelect( ( select ) => {
-		return select( editorStore ).getEditorSettings().richEditingEnabled;
-	}, [] );
-	const { switchEditorMode } = useDispatch( editorStore );
-
-	const { isWelcomeGuideVisible } = useSelect( ( select ) => {
-		const { isFeatureActive } = select( editPostStore );
-
-		return {
-			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
-		};
-	}, [] );
-
-	const titleRef = useRef();
-
-	useEffect( () => {
-		if ( isWelcomeGuideVisible ) {
-			return;
-		}
-		titleRef?.current?.focus();
-	}, [ isWelcomeGuideVisible ] );
-
-	return (
-		<div className="edit-post-text-editor">
-			{ isRichEditingEnabled && (
-				<div className="edit-post-text-editor__toolbar">
-					<h2>{ __( 'Editing code' ) }</h2>
-					<Button
-						variant="tertiary"
-						onClick={ () => switchEditorMode( 'visual' ) }
-						shortcut={ displayShortcut.secondary( 'm' ) }
-					>
-						{ __( 'Exit code editor' ) }
-					</Button>
-				</div>
-			) }
-			<div className="edit-post-text-editor__body">
-				<PostTitleRaw ref={ titleRef } />
-				<PostTextEditor />
-			</div>
-		</div>
-	);
-}