@wordpress/edit-site 5.34.0 → 6.0.0

package/src/components/header-edit-mode/style.scss

@@ -1,201 +0,0 @@
-.edit-site-header-edit-mode {
-	height: $header-height;
-	align-items: center;
-	background-color: $white;
-	color: $gray-900;
-	display: flex;
-	box-sizing: border-box;
-	width: 100%;
-	justify-content: space-between;
-	border-bottom: $border-width solid $gray-200;
-	padding-left: $header-height;
-
-	// When top toolbar is engaged and should expand fully.
-	&.show-block-toolbar {
-
-		.edit-site-header-edit-mode__start,
-		.edit-site-header-edit-mode__end {
-			flex-basis: auto;
-		}
-
-		.edit-site-header-edit-mode__center {
-			display: none;
-		}
-	}
-
-	.edit-site-header-edit-mode__start {
-		display: flex;
-		border: none;
-		align-items: center;
-		flex-grow: 1;
-		flex-shrink: 2;
-		// Take up the full height of the header so the border focus
-		// is visible on toolbar buttons.
-		height: 100%;
-		// Allow focus ring to be fully visible on furthest right button.
-		@include break-medium() {
-			padding-right: var(--wp-admin-border-width-focus);
-			// Account for the site hub, which is 60x60px.
-			flex-basis: calc(37.5% - 60px);
-			// We need this to be overflow hidden so the block toolbar can
-			// overflow scroll. If the overflow is visible, flexbox allows
-			// the toolbar to grow outside of the allowed container space.
-			overflow: hidden;
-		}
-	}
-
-	.edit-site-header-edit-mode__end {
-		display: flex;
-		justify-content: flex-end;
-		height: 100%;
-		flex-grow: 1;
-		flex-shrink: 1;
-
-		@include break-medium() {
-			flex-basis: 37.5%;
-		}
-	}
-
-	.edit-site-header-edit-mode__center {
-		align-items: center;
-		display: flex;
-		flex-basis: 100%;
-		flex-grow: 1;
-		flex-shrink: 2;
-		height: 100%;
-		justify-content: center;
-
-		// Flex items will, by default, refuse to shrink below a minimum
-		// intrinsic width. In order to shrink this flexbox item, and
-		// subsequently truncate child text, we set an explicit min-width.
-		// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
-		min-width: 0;
-
-		@include break-medium() {
-			flex-basis: 25%;
-		}
-	}
-
-}
-
-.edit-site-header-edit-mode__toolbar {
-	align-items: center;
-	display: flex;
-	gap: $grid-unit-10;
-	padding-left: $grid-unit-20;
-
-	@include break-medium() {
-		padding-left: $grid-unit-50 * 0.5;
-	}
-
-	@include break-wide() {
-		padding-right: $grid-unit-10;
-	}
-
-	.edit-site-header-edit-mode__inserter-toggle {
-		svg {
-			transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
-			@include reduce-motion("transition");
-		}
-
-		&.is-pressed {
-			svg {
-				transform: rotate(45deg);
-			}
-		}
-	}
-}
-
-/**
- * Buttons on the right side
- */
-
-.edit-site-header-edit-mode__actions {
-	display: inline-flex;
-	align-items: center;
-	flex-wrap: nowrap;
-	// Ensure actions do not press against .edit-site-header-edit-mode__center.
-	padding-left: $grid-unit-10;
-	padding-right: $grid-unit-10;
-	gap: $grid-unit-10;
-}
-
-.edit-site-header-edit-mode__preview-options {
-	opacity: 1;
-	transition: opacity 0.3s;
-
-	&.is-zoomed-out {
-		opacity: 0;
-	}
-}
-
-// Button text label styles
-
-.edit-site-header-edit-mode.show-icon-labels {
-	.components-button.has-icon {
-		width: auto;
-
-		// Hide the button icons when labels are set to display...
-		svg {
-			display: none;
-		}
-		// ... and display labels.
-		&::after {
-			content: attr(aria-label);
-		}
-		&[aria-disabled="true"] {
-			background-color: transparent;
-		}
-	}
-	.is-tertiary {
-		&:active {
-			box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
-			background-color: transparent;
-		}
-	}
-	// Some margins and padding have to be adjusted so the buttons can still fit on smaller screens.
-	.edit-site-save-button__button {
-		padding-left: 6px;
-		padding-right: 6px;
-	}
-
-	// The template details toggle has a custom label, different from its aria-label, so we don't want to display both.
-	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
-		&::after {
-			content: none;
-		}
-	}
-
-	.edit-site-header-edit-mode__inserter-toggle.edit-site-header-edit-mode__inserter-toggle,
-	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
-		height: 36px;
-		padding: 0 $grid-unit-10;
-	}
-
-	.block-editor-block-mover {
-		// Modified group borders.
-		border-left: none;
-
-		&::before {
-			content: "";
-			width: $border-width;
-			height: $grid-unit-30;
-			background-color: $gray-300;
-			margin-top: $grid-unit-05;
-			margin-left: $grid-unit;
-		}
-
-		// Modified block movers horizontal separator.
-		.block-editor-block-mover__move-button-container {
-			&::before {
-				width: calc(100% - #{$grid-unit-30});
-				background: $gray-300;
-				left: calc(50% + 1px);
-			}
-		}
-	}
-}
-
-.components-popover.more-menu-dropdown__content {
-	z-index: z-index(".components-popover.more-menu__content");
-}

