@wordpress/edit-site 5.25.0 → 5.25.1-next.79a6196f.0

package/src/components/global-styles/screen-revisions/get-revision-changes.js

@@ -1,171 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-
-const globalStylesChangesCache = new Map();
-const EMPTY_ARRAY = [];
-
-const translationMap = {
-	caption: __( 'Caption' ),
-	link: __( 'Link' ),
-	button: __( 'Button' ),
-	heading: __( 'Heading' ),
-	'settings.color': __( 'Color settings' ),
-	'settings.typography': __( 'Typography settings' ),
-	'styles.color': __( 'Colors' ),
-	'styles.spacing': __( 'Spacing' ),
-	'styles.typography': __( 'Typography' ),
-};
-
-const isObject = ( obj ) => obj !== null && typeof obj === 'object';
-
-/**
- * Get the translation for a given global styles key.
- * @param {string}                key        A key representing a path to a global style property or setting.
- * @param {Record<string,string>} blockNames A key/value pair object of block names and their rendered titles.
- * @return {string|undefined}                A translated key or undefined if no translation exists.
- */
-function getTranslation( key, blockNames ) {
-	if ( translationMap[ key ] ) {
-		return translationMap[ key ];
-	}
-
-	const keyArray = key.split( '.' );
-
-	if ( keyArray?.[ 0 ] === 'blocks' ) {
-		const blockName = blockNames[ keyArray[ 1 ] ];
-		return blockName
-			? sprintf(
-					// translators: %s: block name.
-					__( '%s block' ),
-					blockName
-			  )
-			: keyArray[ 1 ];
-	}
-
-	if ( keyArray?.[ 0 ] === 'elements' ) {
-		return sprintf(
-			// translators: %s: element name, e.g., heading button, link, caption.
-			__( '%s element' ),
-			translationMap[ keyArray[ 1 ] ]
-		);
-	}
-
-	return undefined;
-}
-
-/**
- * A deep comparison of two objects, optimized for comparing global styles.
- * @param {Object} changedObject  The changed object to compare.
- * @param {Object} originalObject The original object to compare against.
- * @param {string} parentPath     A key/value pair object of block names and their rendered titles.
- * @return {string[]}             An array of paths whose values have changed.
- */
-function deepCompare( changedObject, originalObject, parentPath = '' ) {
-	// We have two non-object values to compare.
-	if ( ! isObject( changedObject ) && ! isObject( originalObject ) ) {
-		/*
-		 * Only return a path if the value has changed.
-		 * And then only the path name up to 2 levels deep.
-		 */
-		return changedObject !== originalObject
-			? parentPath.split( '.' ).slice( 0, 2 ).join( '.' )
-			: undefined;
-	}
-
-	// Enable comparison when an object doesn't have a corresponding property to compare.
-	changedObject = isObject( changedObject ) ? changedObject : {};
-	originalObject = isObject( originalObject ) ? originalObject : {};
-
-	const allKeys = new Set( [
-		...Object.keys( changedObject ),
-		...Object.keys( originalObject ),
-	] );
-
-	let diffs = [];
-	for ( const key of allKeys ) {
-		const path = parentPath ? parentPath + '.' + key : key;
-		const changedPath = deepCompare(
-			changedObject[ key ],
-			originalObject[ key ],
-			path
-		);
-		if ( changedPath ) {
-			diffs = diffs.concat( changedPath );
-		}
-	}
-	return diffs;
-}
-
-/**
- * Get an array of translated summarized global styles changes.
- * Results are cached using a Map() key of `JSON.stringify( { revision, previousRevision } )`.
- *
- * @param {Object}                revision         The changed object to compare.
- * @param {Object}                previousRevision The original object to compare against.
- * @param {Record<string,string>} blockNames       A key/value pair object of block names and their rendered titles.
- * @return {string[]}                              An array of translated changes.
- */
-export default function getRevisionChanges(
-	revision,
-	previousRevision,
-	blockNames
-) {
-	const cacheKey = JSON.stringify( { revision, previousRevision } );
-
-	if ( globalStylesChangesCache.has( cacheKey ) ) {
-		return globalStylesChangesCache.get( cacheKey );
-	}
-
-	/*
-	 * Compare the two revisions with normalized keys.
-	 * The order of these keys determines the order in which
-	 * they'll appear in the results.
-	 */
-	const changedValueTree = deepCompare(
-		{
-			styles: {
-				color: revision?.styles?.color,
-				typography: revision?.styles?.typography,
-				spacing: revision?.styles?.spacing,
-			},
-			blocks: revision?.styles?.blocks,
-			elements: revision?.styles?.elements,
-			settings: revision?.settings,
-		},
-		{
-			styles: {
-				color: previousRevision?.styles?.color,
-				typography: previousRevision?.styles?.typography,
-				spacing: previousRevision?.styles?.spacing,
-			},
-			blocks: previousRevision?.styles?.blocks,
-			elements: previousRevision?.styles?.elements,
-			settings: previousRevision?.settings,
-		}
-	);
-
-	if ( ! changedValueTree.length ) {
-		globalStylesChangesCache.set( cacheKey, EMPTY_ARRAY );
-		return EMPTY_ARRAY;
-	}
-
-	// Remove duplicate results.
-	const result = [ ...new Set( changedValueTree ) ]
-		/*
-		 * Translate the keys.
-		 * Remove duplicate or empty translations.
-		 */
-		.reduce( ( acc, curr ) => {
-			const translation = getTranslation( curr, blockNames );
-			if ( translation && ! acc.includes( translation ) ) {
-				acc.push( translation );
-			}
-			return acc;
-		}, [] );
-
-	globalStylesChangesCache.set( cacheKey, result );
-
-	return result;
-}

