@wordpress/edit-site 5.9.0 → 5.11.0

package/src/components/global-styles/screen-variations.js

@@ -1,46 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalVStack as VStack } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import {
-	VariationPanel,
-	VariationsPanel,
-	useHasVariationsPanel,
-} from './variations-panel';
-import ScreenHeader from './header';
-import BlockPreviewPanel from './block-preview-panel';
-import Subtitle from './subtitle';
-
-export function ScreenVariations( { name, path = '' } ) {
-	const hasVariationsPanel = useHasVariationsPanel( name, path );
-
-	if ( ! hasVariationsPanel ) {
-		return null;
-	}
-	return (
-		<div className="edit-site-global-styles-screen-variations">
-			<VStack spacing={ 3 }>
-				<Subtitle>{ __( 'Style Variations' ) }</Subtitle>
-				<VariationsPanel name={ name } />
-			</VStack>
-		</div>
-	);
-}
-
-export function ScreenVariation( { blockName, style } ) {
-	const { name: styleName, label: styleLabel } = style;
-	return (
-		<>
-			<ScreenHeader title={ styleLabel } />
-			<BlockPreviewPanel
-				name={ blockName }
-				variation={ `is-style-${ styleName }` }
-			/>
-			<VariationPanel blockName={ blockName } styleName={ styleName } />
-		</>
-	);
-}

package/src/components/navigate-to-link/index.js

@@ -1,46 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { getPathAndQueryString } from '@wordpress/url';
-import { useMemo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { Button } from '@wordpress/components';
-import { edit } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
-
-export default function NavigateToLink( { type, id, onActivePageChange } ) {
-	const post = useSelect(
-		( select ) =>
-			type &&
-			id &&
-			type !== 'URL' &&
-			select( coreStore ).getEntityRecord( 'postType', type, id ),
-		[ type, id ]
-	);
-
-	const onClick = useMemo( () => {
-		if ( ! post?.link ) return null;
-		const path = getPathAndQueryString( post.link );
-		return () =>
-			onActivePageChange( {
-				type,
-				slug: post.slug,
-				path,
-				context: {
-					postType: post.type,
-					postId: post.id,
-				},
-			} );
-	}, [ post, onActivePageChange ] );
-
-	return (
-		onClick && (
-			<Button
-				icon={ edit }
-				label={ __( 'Edit Page Template' ) }
-				onClick={ onClick }
-			/>
-		)
-	);
-}

package/src/components/routes/index.js

@@ -1,53 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createContext,
-	useState,
-	useEffect,
-	useContext,
-} from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import history from '../../utils/history';
-
-const RoutesContext = createContext();
-const HistoryContext = createContext();
-
-export function useLocation() {
-	return useContext( RoutesContext );
-}
-
-export function useHistory() {
-	return useContext( HistoryContext );
-}
-
-function getLocationWithParams( location ) {
-	const searchParams = new URLSearchParams( location.search );
-	return {
-		...location,
-		params: Object.fromEntries( searchParams.entries() ),
-	};
-}
-
-export function Routes( { children } ) {
-	const [ location, setLocation ] = useState( () =>
-		getLocationWithParams( history.location )
-	);
-
-	useEffect( () => {
-		return history.listen( ( { location: updatedLocation } ) => {
-			setLocation( getLocationWithParams( updatedLocation ) );
-		} );
-	}, [] );
-
-	return (
-		<HistoryContext.Provider value={ history }>
-			<RoutesContext.Provider value={ location }>
-				{ children }
-			</RoutesContext.Provider>
-		</HistoryContext.Provider>
-	);
-}

package/src/components/sidebar-navigation-screen-navigation-menus/loader.js

@@ -1,9 +0,0 @@
-export function NavigationMenuLoader() {
-	return (
-		<>
-			<div className="edit-site-sidebar-navigation-screen-navigation-menus__placeholder" />
-			<div className="edit-site-sidebar-navigation-screen-navigation-menus__placeholder" />
-			<div className="edit-site-sidebar-navigation-screen-navigation-menus__placeholder" />
-		</>
-	);
-}

