Commit 77e3881

- Image, Cover: Restore the block values changed by a media edit when using snackbar Undo, including image metadata, size, links, and automatic cover overlays ([#81805](https://github.com/WordPress/gutenberg/pull/81805)).

"vitest": "^5.0.0",

"vitest-browser-react": "^2.3.0"

const undoAttributes = {};

let isUndone = false;

onUndo: () => {

isUndone = true;

setIsSwappingMedia( false );

setAttributes( undoAttributes );

},

for ( const key of Object.keys( nextAttributes ) ) {

undoAttributes[ key ] = propsRef.current.attributes[ key ];

}

// Snackbar Undo can run while the image color is loading.

if ( isUndone ) {

return;

}

undoAttributes.overlayColor = currentAttrs.overlayColor;

undoAttributes.customOverlayColor =

currentAttrs.customOverlayColor;

undoAttributes.isDark = currentAttrs.isDark;

undoAttributes.isUserOverlayColor =

currentAttrs.isUserOverlayColor;

import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';

import {

cleanup as cleanupBrowser,

render as renderBrowser,

} from 'vitest-browser-react';

import {

createBlock,

getBlockTypes,

unregisterBlockType,

} from '@wordpress/blocks';

import { createElement, useState } from '@wordpress/element';

import { dispatch, select } from '@wordpress/data';

import {

store as richTextStore,

unregisterFormatType,

} from '@wordpress/rich-text';

import {

BlockInspector,

privateApis as blockEditorPrivateApis,

store as blockEditorStore,

} from '@wordpress/block-editor';

import { unlock } from '../../lock-unlock';

import { getMediaColor } from '../edit/color-utils';

vi.mock( import( '../edit/color-utils' ), { spy: true } );

const {

ExperimentalBlockCanvas: BlockCanvas,

ExperimentalBlockEditorProvider: BlockEditorProvider,

openMediaEditorModalKey,

} = unlock( blockEditorPrivateApis );

describe( 'media editor Undo', () => {

const originalUrl =

'data:image/svg+xml,' +

encodeURIComponent(

'<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect width="10" height="10" fill="black"/></svg>'

);

const updatedImage = { id: 11, url: `${ originalUrl }#edited` };

beforeEach( () => {

vi.mocked( getMediaColor ).mockResolvedValue( '#ffffff' );

} );

afterEach( async () => {

await cleanupBrowser();

getBlockTypes().forEach( ( { name } ) =>

unregisterBlockType( name )

);

select( richTextStore )

.getFormatTypes()

.forEach( ( { name } ) => unregisterFormatType( name ) );

} );

async function openMediaEditor( initialAttributes = {} ) {

const openModal = vi.fn();

const block = createBlock( 'core/cover', {

id: 10,

url: originalUrl,

backgroundType: 'image',

sizeSlug: 'medium',

overlayColor: 'black',

isDark: true,

isUserOverlayColor: false,

...initialAttributes,

} );

function TestEditor() {

const [ blocks, setBlocks ] = useState( [ block ] );

return createElement(

BlockEditorProvider,

{

value: blocks,

onInput: setBlocks,

onChange: setBlocks,

useSubRegistry: false,

settings: {

...defaultSettings,

[ openMediaEditorModalKey ]: openModal,

},

},

createElement( BlockInspector ),

createElement( BlockCanvas, {

height: '100%',

shouldIframe: false,

} )

);

}

await renderBrowser( createElement( TestEditor ) );

await userEvent.click( screen.getByLabelText( 'Block: Cover' ) );

await userEvent.click(

screen.getByRole( 'button', { name: 'Edit image' } )

);

const { clientId } = select( blockEditorStore ).getBlocks()[ 0 ];

return {

...openModal.mock.calls[ 0 ][ 0 ],

getAttributes: () =>

select( blockEditorStore ).getBlockAttributes( clientId ),

editAttributes: ( attributes ) =>

dispatch( blockEditorStore ).updateBlockAttributes(

clientId,

attributes

),

};

}

test( 'restores the image size and automatic overlay without reverting unrelated edits', async () => {

const { onUpdate, onUndo, getAttributes, editAttributes } =

await openMediaEditor();

const previous = getAttributes();

await act( () => onUpdate( updatedImage ) );

expect( getAttributes() ).toMatchObject( {

id: 11,

sizeSlug: 'full',

overlayColor: 'white',

isDark: false,

} );

await act( () => editAttributes( { dimRatio: 75 } ) );

act( () => onUndo() );

expect( getAttributes() ).toEqual( { ...previous, dimRatio: 75 } );

} );

test( 'preserves a custom overlay when undoing the media update', async () => {

const { onUpdate, onUndo, getAttributes, editAttributes } =

await openMediaEditor( {

overlayColor: undefined,

customOverlayColor: '#123456',

isUserOverlayColor: true,

} );

await act( () => onUpdate( updatedImage ) );

await act( () =>

editAttributes( { customOverlayColor: '#654321' } )

);

act( () => onUndo() );

expect( getAttributes() ).toMatchObject( {

id: 10,

url: originalUrl,

sizeSlug: 'medium',

customOverlayColor: '#654321',

isUserOverlayColor: true,

} );

} );

test( 'does not reapply a media update when Undo runs before its color loads', async () => {

const { onUpdate, onUndo, getAttributes } = await openMediaEditor();

const previous = getAttributes();

let resolveColor;

vi.mocked( getMediaColor ).mockReturnValueOnce(

new Promise( ( resolve ) => {

resolveColor = resolve;

} )

);

let updatePromise;

act( () => {

updatePromise = onUpdate( updatedImage );

} );

act( () => onUndo() );

await act( async () => {

resolveColor( '#ffffff' );

await updatePromise;

} );

expect( getAttributes() ).toEqual( previous );

expect(

screen.getByRole( 'button', { name: 'Edit image' } )

).toBeEnabled();

} );

} );