package/src/components/global-styles/screen-revisions/test/get-revision-changes.js

@@ -1,191 +0,0 @@
-/**
- * Internal dependencies
- */
-import getRevisionChanges from '../get-revision-changes';
-
-describe( 'getRevisionChanges', () => {
-	const revision = {
-		id: 10,
-		styles: {
-			typography: {
-				fontSize: 'var(--wp--preset--font-size--potato)',
-				fontStyle: 'normal',
-				fontWeight: '600',
-				lineHeight: '1.85',
-				fontFamily: 'var(--wp--preset--font-family--asparagus)',
-			},
-			spacing: {
-				padding: {
-					top: '36px',
-					right: '89px',
-					bottom: '133px',
-					left: 'var(--wp--preset--spacing--20)',
-				},
-				blockGap: '114px',
-			},
-			elements: {
-				heading: {
-					typography: {
-						letterSpacing: '37px',
-					},
-				},
-				caption: {
-					color: {
-						text: 'var(--wp--preset--color--pineapple)',
-					},
-				},
-			},
-			color: {
-				text: 'var(--wp--preset--color--tomato)',
-			},
-			blocks: {
-				'core/paragraph': {
-					color: {
-						text: '#000000',
-					},
-				},
-			},
-		},
-		settings: {
-			color: {
-				palette: {
-					theme: [
-						{
-							slug: 'one',
-							color: 'pink',
-						},
-					],
-				},
-			},
-		},
-	};
-	const previousRevision = {
-		id: 9,
-		styles: {
-			typography: {
-				fontSize: 'var(--wp--preset--font-size--fungus)',
-				fontStyle: 'normal',
-				fontWeight: '600',
-				lineHeight: '1.85',
-				fontFamily: 'var(--wp--preset--font-family--grapes)',
-			},
-			spacing: {
-				padding: {
-					top: '36px',
-					right: '89px',
-					bottom: '133px',
-					left: 'var(--wp--preset--spacing--20)',
-				},
-				blockGap: '114px',
-			},
-			elements: {
-				heading: {
-					typography: {
-						letterSpacing: '37px',
-					},
-				},
-				caption: {
-					typography: {
-						fontSize: '1.11rem',
-						fontStyle: 'normal',
-						fontWeight: '600',
-					},
-				},
-				link: {
-					typography: {
-						lineHeight: 2,
-						textDecoration: 'line-through',
-					},
-					color: {
-						text: 'var(--wp--preset--color--egg)',
-					},
-				},
-			},
-			color: {
-				text: 'var(--wp--preset--color--tomato)',
-				background: 'var(--wp--preset--color--pumpkin)',
-			},
-			blocks: {
-				'core/paragraph': {
-					color: {
-						text: '#fff',
-					},
-				},
-			},
-		},
-		settings: {
-			color: {
-				palette: {
-					theme: [
-						{
-							slug: 'one',
-							color: 'blue',
-						},
-					],
-				},
-			},
-		},
-	};
-	const blockNames = {
-		'core/paragraph': 'Paragraph',
-	};
-	it( 'returns a list of changes and caches them', () => {
-		const resultA = getRevisionChanges(
-			revision,
-			previousRevision,
-			blockNames
-		);
-		expect( resultA ).toEqual( [
-			'Colors',
-			'Typography',
-			'Paragraph block',
-			'Caption element',
-			'Link element',
-			'Color settings',
-		] );
-
-		const resultB = getRevisionChanges(
-			revision,
-			previousRevision,
-			blockNames
-		);
-
-		expect( resultA ).toBe( resultB );
-	} );
-
-	it( 'skips unknown and unchanged keys', () => {
-		const result = getRevisionChanges(
-			{
-				styles: {
-					frogs: {
-						legs: 'green',
-					},
-					typography: {
-						fontSize: '1rem',
-					},
-					settings: {
-						'': {
-							'': 'foo',
-						},
-					},
-				},
-			},
-			{
-				styles: {
-					frogs: {
-						legs: 'yellow',
-					},
-					typography: {
-						fontSize: '1rem',
-					},
-					settings: {
-						'': {
-							'': 'bar',
-						},
-					},
-				},
-			}
-		);
-		expect( result ).toEqual( [] );
-	} );
-} );