package/src/components/page-patterns/dataviews-pattern-actions.js

@@ -1,439 +0,0 @@
-/**
- * External dependencies
- */
-import { paramCase as kebabCase } from 'change-case';
-import { downloadZip } from 'client-zip';
-
-/**
- * WordPress dependencies
- */
-import { downloadBlob } from '@wordpress/blob';
-import { __, _x, sprintf } from '@wordpress/i18n';
-import {
-	Button,
-	TextControl,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	__experimentalText as Text,
-} from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { store as noticesStore } from '@wordpress/notices';
-import { decodeEntities } from '@wordpress/html-entities';
-import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
-import { store as editorStore } from '@wordpress/editor';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-import {
-	PATTERN_TYPES,
-	TEMPLATE_PART_POST_TYPE,
-	PATTERN_DEFAULT_CATEGORY,
-} from '../../utils/constants';
-import { CreateTemplatePartModalContents } from '../create-template-part-modal';
-
-const { useHistory, useLocation } = unlock( routerPrivateApis );
-const { CreatePatternModalContents, useDuplicatePatternProps } =
-	unlock( patternsPrivateApis );
-
-function getJsonFromItem( item ) {
-	return JSON.stringify(
-		{
-			__file: item.type,
-			title: item.title || item.name,
-			content: item.patternPost.content.raw,
-			syncStatus: item.patternPost.wp_pattern_sync_status,
-		},
-		null,
-		2
-	);
-}
-
-export const exportJSONaction = {
-	id: 'export-pattern',
-	label: __( 'Export as JSON' ),
-	supportsBulk: true,
-	isEligible: ( item ) => item.type === PATTERN_TYPES.user,
-	callback: async ( items ) => {
-		if ( items.length === 1 ) {
-			return downloadBlob(
-				`${ kebabCase( items[ 0 ].title || items[ 0 ].name ) }.json`,
-				getJsonFromItem( items[ 0 ] ),
-				'application/json'
-			);
-		}
-		const nameCount = {};
-		const filesToZip = items.map( ( item ) => {
-			const name = kebabCase( item.title || item.name );
-			nameCount[ name ] = ( nameCount[ name ] || 0 ) + 1;
-			return {
-				name: `${
-					name +
-					( nameCount[ name ] > 1
-						? '-' + ( nameCount[ name ] - 1 )
-						: '' )
-				}.json`,
-				lastModified: new Date(),
-				input: getJsonFromItem( item ),
-			};
-		} );
-		return downloadBlob(
-			__( 'patterns-export' ) + '.zip',
-			await downloadZip( filesToZip ).blob(),
-			'application/zip'
-		);
-	},
-};
-
-export const renameAction = {
-	id: 'rename-pattern',
-	label: __( 'Rename' ),
-	isEligible: ( item ) => {
-		const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-		const isUserPattern = item.type === PATTERN_TYPES.user;
-		const isCustomPattern =
-			isUserPattern || ( isTemplatePart && item.isCustom );
-		const hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;
-		return isCustomPattern && ! hasThemeFile;
-	},
-	RenderModal: ( { items, closeModal } ) => {
-		const [ item ] = items;
-		const [ title, setTitle ] = useState( () => item.title );
-		const { editEntityRecord, saveEditedEntityRecord } =
-			useDispatch( coreStore );
-		const { createSuccessNotice, createErrorNotice } =
-			useDispatch( noticesStore );
-		async function onRename( event ) {
-			event.preventDefault();
-			try {
-				await editEntityRecord( 'postType', item.type, item.id, {
-					title,
-				} );
-				// Update state before saving rerenders the list.
-				setTitle( '' );
-				closeModal();
-				// Persist edited entity.
-				await saveEditedEntityRecord( 'postType', item.type, item.id, {
-					throwOnError: true,
-				} );
-				createSuccessNotice(
-					item.type === TEMPLATE_PART_POST_TYPE
-						? __( 'Template part renamed.' )
-						: __( 'Pattern renamed.' ),
-					{ type: 'snackbar' }
-				);
-			} catch ( error ) {
-				const fallbackErrorMessage =
-					item.type === TEMPLATE_PART_POST_TYPE
-						? __(
-								'An error occurred while renaming the template part.'
-						  )
-						: __( 'An error occurred while renaming the pattern.' );
-				const errorMessage =
-					error.message && error.code !== 'unknown_error'
-						? error.message
-						: fallbackErrorMessage;
-				createErrorNotice( errorMessage, { type: 'snackbar' } );
-			}
-		}
-		return (
-			<form onSubmit={ onRename }>
-				<VStack spacing="5">
-					<TextControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						label={ __( 'Name' ) }
-						value={ title }
-						onChange={ setTitle }
-						required
-					/>
-					<HStack justify="right">
-						<Button
-							__next40pxDefaultSize
-							variant="tertiary"
-							onClick={ () => {
-								closeModal();
-							} }
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button
-							__next40pxDefaultSize
-							variant="primary"
-							type="submit"
-						>
-							{ __( 'Save' ) }
-						</Button>
-					</HStack>
-				</VStack>
-			</form>
-		);
-	},
-};
-
-const canDeleteOrReset = ( item ) => {
-	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-	const isUserPattern = item.type === PATTERN_TYPES.user;
-	return isUserPattern || ( isTemplatePart && item.isCustom );
-};
-
-export const deleteAction = {
-	id: 'delete-pattern',
-	label: __( 'Delete' ),
-	isEligible: ( item ) => {
-		const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-		const hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;
-		return canDeleteOrReset( item ) && ! hasThemeFile;
-	},
-	hideModalHeader: true,
-	supportsBulk: true,
-	RenderModal: ( { items, closeModal, onPerform } ) => {
-		const { __experimentalDeleteReusableBlock } =
-			useDispatch( reusableBlocksStore );
-		const { createErrorNotice, createSuccessNotice } =
-			useDispatch( noticesStore );
-		const { removeTemplates } = unlock( useDispatch( editorStore ) );
-
-		const deletePattern = async () => {
-			const promiseResult = await Promise.allSettled(
-				items.map( ( item ) => {
-					return __experimentalDeleteReusableBlock( item.id );
-				} )
-			);
-			// If all the promises were fulfilled with success.
-			if (
-				promiseResult.every( ( { status } ) => status === 'fulfilled' )
-			) {
-				let successMessage;
-				if ( promiseResult.length === 1 ) {
-					successMessage = sprintf(
-						/* translators: The posts's title. */
-						__( '"%s" deleted.' ),
-						items[ 0 ].title
-					);
-				} else {
-					successMessage = __( 'The patterns were deleted.' );
-				}
-				createSuccessNotice( successMessage, {
-					type: 'snackbar',
-					id: 'edit-site-page-trashed',
-				} );
-			} else {
-				// If there was at lease one failure.
-				let errorMessage;
-				// If we were trying to delete a single pattern.
-				if ( promiseResult.length === 1 ) {
-					if ( promiseResult[ 0 ].reason?.message ) {
-						errorMessage = promiseResult[ 0 ].reason.message;
-					} else {
-						errorMessage = __(
-							'An error occurred while deleting the pattern.'
-						);
-					}
-					// If we were trying to delete multiple patterns.
-				} else {
-					const errorMessages = new Set();
-					const failedPromises = promiseResult.filter(
-						( { status } ) => status === 'rejected'
-					);
-					for ( const failedPromise of failedPromises ) {
-						if ( failedPromise.reason?.message ) {
-							errorMessages.add( failedPromise.reason.message );
-						}
-					}
-					if ( errorMessages.size === 0 ) {
-						errorMessage = __(
-							'An error occurred while deleting the patterns.'
-						);
-					} else if ( errorMessages.size === 1 ) {
-						errorMessage = sprintf(
-							/* translators: %s: an error message */
-							__(
-								'An error occurred while deleting the patterns: %s'
-							),
-							[ ...errorMessages ][ 0 ]
-						);
-					} else {
-						errorMessage = sprintf(
-							/* translators: %s: a list of comma separated error messages */
-							__(
-								'Some errors occurred while deleting the patterns: %s'
-							),
-							[ ...errorMessages ].join( ',' )
-						);
-					}
-					createErrorNotice( errorMessage, {
-						type: 'snackbar',
-					} );
-				}
-			}
-		};
-		const deleteItem = () => {
-			if ( items[ 0 ].type === TEMPLATE_PART_POST_TYPE ) {
-				removeTemplates( items );
-			} else {
-				deletePattern();
-			}
-			if ( onPerform ) {
-				onPerform();
-			}
-			closeModal();
-		};
-		let questionMessage;
-		if ( items.length === 1 ) {
-			questionMessage = sprintf(
-				// translators: %s: The page's title.
-				__( 'Are you sure you want to delete "%s"?' ),
-				decodeEntities( items[ 0 ].title || items[ 0 ].name )
-			);
-		} else if (
-			items.length > 1 &&
-			items[ 0 ].type === TEMPLATE_PART_POST_TYPE
-		) {
-			questionMessage = sprintf(
-				// translators: %d: The number of template parts (2 or more).
-				__( 'Are you sure you want to delete %d template parts?' ),
-				items.length
-			);
-		} else {
-			questionMessage = sprintf(
-				// translators: %d: The number of patterns (2 or more).
-				__( 'Are you sure you want to delete %d patterns?' ),
-				items.length
-			);
-		}
-		return (
-			<VStack spacing="5">
-				<Text>{ questionMessage }</Text>
-				<HStack justify="right">
-					<Button variant="tertiary" onClick={ closeModal }>
-						{ __( 'Cancel' ) }
-					</Button>
-					<Button variant="primary" onClick={ deleteItem }>
-						{ __( 'Delete' ) }
-					</Button>
-				</HStack>
-			</VStack>
-		);
-	},
-};
-
-export const resetAction = {
-	id: 'reset-action',
-	label: __( 'Reset' ),
-	isEligible: ( item ) => {
-		const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-		const hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;
-		return canDeleteOrReset( item ) && hasThemeFile;
-	},
-	hideModalHeader: true,
-	RenderModal: ( { items, closeModal } ) => {
-		const [ item ] = items;
-		const { removeTemplate } = useDispatch( editSiteStore );
-		return (
-			<VStack spacing="5">
-				<Text>
-					{ __( 'Reset to default and clear all customizations?' ) }
-				</Text>
-				<HStack justify="right">
-					<Button variant="tertiary" onClick={ closeModal }>
-						{ __( 'Cancel' ) }
-					</Button>
-					<Button
-						variant="primary"
-						onClick={ () => removeTemplate( item ) }
-					>
-						{ __( 'Reset' ) }
-					</Button>
-				</HStack>
-			</VStack>
-		);
-	},
-};
-
-export const duplicatePatternAction = {
-	id: 'duplicate-pattern',
-	label: _x( 'Duplicate', 'action label' ),
-	isEligible: ( item ) => item.type !== TEMPLATE_PART_POST_TYPE,
-	modalHeader: _x( 'Duplicate pattern', 'action label' ),
-	RenderModal: ( { items, closeModal } ) => {
-		const [ item ] = items;
-		const {
-			params: { categoryId = PATTERN_DEFAULT_CATEGORY },
-		} = useLocation();
-		const isThemePattern = item.type === PATTERN_TYPES.theme;
-		const history = useHistory();
-		function onPatternSuccess( { pattern } ) {
-			history.push( {
-				categoryType: PATTERN_TYPES.theme,
-				categoryId,
-				postType: PATTERN_TYPES.user,
-				postId: pattern.id,
-			} );
-			closeModal();
-		}
-		const duplicatedProps = useDuplicatePatternProps( {
-			pattern: isThemePattern ? item : item.patternPost,
-			onSuccess: onPatternSuccess,
-		} );
-		return (
-			<CreatePatternModalContents
-				onClose={ closeModal }
-				confirmLabel={ _x( 'Duplicate', 'action label' ) }
-				{ ...duplicatedProps }
-			/>
-		);
-	},
-};
-
-export const duplicateTemplatePartAction = {
-	id: 'duplicate-template-part',
-	label: _x( 'Duplicate', 'action label' ),
-	isEligible: ( item ) => item.type === TEMPLATE_PART_POST_TYPE,
-	modalHeader: _x( 'Duplicate template part', 'action label' ),
-	RenderModal: ( { items, closeModal } ) => {
-		const [ item ] = items;
-		const { createSuccessNotice } = useDispatch( noticesStore );
-		const {
-			params: { categoryId = PATTERN_DEFAULT_CATEGORY },
-		} = useLocation();
-		const history = useHistory();
-		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,
-			} );
-			closeModal();
-		}
-		return (
-			<CreateTemplatePartModalContents
-				blocks={ item.blocks }
-				defaultArea={ item.templatePart.area }
-				defaultTitle={ sprintf(
-					/* translators: %s: Existing template part title */
-					__( '%s (Copy)' ),
-					item.title
-				) }
-				onCreate={ onTemplatePartSuccess }
-				onError={ closeModal }
-				confirmLabel={ _x( 'Duplicate', 'action label' ) }
-			/>
-		);
-	},
-};

