Создайте уникальный идентификатор при создании или копировании блока.

На чтение 3 мин Опубликовано 07.01.2025

Содержание

Вопрос или проблема
Ответ или решение
Советы по улучшению
Объяснение
Заключение

Вопрос или проблема

Я создал пользовательский блок WordPress и хочу убедиться, что каждый раз, когда блок создается заново или копируется, ему назначается уникальный ID. Я пробовал много подходов и наконец придумал следующее решение:

= attributes.js =

uniqueId: {
    type: String,
    default: '',
},

= Фрагмент из edit.js =

const generateUniqueClass = () => {
    return `custom-${Math.random().toString(36).substr(2, 9)}`;
};

useEffect(() => {
    const { uniqueClass } = attributes;
    if (!uniqueClass) {
        const newUniqueClass = generateUniqueClass();
        setAttributes({ uniqueClass: newUniqueClass });
    } else {
        const blocks = select('core/block-editor').getBlocks();
        const isDuplicate = blocks.some(
            (block) =>
                block.attributes.uniqueClass === uniqueClass &&
                block.clientId !== clientId,
        );
        if (isDuplicate) {
            const newUniqueClass = generateUniqueClass();
            setAttributes({ uniqueClass: newUniqueClass });
        }
    }
}, [attributes.uniqueClass, clientId]);

К сожалению, это решение не работает надежно, когда я копирую блок. Иногда оно срабатывает, иногда нет — это пока что похоже на игру в лотерею.

Во время исследования я также наткнулся на этот хук:

// Применить фильтр
addFilter(
    'blocks.getSaveContent.extraProps',
    'my-plugin/add-custom-class-on-copy',
    addCustomClassOnCopy
);

Но даже здесь я не могу добиться его работы.

Кто-нибудь знает лучшее решение для моих требований?

В основном:
При создании блока WordPress должен быть назначен уникальный ID и сохранен в атрибуте под названием uniqueId. Этот ID не должен изменяться. Однако, если блок копируется (и уже имеет уникальный ID), должен генерироваться новый уникальный ID. Необходимо избегать дубликатов уникальных ID.

Ответ или решение

Создание уникального идентификатора для WordPress блока при его создании или копировании – это важная задача для обеспечения индивидуальности и предотвращения конфликтов между блоками. Ваше текущее решение имеет недостаток: оно не всегда надежно работает при копировании блока. Рассмотрим, как можно улучшить эту логику и какие подходы могут оказаться более эффективными.

Советы по улучшению

Использование useEffect для генерации уникального идентификатора:
Ваш существующий код для генерации уникального класса с помощью Math.random() иногда может дать коллизии, особенно при копировании блоков. Вместо этого можно использовать пакет uuid, который более надежен для генерации уникальных идентификаторов.

import { v4 as uuidv4 } from 'uuid';

const generateUniqueClass = () => {
   return `custom-${uuidv4()}`;
};

useEffect(() => {
   const { uniqueId } = attributes;
   if (!uniqueId) {
       setAttributes({ uniqueId: generateUniqueClass() });
   } else {
       const blocks = select('core/block-editor').getBlocks();
       const isDuplicate = blocks.some(
           (block) =>
               block.attributes.uniqueId === uniqueId &&
               block.clientId !== clientId,
       );
       if (isDuplicate) {
           setAttributes({ uniqueId: generateUniqueClass() });
       }
   }
}, [attributes.uniqueId, clientId]);

Использование фильтров и хуков WordPress:
Если при копировании блока уникальный ID не обновляется должным образом, можно попробовать использовать фильтры WordPress для программной генерации нового ID при каждом событии копирования блока.
```
const addCustomClassOnCopy = (extraProps, blockType, attributes) => {
   if (blockType.name === 'my-plugin/my-custom-block') {
       extraProps.className = `custom-${uuidv4()}`;
   }
   return extraProps;
};

addFilter(
   'blocks.getSaveContent.extraProps',
   'my-plugin/add-custom-class-on-copy',
   addCustomClassOnCopy
);
```

Объяснение

Использование UUID: Библиотека uuid специализируется на генерации уникальных идентификаторов с высокой вероятностью уникальности. Это подход более надежен по сравнению с использованием генерации случайных чисел.
Фильтры WordPress: Применение фильтра blocks.getSaveContent.extraProps позволяет перехватывать процесс сохранения блока и вносить изменения в его свойства. Это может быть полезно для присвоения нового уникального ID при копировании.

Заключение

Для достижения надежного выполнения данной задачи важно удостовериться, что уникальный идентификатор надежно генерируется как при создании, так и при копировании блока. Использование предлагаемых методов обеспечит отсутствие дубликатов и обеспечит лучшую манипуляцию с блоками в вашем проекте WordPress. Рекомендуется также регулярно тестировать это на новых версиях WordPress и внедрять улучшения по мере их необходимости.