package/src/components/header-edit-mode/undo-redo/redo.js

@@ -1,38 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, isRTL } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
-import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
-import { store as coreStore } from '@wordpress/core-data';
-import { forwardRef } from '@wordpress/element';
-
-function RedoButton( props, ref ) {
-	const shortcut = isAppleOS()
-		? displayShortcut.primaryShift( 'z' )
-		: displayShortcut.primary( 'y' );
-
-	const hasRedo = useSelect(
-		( select ) => select( coreStore ).hasRedo(),
-		[]
-	);
-	const { redo } = useDispatch( coreStore );
-	return (
-		<Button
-			{ ...props }
-			ref={ ref }
-			icon={ ! isRTL() ? redoIcon : undoIcon }
-			label={ __( 'Redo' ) }
-			shortcut={ shortcut }
-			// If there are no undo levels we don't want to actually disable this
-			// button, because it will remove focus for keyboard users.
-			// See: https://github.com/WordPress/gutenberg/issues/3486
-			aria-disabled={ ! hasRedo }
-			onClick={ hasRedo ? redo : undefined }
-		/>
-	);
-}
-
-export default forwardRef( RedoButton );

package/src/components/header-edit-mode/undo-redo/undo.js

@@ -1,34 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, isRTL } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
-import { displayShortcut } from '@wordpress/keycodes';
-import { store as coreStore } from '@wordpress/core-data';
-import { forwardRef } from '@wordpress/element';
-
-function UndoButton( props, ref ) {
-	const hasUndo = useSelect(
-		( select ) => select( coreStore ).hasUndo(),
-		[]
-	);
-	const { undo } = useDispatch( coreStore );
-	return (
-		<Button
-			{ ...props }
-			ref={ ref }
-			icon={ ! isRTL() ? undoIcon : redoIcon }
-			label={ __( 'Undo' ) }
-			shortcut={ displayShortcut.primary( 'z' ) }
-			// If there are no undo levels we don't want to actually disable this
-			// button, because it will remove focus for keyboard users.
-			// See: https://github.com/WordPress/gutenberg/issues/3486
-			aria-disabled={ ! hasUndo }
-			onClick={ hasUndo ? undo : undefined }
-		/>
-	);
-}
-
-export default forwardRef( UndoButton );

package/src/components/page-pages/side-editor.js

@@ -1,14 +0,0 @@
-/**
- * Internal dependencies
- */
-import Editor from '../editor';
-import { useInitEditedEntity } from '../sync-state-with-url/use-init-edited-entity-from-url';
-
-export default function SideEditor( { postType, postId } ) {
-	useInitEditedEntity( {
-		postId,
-		postType,
-	} );
-
-	return <Editor />;
-}