php – Additional file upload in Gutenberg page options/featured image

Question

I would like to add an additional image upload in the featured image part of the Gutenberg page options editor. e.g. as in the image below, but with an additional file upload area.

featured image gutenberg

In my PHP file I currently have these lines to import a javascript function to add an additional dropdown, that looks like the below. (Code based off this post)

featured image with dropdown

I have tried to add a file form upload component, but this a) isn’t displayed, and b) I’m not sure how to then use the resulting upload (i.e. implement a similar withSelect function?)

Does anyone have any suggestions. Apologies if i’m missing the obvious as I’m very new to wordpress.

PHP file:

function myguten_register_meta()
{
    wp_enqueue_script( 'guten', get_template_directory_uri() . '/theme/js/guten-hero.js', [ 'wp-element', 'wp-hooks' , 'wp-compose', 'wp-data'] );
    register_meta('post', 'align_featured_image', array(
        'show_in_rest' => true,
        'single' => true,
        'type' => 'string',
    ));
}

add_action('init', 'myguten_register_meta');

JS file:

"use strict"

const el = wp.element.createElement;
const withSelect = wp.data.withSelect;
const withDispatch = wp.data.withDispatch;


wp.hooks.addFilter(
    'editor.PostFeaturedImage',
    'enchance-featured-image/align-featured-image-control',
    wrapPostFeaturedImage
);

function wrapPostFeaturedImage( OriginalComponent ) {
    return function (props) {
        return (
            el(
                wp.element.Fragment,
                {},
                el(
                    OriginalComponent,
                    props
                ),
                el(
                    composedSelectControl
                ),
                el(
                    fileUpload
                )
            )
        );
    }
}

class SelectControlCustom extends React.Component {
    render() {
        const {
            meta,
            updateFeaturedImage,
        } = this.props;

        return (
            el(
                wp.components.SelectControl,
                {
                    heading: "Manage Featured Image",
                    label: "Set Position",
                    help: "Set vertical alignment for featured image",
                    // value: this.state.value,
                    options: [
                            { value: 'flex-start', label: 'Select an alignment', disabled: true },
                            { value: 'flex-start', label: 'Top' },
                            { value: 'center', label: 'Center' },
                            { value: 'flex-end', label: 'Bottom' },
                            ],
                    onChange:
                        ( value ) => {
                            this.setState( { alignment: value } );
                            updateFeaturedImage( value, meta );
                        }
                }
            )
        )
    }
}


class FormFileUploadCustom extends React.Component {
    render() {
        const {
            meta,
            updateFeaturedImage,
        } = this.props;

        return (
            el(
                wp.components.FormFileUpload,
                {
                    heading: "Manage Featured Image",
                    label: "Set Position",
                    help: "Set vertical alignment for featured image",
                    // value: this.state.value,
                    accept: "image/*",
                    onChange:
                        ( value ) => {
                            this.setState( { image: value } );
                            // updateFeaturedImage( value, meta );
                        }
                }
            )
        )
    }
}

const composedSelectControl = wp.compose.compose( [
    withSelect( ( select ) => {
        const currentMeta = select( 'core/editor' ).getCurrentPostAttribute( 'meta' );
        const editedMeta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
        return {
            meta: { ...currentMeta, ...editedMeta },
        };
    } ),
    withDispatch( ( dispatch ) => ( {
        updateFeaturedImage( value, meta ) {
            meta = {
                ...meta,
                align_featured_image: value,
            };
            dispatch( 'core/editor' ).editPost( { meta } );
        },
    } ) ),
] )( SelectControlCustom );


const fileUpload = wp.compose.compose( [
//
] )( FormFileUploadCustom );

0
user128422 4 months 2022-04-30T09:22:59-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse