@wordpress/edit-site 5.10.0 → 5.12.0

package/src/components/add-new-template/add-custom-generic-template-modal.js

@@ -1,101 +0,0 @@
-/**
- * External dependencies
- */
-import { kebabCase } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import {
-	Button,
-	Modal,
-	TextControl,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import TemplateActionsLoadingScreen from './template-actions-loading-screen';
-
-function AddCustomGenericTemplateModal( {
-	onClose,
-	createTemplate,
-	isCreatingTemplate,
-} ) {
-	const [ title, setTitle ] = useState( '' );
-	const defaultTitle = __( 'Custom Template' );
-	const [ isBusy, setIsBusy ] = useState( false );
-	async function onCreateTemplate( event ) {
-		event.preventDefault();
-		if ( isBusy ) {
-			return;
-		}
-		setIsBusy( true );
-		try {
-			await createTemplate(
-				{
-					slug:
-						'wp-custom-template-' +
-						kebabCase( title || defaultTitle ),
-					title: title || defaultTitle,
-				},
-				false
-			);
-		} finally {
-			setIsBusy( false );
-		}
-	}
-	return (
-		<Modal
-			title={ __( 'Create custom template' ) }
-			onRequestClose={ () => {
-				onClose();
-			} }
-			overlayClassName="edit-site-custom-generic-template__modal"
-		>
-			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
-			<form onSubmit={ onCreateTemplate }>
-				<VStack spacing={ 6 }>
-					<TextControl
-						__nextHasNoMarginBottom
-						label={ __( 'Name' ) }
-						value={ title }
-						onChange={ setTitle }
-						placeholder={ defaultTitle }
-						disabled={ isBusy }
-						help={ __(
-							'Describe the template, e.g. "Post with sidebar".'
-						) }
-					/>
-					<HStack
-						className="edit-site-custom-generic-template__modal-actions"
-						justify="right"
-					>
-						<Button
-							variant="tertiary"
-							onClick={ () => {
-								onClose();
-							} }
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button
-							variant="primary"
-							type="submit"
-							isBusy={ isBusy }
-							aria-disabled={ isBusy }
-						>
-							{ __( 'Create' ) }
-						</Button>
-					</HStack>
-				</VStack>
-			</form>
-		</Modal>
-	);
-}
-
-export default AddCustomGenericTemplateModal;

package/src/components/global-styles/border-panel.js

@@ -1,114 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../private-apis';
-
-const {
-	useGlobalStyle,
-	useGlobalSetting,
-	useSettingsForBlockElement,
-	BorderPanel: StylesBorderPanel,
-} = unlock( blockEditorPrivateApis );
-
-function applyFallbackStyle( border ) {
-	if ( ! border ) {
-		return border;
-	}
-
-	const hasColorOrWidth = border.color || border.width;
-
-	if ( ! border.style && hasColorOrWidth ) {
-		return { ...border, style: 'solid' };
-	}
-
-	if ( border.style && ! hasColorOrWidth ) {
-		return undefined;
-	}
-
-	return border;
-}
-
-function applyAllFallbackStyles( border ) {
-	if ( ! border ) {
-		return border;
-	}
-
-	if ( hasSplitBorders( border ) ) {
-		return {
-			top: applyFallbackStyle( border.top ),
-			right: applyFallbackStyle( border.right ),
-			bottom: applyFallbackStyle( border.bottom ),
-			left: applyFallbackStyle( border.left ),
-		};
-	}
-
-	return applyFallbackStyle( border );
-}
-
-export default function BorderPanel( { name, variation = '' } ) {
-	let prefixParts = [];
-	if ( variation ) {
-		prefixParts = [ 'variations', variation ].concat( prefixParts );
-	}
-	const prefix = prefixParts.join( '.' );
-
-	const [ style ] = useGlobalStyle( prefix, name, 'user', {
-		shouldDecodeEncode: false,
-	} );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
-		shouldDecodeEncode: false,
-	} );
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
-
-	const onChange = ( newStyle ) => {
-		if ( ! newStyle?.border ) {
-			setStyle( newStyle );
-			return;
-		}
-
-		// As Global Styles can't conditionally generate styles based on if
-		// other style properties have been set, we need to force split
-		// border definitions for user set global border styles. Border
-		// radius is derived from the same property i.e. `border.radius` if
-		// it is a string that is used. The longhand border radii styles are
-		// only generated if that property is an object.
-		//
-		// For borders (color, style, and width) those are all properties on
-		// the `border` style property. This means if the theme.json defined
-		// split borders and the user condenses them into a flat border or
-		// vice-versa we'd get both sets of styles which would conflict.
-		const { radius, ...newBorder } = newStyle.border;
-		const border = applyAllFallbackStyles( newBorder );
-		const updatedBorder = ! hasSplitBorders( border )
-			? {
-					top: border,
-					right: border,
-					bottom: border,
-					left: border,
-			  }
-			: {
-					color: null,
-					style: null,
-					width: null,
-					...border,
-			  };
-
-		setStyle( { ...newStyle, border: { ...updatedBorder, radius } } );
-	};
-
-	return (
-		<StylesBorderPanel
-			inheritedValue={ inheritedStyle }
-			value={ style }
-			onChange={ onChange }
-			settings={ settings }
-		/>
-	);
-}

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/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/sidebar-navigation-screen-pages/style.scss

@@ -1,4 +0,0 @@
-.edit-site-sidebar-navigation-screen-pages__see-all {
-	/* Overrides the margin that comes from the Item component */
-	margin-top: $grid-unit-20 !important;
-}

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,167 +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';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import isTemplateRevertable from '../../utils/is-template-revertable';
-import { useLink } from '../routes/link';
-import { unlock } from '../../private-apis';
-
-const { useLocation } = unlock( routerPrivateApis );
-
-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 }
-		/>
-	);
-}