В Gutenberg не получается реализовать сортировку элементов в интерфейсе редактирования блока?

В Gutenberg, официальном редакторе блоков WordPress, сортировка элементов в интерфейсе редактирования блока может быть реализована с помощью функциональности, предоставляемой самим Gutenberg API и JavaScript.

Для добавления сортировки элементов в интерфейсе редактирования блока вам, вероятно, потребуется использовать React, так как Gutenberg основан на React. Приведу общий пример реализации сортировки элементов внутри блока:

1. Добавьте компонент, содержащий элементы, которые вы хотите упорядочить, внутри вашего блока.

const MyBlock = () => {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);

  const onSortEnd = ({ oldIndex, newIndex }) => {
    const newItems = arrayMove(items, oldIndex, newIndex);
    setItems(newItems);
  };

  return (
    <div>
      <SortableList items={items} onSortEnd={onSortEnd} axis="y" />
    </div>
  );
};

2. Создайте компонент SortableList, который будет отображать и управлять сортировкой элементов:

const SortableList = SortableContainer(({ items }) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

3. Создайте компонент SortableItem, который будет представлять отдельный перетаскиваемый элемент:

const SortableItem = SortableElement(({ value }) => <li>{value}</li>);

4. Добавьте функцию arrayMove для перемещения элементов в массиве в соответствии с новым порядком:

const arrayMove = (array, from, to) => {
  const newArray = array.slice();
  newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
  return newArray;
};

5. Наконец, используйте библиотеку react-sortable-hoc для поддержки перетаскивания и сортировки элементов в компонентах SortableList и SortableItem.

npm install react-sortable-hoc

Таким образом, вы можете реализовать сортировку элементов в интерфейсе редактирования вашего блока в Gutenberg с помощью вышеприведенного подхода. Не забудьте импортировать необходимые библиотеки и компоненты, а также настроить окружение так, чтобы использовать React в Gutenberg.