@wordpress/edit-site 5.26.0 → 5.27.0

package/src/components/page-patterns/dataviews-patterns.js

@@ -1,380 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalHStack as HStack,
-	Button,
-	__experimentalHeading as Heading,
-	Tooltip,
-	Flex,
-} from '@wordpress/components';
-import { getQueryArgs } from '@wordpress/url';
-import { __, _x } from '@wordpress/i18n';
-import {
-	useState,
-	useMemo,
-	useCallback,
-	useId,
-	useEffect,
-} from '@wordpress/element';
-import {
-	BlockPreview,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import {
-	DataViews,
-	sortByTextFields,
-	getPaginationResults,
-} from '@wordpress/dataviews';
-import {
-	Icon,
-	header,
-	footer,
-	symbolFilled as uncategorized,
-	symbol,
-	lockSmall,
-} from '@wordpress/icons';
-import { usePrevious } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import Page from '../page';
-import {
-	LAYOUT_GRID,
-	PATTERN_TYPES,
-	TEMPLATE_PART_POST_TYPE,
-	PATTERN_SYNC_TYPES,
-	PATTERN_DEFAULT_CATEGORY,
-	ENUMERATION_TYPE,
-	OPERATOR_IN,
-} from '../../utils/constants';
-import {
-	exportJSONaction,
-	renameAction,
-	resetAction,
-	deleteAction,
-	duplicatePatternAction,
-	duplicateTemplatePartAction,
-} from './dataviews-pattern-actions';
-import usePatternSettings from './use-pattern-settings';
-import { unlock } from '../../lock-unlock';
-import usePatterns from './use-patterns';
-import PatternsHeader from './header';
-import { useLink } from '../routes/link';
-
-const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
-	blockEditorPrivateApis
-);
-
-const templatePartIcons = { header, footer, uncategorized };
-const EMPTY_ARRAY = [];
-const defaultConfigPerViewType = {
-	[ LAYOUT_GRID ]: {
-		mediaField: 'preview',
-		primaryField: 'title',
-	},
-};
-const DEFAULT_VIEW = {
-	type: LAYOUT_GRID,
-	search: '',
-	page: 1,
-	perPage: 20,
-	hiddenFields: [ 'sync-status' ],
-	layout: {
-		...defaultConfigPerViewType[ LAYOUT_GRID ],
-	},
-	filters: [],
-};
-
-const SYNC_FILTERS = [
-	{
-		value: PATTERN_SYNC_TYPES.full,
-		label: _x( 'Synced', 'Option that shows all synchronized patterns' ),
-		description: __( 'Patterns that are kept in sync across the site.' ),
-	},
-	{
-		value: PATTERN_SYNC_TYPES.unsynced,
-		label: _x(
-			'Not synced',
-			'Option that shows all patterns that are not synchronized'
-		),
-		description: __(
-			'Patterns that can be changed freely without affecting the site.'
-		),
-	},
-];
-
-function Preview( { item, viewType } ) {
-	const descriptionId = useId();
-	const isUserPattern = item.type === PATTERN_TYPES.user;
-	const isNonUserPattern = item.type === PATTERN_TYPES.theme;
-	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-	const isEmpty = ! item.blocks?.length;
-	// Only custom patterns or custom template parts can be renamed or deleted.
-	const isCustomPattern =
-		isUserPattern || ( isTemplatePart && item.isCustom );
-	const ariaDescriptions = [];
-	if ( isCustomPattern ) {
-		// User patterns don't have descriptions, but can be edited and deleted, so include some help text.
-		ariaDescriptions.push(
-			__( 'Press Enter to edit, or Delete to delete the pattern.' )
-		);
-	} else if ( item.description ) {
-		ariaDescriptions.push( item.description );
-	}
-
-	if ( isNonUserPattern ) {
-		ariaDescriptions.push(
-			__( 'Theme & plugin patterns cannot be edited.' )
-		);
-	}
-	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
-	return (
-		<>
-			<div
-				className={ `page-patterns-preview-field is-viewtype-${ viewType }` }
-				style={ { backgroundColor } }
-			>
-				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
-				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
-				{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
-			</div>
-			{ ariaDescriptions.map( ( ariaDescription, index ) => (
-				<div
-					key={ index }
-					hidden
-					id={ `${ descriptionId }-${ index }` }
-				>
-					{ ariaDescription }
-				</div>
-			) ) }
-		</>
-	);
-}
-
-function Title( { item, categoryId } ) {
-	const isUserPattern = item.type === PATTERN_TYPES.user;
-	const isNonUserPattern = item.type === PATTERN_TYPES.theme;
-	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-	let itemIcon;
-	const { onClick } = useLink( {
-		postType: item.type,
-		postId: isUserPattern ? item.id : item.name,
-		categoryId,
-		categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
-	} );
-	if ( ! isUserPattern && templatePartIcons[ categoryId ] ) {
-		itemIcon = templatePartIcons[ categoryId ];
-	} else {
-		itemIcon =
-			item.syncStatus === PATTERN_SYNC_TYPES.full ? symbol : undefined;
-	}
-	return (
-		<HStack alignment="center" justify="flex-start" spacing={ 2 }>
-			{ itemIcon && ! isNonUserPattern && (
-				<Tooltip
-					placement="top"
-					text={ __(
-						'Editing this pattern will also update anywhere it is used'
-					) }
-				>
-					<Icon
-						className="edit-site-patterns__pattern-icon"
-						icon={ itemIcon }
-					/>
-				</Tooltip>
-			) }
-			{ item.type === PATTERN_TYPES.theme && (
-				<Tooltip
-					placement="top"
-					text={ __( 'This pattern cannot be edited.' ) }
-				>
-					<Icon
-						className="edit-site-patterns__pattern-lock-icon"
-						icon={ lockSmall }
-						size={ 24 }
-					/>
-				</Tooltip>
-			) }
-			<Flex as="span" gap={ 0 } justify="left">
-				{ item.type === PATTERN_TYPES.theme ? (
-					<span className="dataviews-view-grid__title-field">
-						{ item.title }
-					</span>
-				) : (
-					<Heading level={ 5 }>
-						<Button
-							variant="link"
-							onClick={ onClick }
-							// Required for the grid's roving tab index system.
-							// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
-							tabIndex="-1"
-							className="dataviews-view-grid__title-field"
-						>
-							{ item.title || item.name }
-						</Button>
-					</Heading>
-				) }
-			</Flex>
-		</HStack>
-	);
-}
-
-export default function DataviewsPatterns() {
-	const { categoryType, categoryId = PATTERN_DEFAULT_CATEGORY } =
-		getQueryArgs( window.location.href );
-	const type = categoryType || PATTERN_TYPES.theme;
-	const [ view, setView ] = useState( DEFAULT_VIEW );
-	const isUncategorizedThemePatterns =
-		type === PATTERN_TYPES.theme && categoryId === 'uncategorized';
-	const previousCategoryId = usePrevious( categoryId );
-	const viewSyncStatus = view.filters?.find(
-		( { field } ) => field === 'sync-status'
-	)?.value;
-	const { patterns, isResolving } = usePatterns(
-		type,
-		isUncategorizedThemePatterns ? '' : categoryId,
-		{
-			search: view.search,
-			syncStatus: viewSyncStatus,
-		}
-	);
-	const fields = useMemo( () => {
-		const _fields = [
-			{
-				header: __( 'Preview' ),
-				id: 'preview',
-				render: ( { item } ) => (
-					<Preview item={ item } viewType={ view.type } />
-				),
-				enableSorting: false,
-				enableHiding: false,
-			},
-			{
-				header: __( 'Title' ),
-				id: 'title',
-				getValue: ( { item } ) => item.title,
-				render: ( { item } ) => (
-					<Title item={ item } categoryId={ categoryId } />
-				),
-				enableHiding: false,
-			},
-		];
-		if ( type === PATTERN_TYPES.theme ) {
-			_fields.push( {
-				header: __( 'Sync Status' ),
-				id: 'sync-status',
-				render: ( { item } ) => {
-					// User patterns can have their sync statuses checked directly.
-					// Non-user patterns are all unsynced for the time being.
-					return (
-						SYNC_FILTERS.find(
-							( { value } ) => value === item.syncStatus
-						)?.label ||
-						SYNC_FILTERS.find(
-							( { value } ) =>
-								value === PATTERN_SYNC_TYPES.unsynced
-						).label
-					);
-				},
-				type: ENUMERATION_TYPE,
-				elements: SYNC_FILTERS,
-				filterBy: {
-					operators: [ OPERATOR_IN ],
-				},
-				enableSorting: false,
-			} );
-		}
-		return _fields;
-	}, [ view.type, categoryId, type ] );
-	// Reset the page number when the category changes.
-	useEffect( () => {
-		if ( previousCategoryId !== categoryId ) {
-			setView( DEFAULT_VIEW );
-		}
-	}, [ categoryId, previousCategoryId ] );
-	const { data, paginationInfo } = useMemo( () => {
-		if ( ! patterns ) {
-			return {
-				data: EMPTY_ARRAY,
-				paginationInfo: { totalItems: 0, totalPages: 0 },
-			};
-		}
-		let filteredData = [ ...patterns ];
-		// Handle sorting.
-		if ( view.sort ) {
-			filteredData = sortByTextFields( {
-				data: filteredData,
-				view,
-				fields,
-				textFields: [ 'title', 'author' ],
-			} );
-		}
-		// Handle pagination.
-		return getPaginationResults( {
-			data: filteredData,
-			view,
-		} );
-	}, [ patterns, view, fields ] );
-
-	const actions = useMemo(
-		() => [
-			renameAction,
-			duplicatePatternAction,
-			duplicateTemplatePartAction,
-			exportJSONaction,
-			resetAction,
-			deleteAction,
-		],
-		[]
-	);
-	const onChangeView = useCallback(
-		( newView ) => {
-			if ( newView.type !== view.type ) {
-				newView = {
-					...newView,
-					layout: {
-						...defaultConfigPerViewType[ newView.type ],
-					},
-				};
-			}
-			setView( newView );
-		},
-		[ view.type, setView ]
-	);
-	const id = useId();
-	const settings = usePatternSettings();
-	// Wrap everything in a block editor provider.
-	// This ensures 'styles' that are needed for the previews are synced
-	// from the site editor store to the block editor store.
-	// TODO: check if I add the provider in every preview like in templates...
-	return (
-		<ExperimentalBlockEditorProvider settings={ settings }>
-			<Page
-				title={ __( 'Patterns content' ) }
-				className="edit-site-page-patterns-dataviews"
-				hideTitleFromUI
-			>
-				<PatternsHeader
-					categoryId={ categoryId }
-					type={ type }
-					titleId={ `${ id }-title` }
-					descriptionId={ `${ id }-description` }
-				/>
-				<DataViews
-					paginationInfo={ paginationInfo }
-					fields={ fields }
-					actions={ actions }
-					data={ data || EMPTY_ARRAY }
-					getItemId={ ( item ) => item.name }
-					isLoading={ isResolving }
-					view={ view }
-					onChangeView={ onChangeView }
-					deferredRendering={ true }
-					supportedLayouts={ [ LAYOUT_GRID ] }
-				/>
-			</Page>
-		</ExperimentalBlockEditorProvider>
-	);
-}

package/src/components/page-template-parts/index.js

@@ -1,99 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	VisuallyHidden,
-	__experimentalHeading as Heading,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useEntityRecords } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import Page from '../page';
-import Table from '../table';
-import Link from '../routes/link';
-import AddedBy from '../list/added-by';
-import TemplateActions from '../template-actions';
-import AddNewTemplatePart from './add-new-template-part';
-import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
-import { unlock } from '../../lock-unlock';
-
-const { useLocation } = unlock( routerPrivateApis );
-
-export default function PageTemplateParts() {
-	const {
-		params: { didAccessPatternsPage },
-	} = useLocation();
-
-	const { records: templateParts } = useEntityRecords(
-		'postType',
-		TEMPLATE_PART_POST_TYPE,
-		{
-			per_page: -1,
-		}
-	);
-
-	const columns = [
-		{
-			header: __( 'Template Part' ),
-			cell: ( templatePart ) => (
-				<VStack>
-					<Heading as="h3" level={ 5 }>
-						<Link
-							params={ {
-								postId: templatePart.id,
-								postType: templatePart.type,
-								didAccessPatternsPage: !! didAccessPatternsPage
-									? 1
-									: undefined,
-							} }
-							state={ {
-								backPath: '/wp_template_part/all',
-							} }
-						>
-							{ decodeEntities(
-								templatePart.title?.rendered ||
-									templatePart.slug
-							) }
-						</Link>
-					</Heading>
-				</VStack>
-			),
-			maxWidth: 400,
-		},
-		{
-			header: __( 'Added by' ),
-			cell: ( templatePart ) => (
-				<AddedBy
-					postType={ templatePart.type }
-					postId={ templatePart.id }
-				/>
-			),
-		},
-		{
-			header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
-			cell: ( templatePart ) => (
-				<TemplateActions
-					postType={ templatePart.type }
-					postId={ templatePart.id }
-				/>
-			),
-		},
-	];
-
-	return (
-		<Page
-			title={ __( 'Template Parts' ) }
-			actions={ <AddNewTemplatePart /> }
-		>
-			{ templateParts && (
-				<Table data={ templateParts } columns={ columns } />
-			) }
-		</Page>
-	);
-}

