Определение типа Javascript для блоков Гутенберга (wordpress)

Я пытаюсь создать собственные блоки для Гутенберга, используя ReactJS. Я пытаюсь визуализировать HTML с помощью функции render (), но получаю ошибку «Uncaught SyntaxError: Unexpected token‹ ».

Теперь я прочитал, что должен убедиться, что определяю тип сценария как text / babel, чтобы правильно отображать HTML, но поскольку я добавляю свои файлы JS через wp_register_script () функция wordpress, я должен понять, как это сделать.

Дайте мне знать, если вам нужны более подробные сведения, спасибо!


reactjs javascript wordpress wordpress-gutenberg
person arsea    schedule 27.11.2018    source источник
comment
Вы не используете сценарий сборки для компиляции кода? Если вы пытаетесь написать React JSX напрямую, вы столкнетесь с проблемами. Взгляните на github.com/ahmadawais/create-guten-block - это отличная отправная точка для написания собственных блоков.   -  person codewithfeeling    schedule 27.11.2018
comment
интересно, посмотрю @raffjones!   -  person arsea    schedule 27.11.2018

Ответы (2)


arrow_upward
0
arrow_downward

Сначала поставьте сценарий в очередь для файла functio.php:

function gutenberg_boilerplate_block() {
    wp_register_script(
        'gutenberg-boilerplate-es5-step01',
        get_theme_file_uri( '/js/test.js' ),
        array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' )
    );

    register_block_type( 'gutenberg-boilerplate-es5/hello-world-step-01', array(
        'editor_script' => 'gutenberg-boilerplate-es5-step01',
    ) );
}
add_action( 'init', 'gutenberg_boilerplate_block' );

Разместите свой код test.js:

Например:

var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType,
    blockStyle = { backgroundColor: '#900', color: '#fff', padding: '20px' };

registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-01', {
    title: 'Hello World (Step 1)',

    icon: 'universal-access-alt',

    category: 'layout',

    edit: function() {
        return el( 'p', { style: blockStyle }, 'Hello editor.' );
    },

    save: function() {
        return el( 'p', { style: blockStyle }, 'Hello saved content.' );
    },
} );

Узнайте о Гутенберге, а теперь нажмите на этот URL:

https://wordpress.org/gutenberg/handbook/

person utsav tilava    schedule 27.11.2018
comment
Это решение не использует шаблоны HTML, это метод, которым я сейчас застрял. - person arsea; 27.11.2018
comment
Ок, посмотрим на эту ссылку: github.com / Invulu / organic-profile-block / blob / master / block / - person utsav tilava; 27.11.2018

arrow_upward
0
arrow_downward

Похоже, вы пытаетесь напрямую отобразить реагирующий элемент.

const element = <h1>Hello JSX</h1>;

Это должно быть скомпилировано в:

var element = React.createElement(
  "h1",
  null,
  "Hello JSX"
);
person snnsnn    schedule 28.01.2019