Как добавить правую боковую панель на страницу редактирования записи?

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

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

Чтобы добавить поле для ввода даты и времени на страницу редактирования записи в блоке справа в редакторе Gutenberg, необходимо использовать комбинацию PHP и JavaScript. Давайте подробно рассмотрим, как это сделать, следуя методу TEA (Теория, Пример, Применение).

Теория

Редактор Gutenberg в WordPress представляет собой современный редактор, построенный на блоках. Он позволяет разработчикам добавлять и модифицировать содержимое редактора с помощью плагинов, REST API и JavaScript. Одним из мощных инструментов для настройки интерфейса редактора является использование функции registerPlugin в комбинации с React-компонентами.

Advanced Custom Fields (ACF) — популярное решение для добавления полей к записям, но его возможности по размещению элементов в интерфейсе ограничены. На стандартных настройках оно позволяет добавлять поля в нижнюю часть страницы. Чтобы добиться необходимого результата — расположить поле в верхней части боковой панели — нам нужно использовать JavaScript вместе с React для управления DOM редактора Gutenberg.

Пример

Вы можете создать свой плагин или добавить код в тему WordPress, используя functions.php. Однако лучший подход — создание отдельного плагина для поддержания чистоты кода и облегчения его обслуживания.

1. Создание Плагина

   Создайте новый каталог в вашей директории плагинов wp-content/plugins и добавьте файл custom-sidebar-field.php:

   <?php
   /*
   Plugin Name: Custom Sidebar Field
   Description: Adds a custom date and time field to the Gutenberg sidebar.
   Version: 1.0
   Author: Your Name
   */
   
   function enqueue_custom_gutenberg_assets() {
      wp_enqueue_script(
          'custom-gutenberg-sidebar',
          plugin_dir_url(__FILE__) . 'custom-sidebar.js',
          array( 'wp-plugins', 'wp-edit-post', 'wp-element', 'wp-components', 'wp-data' ),
          filemtime(plugin_dir_path(__FILE__) . 'custom-sidebar.js')
      );
   }
   add_action('enqueue_block_editor_assets', 'enqueue_custom_gutenberg_assets');

2. JavaScript для добавления поля

   Создайте файл custom-sidebar.js в той же директории:

   const { registerPlugin } = wp.plugins;
   const { PluginDocumentSettingPanel } = wp.editPost;
   const { TextControl } = wp.components;
   const { useSelect, useDispatch } = wp.data;
   
   const CustomSidebarField = () => {
      const meta = useSelect((select) => select('core/editor').getEditedPostAttribute('meta'));
      const { editPost } = useDispatch('core/editor');
   
      return (
          <PluginDocumentSettingPanel
              name="custom-datetime-sidebar"
              title="Custom Date & Time"
              icon="calendar-alt"
              initialOpen={true}
          >
              <TextControl
                  label="Date and Time"
                  value={meta._custom_datetime || ''}
                  type="datetime-local"
                  onChange={(value) => editPost({ meta: { _custom_datetime: value } })}
              />
          </PluginDocumentSettingPanel>
      );
   };
   
   registerPlugin('custom-sidebar-field', {
      render: CustomSidebarField,
      icon: 'calendar-alt'
   });

3. Обновление functions.php (только в случае разработки темы)

   При использовании темы добавьте только enqueue_custom_gutenberg_assets функцию, приведенную выше, в functions.php, чтобы подключить JavaScript.

Применение

1. Активация плагина:

   После завершения написания кода, активируйте плагин через панель администратора WordPress.

2. Проверка в редакторе Gutenberg:

   Перейдите в редактор Gutenberg и откройте любую запись. Вы должны увидеть новое поле для ввода даты и времени на правой боковой панели.

3. Метаданные:

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

   function custom_register_meta() {
      register_post_meta('post', '_custom_datetime', [
          'show_in_rest' => true,
          'single' => true,
          'type' => 'string',
      ]);
   }
   add_action('init', 'custom_register_meta');

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