package/src/components/template-details/edit-template-title.js

@@ -1,41 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { TextControl } from '@wordpress/components';
-import { useEntityProp } from '@wordpress/core-data';
-import { useState } from '@wordpress/element';
-
-export default function EditTemplateTitle( { template } ) {
-	const [ forceEmpty, setForceEmpty ] = useState( false );
-	const [ title, setTitle ] = useEntityProp(
-		'postType',
-		template.type,
-		'title',
-		template.id
-	);
-
-	return (
-		<TextControl
-			__nextHasNoMarginBottom
-			label={ __( 'Title' ) }
-			value={ forceEmpty ? '' : title }
-			help={
-				template.type !== 'wp_template_part'
-					? __(
-							'Give the template a title that indicates its purpose, e.g. "Full Width".'
-					  )
-					: null
-			}
-			onChange={ ( newTitle ) => {
-				if ( ! newTitle && ! forceEmpty ) {
-					setForceEmpty( true );
-					return;
-				}
-				setForceEmpty( false );
-				setTitle( newTitle );
-			} }
-			onBlur={ () => setForceEmpty( false ) }
-		/>
-	);
-}

package/src/components/template-details/index.js

@@ -1,113 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	Button,
-	MenuGroup,
-	MenuItem,
-	__experimentalVStack as VStack,
-	__experimentalText as Text,
-} from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import isTemplateRevertable from '../../utils/is-template-revertable';
-import { store as editSiteStore } from '../../store';
-import EditTemplateTitle from './edit-template-title';
-import { useLink } from '../routes/link';
-import TemplatePartAreaSelector from './template-part-area-selector';
-
-export default function TemplateDetails( { template, onClose } ) {
-	const { title, description } = useSelect(
-		( select ) =>
-			select( editorStore ).__experimentalGetTemplateInfo( template ),
-		[]
-	);
-	const { revertTemplate } = useDispatch( editSiteStore );
-
-	// TODO: We should update this to filter by template part's areas as well.
-	const browseAllLinkProps = useLink( {
-		path: '/' + template.type + '/all',
-	} );
-
-	const isTemplatePart = template.type === 'wp_template_part';
-
-	// Only user-created and non-default templates can change the name.
-	// But any user-created template part can be renamed.
-	const canEditTitle = isTemplatePart
-		? ! template.has_theme_file
-		: template.is_custom && ! template.has_theme_file;
-
-	if ( ! template ) {
-		return null;
-	}
-
-	const revert = () => {
-		revertTemplate( template );
-		onClose();
-	};
-
-	return (
-		<div className="edit-site-template-details">
-			<VStack className="edit-site-template-details__group" spacing={ 3 }>
-				{ canEditTitle ? (
-					<EditTemplateTitle template={ template } />
-				) : (
-					<Text
-						size={ 16 }
-						weight={ 600 }
-						className="edit-site-template-details__title"
-						as="p"
-					>
-						{ decodeEntities( title ) }
-					</Text>
-				) }
-
-				{ description && (
-					<Text
-						size="body"
-						className="edit-site-template-details__description"
-						as="p"
-					>
-						{ decodeEntities( description ) }
-					</Text>
-				) }
-			</VStack>
-
-			{ isTemplatePart && (
-				<div className="edit-site-template-details__group">
-					<TemplatePartAreaSelector id={ template.id } />
-				</div>
-			) }
-
-			{ isTemplateRevertable( template ) && (
-				<MenuGroup className="edit-site-template-details__group edit-site-template-details__revert">
-					<MenuItem
-						className="edit-site-template-details__revert-button"
-						info={ __(
-							'Use the template as supplied by the theme.'
-						) }
-						onClick={ revert }
-					>
-						{ __( 'Clear customizations' ) }
-					</MenuItem>
-				</MenuGroup>
-			) }
-
-			<Button
-				className="edit-site-template-details__show-all-button"
-				{ ...browseAllLinkProps }
-				onClick={ () => onClose() }
-			>
-				{ template?.type === 'wp_template'
-					? __( 'Manage all templates' )
-					: __( 'Manage all template parts' ) }
-			</Button>
-		</div>
-	);
-}

