@wordpress/edit-site 5.10.0 → 5.11.0

package/build-module/components/template-details/template-part-area-selector.js

@@ -1,36 +0,0 @@
-import { createElement } from "@wordpress/element";
-
-/**
- * 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(_ref) {
-  let {
-    id
-  } = _ref;
-  const [area, setArea] = useEntityProp('postType', 'wp_template_part', 'area', id);
-  const definedAreas = useSelect(select => select(editorStore).__experimentalGetDefaultTemplatePartAreas(), []);
-  const areaOptions = definedAreas.map(_ref2 => {
-    let {
-      label,
-      area: _area
-    } = _ref2;
-    return {
-      label,
-      value: _area
-    };
-  });
-  return createElement(SelectControl, {
-    __nextHasNoMarginBottom: true,
-    label: __('Area'),
-    labelPosition: "top",
-    options: areaOptions,
-    value: area,
-    onChange: setArea
-  });
-}
-//# sourceMappingURL=template-part-area-selector.js.map

package/build-module/components/template-details/template-part-area-selector.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/template-details/template-part-area-selector.js"],"names":["__","SelectControl","useEntityProp","useSelect","store","editorStore","TemplatePartAreaSelector","id","area","setArea","definedAreas","select","__experimentalGetDefaultTemplatePartAreas","areaOptions","map","label","_area","value"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,aAAT,QAA8B,uBAA9B;AACA,SAASC,aAAT,QAA8B,sBAA9B;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,KAAK,IAAIC,WAAlB,QAAqC,mBAArC;AAEA,eAAe,SAASC,wBAAT,OAA4C;AAAA,MAAT;AAAEC,IAAAA;AAAF,GAAS;AAC1D,QAAM,CAAEC,IAAF,EAAQC,OAAR,IAAoBP,aAAa,CACtC,UADsC,EAEtC,kBAFsC,EAGtC,MAHsC,EAItCK,EAJsC,CAAvC;AAOA,QAAMG,YAAY,GAAGP,SAAS,CAC3BQ,MAAF,IACCA,MAAM,CAAEN,WAAF,CAAN,CAAsBO,yCAAtB,EAF4B,EAG7B,EAH6B,CAA9B;AAMA,QAAMC,WAAW,GAAGH,YAAY,CAACI,GAAb,CAAkB;AAAA,QAAE;AAAEC,MAAAA,KAAF;AAASP,MAAAA,IAAI,EAAEQ;AAAf,KAAF;AAAA,WAAgC;AACrED,MAAAA,KADqE;AAErEE,MAAAA,KAAK,EAAED;AAF8D,KAAhC;AAAA,GAAlB,CAApB;AAKA,SACC,cAAC,aAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,KAAK,EAAGhB,EAAE,CAAE,MAAF,CAFX;AAGC,IAAA,aAAa,EAAC,KAHf;AAIC,IAAA,OAAO,EAAGa,WAJX;AAKC,IAAA,KAAK,EAAGL,IALT;AAMC,IAAA,QAAQ,EAAGC;AANZ,IADD;AAUA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { SelectControl } from '@wordpress/components';\nimport { useEntityProp } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { store as editorStore } from '@wordpress/editor';\n\nexport default function TemplatePartAreaSelector( { id } ) {\n\tconst [ area, setArea ] = useEntityProp(\n\t\t'postType',\n\t\t'wp_template_part',\n\t\t'area',\n\t\tid\n\t);\n\n\tconst definedAreas = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editorStore ).__experimentalGetDefaultTemplatePartAreas(),\n\t\t[]\n\t);\n\n\tconst areaOptions = definedAreas.map( ( { label, area: _area } ) => ( {\n\t\tlabel,\n\t\tvalue: _area,\n\t} ) );\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ __( 'Area' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\toptions={ areaOptions }\n\t\t\tvalue={ area }\n\t\t\tonChange={ setArea }\n\t\t/>\n\t);\n}\n"]}

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/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;
-		}
-	}
-}