0

我正在尝试为 Gutenberg 构建一个侧边栏插件，该插件使用ColorPicker 组件使用 withSelect 和 withDispatch 将所选的 rgba 值存储在元数据中（我在下面使用十六进制值进行测试）。

该插件通常可以正常工作；它选择一种颜色，设置道具并在输入字段中显示值。

出于某种原因，我似乎无法将数据保存在元数据中，尽管代码类似于我构建的另一个“post-picker”插件，而且那个插件工作得很好。

这是我的代码，任何有关保存此代码的帮助将不胜感激：

import { __ } from '@wordpress/i18n';
import { registerPlugin, } from '@wordpress/plugins';
import { PluginSidebar, PluginSidebarMoreMenuItem, } from '@wordpress/edit-post';
import { PanelBody, ColorPicker } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data'
import { compose, } from '@wordpress/compose'

let PageColourSettings = (props) => {
    return (
        <>
            <PanelBody
                title={__('Page Colour', 'my-gutenberg-blocks')}
                icon='dashicons-art'
                initialOpen={true}
            >
                <ColorPicker
                    color={ props.page_colour }
                    // onChangeComplete={ ( value ) => ( console.log(value.rgb) ) }
                    onChangeComplete={ (value) => props.onPageColourChange(value.hex) }
                    // onChangeComplete={ (value) => { wp.data.dispatch('core/editor').editPost({meta:{_my_blocks_page_colour:value}}) } }
                />

                {console.log( props )}
                <label htmlFor="currentColour">{ __('Current page colour (rgba)', 'my-gutenberg-blocks') }</label>
                <input id={`currentColour`} defaultValue={props.page_colour} readOnly />
            </PanelBody>

        </>
    )
}


PageColourSettings = compose([
    withSelect(
        (select) => {
            return {
                page_colour: select('core/editor').getEditedPostAttribute('meta')['_my_blocks_page_colour']
            }
        }
    ),
    withDispatch(
        ( dispatch, props ) => {
            return {
                onPageColourChange: (value) => {
                    page_colour: dispatch('core/editor').editPost({ meta: { _my_blocks_page_colour: value } });
                }
            }
        }
    ),
])(PageColourSettings);


registerPlugin(my-gutenberg-blocks-page-colour-sidebar', {
    icon: 'welcome-widgets-menus',

    render: () => {
        return (
            <>
                <PluginSidebarMoreMenuItem
                    target="posts-metabox-sidebar"
                >
                {__('Additional Options', 'my-gutenberg-blocks')}
                </PluginSidebarMoreMenuItem>
                <PluginSidebar
                    name="posts-metabox-sidebar"
                    icon=""
                    title={__('Additional Options', 'my-gutenberg-blocks')}
                >
                    <PageColourSettings />
                </PluginSidebar>
            </>
        )
    }
})
4

1 回答 1

1

更新：我已经弄清楚了问题所在；就是元数据没有在 PHP 中针对该特定字段注册。如果有人想使用它，这是代码：

add_action( 'init', 'my_blocks_register_meta' );
function my_blocks_register_meta() {
    register_meta('page', '_my_blocks_page_colour', array(
        'show_in_rest' => true,
        'type' => 'string',
        'single' => true,
        'sanitize_callback' => 'sanitize_text_field',
        'auth_callback' => function() {
            return current_user_can('edit_posts');
        }
    ));
}

如果您希望将 rgba 存储在元中；在 <ColorPicker 组件中，将 onChangeComplete 更改为：

onChangeComplete={ (value) => props.onPageColourChange('rgba(' + value.rgb.r + ', ' + value.rgb.g + ', ' + value.rgb.b + ', ' + value.rgb.a + ')') }
于 2021-04-30T12:03:39.847 回答