0

I've built this theme option, based on the following tutorial https://rudrastyh.com/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 } );
1
  • 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
    Mar 5 '20 at 0:10
0

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 = compose.compose(
        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.wp.components,
    window.wp.data,
    window.wp.compose
);

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.com/managing-wordpress-metadata-in-gutenberg-using-a-sidebar-plugin/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.