Как сохранить RGBA Gutenberg ColourPicker в качестве метаданных (React) - PullRequest
Новая
       23

Как сохранить RGBA Gutenberg ColourPicker в качестве метаданных (React)

0 голосов
/ 28 апреля 2020

Я пытаюсь создать плагин боковой панели для Гутенберга, который использует компонент ColorPicker для хранения выбранного значения rgba в метаданных, используя withSelect и withDispatch (я тестирую ниже с шестнадцатеричным значением).

Плагин обычно работает как надо; он выбирает цвет, устанавливает реквизит и отображает значение в поле ввода.

Я просто не могу заставить данные по какой-то причине сохранять данные в метаданных, несмотря на то, что код похож на другой плагин '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>
            </>
        )
    }
})

Обновление: Я выяснил, в чем проблема; это было то, что мета не была зарегистрирована в 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');
        }
    ));
}

Если вы хотите sh сохранить rgba в мета; в компоненте <ColorPicker измените onChangeComplete на: 

onChangeComplete={ (value) => props.onPageColourChange('rgba(' + value.rgb.r + ', ' + value.rgb.g + ', ' + value.rgb.b + ', ' + value.rgb.a + ')') }
...