I've built this theme option, based on the following tutorial .html#registerPlugin

but now I'm having trouble figuring out how to send the post/page data (including the colors that were chosen).

Could anyone give me a hand?

Cheers!

const PrimaryThemeColor = withState( {
    color: '#fff',
} )( ( { color, setState } ) => {
    console.log('PrimaryThemeColor', color)

    return (
        <ColorPicker
            color={ color }
            onChangeComplete={ ( value ) => setState({color: value.hex})}
            disableAlpha
        />
    )
} );

const SecondaryThemeColor = withState( {
    color: '#fff',
} )( ( { color, setState } ) => {
    console.log('SecondaryThemeColor', color)

    return (
        <ColorPicker
            color={ color }
            onChangeComplete={ ( value ) => setState({color: value.hex})}
            disableAlpha
        />
    )
} );



export const ThemeColorPalette = () => {
    return (
        <PluginSidebar
            name="theme-plugin-sidebar"
            title="Theme Plugin"
            icon='admin-appearance'
        >
            <div>
                <h3>Primary Colour</h3>
                <PrimaryThemeColor />
            </div>

            <div style={{ marginTop: '50px'}}>
                <h3>Secondary Colour</h3>
                <SecondaryThemeColor />
            </div>
        </PluginSidebar>
    );
};
registerPlugin( 'brave-theme-plugin-sidebar', { render: ThemeColorPalette } );

I've built this theme option, based on the following tutorial https://rudrastyh/gutenberg/plugin-sidebars.html#registerPlugin

but now I'm having trouble figuring out how to send the post/page data (including the colors that were chosen).

Could anyone give me a hand?

Cheers!

const PrimaryThemeColor = withState( {
    color: '#fff',
} )( ( { color, setState } ) => {
    console.log('PrimaryThemeColor', color)

    return (
        <ColorPicker
            color={ color }
            onChangeComplete={ ( value ) => setState({color: value.hex})}
            disableAlpha
        />
    )
} );

const SecondaryThemeColor = withState( {
    color: '#fff',
} )( ( { color, setState } ) => {
    console.log('SecondaryThemeColor', color)

    return (
        <ColorPicker
            color={ color }
            onChangeComplete={ ( value ) => setState({color: value.hex})}
            disableAlpha
        />
    )
} );



export const ThemeColorPalette = () => {
    return (
        <PluginSidebar
            name="theme-plugin-sidebar"
            title="Theme Plugin"
            icon='admin-appearance'
        >
            <div>
                <h3>Primary Colour</h3>
                <PrimaryThemeColor />
            </div>

            <div style={{ marginTop: '50px'}}>
                <h3>Secondary Colour</h3>
                <SecondaryThemeColor />
            </div>
        </PluginSidebar>
    );
};
registerPlugin( 'brave-theme-plugin-sidebar', { render: ThemeColorPalette } );

• post-meta
• metabox
• sidebar
• register-sidebar

• Step #5 of that tutorial has the code to get and set the post meta value, have you tried that? But, if you're actually referring to a global theme option, why not use the Customizer API? – Sally CJ Commented Mar 5, 2020 at 0:10

1 Answer 1

In the end, I've managed to do in this way

(function( plugins, editPost, element, components, data, compose ) {

    const el = element.createElement;

    const { Fragment } = element;
    const { registerPlugin } = plugins;
    const { PluginSidebar, PluginSidebarMoreMenuItem } = editPost;
    const { PanelBody, ColorPicker } = components;
    const { withSelect, withDispatch } = data;

    const MetaThemeControl = composepose(
        withDispatch( function( dispatch, props ) {
            return {
                setMetaValue: function( metaValue ) {
                    dispatch( 'core/editor' ).editPost(
                        { meta: { [ props.metaKey ]: metaValue } }
                    );
                }
            }
        } ),
        withSelect( function( select, props ) {
            return {
                metaValue: select( 'core/editor' ).getEditedPostAttribute( 'meta' )[ props.metaKey ],
            }
        } ) )( function( props ) {
            return el( ColorPicker, {
                label: props.title,
                value: props.metaValue,
                onChangeComplete: function( content ) {
                    props.setMetaValue( content.hex );
                },
            });
        }
    );

    registerPlugin( 'b-theme-sidebar', {
        render: function() {
            return el( Fragment, {},
                el( PluginSidebarMoreMenuItem,
                    {
                        target: 'b-theme-sidebar',
                        icon: 'admin-appearance',
                    },
                    'B Theme'
                ),
                el( PluginSidebar,
                    {
                        name: "b-theme-sidebar",
                        title: "B Theme",
                        icon: 'admin-appearance',
                    },
                    el( PanelBody, {},
                        // primary color
                        el( MetaThemeControl,
                            {
                                metaKey: 'primary_theme',
                                title : 'Primary Theme',
                            }
                        ),
                        // secondary color
                        el( MetaThemeControl,
                            {
                                metaKey: 'secondary_theme',
                                title : 'Secondary Theme',
                            }
                        ),
                    )
                )
            );
        }
    } );
} )(
    window.wp.plugins,
    window.wp.editPost,
    window.wp.element,
    window.wpponents,
    window.wp.data,
    window.wppose
);

But I would like to find a solution for my first attempt, cause is much more readable.

EDIT: a tutorial that would resolve the first case:

https://css-tricks/managing-wordpress-metadata-in-gutenberg-using-a-sidebar-plugin/