Блог

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

Ниже у меня есть константа const BLOCKS_TEMPLATE = []; с кучей данных внутри, которая служит шаблоном для моего пользовательского блока. Он отлично работает, если он находится в моем основном файле, но перестает работать, если я достану его и попытаюсь импортировать.

Я попытался переместить эту BLOCKS_TEMPLATE константу в ее собственный файл block_template.js и импортировать ее в верхней части, а затем попытался получить доступ к данным ниже, registerBlockType как показано ниже. Это не работает для меня, и я почти уверен, что просто ошибаюсь в синтаксисе. Может ли кто-нибудь сообщить мне, что я делаю не так, если это возможно? Спасибо, и, надеюсь, это ясно (не уверен, что вопрос, который я написал, сформулирован правильно). Я новичок в работе с React.

 import { BLOCKS_TEMPLATE } from "./block_template"; const el = wp.element.createElement; const { registerBlockType } = wp.blocks; const { InnerBlocks } = wp.blockEditor; const { __ } = window.wp.i18n;  registerBlockType('idg-blocks-plugin/stats-bar-template', {  title: __('Stats Bar Template'),  category: 'widgets',  icon: 'welcome-widgets-menus',  keywords: [__('Statistics'), __('Stats')],  edit: (props) =gt; {  return el(  'div',  { className: props.className },  el(InnerBlocks, {  template: BLOCKS_TEMPLATE,  templateLock: false,  })  );  },  save: (props) =gt; {  return el(  'div',  { className: props.className },  el('div', { className: 'custom-div' }, el(InnerBlocks.Content, {}))  );  }, });  

Внешний файл, block_template.js , настроен следующим образом:

 export const BLOCKS_TEMPLATE = [  [  'core/columns',  {  className: 'is-style-stats-columns',  },  [  [  'core/column',  {  className: 'is-statistic',  },  [  [  'core/paragraph',  {  className: 'is-style-main-stat',  placeholder: 'ex: 76.4B',  align: 'center',  },  ],  [  'core/paragraph',  {  className: 'is-style-stat-supporting',  content: 'ex: Average Buying Power at Each Summit',  align: 'center',  },  ],  ],  ],  [  'core/column',  {  className: 'is-statistic',  },  [  [  'core/paragraph',  {  className: 'is-style-main-stat',  placeholder: 'ex: 76.4B',  align: 'center',  },  ],  [  'core/paragraph',  {  className: 'is-style-stat-supporting',  content: 'ex: Average Buying Power at Each Summit',  align: 'center',  },  ],  ],  ],  [  'core/column',  {  className: 'is-statistic',  },  [  [  'core/paragraph',  {  className: 'is-style-main-stat',  placeholder: 'ex: 76.4B',  align: 'center',  },  ],  [  'core/paragraph',  {  className: 'is-style-stat-supporting',  content: 'ex: Average Buying Power at Each Summit',  align: 'center',  },  ],  ],  ],  ],  ], ];