SlotFills в WordPress представляют собой мощный инструмент расширения возможностей редактора Gutenberg. Используя компоненты Slot и Fill, разработчики могут встраивать свои элементы в заранее определенные места интерфейса администратора. Это позволяет создавать настраиваемые и расширяемые интерфейсы, которые могут быть индивидуально адаптированы под нужды каждого проекта.
Использование SlotFills в WordPress
Для начала работы с SlotFills
, мы должны зарегистрировать плагин, который будет добавлять наши элементы в интерфейс. Задача состоит в следующем:
- Импортировать метод
registerPlugin
из пакета@wordpress/plugins
. - Импортировать нужный
SlotFill
из пакета@wordpress/edit-post
или аналогичного. - Определить компонент, который будет обернут в
SlotFill
. - Зарегистрировать плагин с помощью
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. С их помощью можно создать богатые и интуитивные пользовательские интерфейсы, которые легко адаптируются под индивидуальные требования проекта.