@wordpress/block-library 10.0.1 → 10.1.1-next.v.202607070741.0

package/src/tabs/tab-toolbar-controls.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	BlockControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useTabActions from './use-tab-actions';
+
+/**
+ * "Add tab" and "Remove tab" buttons in the block toolbar for the tabs block.
+ * Inserts or removes a core/tab-panel. The tab-list items attribute is kept
+ * in sync automatically via useTabListItemsSync.
+ *
+ * @param {Object} props
+ * @param {string} props.tabsClientId The client ID of the parent tabs block.
+ * @return {React.JSX.Element} The toolbar control element.
+ */
+export default function TabToolbarControls( { tabsClientId } ) {
+	const { insertTab, removeTab } = useTabActions( tabsClientId );
+	const isRemoveDisabled = useSelect(
+		( select ) => {
+			if ( ! tabsClientId ) {
+				return true;
+			}
+			const tabPanels = select( blockEditorStore )
+				.getBlocks( tabsClientId )
+				.find( ( block ) => block.name === 'core/tab-panels' );
+			return ( tabPanels?.innerBlocks.length ?? 0 ) <= 1;
+		},
+		[ tabsClientId ]
+	);
+
+	return (
+		<BlockControls group="other">
+			<ToolbarGroup>
+				<ToolbarButton
+					className="components-toolbar__control"
+					onClick={ () => insertTab() }
+					text={ __( 'Add tab' ) }
+				/>
+				<ToolbarButton
+					className="components-toolbar__control"
+					onClick={ () => removeTab() }
+					text={ __( 'Remove tab' ) }
+					disabled={ isRemoveDisabled }
+				/>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}

package/src/tabs/use-tab-actions.js

@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createBlock } from '@wordpress/blocks';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useDispatch, useRegistry } from '@wordpress/data';
+
+/**
+ * Provides callbacks to insert and remove tabs for a tabs block.
+ *
+ * The hook intentionally avoids subscribing to the store: all data is derived
+ * lazily inside the callbacks via `registry.select`, so consumers don't
+ * re-render when the tab structure changes.
+ *
+ * @param {string|null} tabsClientId The client ID of the parent tabs block.
+ * @return {{ insertTab: Function, removeTab: Function }} Tab action callbacks.
+ */
+export default function useTabActions( tabsClientId ) {
+	const registry = useRegistry();
+	const {
+		insertBlock,
+		removeBlock,
+		updateBlockAttributes,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
+
+	// Derive the current tabs state at call time without subscribing.
+	const getTabsState = () => {
+		const { getBlocks, getBlockAttributes } =
+			registry.select( blockEditorStore );
+
+		const tabsAttributes = tabsClientId
+			? getBlockAttributes( tabsClientId )
+			: undefined;
+		const tabPanels = tabsClientId
+			? getBlocks( tabsClientId ).find(
+					( block ) => block.name === 'core/tab-panels'
+			  )
+			: undefined;
+
+		return {
+			tabPanelsClientId: tabPanels?.clientId ?? null,
+			tabPanelBlocks: tabPanels?.innerBlocks ?? [],
+			activeIndex:
+				tabsAttributes?.editorActiveTabIndex ??
+				tabsAttributes?.activeTabIndex ??
+				0,
+		};
+	};
+
+	// Insert a new tab and make it active. Defaults to appending at the end.
+	const insertTab = ( atIndex ) => {
+		const { tabPanelsClientId, tabPanelBlocks } = getTabsState();
+		if ( ! tabPanelsClientId ) {
+			return;
+		}
+
+		const newIndex = atIndex ?? tabPanelBlocks.length;
+		insertBlock(
+			createBlock( 'core/tab-panel', { label: __( 'Tab' ) } ),
+			newIndex,
+			tabPanelsClientId,
+			false
+		);
+
+		// Switch editor active tab to the new tab.
+		__unstableMarkNextChangeAsNotPersistent();
+		updateBlockAttributes( tabsClientId, {
+			editorActiveTabIndex: newIndex,
+		} );
+	};
+
+	// Remove a tab and move the active tab to an adjacent one. Defaults to the
+	// currently active tab.
+	const removeTab = ( atIndex ) => {
+		const { tabPanelBlocks, activeIndex } = getTabsState();
+		const tabCount = tabPanelBlocks.length;
+		if ( tabCount <= 1 ) {
+			return;
+		}
+
+		const removeIndex = atIndex ?? activeIndex;
+		const target = tabPanelBlocks[ removeIndex ];
+		if ( ! target ) {
+			return;
+		}
+
+		// Calculate new active index after removal.
+		const newActiveIndex =
+			removeIndex >= tabCount - 1 ? tabCount - 2 : removeIndex;
+
+		// Switch editor to the adjacent tab and remove the current one.
+		__unstableMarkNextChangeAsNotPersistent();
+		updateBlockAttributes( tabsClientId, {
+			editorActiveTabIndex: newActiveIndex,
+		} );
+		removeBlock( target.clientId, false );
+	};
+
+	return { insertTab, removeTab };
+}

package/src/tabs/use-tab-list-items-sync.js

@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Keep the tab-list block's `tabs` attribute in sync with the tab-panel blocks.
@@ -19,8 +19,7 @@ import { useEffect, useRef } from '@wordpress/element';
 export default function useTabListItemsSync( { tabPanels, tabListClientId } ) {
 	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
-
-	const prevTabsRef = useRef( null );
+	const { getBlockAttributes } = useSelect( blockEditorStore );
 
 	useEffect( () => {
 		if ( ! tabListClientId ) {
@@ -31,18 +30,18 @@ export default function useTabListItemsSync( { tabPanels, tabListClientId } ) {
 			label: tab.attributes.label || '',
 		} ) );
 
-		// Only update if tabs actually changed to avoid unnecessary re-renders.
-		const serialized = JSON.stringify( newTabs );
-		if ( serialized === prevTabsRef.current ) {
+		// Skip the update when the stored tabs already match the derived ones.
+		const currentTabs = getBlockAttributes( tabListClientId )?.tabs ?? [];
+		if ( JSON.stringify( newTabs ) === JSON.stringify( currentTabs ) ) {
 			return;
 		}
-		prevTabsRef.current = serialized;
 
 		__unstableMarkNextChangeAsNotPersistent();
 		updateBlockAttributes( tabListClientId, { tabs: newTabs } );
 	}, [
 		tabPanels,
 		tabListClientId,
+		getBlockAttributes,
 		updateBlockAttributes,
 		__unstableMarkNextChangeAsNotPersistent,
 	] );

package/src/tag-cloud/edit.js

@@ -139,7 +139,6 @@ function TagCloudEdit( { attributes, setAttributes, name } ) {
 					isShownByDefault
 				>
 					<SelectControl
-						__next40pxDefaultSize
 						label={ __( 'Taxonomy' ) }
 						options={ getTaxonomyOptions() }
 						value={ taxonomy }
@@ -175,7 +174,6 @@ function TagCloudEdit( { attributes, setAttributes, name } ) {
 								units={ units }
 								min={ MIN_FONT_SIZE }
 								max={ MAX_FONT_SIZE }
-								size="__unstable-large"
 							/>
 						</FlexItem>
 						<FlexItem isBlock>
@@ -191,7 +189,6 @@ function TagCloudEdit( { attributes, setAttributes, name } ) {
 								units={ units }
 								min={ MIN_FONT_SIZE }
 								max={ MAX_FONT_SIZE }
-								size="__unstable-large"
 							/>
 						</FlexItem>
 					</Flex>
@@ -203,7 +200,6 @@ function TagCloudEdit( { attributes, setAttributes, name } ) {
 					isShownByDefault
 				>
 					<RangeControl
-						__next40pxDefaultSize
 						label={ __( 'Number of tags' ) }
 						value={ numberOfTags }
 						onChange={ ( value ) =>

package/src/tag-cloud/index.php

@@ -16,7 +16,7 @@
  */
 function render_block_core_tag_cloud( $attributes ) {
 	$smallest_font_size = $attributes['smallestFontSize'];
-	$unit               = ( preg_match( '/^[0-9.]+(?P<unit>[a-z%]+)$/i', $smallest_font_size, $m ) ? $m['unit'] : 'pt' );
+	$unit               = preg_match( '/^[0-9.]+(?P<unit>[a-z%]+)$/i', $smallest_font_size, $m ) ? $m['unit'] : 'pt';
 
 	$args      = array(
 		'echo'       => false,

package/src/template-part/edit/advanced-controls.js

@@ -65,7 +65,6 @@ export function TemplatePartAdvancedControls( {
 						onFocus={ ( event ) => event.target.select() }
 					/>
 					<SelectControl
-						__next40pxDefaultSize
 						label={ __( 'Area' ) }
 						labelPosition="top"
 						options={ areaOptions }

package/src/template-part/edit/import-controls.js

@@ -147,7 +147,6 @@ export function TemplatePartImportControls( { area, setAttributes } ) {
 						options={ options }
 						onChange={ ( value ) => setSelectedSidebar( value ) }
 						disabled={ ! options.length }
-						__next40pxDefaultSize
 					/>
 				</FlexBlock>
 				<FlexItem

package/src/terms-query/edit/inspector-controls/include-control.js

@@ -136,7 +136,6 @@ export default function IncludeControl( {
 
 	return (
 		<FormTokenField
-			__next40pxDefaultSize
 			value={ value }
 			onInputChange={ debouncedSearch }
 			suggestions={ suggestions }

package/src/terms-query/edit/inspector-controls/inherit-control.js

@@ -10,7 +10,6 @@ import { __ } from '@wordpress/i18n';
 export default function InheritControl( { value, onChange, label } ) {
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			label={ label }
 			isBlock
 			onChange={ ( newValue ) => {

package/src/terms-query/edit/inspector-controls/max-terms-control.js

@@ -7,7 +7,6 @@ import { RangeControl } from '@wordpress/components';
 export default function MaxTermsControl( { value, onChange, ...props } ) {
 	return (
 		<RangeControl
-			__next40pxDefaultSize
 			value={ value }
 			min={ 0 }
 			max={ 100 }

package/src/terms-query/edit/inspector-controls/order-control.js

@@ -7,7 +7,6 @@ import { SelectControl } from '@wordpress/components';
 export default function OrderControl( { orderBy, order, onChange, ...props } ) {
 	return (
 		<SelectControl
-			__next40pxDefaultSize
 			options={ [
 				{
 					label: __( 'Name: A → Z' ),

package/src/terms-query/edit/inspector-controls/taxonomy-control.js

@@ -17,7 +17,6 @@ export default function TaxonomyControl( { value, onChange, ...props } ) {
 
 	return (
 		<SelectControl
-			__next40pxDefaultSize
 			options={ taxonomyOptions }
 			value={ value }
 			onChange={ onChange }

package/src/text-columns/edit.js

@@ -34,7 +34,6 @@ export default function TextColumnsEdit( { attributes, setAttributes } ) {
 			<InspectorControls>
 				<PanelBody>
 					<RangeControl
-						__next40pxDefaultSize
 						label={ __( 'Columns' ) }
 						value={ columns }
 						onChange={ ( value ) =>

package/src/utils/gif-conversion-attributes.js

@@ -0,0 +1,30 @@
+/**
+ * Returns the subset of block attributes that should be carried over when
+ * converting between the animated-GIF Image block and its converted Video
+ * block (in either direction).
+ *
+ * The conversion swaps one block for another via `createBlock`, which would
+ * otherwise drop everything the author set on the original block. This carries
+ * the attributes both blocks support, so the conversion (and its reverse) keeps
+ * them: block alignment, the HTML anchor, custom class names, and margin
+ * spacing.
+ *
+ * Image-only attributes such as links (`href`/`linkDestination`), sizing
+ * (`sizeSlug`/`scale`), and `border`/`shadow` styles are intentionally not
+ * carried: the Video block has no equivalent, so copying them would leave
+ * attributes the target block cannot represent.
+ *
+ * @param {Object} attributes Source block attributes.
+ * @return {Object} Attributes to spread into the converted block.
+ */
+export function getCarriedGifConversionAttributes( attributes ) {
+	const { align, anchor, className, style } = attributes;
+	const margin = style?.spacing?.margin;
+
+	return {
+		...( align && { align } ),
+		...( anchor && { anchor } ),
+		...( className && { className } ),
+		...( margin && { style: { spacing: { margin } } } ),
+	};
+}

package/src/utils/test/gif-conversion-attributes.js

@@ -0,0 +1,60 @@
+/**
+ * Internal dependencies
+ */
+import { getCarriedGifConversionAttributes } from '../gif-conversion-attributes';
+
+describe( 'getCarriedGifConversionAttributes', () => {
+	it( 'carries align, anchor, className and margin spacing', () => {
+		const result = getCarriedGifConversionAttributes( {
+			align: 'wide',
+			anchor: 'my-gif',
+			className: 'is-style-rounded',
+			style: { spacing: { margin: { top: '10px', bottom: '10px' } } },
+		} );
+
+		expect( result ).toEqual( {
+			align: 'wide',
+			anchor: 'my-gif',
+			className: 'is-style-rounded',
+			style: { spacing: { margin: { top: '10px', bottom: '10px' } } },
+		} );
+	} );
+
+	it( 'omits attributes that are not set', () => {
+		expect( getCarriedGifConversionAttributes( {} ) ).toEqual( {} );
+		expect(
+			getCarriedGifConversionAttributes( { align: 'full' } )
+		).toEqual( { align: 'full' } );
+	} );
+
+	it( 'carries only margin from style, dropping unsupported styles', () => {
+		const result = getCarriedGifConversionAttributes( {
+			style: {
+				spacing: {
+					margin: { top: '5px' },
+					padding: { top: '5px' },
+				},
+				border: { radius: '8px' },
+				shadow: 'var:preset|shadow|natural',
+			},
+		} );
+
+		// Only spacing.margin survives; padding/border/shadow are not carried
+		// because the converted block may not support them.
+		expect( result ).toEqual( {
+			style: { spacing: { margin: { top: '5px' } } },
+		} );
+	} );
+
+	it( 'does not carry image-only attributes such as links or sizing', () => {
+		const result = getCarriedGifConversionAttributes( {
+			align: 'center',
+			href: 'https://example.com',
+			linkDestination: 'custom',
+			sizeSlug: 'large',
+			scale: 'cover',
+		} );
+
+		expect( result ).toEqual( { align: 'center' } );
+	} );
+} );

package/src/utils/test/waveform-player.js

@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 /**
  * External dependencies
  */

package/src/utils/test/waveform-utils.js

@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 /**
  * External dependencies
  */

package/src/verse/README.md

@@ -25,6 +25,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
   - `backgroundImage`: `true`
   - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`

package/src/verse/block.json

@@ -21,8 +21,10 @@
 		"background": {
 			"backgroundImage": true,
 			"backgroundSize": true,
+			"gradient": true,
 			"__experimentalDefaultControls": {
-				"backgroundImage": true
+				"backgroundImage": true,
+				"gradient": true
 			}
 		},
 		"color": {

package/src/video/README.md

@@ -25,6 +25,8 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 | `preload` | `string` | `"metadata"` | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `attribute`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `video`. [HTML attr](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#attribute-source): `preload` |
 | `blob` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `local` |
 | `src` | `string` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `attribute`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `video`. [HTML attr](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#attribute-source): `src`. [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `width` | `number` | — | — |
+| `height` | `number` | — | — |
 | `playsInline` | `boolean` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `attribute`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `video`. [HTML attr](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#attribute-source): `playsinline` |
 | `tracks` | `array` | `[]` | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
 

package/src/video/block.json

@@ -67,6 +67,12 @@
 			"attribute": "src",
 			"role": "content"
 		},
+		"width": {
+			"type": "number"
+		},
+		"height": {
+			"type": "number"
+		},
 		"playsInline": {
 			"type": "boolean",
 			"source": "attribute",

package/src/video/edit-common-settings.js

@@ -150,7 +150,6 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 				} }
 			>
 				<SelectControl
-					__next40pxDefaultSize
 					label={ __( 'Preload' ) }
 					value={ preload }
 					onChange={ onChangePreload }

package/src/video/edit.js

@@ -41,6 +41,8 @@ import TracksEditor from './tracks-editor';
 import Tracks from './tracks';
 import { Caption } from '../utils/caption';
 import PosterImage from '../utils/poster-image';
+import { isGifVariation } from './variations';
+import GifRestoreControl from './gif-restore-control';
 
 const ALLOWED_MEDIA_TYPES = [ 'video' ];
 
@@ -51,9 +53,20 @@ function VideoEdit( {
 	setAttributes,
 	insertBlocksAfter,
 	onReplace,
+	clientId,
 } ) {
 	const videoPlayer = useRef();
-	const { id, controls, poster, src, tracks } = attributes;
+	const { id, controls, poster, src, tracks, width, height } = attributes;
+	const isGif = isGifVariation( attributes );
+	// Give the <video> an explicit (non-`auto`) aspect ratio derived from the
+	// stored dimensions. The width/height attributes alone only yield
+	// `aspect-ratio: auto W/H`, whose `auto` keyword defers to the element's
+	// natural ratio while the poster/metadata load - during which Chrome briefly
+	// computes a runaway height (tens of thousands of pixels) before settling.
+	// That spike is what reads as a duplicated image during the GIF-to-video
+	// swap. A non-`auto` ratio governs the box height throughout the load.
+	const aspectRatio =
+		width && height ? `${ width } / ${ height }` : undefined;
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const blockEditingMode = useBlockEditingMode();
@@ -73,6 +86,17 @@ function VideoEdit( {
 		}
 	}, [ poster ] );
 
+	// The GIF variation plays like an animated GIF in the editor (the playback
+	// attributes are applied to the preview <video> below). Regular videos do
+	// not autoplay in the editor, so only nudge GIFs into playing after a
+	// source change in case the muted autoplay did not start on its own.
+	useEffect( () => {
+		if ( isGif ) {
+			// Browsers allow muted videos to be played programmatically.
+			videoPlayer.current?.play().catch( () => {} );
+		}
+	}, [ isGif, src, poster ] );
+
 	// TODO: Whether the video was obtained from the media library or was provided by URL, obtain the `videoWidth` and `videoHeight` of the video once its metadata has loaded and persist in the block attributes.
 	function onSelectVideo( media ) {
 		if ( ! media || ! media.url ) {
@@ -201,6 +225,12 @@ function VideoEdit( {
 							variant="toolbar"
 						/>
 					</BlockControls>
+					{ isGif && (
+						<GifRestoreControl
+							attributes={ attributes }
+							clientId={ clientId }
+						/>
+					) }
 				</>
 			) }
 			<InspectorControls>
@@ -240,6 +270,13 @@ function VideoEdit( {
 					poster={ poster }
 					src={ src || temporaryURL }
 					ref={ videoPlayer }
+					autoPlay={ isGif }
+					loop={ isGif }
+					muted={ isGif }
+					playsInline={ isGif }
+					width={ width }
+					height={ height }
+					style={ aspectRatio ? { aspectRatio } : undefined }
 				>
 					<Tracks tracks={ tracks } />
 				</video>

package/src/video/gif-restore-control.js

@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import {
+	BlockControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { createBlock } from '@wordpress/blocks';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { image as imageIcon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { getCarriedGifConversionAttributes } from '../utils/gif-conversion-attributes';
+
+/**
+ * Toolbar control that turns a converted GIF video block back into the original
+ * animated GIF Image block.
+ *
+ * An animated GIF uploaded through the editor is converted to a muted, looping
+ * video and presented as the Video block's "GIF" variation, while the original
+ * GIF stays the underlying image attachment. This control switches the block
+ * back to a `core/image` pointing at that GIF and opts the image out of being
+ * re-converted.
+ *
+ * It only renders when the block's media is an image attachment (i.e. an
+ * editor-converted GIF), so it never appears on regular videos that happen to
+ * be muted and looping.
+ *
+ * @param {Object} props            Component props.
+ * @param {Object} props.attributes Video block attributes.
+ * @param {string} props.clientId   Block client ID.
+ *
+ * @return {Component|null} The control, or null when restoring does not apply.
+ */
+export default function GifRestoreControl( { attributes, clientId } ) {
+	const { id, caption } = attributes;
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+
+	// The original GIF is the underlying image attachment. Only offer the
+	// restore when the media resolves to an image (an editor-converted GIF),
+	// not when a regular video has simply been set to loop/autoplay/mute.
+	const gif = useSelect(
+		( select ) => {
+			if ( ! id ) {
+				return null;
+			}
+			const record = select( coreStore ).getEntityRecord(
+				'postType',
+				'attachment',
+				id,
+				{ context: 'view' }
+			);
+			if ( ! record?.mime_type?.startsWith( 'image/' ) ) {
+				return null;
+			}
+			return record;
+		},
+		[ id ]
+	);
+
+	if ( ! gif?.source_url ) {
+		return null;
+	}
+
+	function restoreToImage() {
+		replaceBlocks(
+			clientId,
+			createBlock( 'core/image', {
+				...getCarriedGifConversionAttributes( attributes ),
+				id,
+				url: gif.source_url,
+				alt: gif.alt_text || '',
+				caption,
+			} )
+		);
+	}
+
+	return (
+		<BlockControls group="other">
+			<ToolbarGroup>
+				<ToolbarButton icon={ imageIcon } onClick={ restoreToImage }>
+					{ __( 'Display as GIF' ) }
+				</ToolbarButton>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}

package/src/video/index.js

@@ -14,6 +14,7 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import variations from './variations';
 import { unlock } from '../lock-unlock';
 
 const { fieldsKey, formKey } = unlock( blocksPrivateApis );
@@ -32,6 +33,7 @@ export const settings = {
 		},
 	},
 	transforms,
+	variations,
 	deprecated,
 	edit,
 	save,