Вопрос или проблема
Я пытаюсь сделать так, чтобы блок терминов в редакторе Gutenberg в WordPress отображал изображение из поля под названием “brand_logo”, созданного с помощью Advanced Custom Fields, вместо заголовка термина, прикрепленного к публикации. Можете помочь с этим? Я все еще изучаю этот процесс и плохо знаю JS.
Я добавил файл JS с этим кодом:
function enqueue_block_scripts() {
// Enqueue только на экране редактора блоков
if ( ! is_admin() ) {
return;
}
// Получите путь к вашему JavaScript файлу
$js_file_path = get_stylesheet_directory_uri() . '/js/custom-terms-block.js';
// Добавьте скрипт
wp_enqueue_script(
'custom-terms-block', // Уникальный идентификатор для вашего скрипта
$js_file_path,
array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-data' ), // Зависимости
filemtime( $js_file_path ), // Версионирование (используйте filemtime для обхода кэширования)
true // Загружать в футере
);
}
add_action( 'enqueue_block_editor_assets', 'enqueue_block_scripts' );
Затем в каталоге дочерней темы я добавил каталог /js и в нем файл custom-terms-block.js.
В том файле я использовал этот код:
const { registerBlockType } = wp.blocks;
const { useEntityProp } = wp.coreData;
const { RichText } = wp.blockEditor;
registerBlockType('custom/terms-with-logo', {
title: 'Terms with Brand Logo',
category: 'widgets',
attributes: {
terms: { type: 'array', default: [] },
},
edit: (props) => {
const { terms } = props.attributes;
// Получите термины и их связанные ACF brand_logo поля
const [taxonomyTerms, error] = useEntityProp('taxonomy', 'category', 'terms');
if (error) {
console.error('Ошибка при получении терминов:', error);
return <div>Ошибка: Не удалось загрузить термины.</div>;
}
const termsWithLogos = taxonomyTerms.map((term) => {
const brandLogoUrl = term.meta?.brand_logo || '';
return {
id: term.id,
name: term.name,
brandLogoUrl,
};
});
return (
<ul>
{termsWithLogos.map((term) => (
<li key={term.id}>
{term.brandLogoUrl ? (
<img src={term.brandLogoUrl} alt={term.name} />
) : (
RichText.Content({ value: term.name })
)}
</li>
))}
{termsWithLogos.length === 0 && <li>Термины не найдены.</li>}
</ul>
);
},
save: () => {
return null; // Сохранение обрабатывается динамически через PHP или рендеринг на клиенте
},
});
Новые блоки не создаются, и я получаю ошибку в консоли: Uncaught SyntaxError: expected expression, got '<'. Кажется, это ссылается на строку 26, где написано <ul>.
Некорректно ли я отформатировал JS? Или есть более лучший способ сделать это?
Ответ или решение
Конечно, давайте разберем, как правильно расширить блок терминов Gutenberg и исправить проблему, возникшую в вашем коде. Вы хотите, чтобы вместо названия термина отображалась картинка из поля "brand_logo", которое создано с помощью Advanced Custom Fields (ACF). Я объясню процесс с учетом вашего уровня знаний JavaScript и предложу эффективное решение.
F – Focus (Фокус)
Вашей целью является замена термина на изображение "brand_logo" в блоке Gutenberg. Для этого вам необходимо использовать корректные инструменты WordPress для работы с кастомными полями и терминами.
O – Organization (Организация)
Разделим решение на несколько ключевых шагов:
-
Правильное подключение JavaScript:
Убедитесь, что скрипт подключается только в редакторе блоков. Вы уже верно начали этот процесс черезenqueue_block_editor_assets. Однако убедитесь, что файл JavaScript существует и путь к нему указан правильно, иначеfilemtime()не сможет извлечь временную метку. -
Использование правильного подхода к JavaScript в блоках Gutenberg:
Ключевая ошибка связана с неправильным форматом JSX. Gutenberg поддерживает JSX-синтаксис, но ваш скрипт должен знать о нем. -
Обработать логику получения данных из ACF и обращения к ним:
Убедитесь, что данные подгружаются корректно и доступны в редакторе блоков. Здесь поможет пакет@wordpress/data.
R – Resolve (Решение)
Теперь, давайте исправим ваш код.
-
Настройка Webpack/Babel для JSX:
Gutenberg блоки предполагают использование Babel для работы с JSX. Убедитесь, что ваш проект настроен на использование Babel для преобразования JSX в ES5. Узнайте о @wordpress/scripts, который предлагает готовые решения. -
Использование
@wordpress/dataдля получения ACF данных:Следующий пример кода показывает, как исправить логические ошибки:
const { registerBlockType } = wp.blocks; const { useSelect } = wp.data; const { RichText } = wp.blockEditor; registerBlockType('custom/terms-with-logo', { title: 'Terms with Brand Logo', category: 'widgets', attributes: { terms: { type: 'array', default: [] }, }, edit: (props) => { const terms = useSelect(select => { return select('core').getEntityRecords('taxonomy', 'category', { include: props.attributes.terms }); }, []); return ( <ul> {terms && terms.map(term => ( <li key={term.id}> {term.acf?.brand_logo ? ( <img src={term.acf.brand_logo} alt={term.name} /> ) : ( <RichText.Content value={term.name} /> )} </li> ))} {!terms && <li>Загрузка данных...</li>} </ul> ); }, save: () => { return null; // Обработка на фронтенде или через PHP }, });
E – Emphasize Uniqueness (Подчеркните уникальность)
Работа с Gutenberg и ACF позволяет создавать уникальные решения для вашего сайта, адаптируя их под конкретные задачи, такие как кастомизация терминов с использованием изображений.
S – Simplify (Упростите)
Убедившись, что Babel настроен, и JSX поддерживает ваши изменения, вы сможете без ошибок внедрить нужную вам функциональность, избавившись от синтаксических ошибок.
T – Test and Refine (Тестирование и оптимизация)
Проверьте ваши изменения в разных браузерах и на разных устройствах. Убедитесь, что все линтеры и компиляторы настроены корректно. Готовность к развертыванию должна быть подтверждена стабильностью вашей разработки.
Помните, что изучение JavaScript и библиотек WordPress, таких как @wordpress/data, требует времени, однако позволяет создавать мощные, расширяемые и поддерживаемые решения.