package/src/components/pattern-modal/duplicate.js

@@ -1,55 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { PATTERN_MODALS } from './';
-import { PATTERN_TYPES } from '../../utils/constants';
-import { unlock } from '../../lock-unlock';
-import useEditedEntityRecord from '../use-edited-entity-record';
-
-const { DuplicatePatternModal } = unlock( patternsPrivateApis );
-const { useHistory, useLocation } = unlock( routerPrivateApis );
-const { interfaceStore } = unlock( editorPrivateApis );
-
-export default function PatternDuplicateModal() {
-	const { record } = useEditedEntityRecord();
-	const {
-		params: { categoryType, categoryId },
-	} = useLocation();
-	const { closeModal } = useDispatch( interfaceStore );
-	const history = useHistory();
-
-	const isActive = useSelect( ( select ) =>
-		select( interfaceStore ).isModalActive( PATTERN_MODALS.duplicate )
-	);
-
-	if ( ! isActive ) {
-		return null;
-	}
-
-	function onSuccess( { pattern: newPattern } ) {
-		history.push( {
-			categoryType,
-			categoryId,
-			postType: PATTERN_TYPES.user,
-			postId: newPattern.id,
-		} );
-
-		closeModal();
-	}
-
-	return (
-		<DuplicatePatternModal
-			onClose={ closeModal }
-			onSuccess={ onSuccess }
-			pattern={ record }
-		/>
-	);
-}

package/src/components/pattern-modal/index.js

@@ -1,19 +0,0 @@
-/**
- * Internal dependencies
- */
-import PatternRenameModal from './rename';
-import PatternDuplicateModal from './duplicate';
-
-export const PATTERN_MODALS = {
-	rename: 'edit-site/pattern-rename',
-	duplicate: 'edit-site/pattern-duplicate',
-};
-
-export default function PatternModal() {
-	return (
-		<>
-			<PatternDuplicateModal />
-			<PatternRenameModal />
-		</>
-	);
-}