Оптимизация SlotFills: Эффективные стратегии для IT-специалистов

Главная - WordPress Codex - Оптимизация SlotFills: Эффективные стратегии для IT-специалистов
Доступна с версии: -
Раздел: Gutenberg
Написал: Александр Сокирка

SlotFills в WordPress представляют собой мощный инструмент расширения возможностей редактора Gutenberg. Используя компоненты Slot и Fill, разработчики могут встраивать свои элементы в заранее определенные места интерфейса администратора. Это позволяет создавать настраиваемые и расширяемые интерфейсы, которые могут быть индивидуально адаптированы под нужды каждого проекта.

Использование SlotFills в WordPress

Для начала работы с SlotFills, мы должны зарегистрировать плагин, который будет добавлять наши элементы в интерфейс. Задача состоит в следующем:

  1. Импортировать метод registerPlugin из пакета @wordpress/plugins.
  2. Импортировать нужный SlotFill из пакета @wordpress/edit-post или аналогичного.
  3. Определить компонент, который будет обернут в SlotFill.
  4. Зарегистрировать плагин с помощью registerPlugin.

Пример использования PluginPostStatusInfo

Рассмотрим пример использования PluginPostStatusInfo:

import { registerPlugin } from '@wordpress/plugins';
import { PluginPostStatusInfo } from '@wordpress/edit-post';

const CustomPostStatusInfo = () => (
    <PluginPostStatusInfo>
        <p>Дополнительная информация о статусе поста.</p>
    </PluginPostStatusInfo>
);

registerPlugin('custom-post-status-info', { render: CustomPostStatusInfo });

Условные рендеры для SlotFill

Часто возникает необходимость условного рендеринга элементов в зависимости от контекста. Например, мы можем ограничить рендеринг только на экране редактирования постов:

import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { store as editorStore, useSelect } from '@wordpress/data';

const ConditionalRenderPanel = () => {
    const isViewable = useSelect((select) => {
        const postType = select(editorStore).getCurrentPostType();
        return select(coreStore).getPostType(postType).viewable;
    }, []);

    return isViewable ? (
        <PluginDocumentSettingPanel>
            <p>Панель видна только в редакторе постов.</p>
        </PluginDocumentSettingPanel>
    ) : null;
};

registerPlugin('conditional-render-panel', {
    render: ConditionalRenderPanel,
});

Ограничение рендеринга для определенных типов постов

Если требуется ограничить рендеринг для определенных типов постов, вы можете использовать белый список:

import { registerPlugin } from '@wordpress/plugins';
import { PluginPostStatusInfo } from '@wordpress/edit-post';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';

const SpecificPostTypePanel = () => {
    const { isViewable, postTypeName } = useSelect((select) => {
        const postType = select(editorStore).getCurrentPostType();
        const postTypeObject = select(coreStore).getPostType(postType);
        return {
            isViewable: postTypeObject?.viewable,
            postTypeName: postType,
        };
    }, []);

    const allowedPostTypes = ['page', 'custom_post_type'];

    if (!isViewable || !allowedPostTypes.includes(postTypeName)) {
        return null;
    }

    return (
        <PluginPostStatusInfo>
            <p>Отображается только на определенных типах постов.</p>
        </PluginPostStatusInfo>
    );
};

registerPlugin('specific-post-type-panel', {
    render: SpecificPostTypePanel,
});

Замечание: Использование SlotFills позволяет не только лучше организовывать код, но и расширять функциональность редактора с минимальными усилиями.

Заключение

Компоненты SlotFill в WordPress открывают перед разработчиками новый уровень гибкости и контроль над интерфейсом редактора Gutenberg. С их помощью можно создать богатые и интуитивные пользовательские интерфейсы, которые легко адаптируются под индивидуальные требования проекта.

Стартовая премиум тема для WordPress
Демо импорт тестового контента в 1 клик.
SEO оптимизированный и валидный код.
Множество готовых стартовых сайтов.
Лучшая документация и поддержка.
Опции персонализации контента.
Креативный и современный дизайн.
Тема для WordPress

Дополнительно по: Gutenberg