@wordpress/edit-site 5.28.5 → 5.30.0

package/src/components/list/index.js

@@ -1,87 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { InterfaceSkeleton } from '@wordpress/interface';
-import { __, sprintf } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { EditorSnackbars } from '@wordpress/editor';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import useRegisterShortcuts from './use-register-shortcuts';
-import Header from './header';
-import Table from './table';
-import useTitle from '../routes/use-title';
-import { unlock } from '../../lock-unlock';
-import {
-	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-} from '../../utils/constants';
-
-const { useLocation } = unlock( routerPrivateApis );
-
-export default function List() {
-	const {
-		params: { path },
-	} = useLocation();
-	const templateType =
-		path === '/wp_template/all'
-			? TEMPLATE_POST_TYPE
-			: TEMPLATE_PART_POST_TYPE;
-
-	useRegisterShortcuts();
-
-	const { previousShortcut, nextShortcut } = useSelect( ( select ) => {
-		return {
-			previousShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ),
-			nextShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
-		};
-	}, [] );
-
-	const postType = useSelect(
-		( select ) => select( coreStore ).getPostType( templateType ),
-		[ templateType ]
-	);
-
-	useTitle( postType?.labels?.name );
-
-	// `postType` could load in asynchronously. Only provide the detailed region labels if
-	// the postType has loaded, otherwise `InterfaceSkeleton` will fallback to the defaults.
-	const itemsListLabel = postType?.labels?.items_list;
-	const detailedRegionLabels = postType
-		? {
-				header: sprintf(
-					// translators: %s - the name of the page, 'Header' as in the header area of that page.
-					__( '%s - Header' ),
-					itemsListLabel
-				),
-				body: sprintf(
-					// translators: %s - the name of the page, 'Content' as in the content area of that page.
-					__( '%s - Content' ),
-					itemsListLabel
-				),
-		  }
-		: undefined;
-
-	return (
-		<InterfaceSkeleton
-			className="edit-site-list"
-			labels={ detailedRegionLabels }
-			header={ <Header templateType={ templateType } /> }
-			notices={ <EditorSnackbars /> }
-			content={ <Table templateType={ templateType } /> }
-			shortcuts={ {
-				previous: previousShortcut,
-				next: nextShortcut,
-			} }
-		/>
-	);
-}

package/src/components/list/style.scss

@@ -1,188 +0,0 @@
-.edit-site-list-header {
-	position: relative;
-	align-items: center;
-	display: flex;
-	height: $header-height;
-	box-sizing: border-box;
-	width: 100%;
-	justify-content: flex-end;
-	padding-right: $grid-unit-20;
-
-	body.is-fullscreen-mode & {
-		padding-left: 60px;
-		transition: padding-left 20ms linear;
-		transition-delay: 80ms;
-		@include reduce-motion("transition");
-	}
-
-	.edit-site-list-header__title {
-		position: absolute;
-		left: 0;
-		width: 100%;
-		text-align: center;
-		font-size: 20px;
-		padding: 0;
-		margin: 0;
-	}
-}
-
-.edit-site-list-header__right {
-	// Creating a stacking context so that it won't be covered by title.
-	position: relative;
-}
-
-.edit-site {
-	.edit-site-list {
-		flex-grow: 1;
-		background: $white;
-		border-radius: $radius-block-ui * 4;
-		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
-
-		.interface-interface-skeleton__editor {
-			min-width: 100%;
-
-			@include break-medium() {
-				min-width: 0;
-			}
-		}
-
-		.interface-interface-skeleton__content {
-			background: $white;
-			padding: $grid-unit-20;
-			align-items: center;
-
-			@include break-medium() {
-				padding: $grid-unit * 9;
-			}
-		}
-	}
-}
-
-.edit-site-list-table {
-	min-width: 100%;
-	border: $border-width solid $gray-300;
-	border-radius: 2px;
-	margin: 0 auto;
-	overflow: hidden;
-	border-spacing: 0;
-	max-width: 960px;
-
-	tr {
-		display: flex;
-		align-items: center;
-		padding: $grid-unit-20;
-		box-sizing: border-box;
-		border-top: $border-width solid $gray-100;
-		margin: 0;
-
-		&:first-child {
-			border-top: 0;
-		}
-
-		@include break-medium() {
-			padding: $grid-unit-30 $grid-unit-40;
-		}
-
-		// Template.
-		.edit-site-list-table-column:nth-child(1) {
-			width: calc(60% - 18px);
-			padding-right: $grid-unit-30;
-
-			a {
-				display: inline-block;
-				text-decoration: none;
-				font-weight: 500;
-				margin-bottom: $grid-unit-05;
-			}
-		}
-
-		// Added by.
-		.edit-site-list-table-column:nth-child(2) {
-			width: calc(40% - 18px);
-			word-break: break-word;
-		}
-
-		// Actions.
-		.edit-site-list-table-column:nth-child(3) {
-			min-width: $button-size;
-			flex-shrink: 0;
-		}
-	}
-
-	tr.edit-site-list-table-head {
-		font-size: 16px;
-		font-weight: 600;
-		text-align: left;
-		color: $gray-900;
-		border-top: none;
-		border-bottom: $border-width solid $gray-300;
-
-		th {
-			font-weight: inherit;
-		}
-	}
-}
-
-.edit-site-list.is-navigation-open .components-snackbar-list {
-	@include break-medium() {
-		margin-left: $nav-sidebar-width;
-	}
-}
-
-.edit-site-list__rename-modal {
-	// The rename dropdown popover is open at the same time as the rename modal. The latter has to be higher.
-	z-index: z-index(".edit-site-list__rename-modal");
-	.components-base-control {
-		@include break-medium() {
-			width: $grid-unit * 40;
-		}
-	}
-}
-
-.edit-site-template__actions {
-	button:not(:last-child) {
-		margin-right: $grid-unit-10;
-	}
-}
-
-.edit-site-list-added-by__icon {
-	display: flex;
-	flex-shrink: 0;
-	width: $grid-unit-30;
-	height: $grid-unit-30;
-
-	svg {
-		fill: currentColor;
-	}
-}
-
-.edit-site-list-added-by__avatar {
-	flex-shrink: 0;
-	overflow: hidden;
-	width: $grid-unit-30;
-	height: $grid-unit-30;
-	align-items: center;
-	justify-content: center;
-	display: flex;
-
-	img {
-		width: 20px;
-		height: 20px;
-		object-fit: cover;
-		opacity: 0;
-		transition: opacity 0.1s linear;
-		@include reduce-motion("transition");
-		border-radius: 100%;
-	}
-
-	&.is-loaded {
-		img {
-			opacity: 1;
-		}
-	}
-}
-
-.edit-site-list-added-by__customized-info {
-	display: block;
-	color: $gray-700;
-}

