import { __ } from '@wordpress/i18n';
|
import { compose } from '@wordpress/compose';
|
import { withSelect, withDispatch } from '@wordpress/data';
|
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
|
import { PanelBody, PanelRow, TextControl, DateTimePicker } from '@wordpress/components';
|
import { useEntityProp } from '@wordpress/core-data';
|
|
const JVIcon = () => (
|
<svg xmlns="http://www.w3.org/2000/svg" fillRule="evenodd" strokeLinecap="square" strokeLinejoin="round" strokeMiterlimit="1.5" clipRule="evenodd" viewBox="0 0 32 32">
|
<path fill="currentColor" fillRule="nonzero" d="M16.58 2.133c-7.715 0-15.14 6.014-14.547 13.707.561 7.287 6.938 13.185 13.938 13.947 8.25.898 14.47-5.953 14.004-13.988-.447-7.7-5.683-13.666-13.395-13.666m0 .607h.031v26.492q-.285-.017-.574-.048c-6.724-.732-12.86-6.391-13.398-13.391C2.072 8.442 9.209 2.74 16.58 2.74m-.488 1.145L16 3.889c-3.275.13-6.448 1.476-8.744 3.611-2.297 2.135-3.716 5.065-3.463 8.346.492 6.384 6.071 11.538 12.201 12.207l.09.01.021-.182-.091-.01c-6.041-.66-11.555-5.755-12.04-12.04-.247-3.221 1.142-6.092 3.405-8.196s5.4-3.437 8.629-3.565l.092-.004zm0 1.502L16 5.39c-2.868.113-5.647 1.293-7.658 3.164-2.012 1.87-3.255 4.436-3.033 7.31.43 5.593 5.316 10.106 10.685 10.692l.09.01.021-.18-.091-.01c-5.28-.576-10.1-5.031-10.524-10.525-.217-2.815.997-5.325 2.975-7.164 1.978-1.84 4.72-3.004 7.543-3.116l.092-.004zm0 1.504L16 6.893c-2.462.097-4.846 1.111-6.572 2.716-1.727 1.606-2.796 3.808-2.606 6.276.37 4.8 4.564 8.674 9.172 9.177l.09.01.021-.181-.091-.01c-4.52-.494-8.648-4.307-9.01-9.01-.186-2.408.854-4.554 2.547-6.129s4.04-2.57 6.457-2.666l.092-.004zm0 1.502L16 8.396c-2.055.082-4.045.926-5.486 2.266-1.442 1.34-2.335 3.182-2.176 5.244.309 4.009 3.808 7.24 7.656 7.66l.09.01.008-.068v-.002l.002-.01.004-.01v-.02l.007-.072-.091-.01c-3.76-.41-7.193-3.58-7.494-7.491-.155-2.002.709-3.787 2.117-5.096s3.361-2.14 5.37-2.219l.093-.004zm0 1.502L16 9.898a6.95 6.95 0 0 0-4.402 1.819c-1.157 1.075-1.872 2.553-1.744 4.209.247 3.216 3.053 5.81 6.14 6.146l.09.01.021-.182-.091-.01c-2.999-.327-5.739-2.86-5.979-5.978-.123-1.595.564-3.018 1.688-4.062a6.78 6.78 0 0 1 4.285-1.77l.092-.004zm0 1.503L16 11.4a5.24 5.24 0 0 0-3.316 1.372c-.872.81-1.413 1.924-1.317 3.173.187 2.425 2.3 4.377 4.627 4.631l.09.01.021-.182-.091-.01c-2.238-.244-4.286-2.136-4.465-4.462-.092-1.19.421-2.248 1.26-3.028a5.06 5.06 0 0 1 3.199-1.32l.092-.004zm0 1.502-.092.004a3.52 3.52 0 0 0-2.23.92c-.587.546-.952 1.3-.887 2.143.126 1.633 1.545 2.942 3.111 3.113h-.008l.01.002h.01l.078.01.022-.182-.092-.01c-1.477-.16-2.831-1.412-2.95-2.947-.06-.782.277-1.48.83-1.994a3.35 3.35 0 0 1 2.114-.873l.092-.004zm0 1.502-.092.004c-.43.017-.843.192-1.145.473-.301.28-.49.67-.457 1.107.065.841.791 1.512 1.596 1.6l.09.01.021-.182-.091-.01c-.717-.078-1.377-.688-1.434-1.431-.029-.377.132-.712.4-.961.269-.25.644-.409 1.028-.424l.092-.004z" clipRule="nonzero" overflow="visible"/>
|
</svg>
|
);
|
const SidePanel = ( { postType, metaFields, setMetaFields } ) => {
|
const { content, fields } = window.jvbFieldConfig || {};
|
const [meta, setMeta] = useEntityProp('postType', content, 'meta');
|
console.log(fields);
|
|
return (
|
<>
|
<PluginSidebarMoreMenuItem
|
target="metadata-sidebar"
|
icon={<JVIcon /> }
|
>
|
Metadata Sidebar
|
</PluginSidebarMoreMenuItem>
|
<PluginSidebar
|
name="metadata-sidebar"
|
icon={<JVIcon /> }
|
title="Fields"
|
>
|
<PanelBody title="Book details" initialOpen={ true }>
|
<PanelRow>
|
<TextControl
|
value={ metaFields._meta_fields_book_title }
|
label={ __( "Title" ) }
|
onChange={ (value) => setMetaFields( { _meta_fields_book_title: value } ) }
|
/>
|
</PanelRow>
|
<PanelRow>
|
<TextControl
|
value={ metaFields._meta_fields_book_author }
|
label={ __("Author", "textdomain") }
|
onChange={ (value) => setMetaFields( { _meta_fields_book_author: value } ) }
|
/>
|
</PanelRow>
|
<PanelRow>
|
<TextControl
|
value={ metaFields._meta_fields_book_publisher }
|
label={ __("Publisher", "textdomain") }
|
onChange={ (value) => setMetaFields( { _meta_fields_book_publisher: value } ) }
|
/>
|
</PanelRow>
|
<PanelRow>
|
<DateTimePicker
|
currentDate={ metaFields._meta_fields_book_date }
|
onChange={ ( newDate ) => setMetaFields( { _meta_fields_book_date: newDate } ) }
|
__nextRemoveHelpButton
|
__nextRemoveResetButton
|
/>
|
</PanelRow>
|
</PanelBody>
|
</PluginSidebar>
|
</>
|
)
|
}
|
|
const applyWithSelect = withSelect( ( select ) => {
|
return {
|
metaFields: select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
|
postType: select( 'core/editor' ).getCurrentPostType()
|
};
|
} );
|
|
const applyWithDispatch = withDispatch( ( dispatch ) => {
|
return {
|
setMetaFields ( newValue ) {
|
dispatch('core/editor').editPost( { meta: newValue } )
|
}
|
}
|
} );
|
|
export default compose([
|
applyWithSelect,
|
applyWithDispatch
|
])(SidePanel);
|