package/src/components/page-templates/style.scss

@@ -1,13 +0,0 @@
-.page-templates-preview-field {
-	&.is-viewtype-list {
-		.block-editor-block-preview__container {
-			height: 120px;
-		}
-	}
-
-	&.is-viewtype-grid {
-		.block-editor-block-preview__container {
-			height: auto;
-		}
-	}
-}

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

@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import Editor from '../editor';
-import { useInitEditedEntity } from '../sync-state-with-url/use-init-edited-entity-from-url';
-import { useIsSiteEditorLoading } from '../layout/hooks';
-
-export default function PostPreview( { postType, postId } ) {
-	useInitEditedEntity( {
-		postId,
-		postType,
-	} );
-	const isEditorLoading = useIsSiteEditorLoading();
-
-	return <Editor isLoading={ isEditorLoading } />;
-}

package/src/components/preferences-modal/enable-feature.js

@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
-import { store as preferencesStore } from '@wordpress/preferences';
-
-export default function EnableFeature( props ) {
-	const {
-		scope = 'core/edit-site',
-		featureName,
-		onToggle = () => {},
-		...remainingProps
-	} = props;
-	const isChecked = useSelect(
-		( select ) => !! select( preferencesStore ).get( scope, featureName ),
-		[ scope, featureName ]
-	);
-	const { toggle } = useDispatch( preferencesStore );
-	const onChange = () => {
-		onToggle();
-		toggle( scope, featureName );
-	};
-	return (
-		<BaseOption
-			onChange={ onChange }
-			isChecked={ isChecked }
-			{ ...remainingProps }
-		/>
-	);
-}

package/src/components/preferences-modal/enable-panel-option.js

@@ -1,23 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { compose, ifCondition } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
-import { store as editorStore } from '@wordpress/editor';
-
-export default compose(
-	withSelect( ( select, { panelName } ) => {
-		const { isEditorPanelEnabled, isEditorPanelRemoved } =
-			select( editorStore );
-		return {
-			isRemoved: isEditorPanelRemoved( panelName ),
-			isChecked: isEditorPanelEnabled( panelName ),
-		};
-	} ),
-	ifCondition( ( { isRemoved } ) => ! isRemoved ),
-	withDispatch( ( dispatch, { panelName } ) => ( {
-		onChange: () =>
-			dispatch( editorStore ).toggleEditorPanelEnabled( panelName ),
-	} ) )
-)( BaseOption );