package/src/components/list/table.js

@@ -1,140 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	VisuallyHidden,
-	__experimentalHeading as Heading,
-} from '@wordpress/components';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import TemplateActions from '../template-actions';
-import Link from '../routes/link';
-import AddedBy from './added-by';
-
-export default function Table( { templateType } ) {
-	const { records: allTemplates } = useEntityRecords(
-		'postType',
-		templateType,
-		{
-			per_page: -1,
-		}
-	);
-
-	const templates = useSelect(
-		( select ) =>
-			allTemplates?.filter(
-				( template ) =>
-					! select( coreStore ).isDeletingEntityRecord(
-						'postType',
-						templateType,
-						template.id
-					)
-			),
-		[ allTemplates ]
-	);
-
-	const postType = useSelect(
-		( select ) => select( coreStore ).getPostType( templateType ),
-		[ templateType ]
-	);
-
-	if ( ! templates ) {
-		return null;
-	}
-
-	if ( ! templates.length ) {
-		return (
-			<div>
-				{ sprintf(
-					// translators: The template type name, should be either "templates" or "template parts".
-					__( 'No %s found.' ),
-					postType?.labels?.name?.toLowerCase()
-				) }
-			</div>
-		);
-	}
-
-	const sortedTemplates = [ ...templates ];
-	sortedTemplates.sort( ( a, b ) =>
-		a.title.rendered.localeCompare( b.title.rendered )
-	);
-
-	return (
-		// These explicit aria roles are needed for Safari.
-		// See https://developer.mozilla.org/en-US/docs/Web/CSS/display#tables
-		<table className="edit-site-list-table" role="table">
-			<thead>
-				<tr className="edit-site-list-table-head" role="row">
-					<th
-						className="edit-site-list-table-column"
-						role="columnheader"
-					>
-						{ __( 'Template' ) }
-					</th>
-					<th
-						className="edit-site-list-table-column"
-						role="columnheader"
-					>
-						{ __( 'Added by' ) }
-					</th>
-					<th
-						className="edit-site-list-table-column"
-						role="columnheader"
-					>
-						<VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>
-					</th>
-				</tr>
-			</thead>
-
-			<tbody>
-				{ sortedTemplates.map( ( template ) => (
-					<tr
-						key={ template.id }
-						className="edit-site-list-table-row"
-						role="row"
-					>
-						<td className="edit-site-list-table-column" role="cell">
-							<Heading level={ 4 }>
-								<Link
-									params={ {
-										postId: template.id,
-										postType: template.type,
-										canvas: 'edit',
-									} }
-								>
-									{ decodeEntities(
-										template.title?.rendered ||
-											template.slug
-									) }
-								</Link>
-							</Heading>
-							{ decodeEntities( template.description ) }
-						</td>
-
-						<td className="edit-site-list-table-column" role="cell">
-							{ template ? (
-								<AddedBy
-									postType={ template.type }
-									postId={ template.id }
-								/>
-							) : null }
-						</td>
-						<td className="edit-site-list-table-column" role="cell">
-							<TemplateActions
-								postType={ template.type }
-								postId={ template.id }
-								className="edit-site-list-table__actions"
-							/>
-						</td>
-					</tr>
-				) ) }
-			</tbody>
-		</table>
-	);
-}

