@wordpress/edit-site 6.11.0 → 6.12.1-next.082ed6819.0

package/src/components/post-fields/index.js

@@ -1,361 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { decodeEntities } from '@wordpress/html-entities';
-import { featuredImageField, slugField, parentField } from '@wordpress/fields';
-import {
-	createInterpolateElement,
-	useMemo,
-	useState,
-} from '@wordpress/element';
-import { dateI18n, getDate, getSettings } from '@wordpress/date';
-import {
-	trash,
-	drafts,
-	published,
-	scheduled,
-	pending,
-	notAllowed,
-	commentAuthorAvatar as authorIcon,
-} from '@wordpress/icons';
-import { __experimentalHStack as HStack, Icon } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import {
-	LAYOUT_GRID,
-	LAYOUT_TABLE,
-	OPERATOR_IS_ANY,
-} from '../../utils/constants';
-import { default as Link } from '../routes/link';
-
-// See https://github.com/WordPress/gutenberg/issues/55886
-// We do not support custom statutes at the moment.
-const STATUSES = [
-	{
-		value: 'draft',
-		label: __( 'Draft' ),
-		icon: drafts,
-		description: __( 'Not ready to publish.' ),
-	},
-	{
-		value: 'future',
-		label: __( 'Scheduled' ),
-		icon: scheduled,
-		description: __( 'Publish automatically on a chosen date.' ),
-	},
-	{
-		value: 'pending',
-		label: __( 'Pending Review' ),
-		icon: pending,
-		description: __( 'Waiting for review before publishing.' ),
-	},
-	{
-		value: 'private',
-		label: __( 'Private' ),
-		icon: notAllowed,
-		description: __( 'Only visible to site admins and editors.' ),
-	},
-	{
-		value: 'publish',
-		label: __( 'Published' ),
-		icon: published,
-		description: __( 'Visible to everyone.' ),
-	},
-	{ value: 'trash', label: __( 'Trash' ), icon: trash },
-];
-
-const getFormattedDate = ( dateToDisplay ) =>
-	dateI18n(
-		getSettings().formats.datetimeAbbreviated,
-		getDate( dateToDisplay )
-	);
-
-function PostStatusField( { item } ) {
-	const status = STATUSES.find( ( { value } ) => value === item.status );
-	const label = status?.label || item.status;
-	const icon = status?.icon;
-	return (
-		<HStack alignment="left" spacing={ 0 }>
-			{ icon && (
-				<div className="edit-site-post-list__status-icon">
-					<Icon icon={ icon } />
-				</div>
-			) }
-			<span>{ label }</span>
-		</HStack>
-	);
-}
-
-function PostAuthorField( { item } ) {
-	const { text, imageUrl } = useSelect(
-		( select ) => {
-			const { getUser } = select( coreStore );
-			const user = getUser( item.author );
-			return {
-				imageUrl: user?.avatar_urls?.[ 48 ],
-				text: user?.name,
-			};
-		},
-		[ item ]
-	);
-	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
-	return (
-		<HStack alignment="left" spacing={ 0 }>
-			{ !! imageUrl && (
-				<div
-					className={ clsx( 'page-templates-author-field__avatar', {
-						'is-loaded': isImageLoaded,
-					} ) }
-				>
-					<img
-						onLoad={ () => setIsImageLoaded( true ) }
-						alt={ __( 'Author avatar' ) }
-						src={ imageUrl }
-					/>
-				</div>
-			) }
-			{ ! imageUrl && (
-				<div className="page-templates-author-field__icon">
-					<Icon icon={ authorIcon } />
-				</div>
-			) }
-			<span className="page-templates-author-field__name">{ text }</span>
-		</HStack>
-	);
-}
-
-function usePostFields( viewType ) {
-	const { records: authors, isResolving: isLoadingAuthors } =
-		useEntityRecords( 'root', 'user', { per_page: -1 } );
-
-	const { frontPageId, postsPageId } = useSelect( ( select ) => {
-		const { getEntityRecord } = select( coreStore );
-		const siteSettings = getEntityRecord( 'root', 'site' );
-		return {
-			frontPageId: siteSettings?.page_on_front,
-			postsPageId: siteSettings?.page_for_posts,
-		};
-	}, [] );
-
-	const fields = useMemo(
-		() => [
-			featuredImageField,
-			{
-				label: __( 'Title' ),
-				id: 'title',
-				type: 'text',
-				getValue: ( { item } ) =>
-					typeof item.title === 'string'
-						? item.title
-						: item.title?.raw,
-				render: ( { item } ) => {
-					const addLink =
-						[ LAYOUT_TABLE, LAYOUT_GRID ].includes( viewType ) &&
-						item.status !== 'trash';
-					const renderedTitle =
-						typeof item.title === 'string'
-							? item.title
-							: item.title?.rendered;
-					const title = addLink ? (
-						<Link
-							params={ {
-								postId: item.id,
-								postType: item.type,
-								canvas: 'edit',
-							} }
-						>
-							{ decodeEntities( renderedTitle ) ||
-								__( '(no title)' ) }
-						</Link>
-					) : (
-						<span>
-							{ decodeEntities( renderedTitle ) ||
-								__( '(no title)' ) }
-						</span>
-					);
-
-					let suffix = '';
-					if ( item.id === frontPageId ) {
-						suffix = (
-							<span className="edit-site-post-list__title-badge">
-								{ __( 'Homepage' ) }
-							</span>
-						);
-					} else if ( item.id === postsPageId ) {
-						suffix = (
-							<span className="edit-site-post-list__title-badge">
-								{ __( 'Posts Page' ) }
-							</span>
-						);
-					}
-
-					return (
-						<HStack
-							className="edit-site-post-list__title"
-							alignment="center"
-							justify="flex-start"
-						>
-							{ title }
-							{ suffix }
-						</HStack>
-					);
-				},
-				enableHiding: false,
-			},
-			{
-				label: __( 'Author' ),
-				id: 'author',
-				type: 'integer',
-				elements:
-					authors?.map( ( { id, name } ) => ( {
-						value: id,
-						label: name,
-					} ) ) || [],
-				render: PostAuthorField,
-				sort: ( a, b, direction ) => {
-					const nameA = a._embedded?.author?.[ 0 ]?.name || '';
-					const nameB = b._embedded?.author?.[ 0 ]?.name || '';
-
-					return direction === 'asc'
-						? nameA.localeCompare( nameB )
-						: nameB.localeCompare( nameA );
-				},
-			},
-			{
-				label: __( 'Status' ),
-				id: 'status',
-				type: 'text',
-				elements: STATUSES,
-				render: PostStatusField,
-				Edit: 'radio',
-				enableSorting: false,
-				filterBy: {
-					operators: [ OPERATOR_IS_ANY ],
-				},
-			},
-			{
-				label: __( 'Date' ),
-				id: 'date',
-				type: 'datetime',
-				render: ( { item } ) => {
-					const isDraftOrPrivate = [ 'draft', 'private' ].includes(
-						item.status
-					);
-					if ( isDraftOrPrivate ) {
-						return createInterpolateElement(
-							sprintf(
-								/* translators: %s: page creation or modification date. */
-								__( '<span>Modified: <time>%s</time></span>' ),
-								getFormattedDate( item.date )
-							),
-							{
-								span: <span />,
-								time: <time />,
-							}
-						);
-					}
-
-					const isScheduled = item.status === 'future';
-					if ( isScheduled ) {
-						return createInterpolateElement(
-							sprintf(
-								/* translators: %s: page creation date */
-								__( '<span>Scheduled: <time>%s</time></span>' ),
-								getFormattedDate( item.date )
-							),
-							{
-								span: <span />,
-								time: <time />,
-							}
-						);
-					}
-
-					const isPublished = item.status === 'publish';
-					if ( isPublished ) {
-						return createInterpolateElement(
-							sprintf(
-								/* translators: %s: page creation time */
-								__( '<span>Published: <time>%s</time></span>' ),
-								getFormattedDate( item.date )
-							),
-							{
-								span: <span />,
-								time: <time />,
-							}
-						);
-					}
-
-					// Pending posts show the modified date if it's newer.
-					const dateToDisplay =
-						getDate( item.modified ) > getDate( item.date )
-							? item.modified
-							: item.date;
-
-					const isPending = item.status === 'pending';
-					if ( isPending ) {
-						return createInterpolateElement(
-							sprintf(
-								/* translators: %s: page creation or modification date. */
-								__( '<span>Modified: <time>%s</time></span>' ),
-								getFormattedDate( dateToDisplay )
-							),
-							{
-								span: <span />,
-								time: <time />,
-							}
-						);
-					}
-
-					// Unknow status.
-					return <time>{ getFormattedDate( item.date ) }</time>;
-				},
-			},
-			slugField,
-			parentField,
-			{
-				id: 'comment_status',
-				label: __( 'Discussion' ),
-				type: 'text',
-				Edit: 'radio',
-				enableSorting: false,
-				filterBy: {
-					operators: [],
-				},
-				elements: [
-					{
-						value: 'open',
-						label: __( 'Open' ),
-						description: __(
-							'Visitors can add new comments and replies.'
-						),
-					},
-					{
-						value: 'closed',
-						label: __( 'Closed' ),
-						description: __(
-							'Visitors cannot add new comments or replies. Existing comments remain visible.'
-						),
-					},
-				],
-			},
-		],
-		[ authors, viewType, frontPageId, postsPageId ]
-	);
-
-	return {
-		isLoading: isLoadingAuthors,
-		fields,
-	};
-}
-
-export default usePostFields;

