Add functionality to reorder images

package.json

@@ -19,6 +19,7 @@
 		"@wordpress/base-styles": "4.34.0",
 		"@wordpress/core-data": "6.20.1",
 		"@wordpress/env": "^8.9.0",
+		"@wordpress/icons": "9.34.0",
 		"@wordpress/scripts": "^26.14.0",
 		"prettier": "npm:[email protected]",
 		"typescript": "5.2.2"

src/editor.scss

@@ -27,6 +27,7 @@
 	&:focus,
 	&:focus-within {
 
+		.enable-responsive-image__movers,
 		.enable-responsive-image__actions {
 			opacity: 1;
 		}
@@ -60,6 +61,19 @@
 	}
 }
 
+.enable-responsive-image__movers {
+	top: 0;
+	opacity: 0;
+	padding: $grid-unit-10;
+	position: absolute;
+	transition: opacity 50ms ease-out;
+}
+
+.enable-responsive-image__mover {
+	backdrop-filter: blur(16px) saturate(180%);
+	background: rgba(255, 255, 255, 0.75);
+}
+
 .enable-responsive-image__actions {
 	bottom: 0;
 	opacity: 0;

src/source-editor.tsx

@@ -16,6 +16,7 @@ import {
 import { MediaUpload, store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { chevronUp, chevronDown } from '@wordpress/icons';
 import type { Media, Source } from './types';
 
 const DEFAULT_MEDIA_VALUE = isNaN( parseInt( window?.enableResponsiveImage?.defaultMediaValue ) )
@@ -35,8 +36,11 @@ const MEDIA_TYPES = [
 
 type Props = {
 	source?: Source;
+	disableMoveUp?: boolean;
+	disableMoveDown?: boolean;
 	onChange: ( {}: Source ) => void;
 	onRemove: () => void;
+	onChangeOrder?: ( direction: number ) => void;
 	isSelected: boolean;
 };
 
@@ -48,6 +52,9 @@ export default function SourceEditor( {
 		mediaType: undefined,
 		mediaValue: undefined,
 	},
+	disableMoveUp = true,
+	disableMoveDown = true,
+	onChangeOrder,
 	onChange,
 	onRemove,
 	isSelected,
@@ -153,6 +160,24 @@ export default function SourceEditor( {
 								__( 'Set image source', 'enable-responsive-image' )
 							) }
 						</Button>
+						<HStack className="enable-responsive-image__movers" justify="flex-end">
+							<Button
+								className="enable-responsive-image__mover"
+								aria-label={ __( 'Move up', 'enable-responsive-image' ) }
+								icon={ chevronUp }
+								size="small"
+								disabled={ disableMoveUp }
+								onClick={ () => onChangeOrder?.( -1 ) }
+							/>
+							<Button
+								className="enable-responsive-image__mover"
+								aria-label={ __( 'Move up', 'enable-responsive-image' ) }
+								icon={ chevronDown }
+								size="small"
+								disabled={ disableMoveDown }
+								onClick={ () => onChangeOrder?.( 1 ) }
+							/>
+						</HStack>
 						{ !! id && (
 							<HStack className="enable-responsive-image__actions">
 								<Button

src/source-list.tsx

@@ -40,6 +40,14 @@ export default function ImageList( props: BlockEditProps< BlockAttributes > ) {
 		setAttributes( { sources: newSources } );
 	}
 
+	function onChangeOrder( direction: number, index: number ) {
+		const newSources = [ ...sources ];
+		const newIndex = index + direction;
+		const movedSource = newSources.splice( index, 1 )[ 0 ];
+		newSources.splice( newIndex, 0, movedSource );
+		setAttributes( { sources: newSources } );
+	}
+
 	function onRemoveSource( index: number ) {
 		const newSources = [ ...sources ];
 		newSources.splice( index, 1 );
@@ -72,7 +80,10 @@ export default function ImageList( props: BlockEditProps< BlockAttributes > ) {
 								<Fragment key={ index }>
 									<SourceEditor
 										{ ...props }
+										disableMoveUp={ index === 0 }
+										disableMoveDown={ index === sources.length - 1 }
 										source={ source }
+										onChangeOrder={ ( direction ) => onChangeOrder( direction, index ) }
 										onChange={ ( newSource ) => onChange( newSource, index ) }
 										onRemove={ () => onRemoveSource( index ) }
 									/>