package/src/components/list/use-register-shortcuts.js

@@ -1,49 +0,0 @@
-/**
- * WordPress dependencies
- */
-
-import { useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-
-export default function useRegisterShortcuts() {
-	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
-	useEffect( () => {
-		registerShortcut( {
-			name: 'core/edit-site/next-region',
-			category: 'global',
-			description: __( 'Navigate to the next part of the editor.' ),
-			keyCombination: {
-				modifier: 'ctrl',
-				character: '`',
-			},
-			aliases: [
-				{
-					modifier: 'access',
-					character: 'n',
-				},
-			],
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/previous-region',
-			category: 'global',
-			description: __( 'Navigate to the previous part of the editor.' ),
-			keyCombination: {
-				modifier: 'ctrlShift',
-				character: '`',
-			},
-			aliases: [
-				{
-					modifier: 'access',
-					character: 'p',
-				},
-				{
-					modifier: 'ctrlShift',
-					character: '~',
-				},
-			],
-		} );
-	}, [] );
-}

package/src/components/page-patterns/duplicate-menu-item.js

@@ -1,105 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { MenuItem } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { store as noticesStore } from '@wordpress/notices';
-import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import { TEMPLATE_PART_POST_TYPE, PATTERN_TYPES } from '../../utils/constants';
-import { unlock } from '../../lock-unlock';
-import CreateTemplatePartModal from '../create-template-part-modal';
-
-const { DuplicatePatternModal } = unlock( patternsPrivateApis );
-const { useHistory } = unlock( routerPrivateApis );
-
-export default function DuplicateMenuItem( {
-	categoryId,
-	item,
-	label = __( 'Duplicate' ),
-	onClose,
-} ) {
-	const { createSuccessNotice } = useDispatch( noticesStore );
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const history = useHistory();
-
-	const closeModal = () => setIsModalOpen( false );
-
-	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-	const isThemePattern = item.type === PATTERN_TYPES.theme;
-
-	async function onTemplatePartSuccess( templatePart ) {
-		createSuccessNotice(
-			sprintf(
-				// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
-				__( '"%s" duplicated.' ),
-				item.title
-			),
-			{
-				type: 'snackbar',
-				id: 'edit-site-patterns-success',
-			}
-		);
-
-		history.push( {
-			postType: TEMPLATE_PART_POST_TYPE,
-			postId: templatePart?.id,
-			categoryType: TEMPLATE_PART_POST_TYPE,
-			categoryId,
-		} );
-
-		onClose();
-	}
-
-	function onPatternSuccess( { pattern } ) {
-		history.push( {
-			categoryType: PATTERN_TYPES.theme,
-			categoryId,
-			postType: PATTERN_TYPES.user,
-			postId: pattern.id,
-		} );
-
-		onClose();
-	}
-
-	return (
-		<>
-			<MenuItem
-				onClick={ () => setIsModalOpen( true ) }
-				aria-expanded={ isModalOpen }
-				aria-haspopup="dialog"
-			>
-				{ label }
-			</MenuItem>
-			{ isModalOpen && ! isTemplatePart && (
-				<DuplicatePatternModal
-					onClose={ closeModal }
-					onSuccess={ onPatternSuccess }
-					pattern={ isThemePattern ? item : item.patternPost }
-				/>
-			) }
-			{ isModalOpen && isTemplatePart && (
-				<CreateTemplatePartModal
-					blocks={ item.blocks }
-					closeModal={ closeModal }
-					confirmLabel={ __( 'Duplicate' ) }
-					defaultArea={ item.templatePart.area }
-					defaultTitle={ sprintf(
-						/* translators: %s: Existing template part title */
-						__( '%s (Copy)' ),
-						item.title
-					) }
-					modalTitle={ __( 'Duplicate template part' ) }
-					onCreate={ onTemplatePartSuccess }
-					onError={ closeModal }
-				/>
-			) }
-		</>
-	);
-}