package/src/components/post-fields/style.scss

@@ -1,3 +0,0 @@
-.components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
-	z-index: z-index(".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown");
-}

package/src/components/posts-app/router.js

@@ -1,69 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import Editor from '../editor';
-import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
-import DataViewsSidebarContent from '../sidebar-dataviews';
-import PostList from '../post-list';
-
-const { useLocation } = unlock( routerPrivateApis );
-
-export default function useActiveRoute() {
-	const { params = {} } = useLocation();
-	const { postType, layout, canvas } = params;
-	const labels = useSelect(
-		( select ) => {
-			return select( coreStore ).getPostType( postType )?.labels;
-		},
-		[ postType ]
-	);
-
-	// Posts list.
-	if ( [ 'post' ].includes( postType ) ) {
-		const isListLayout = layout === 'list' || ! layout;
-		return {
-			name: 'posts-list',
-			areas: {
-				sidebar: (
-					<SidebarNavigationScreen
-						title={ labels?.name }
-						isRoot
-						content={ <DataViewsSidebarContent /> }
-					/>
-				),
-				content: <PostList postType={ postType } />,
-				preview: ( isListLayout || canvas === 'edit' ) && (
-					<Editor isPostsList />
-				),
-				mobile:
-					canvas === 'edit' ? (
-						<Editor isPostsList />
-					) : (
-						<PostList postType={ postType } />
-					),
-			},
-			widths: {
-				content: isListLayout ? 380 : undefined,
-			},
-		};
-	}
-
-	// Fallback shows the home page preview
-	return {
-		name: 'default',
-		areas: {
-			sidebar: <SidebarNavigationScreenMain />,
-			preview: <Editor isPostsList />,
-			mobile: canvas === 'edit' && <Editor isPostsList />,
-		},
-	};
-}

