Fix/gif block

projects/plugins/jetpack/changelog/fix-git-block-reset

@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+GifBlock: ensure url is not reset when publishing post

projects/plugins/jetpack/extensions/blocks/gif/edit.js

@@ -25,10 +25,10 @@ function GifEdit( { attributes, setAttributes, isSelected } ) {
 	};
 
 	useEffect( () => {
-		if ( giphyData && giphyData[ 0 ] ) {
+		if ( ! giphyUrl && giphyData && giphyData[ 0 ] ) {
 			setAttributes( getSelectedGiphyAttributes( giphyData[ 0 ] ) );
 		}
-	}, [ giphyData, setAttributes ] );
+	}, [ giphyUrl, giphyData, setAttributes ] );
 
 	const onSubmit = async event => {
 		event.preventDefault();

projects/plugins/jetpack/extensions/blocks/gif/test/edit.js

@@ -87,7 +87,7 @@ describe( 'GifEdit', () => {
 	} );
 
 	test( 'calls API and returns giphy images', async () => {
-		useFetchGiphyData.mockImplementationOnce( () => {
+		useFetchGiphyData.mockImplementation( () => {
 			return {
 				fetchGiphyData,
 				giphyData: GIPHY_DATA,
@@ -99,11 +99,10 @@ describe( 'GifEdit', () => {
 			isSelected: true,
 			attributes: {
 				...defaultAttributes,
-				giphyUrl: 'https://itsalong.way/to/the/top/if/you/want',
 				searchText: 'a sausage roll',
 			},
 		};
-		const { container } = render( <GifEdit { ...newProps } /> );
+		const { container, rerender } = render( <GifEdit { ...newProps } /> );
 
 		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 		expect( container.querySelector( 'form input' ).value ).toEqual(
@@ -113,21 +112,75 @@ describe( 'GifEdit', () => {
 		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 		fireEvent.submit( container.querySelector( 'form' ) );
 
-		expect( fetchGiphyData ).toHaveBeenCalledWith( await getUrl( newProps.attributes.searchText ) );
+		const url = await getUrl( newProps.attributes.searchText );
+		expect( fetchGiphyData ).toHaveBeenCalledWith( url );
 		expect( setAttributes.mock.calls[ 0 ][ 0 ] ).toStrictEqual( {
 			giphyUrl: getEmbedUrl( GIPHY_DATA[ 0 ] ),
 			paddingTop: getPaddingTop( GIPHY_DATA[ 0 ] ),
 		} );
 
+		const updatedAttributes = setAttributes.mock.calls[ 0 ][ 0 ];
+
+		rerender(
+			<GifEdit
+				{ ...newProps }
+				attributes={ {
+					...newProps.attributes,
+					...updatedAttributes,
+				} }
+			/>
+		);
+
 		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 		expect( container.querySelector( 'figure' ) ).toBeInTheDocument();
 		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 		expect( container.querySelector( 'figcaption' ) ).toBeInTheDocument();
 		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 		expect( container.querySelector( '.wp-block-jetpack-gif-wrapper iframe' ) ).toBeInTheDocument();
-		expect(
-			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-			container.querySelectorAll( '.wp-block-jetpack-gif_thumbnail-container' )
-		).toHaveLength( 2 );
+	} );
+
+	test( 'does not reset giphyUrl if giphyUrl is already set', () => {
+		useFetchGiphyData.mockImplementationOnce( () => {
+			return {
+				fetchGiphyData,
+				giphyData: GIPHY_DATA,
+				isFetching: false,
+			};
+		} );
+		const newProps = {
+			...defaultProps,
+			attributes: {
+				...defaultAttributes,
+				giphyUrl: 'https://existing.url/giphy',
+			},
+		};
+		render( <GifEdit { ...newProps } /> );
+
+		// setAttributes should not be called since giphyUrl is already set
+		expect( setAttributes ).not.toHaveBeenCalled();
+	} );
+
+	test( 'resets giphyUrl when giphyData is available and giphyUrl is not set', () => {
+		useFetchGiphyData.mockImplementationOnce( () => {
+			return {
+				fetchGiphyData,
+				giphyData: GIPHY_DATA,
+				isFetching: false,
+			};
+		} );
+		const newProps = {
+			...defaultProps,
+			attributes: {
+				...defaultAttributes,
+				giphyUrl: '', // No giphyUrl set
+			},
+		};
+		render( <GifEdit { ...newProps } /> );
+
+		// setAttributes should be called with the first giphy result
+		expect( setAttributes ).toHaveBeenCalledWith( {
+			giphyUrl: getEmbedUrl( GIPHY_DATA[ 0 ] ),
+			paddingTop: getPaddingTop( GIPHY_DATA[ 0 ] ),
+		} );
 	} );
 } );