@wordpress/edit-site 5.29.0 → 5.31.0

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/sidebar-edit-mode/template-panel/template-actions.js

@@ -1,49 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { moreVertical } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-import isTemplateRevertable from '../../../utils/is-template-revertable';
-
-export default function Actions( { template } ) {
-	const { revertTemplate } = useDispatch( editSiteStore );
-	const isRevertable = isTemplateRevertable( template );
-
-	if ( ! isRevertable ) {
-		return null;
-	}
-
-	return (
-		<DropdownMenu
-			icon={ moreVertical }
-			label={ __( 'Actions' ) }
-			className="edit-site-template-card__actions"
-			toggleProps={ { isSmall: true } }
-		>
-			{ ( { onClose } ) => (
-				<MenuGroup>
-					{ isRevertable && (
-						<MenuItem
-							info={ __(
-								'Use the template as supplied by the theme.'
-							) }
-							onClick={ () => {
-								revertTemplate( template );
-								onClose();
-							} }
-						>
-							{ __( 'Clear customizations' ) }
-						</MenuItem>
-					) }
-				</MenuGroup>
-			) }
-		</DropdownMenu>
-	);
-}

package/src/components/sidebar-navigation-screen-main/template-part-hint.js

@@ -1,34 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Notice } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { store as preferencesStore } from '@wordpress/preferences';
-
-const PREFERENCE_NAME = 'isTemplatePartMoveHintVisible';
-
-export default function TemplatePartHint() {
-	const showTemplatePartHint = useSelect(
-		( select ) =>
-			select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
-		[]
-	);
-
-	const { set: setPreference } = useDispatch( preferencesStore );
-	if ( ! showTemplatePartHint ) {
-		return null;
-	}
-
-	return (
-		<Notice
-			politeness="polite"
-			className="edit-site-sidebar__notice"
-			onRemove={ () => {
-				setPreference( 'core', PREFERENCE_NAME, false );
-			} }
-		>
-			{ __( 'Looking for template parts? Find them in "Patterns".' ) }
-		</Notice>
-	);
-}

package/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js

@@ -1,22 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { pencil } from '@wordpress/icons';
-/**
- * Internal dependencies
- */
-import SidebarButton from '../sidebar-button';
-import { useLink } from '../routes/link';
-import { NAVIGATION_POST_TYPE } from '../../utils/constants';
-
-export default function EditButton( { postId } ) {
-	const linkInfo = useLink( {
-		postId,
-		postType: NAVIGATION_POST_TYPE,
-		canvas: 'edit',
-	} );
-	return (
-		<SidebarButton { ...linkInfo } label={ __( 'Edit' ) } icon={ pencil } />
-	);
-}

package/src/components/sidebar-navigation-screen-templates/index.js

@@ -1,156 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useEntityRecords } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { useViewportMatch } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import { useLink } from '../routes/link';
-import SidebarNavigationItem from '../sidebar-navigation-item';
-import AddNewTemplate from '../add-new-template';
-import SidebarButton from '../sidebar-button';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-
-const TemplateItem = ( { postType, postId, ...props } ) => {
-	const linkInfo = useLink( {
-		postType,
-		postId,
-	} );
-	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
-};
-
-export default function SidebarNavigationScreenTemplates() {
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const { records: templates, isResolving: isLoading } = useEntityRecords(
-		'postType',
-		TEMPLATE_POST_TYPE,
-		{ per_page: -1 }
-	);
-	const browseAllLink = useLink( { path: '/wp_template/all' } );
-	const canCreate = ! isMobileViewport;
-	return (
-		<SidebarNavigationScreen
-			title={ __( 'Templates' ) }
-			description={ __(
-				'Express the layout of your site with templates.'
-			) }
-			actions={
-				canCreate && (
-					<AddNewTemplate
-						templateType={ TEMPLATE_POST_TYPE }
-						toggleProps={ {
-							as: SidebarButton,
-						} }
-					/>
-				)
-			}
-			content={
-				<>
-					{ isLoading && __( 'Loading templates…' ) }
-					{ ! isLoading && (
-						<SidebarTemplatesList templates={ templates } />
-					) }
-				</>
-			}
-			footer={
-				! isMobileViewport && (
-					<SidebarNavigationItem withChevron { ...browseAllLink }>
-						{ __( 'Manage all templates' ) }
-					</SidebarNavigationItem>
-				)
-			}
-		/>
-	);
-}
-
-function TemplatesGroup( { title, templates } ) {
-	return (
-		<ItemGroup>
-			{ !! title && (
-				<Item className="edit-site-sidebar-navigation-screen-templates__templates-group-title">
-					{ title }
-				</Item>
-			) }
-			{ templates.map( ( template ) => (
-				<TemplateItem
-					postType={ TEMPLATE_POST_TYPE }
-					postId={ template.id }
-					key={ template.id }
-					withChevron
-				>
-					{ decodeEntities(
-						template.title?.rendered || template.slug
-					) }
-				</TemplateItem>
-			) ) }
-		</ItemGroup>
-	);
-}
-function SidebarTemplatesList( { templates } ) {
-	if ( ! templates?.length ) {
-		return (
-			<ItemGroup>
-				<Item>{ __( 'No templates found' ) }</Item>
-			</ItemGroup>
-		);
-	}
-	const sortedTemplates = templates ? [ ...templates ] : [];
-	sortedTemplates.sort( ( a, b ) =>
-		a.title.rendered.localeCompare( b.title.rendered )
-	);
-	const { hierarchyTemplates, customTemplates, ...plugins } =
-		sortedTemplates.reduce(
-			( accumulator, template ) => {
-				const {
-					original_source: originalSource,
-					author_text: authorText,
-				} = template;
-				if ( originalSource === 'plugin' ) {
-					if ( ! accumulator[ authorText ] ) {
-						accumulator[ authorText ] = [];
-					}
-					accumulator[ authorText ].push( template );
-				} else if ( template.is_custom ) {
-					accumulator.customTemplates.push( template );
-				} else {
-					accumulator.hierarchyTemplates.push( template );
-				}
-				return accumulator;
-			},
-			{ hierarchyTemplates: [], customTemplates: [] }
-		);
-	return (
-		<VStack spacing={ 3 }>
-			{ !! hierarchyTemplates.length && (
-				<TemplatesGroup templates={ hierarchyTemplates } />
-			) }
-			{ !! customTemplates.length && (
-				<TemplatesGroup
-					title={ __( 'Custom' ) }
-					templates={ customTemplates }
-				/>
-			) }
-			{ Object.entries( plugins ).map(
-				( [ plugin, pluginTemplates ] ) => {
-					return (
-						<TemplatesGroup
-							key={ plugin }
-							title={ plugin }
-							templates={ pluginTemplates }
-						/>
-					);
-				}
-			) }
-		</VStack>
-	);
-}

package/src/components/sidebar-navigation-screen-templates/style.scss

@@ -1,9 +0,0 @@
-.edit-site-sidebar-navigation-screen-templates__templates-group-title.components-item {
-	text-transform: uppercase;
-	color: $gray-200;
-	// 6px right padding to align with + button
-	padding: $grid-unit-30 6px $grid-unit-20 $grid-unit-20;
-	border-top: 1px solid $gray-800;
-	font-size: 11px;
-	font-weight: 500;
-}