package/src/components/template-details/style.scss

@@ -1,72 +0,0 @@
-.edit-site-template-details {
-	.edit-site-template-details__group {
-		margin: 0;
-		padding: $grid-unit-20;
-	}
-
-	.edit-site-template-details__group + .edit-site-template-details__group {
-		border-top: $border-width solid $gray-400;
-	}
-
-	.edit-site-template-details__description {
-		color: $gray-700;
-	}
-
-	// The group already has a 8px padding inside, so overriding the parent padding.
-	.edit-site-template-details__group.edit-site-template-details__template-areas {
-		padding: $grid-unit-10;
-	}
-
-	.edit-site-template-details__template-areas-item {
-		position: relative;
-
-		.components-menu-items__item-icon {
-			color: var(--wp-block-synced-color);
-		}
-
-		.edit-site-template-details__template-areas-item-more {
-			position: absolute;
-			right: 0;
-			top: 0;
-			bottom: 0;
-			margin: auto 0;
-		}
-	}
-
-	.edit-site-template-details__revert {
-		// Make some spaces for the revert button to have some paddings.
-		padding: $grid-unit-15 $grid-unit;
-	}
-
-	.edit-site-template-details__revert-button {
-		height: auto;
-		padding: $grid-unit-05 $grid-unit;
-		text-align: left;
-
-		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px $white;
-		}
-	}
-
-	.edit-site-template-details__show-all-button.components-button {
-		display: flex;
-		justify-content: center;
-		background: $gray-900;
-		color: $white;
-		width: 100%;
-		height: ($button-size + $grid-unit-10);
-		border-radius: 0;
-
-		&:hover {
-			color: $white;
-		}
-
-		&:active {
-			color: $gray-400;
-		}
-
-		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px $white;
-		}
-	}
-}

package/src/components/template-details/template-areas.js