package/src/components/sidebar-navigation-screen-details-panel/index.js

@@ -1,40 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalVStack as VStack,
-	__experimentalHeading as Heading,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import SidebarNavigationScreenDetailsPanelLabel from './sidebar-navigation-screen-details-panel-label';
-import SidebarNavigationScreenDetailsPanelRow from './sidebar-navigation-screen-details-panel-row';
-import SidebarNavigationScreenDetailsPanelValue from './sidebar-navigation-screen-details-panel-value';
-
-function SidebarNavigationScreenDetailsPanel( { title, children, spacing } ) {
-	return (
-		<VStack
-			className="edit-site-sidebar-navigation-details-screen-panel"
-			spacing={ spacing }
-		>
-			{ title && (
-				<Heading
-					className="edit-site-sidebar-navigation-details-screen-panel__heading"
-					level={ 2 }
-				>
-					{ title }
-				</Heading>
-			) }
-			{ children }
-		</VStack>
-	);
-}
-
-export {
-	SidebarNavigationScreenDetailsPanel,
-	SidebarNavigationScreenDetailsPanelRow,
-	SidebarNavigationScreenDetailsPanelLabel,
-	SidebarNavigationScreenDetailsPanelValue,
-};

package/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-label.js

@@ -1,14 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalText as Text } from '@wordpress/components';
-
-export default function SidebarNavigationScreenDetailsPanelLabel( {
-	children,
-} ) {
-	return (
-		<Text className="edit-site-sidebar-navigation-details-screen-panel__label">
-			{ children }
-		</Text>
-	);
-}

package/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js

@@ -1,31 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { __experimentalHStack as HStack } from '@wordpress/components';
-
-export default function SidebarNavigationScreenDetailsPanelRow( {
-	label,
-	children,
-	className,
-	...extraProps
-} ) {
-	return (
-		<HStack
-			key={ label }
-			spacing={ 5 }
-			alignment="left"
-			className={ clsx(
-				'edit-site-sidebar-navigation-details-screen-panel__row',
-				className
-			) }
-			{ ...extraProps }
-		>
-			{ children }
-		</HStack>
-	);
-}

package/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-value.js

@@ -1,14 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalText as Text } from '@wordpress/components';
-
-export default function SidebarNavigationScreenDetailsPanelValue( {
-	children,
-} ) {
-	return (
-		<Text className="edit-site-sidebar-navigation-details-screen-panel__value">
-			{ children }
-		</Text>
-	);
-}

package/src/components/sidebar-navigation-screen-details-panel/style.scss

@@ -1,26 +0,0 @@
-.edit-site-sidebar-navigation-details-screen-panel {
-	margin: $grid-unit-30 0;
-
-	&:last-of-type {
-		margin-bottom: 0;
-	}
-
-	.edit-site-sidebar-navigation-details-screen-panel__heading {
-		color: $gray-400;
-		text-transform: uppercase;
-		font-weight: 500;
-		font-size: 11px;
-		padding: 0;
-		margin-bottom: 0;
-	}
-}
-
-.edit-site-sidebar-navigation-details-screen-panel__label.edit-site-sidebar-navigation-details-screen-panel__label {
-	color: $gray-600;
-	width: 100px;
-	flex-shrink: 0;
-}
-
-.edit-site-sidebar-navigation-details-screen-panel__value.edit-site-sidebar-navigation-details-screen-panel__value {
-	color: $gray-200;
-}

package/src/components/site-editor-routes/styles-edit.js

@@ -1,17 +0,0 @@
-/**
- * Internal dependencies
- */
-import Editor from '../editor';
-import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
-
-export const stylesEditRoute = {
-	name: 'styles-edit',
-	match: ( params ) => {
-		return params.path === '/wp_global_styles' && params.canvas === 'edit';
-	},
-	areas: {
-		sidebar: <SidebarNavigationScreenGlobalStyles backPath={ {} } />,
-		preview: <Editor />,
-		mobile: <Editor />,
-	},
-};