Support moving handpicked post order

web/app/themes/gds/resources/scripts/editor/filters/with-handpicked-posts.jsx

@@ -4,10 +4,12 @@ import {addFilter} from '@wordpress/hooks';
 import {InspectorControls} from '@wordpress/block-editor';
 import {useState, useCallback, useMemo} from '@wordpress/element';
 import {useDebounce} from '@wordpress/compose';
+import {chevronRight, chevronLeft} from '@wordpress/icons';
 import {
   FormTokenField,
   __experimentalToolsPanel as ToolsPanel,
   __experimentalToolsPanelItem as ToolsPanelItem,
+  Button,
 } from '@wordpress/components';
 import usePosts from '../hooks/use-posts';
 
@@ -16,6 +18,28 @@ import usePosts from '../hooks/use-posts';
  * @see https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/extending-the-query-loop-block/
  */
 
+function InlineButton(props) {
+  return (
+    <Button
+      style={ {
+        minWidth: 'auto',
+        width: 'auto'
+      } }
+      iconSize={12}
+      size='small'
+      {...props}
+    />
+  );
+}
+
+const moveItem = (source, from, to) => {
+  const result = [...source];
+  const item = source[from];
+  result.splice(from, 1);
+  result.splice(to, 0, item)
+  return result;
+}
+
 function HandPickedPostsControl({setAttributes, attributes}) {
   const query = attributes.query;
   const selectedPostIds = query?.include;
@@ -56,7 +80,7 @@ function HandPickedPostsControl({setAttributes, attributes}) {
       updateQuery({
         include: Array.from(newPostsSet),
         orderby: 'include',
-        order: 'desc'
+        order: 'desc',
       });
     },
     [postsMap],
@@ -82,22 +106,68 @@ function HandPickedPostsControl({setAttributes, attributes}) {
     return post ? decodeEntities(formatPostName(post)) : '';
   };
 
+  const displayMovableToken = (token) => {
+    const name = transformTokenIntoPostName(token);
+    const idx = selectedPostIds.findIndex((postId) => postId === token);
+    if (idx === -1) {
+      return name;
+    }
+
+    const onMoveLeft = () => {
+      const newPostIds = moveItem(selectedPostIds, idx, idx - 1);
+      onTokenChange(newPostIds);
+    }
+
+    const onMoveRight = () => {
+      const newPostIds = moveItem(selectedPostIds, idx, idx + 1);
+      onTokenChange(newPostIds);
+    }
+
+    const isFirstToken = idx === 0;
+    const isLastToken = idx === selectedPostIds.length -1;
+
+    return (
+      <span style={ {display: 'flex'}}>
+        { ! isFirstToken && (
+          <InlineButton
+            icon={ chevronLeft }
+            onClick={ onMoveLeft }
+          />
+        ) }
+        <span
+          style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
+        >{name}</span>
+        { ! isLastToken && (
+          <InlineButton
+            icon={ chevronRight }
+            onClick={ onMoveRight }
+          />
+        ) }
+      </span>
+    );
+  };
+
   return (
     <ToolsPanelItem
       label={__('Hand-picked posts', 'gds')}
       hasValue={() => !!selectedPostIds?.length}
-      onDeselect={() => updateQuery({include: [], orderby: 'date', order: 'desc'})}
-      resetAllFilter={() => updateQuery({include: [], orderby: 'date', order: 'desc'})}
+      onDeselect={() =>
+        updateQuery({include: [], orderby: 'date', order: 'desc'})
+      }
+      resetAllFilter={() =>
+        updateQuery({include: [], orderby: 'date', order: 'desc'})
+      }
       isShownByDefault={true}
     >
       <FormTokenField
-        displayTransform={transformTokenIntoPostName}
+        displayTransform={displayMovableToken}
         label={__('Hand-picked posts', 'gds')}
         onChange={onTokenChange}
         onInputChange={handleSearch}
         suggestions={suggestions}
         __experimentalValidateInput={(value) => postsMap.has(value)}
         value={!postsMap.size ? [__('Loading…', 'gds')] : selectedPostIds || []}
+
         __experimentalExpandOnFocus={true}
         __experimentalShowHowTo={false}
       />