Пользовательские блоки Gutenberg не отображаются в редакторе WP.

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

import { registerBlockType } from '@wordpress/blocks';

registerBlockType('custom-blocks/simple-block', {
    edit: () => 'abc',
    save: () => 'abc'
});

<?php

/**
 * Plugin Name: Custom Blocks
 * Description: A simple Gutenberg block that displays 'abc'.
 * Version: 1.0
 * Author: Your Name
 */

if (! defined('ABSPATH')) {
    exit; // Exit if accessed directly.
}

function custom_blocks_init()
{
    register_block_type(__DIR__);
}
add_action('init', 'custom_blocks_init');

{
  "apiVersion": 2,
  "name": "custom-blocks/simple-block",
  "title": "Simple Block",
  "category": "widgets",
  "editorScript": "file:./index.js"
}

const { registerBlockType } = wp.blocks;

registerBlockType('custom-blocks/simple-block', {
    edit: () => 'abc',
    save: () => 'abc'
});

wp.blocks.registerBlockType('custom-blocks/simple-block', {
    edit: () => 'abc',
    save: () => 'abc'
});

<?php

return array(
  'dependencies' => array(
    'wp-blocks'
  ),
  'version' => hash_file( 'sha256', __DIR__ . '/index.js' )
);

.

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

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

Теория (Theory)

Система блоков Gutenberg в WordPress позволяет разработчикам создавать пользовательские блоки, которые можно использовать в редакторе контента. Эти блоки регистрируются с помощью функции registerBlockType. Обычно код регистрации для блоков хранится в файле JavaScript, который связывается с WordPress через функцию register_block_type в PHP.

Пример (Example)

В предоставленном вами примере, есть несколько ключевых моментов:

1. Синтаксис import и ошибка в консоли: Вы столкнулись с ошибкой "Uncaught SyntaxError: Cannot use import statement outside a module". Это связано с тем, что вы используете ECMAScript модули без соответствующей среды (например, сборщик вроде Webpack), что требует транспиляции кода из ECMAScript модулей в формат, который может быть исполнен браузером.

2. PHP регистрация блока:

   function custom_blocks_init()
   {
      register_block_type(__DIR__);
   }
   add_action('init', 'custom_blocks_init');

   Этот код пытается зарегистрировать ваш блок, используя папку, где расположен block.json. Однако ваш JavaScript файл, описанный в block.json, не обрабатывается правильно.

3. JavaScript регистрация блока:

   import { registerBlockType } from '@wordpress/blocks';
   
   registerBlockType('custom-blocks/simple-block', {
      edit: () => 'abc',
      save: () => 'abc'
   });

   Этот код содержит ошибку, из-за которой ваш блок не будет зарегистрирован – используемый синтаксис не поддерживается без дополнительной настройки окружения.

Применение (Application)

Чтобы решить проблему, следуйте следующим шагам:

1. Отказ от использования import: Как вы упомянули, вы не используете инструменты, такие как npm или npx. Исходя из этого вам следует убрать использование import и заменить его другим способом:

   wp.blocks.registerBlockType('custom-blocks/simple-block', {
      edit: () => 'abc',
      save: () => 'abc'
   });

   Таким образом, вы используете глобально доступный объект wp для доступа к методам блоков.

2. Создание index.asset.php: Вам необходимо создать файл index.asset.php, который даст WordPress знать о зависимостях и версии вашего JavaScript файла:

   <?php
   
   return array(
      'dependencies' => array('wp-blocks'),
      'version' => hash_file('sha256', __DIR__ . '/index.js')
   );

   Это обеспечит потерю зависимости для wp.blocks и возможность корректного кэширования изменений в ваших скриптах.

3. Отладка через консоль: Убедитесь, что ошибок JavaScript больше нет в консоли, после перехода на использование wp API, и что блок доступен для добавления в редакторе.

4. Проверка регистрации в block.json: Убедитесь, что файл block.json правильно загружает скрипты и указывает на editorScript: "file:./index.js".

Вывод

Регистрация пользовательских блоков в WordPress может быть неочевидной задачей без правильного понимания как работают модули JS и их интеграция в WordPress среду. Несмотря на это, благодаря изменению регистрации с import на wp.blocks, создание мета-файла index.asset.php, и устранению ошибок консоли, ваши блоки должны быть успешно доступны для добавления в Gutenberg редакторе. Эти шаги помогут вам наладить работу блоков без использования сложных инструментов сборки, которые требуют дополнительные знания и настройки.