时间戳

首页 > 解决方案 > 如何向 WordPress Gutenberg 编辑器添加设置

wordpress - 如何向 WordPress Gutenberg 编辑器添加设置

问题描述

我正在尝试编写一个简单的插件来改变编辑帖子屏幕（现在称为古腾堡）的行为。我@wordpress/scripts用来捆绑javascript。以下代码将使控件出现...但是当我单击切换时，它会重新加载页面而不是更改状态。

我究竟做错了什么？我找不到任何关于如何在古腾堡编辑器的上下文中使用状态的文档。

import { registerPlugin } from '@wordpress/plugins';
import { PluginMoreMenuItem } from '@wordpress/edit-post';
import { pencil } from '@wordpress/icons';
import { ToggleControl } from '@wordpress/components';
import { withState } from '@wordpress/compose';
 
const HemingwayModeToggleControl = withState( {
    hemingwayMode: false,
} )( ( { hemingwayMode, setState } ) => (
    <ToggleControl
        label="Hemingway mode"
        help={ hemingwayMode ? 'Hemingway mode is on.' : 'Hemingway mode is off.' }
        checked={ hemingwayMode }
        onChange={ () => setState( ( state ) => ( { hemingwayMode: ! state.hemingwayMode } ) ) }
    />
) );

const HemingwayModeMoreMenuItem = () => (
    <PluginMoreMenuItem
        icon={pencil}
    >
        <HemingwayModeToggleControl />
    </PluginMoreMenuItem>
);

registerPlugin( 'hemingway-mode-more-menu', { render: HemingwayModeMoreMenuItem } );

标签： wordpresswordpress-themingwordpress-gutenberg

解决方案

这里的问题是这个插槽中的每个组件都用<button></button>. 因此，当您点击切换按钮时，您宁愿点击此按钮。但在你的情况下，我认为这并不重要，你可以使用按钮 onClick 事件来设置你的状态。这是更新的代码，它正在工作。

import { registerPlugin } from '@wordpress/plugins';
import { PluginMoreMenuItem } from '@wordpress/edit-post';
import { pencil } from '@wordpress/icons';
import { ToggleControl } from '@wordpress/components';
import { withState } from '@wordpress/compose';

const HemingwayModeMoreMenuItem = withState( {hemingwayMode: false} )(
    ({ hemingwayMode, setState }) => (
        <PluginMoreMenuItem
            icon={pencil}
            onClick={ (e) => {
                e.preventDefault();
                setState( ( state ) => ( { hemingwayMode: ! state.hemingwayMode } ) )
            } }
        >

        <ToggleControl
            label="Hemingway mode"
            help={ hemingwayMode ? 'Hemingway mode is on.' : 'Hemingway mode is off.' }
            checked={ hemingwayMode }
        />

        </PluginMoreMenuItem>
    )
);

registerPlugin( 'hemingway-mode-more-menu', { render: HemingwayModeMoreMenuItem } );

剩下的问题是，当单击按钮时，更多工具和选项部分会关闭。此行为是默认行为，我不知道如何覆盖它。

推荐阅读