@@ -1,164 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { sprintf, __ } from '@wordpress/i18n';
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { moreVertical } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import isTemplateRevertable from '../../utils/is-template-revertable';
-import { useLocation } from '../routes';
-import { useLink } from '../routes/link';
-
-function TemplatePartItemMore( {
-	onClose,
-	templatePart,
-	closeTemplateDetailsDropdown,
-} ) {
-	const { revertTemplate } = useDispatch( editSiteStore );
-	const { params } = useLocation();
-	const editLinkProps = useLink(
-		{
-			postId: templatePart.id,
-			postType: templatePart.type,
-		},
-		{
-			fromTemplateId: params.postId,
-		}
-	);
-
-	function editTemplatePart( event ) {
-		editLinkProps.onClick( event );
-		onClose();
-		closeTemplateDetailsDropdown();
-	}
-
-	function clearCustomizations() {
-		revertTemplate( templatePart );
-		onClose();
-		closeTemplateDetailsDropdown();
-	}
-
-	return (
-		<>
-			<MenuGroup>
-				<MenuItem { ...editLinkProps } onClick={ editTemplatePart }>
-					{ sprintf(
-						/* translators: %s: template part title */
-						__( 'Edit %s' ),
-						templatePart.title?.rendered
-					) }
-				</MenuItem>
-			</MenuGroup>
-			{ isTemplateRevertable( templatePart ) && (
-				<MenuGroup>
-					<MenuItem
-						info={ __(
-							'Use the template part as supplied by the theme.'
-						) }
-						onClick={ clearCustomizations }
-					>
-						{ __( 'Clear customizations' ) }
-					</MenuItem>
-				</MenuGroup>
-			) }
-		</>
-	);
-}
-
-function TemplatePartItem( {
-	templatePart,
-	clientId,
-	closeTemplateDetailsDropdown,
-} ) {
-	const { selectBlock, toggleBlockHighlight } =
-		useDispatch( blockEditorStore );
-	const templatePartArea = useSelect(
-		( select ) => {
-			const defaultAreas =
-				select(
-					editorStore
-				).__experimentalGetDefaultTemplatePartAreas();
-
-			return defaultAreas.find(
-				( defaultArea ) => defaultArea.area === templatePart.area
-			);
-		},
-		[ templatePart.area ]
-	);
-	const highlightBlock = () => toggleBlockHighlight( clientId, true );
-	const cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );
-
-	return (
-		<div
-			role="menuitem"
-			className="edit-site-template-details__template-areas-item"
-		>
-			<MenuItem
-				role="button"
-				icon={ templatePartArea?.icon }
-				iconPosition="left"
-				onClick={ () => {
-					selectBlock( clientId );
-				} }
-				onMouseOver={ highlightBlock }
-				onMouseLeave={ cancelHighlightBlock }
-				onFocus={ highlightBlock }
-				onBlur={ cancelHighlightBlock }
-			>
-				{ templatePartArea?.label }
-			</MenuItem>
-
-			<DropdownMenu
-				icon={ moreVertical }
-				label={ __( 'More options' ) }
-				className="edit-site-template-details__template-areas-item-more"
-			>
-				{ ( { onClose } ) => (
-					<TemplatePartItemMore
-						onClose={ onClose }
-						templatePart={ templatePart }
-						closeTemplateDetailsDropdown={
-							closeTemplateDetailsDropdown
-						}
-					/>
-				) }
-			</DropdownMenu>
-		</div>
-	);
-}
-
-export default function TemplateAreas( { closeTemplateDetailsDropdown } ) {
-	const templateParts = useSelect(
-		( select ) => select( editSiteStore ).getCurrentTemplateTemplateParts(),
-		[]
-	);
-
-	if ( ! templateParts.length ) {
-		return null;
-	}
-
-	return (
-		<MenuGroup
-			label={ __( 'Areas' ) }
-			className="edit-site-template-details__group edit-site-template-details__template-areas"
-		>
-			{ templateParts.map( ( { templatePart, block } ) => (
-				<TemplatePartItem
-					key={ templatePart.slug }
-					clientId={ block.clientId }
-					templatePart={ templatePart }
-					closeTemplateDetailsDropdown={
-						closeTemplateDetailsDropdown
-					}
-				/>
-			) ) }
-		</MenuGroup>
-	);
-}

package/src/components/template-details/template-part-area-selector.js

@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { SelectControl } from '@wordpress/components';
-import { useEntityProp } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-
-export default function TemplatePartAreaSelector( { id } ) {
-	const [ area, setArea ] = useEntityProp(
-		'postType',
-		'wp_template_part',
-		'area',
-		id
-	);
-
-	const definedAreas = useSelect(
-		( select ) =>
-			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
-		[]
-	);
-
-	const areaOptions = definedAreas.map( ( { label, area: _area } ) => ( {
-		label,
-		value: _area,
-	} ) );
-
-	return (
-		<SelectControl
-			__nextHasNoMarginBottom
-			label={ __( 'Area' ) }
-			labelPosition="top"
-			options={ areaOptions }
-			value={ area }
-			onChange={ setArea }
-		/>
-	);
-}

package/src/hooks/commands/index.js

@@ -1,10 +0,0 @@
-/**
- * Internal dependencies
- */
-import { useNavigationCommands } from './use-navigation-commands';
-import { useWPAdminCommands } from './use-wp-admin-commands';
-
-export function useCommands() {
-	useWPAdminCommands();
-	useNavigationCommands();
-}