Additional file upload in Gutenberg page options/featured image
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.
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)
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 );
Topic block-editor php Wordpress javascript
Category Web