| 1 |
const { __ } = wp.i18n; |
| 2 |
|
| 3 |
const { Fragment } = wp.element; |
| 4 |
const { PluginSidebar, PluginSidebarMoreMenuItem } = wp.editPost; |
| 5 |
const { compose } = wp.compose; |
| 6 |
const { withSelect, withDispatch } = wp.data; |
| 7 |
const { Panel, PanelBody, Button, withFocusReturn, TextControl, SelectControl } = wp.components; |
| 8 |
const { registerPlugin } = wp.plugins; |
| 9 |
|
| 10 |
// Backwards compatibility. |
| 11 |
let MediaUpload; |
| 12 |
if ( wp.hasOwnProperty( 'blockEditor' ) ) { |
| 13 |
MediaUpload = wp.blockEditor.MediaUpload; |
| 14 |
} else { |
| 15 |
MediaUpload = wp.editor.MediaUpload; |
| 16 |
} |
| 17 |
|
| 18 |
import '../../../css/blocks/sidebar.scss'; |
| 19 |
|
| 20 |
function Sidebar( props ) { |
| 21 |
return ( |
| 22 |
<Fragment> |
| 23 |
<PluginSidebarMoreMenuItem |
| 24 |
target="sidebar-wp-ultimate-post-grid" |
| 25 |
icon="grid-view" |
| 26 |
> |
| 27 |
WP Ultimate Post Grid |
| 28 |
</PluginSidebarMoreMenuItem> |
| 29 |
<PluginSidebar |
| 30 |
name="sidebar-wp-ultimate-post-grid" |
| 31 |
title="WP Ultimate Post Grid" |
| 32 |
icon="grid-view" |
| 33 |
> |
| 34 |
<Panel> |
| 35 |
<PanelBody title={ __( 'Custom Grid Link' ) }> |
| 36 |
<TextControl |
| 37 |
label={ __( 'Custom Link URL' ) } |
| 38 |
value={ props.link } |
| 39 |
onChange={ ( value ) => props.onChangeMeta( { wpupg_custom_link: [value] } ) } |
| 40 |
/> |
| 41 |
<SelectControl |
| 42 |
label={ __( 'Custom Link Behaviour' ) } |
| 43 |
value={ props.linkBehaviour } |
| 44 |
options={[ |
| 45 |
{ value: 'default', label: __( 'Use grid default' ) }, |
| 46 |
{ value: '_self', label: __( 'Open in same tab' ) }, |
| 47 |
{ value: '_blank', label: __( 'Open in new tab' ) }, |
| 48 |
{ value: 'none', label: __( "Don't use links" ) }, |
| 49 |
]} |
| 50 |
onChange={ ( value ) => props.onChangeMeta( { wpupg_custom_link_behaviour: [value] } ) } |
| 51 |
/> |
| 52 |
<SelectControl |
| 53 |
label={ __( 'Custom Link Nofollow' ) } |
| 54 |
value={ props.linkNofollow } |
| 55 |
options={[ |
| 56 |
{ value: 'default', label: __( 'Use default from settings' ) }, |
| 57 |
{ value: 'dofollow', label: __( 'Use a regular dofollow link' ) }, |
| 58 |
{ value: 'nofollow', label: __( 'Add the rel="nofollow" attribute' ) }, |
| 59 |
]} |
| 60 |
onChange={ ( value ) => props.onChangeMeta( { wpupg_custom_link_nofollow: [value] } ) } |
| 61 |
/> |
| 62 |
</PanelBody> |
| 63 |
<PanelBody title={ __( 'Custom Grid Image' ) }> |
| 64 |
<TextControl |
| 65 |
label={ __( 'Custom Image URL' ) } |
| 66 |
value={ props.image } |
| 67 |
onChange={ ( value ) => props.onChangeMeta( { wpupg_custom_image: [value], wpupg_custom_image_id: [0] } ) } |
| 68 |
/> |
| 69 |
<TextControl |
| 70 |
label={ __( 'Custom Image ID' ) } |
| 71 |
value={ props.imageId ? props.imageId : '' } |
| 72 |
disabled |
| 73 |
/> |
| 74 |
<MediaUpload |
| 75 |
onSelect={ |
| 76 |
( media ) => { |
| 77 |
props.onChangeMeta( { wpupg_custom_image: [media.url], wpupg_custom_image_id: [media.id] } ); |
| 78 |
} |
| 79 |
} |
| 80 |
type="image" |
| 81 |
value={ props.imageId } |
| 82 |
render={ ( { open } ) => ( |
| 83 |
<Button |
| 84 |
variant="secondary" |
| 85 |
onClick={ open } |
| 86 |
>{ __( 'Choose Image' ) }</Button> |
| 87 |
) } |
| 88 |
/> |
| 89 |
{ |
| 90 |
props.image |
| 91 |
? |
| 92 |
<img |
| 93 |
className="wpupg-sidebar-custom-image-preview" |
| 94 |
src={ props.image } |
| 95 |
/> |
| 96 |
: |
| 97 |
null |
| 98 |
} |
| 99 |
</PanelBody> |
| 100 |
</Panel> |
| 101 |
</PluginSidebar> |
| 102 |
</Fragment> |
| 103 |
) |
| 104 |
} |
| 105 |
|
| 106 |
const applyWithSelect = withSelect( ( select, ownProps ) => { |
| 107 |
const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' ); |
| 108 |
|
| 109 |
if ( ! meta ) { |
| 110 |
return {}; |
| 111 |
} |
| 112 |
|
| 113 |
const linkMeta = meta[ 'wpupg_custom_link' ]; |
| 114 |
const link = linkMeta instanceof Array ? linkMeta[0] : linkMeta; |
| 115 |
|
| 116 |
const linkBehaviourMeta = meta[ 'wpupg_custom_link_behaviour' ]; |
| 117 |
const linkBehaviour = linkBehaviourMeta instanceof Array ? linkBehaviourMeta[0] : linkBehaviourMeta; |
| 118 |
|
| 119 |
const linkNofollowMeta = meta[ 'wpupg_custom_link_nofollow' ]; |
| 120 |
const linkNofollow = linkNofollowMeta instanceof Array ? linkNofollowMeta[0] : linkNofollowMeta; |
| 121 |
|
| 122 |
const imageMeta = meta[ 'wpupg_custom_image' ]; |
| 123 |
const image = imageMeta instanceof Array ? imageMeta[0] : imageMeta; |
| 124 |
|
| 125 |
const imageIdMeta = meta[ 'wpupg_custom_image_id' ]; |
| 126 |
const imageId = imageIdMeta instanceof Array ? imageIdMeta[0] : imageIdMeta; |
| 127 |
|
| 128 |
return { |
| 129 |
meta, |
| 130 |
link, |
| 131 |
linkBehaviour, |
| 132 |
linkNofollow, |
| 133 |
image, |
| 134 |
imageId, |
| 135 |
} |
| 136 |
} ); |
| 137 |
|
| 138 |
const applyWithDispatch = withDispatch( ( dispatch, ownProps ) => { |
| 139 |
const { editPost } = dispatch( 'core/editor' ); |
| 140 |
|
| 141 |
return { |
| 142 |
onChangeMeta: ( fields ) => { |
| 143 |
let meta = { |
| 144 |
...ownProps.meta, |
| 145 |
...fields, |
| 146 |
}; |
| 147 |
|
| 148 |
return editPost( { meta } ); |
| 149 |
}, |
| 150 |
} |
| 151 |
} ); |
| 152 |
|
| 153 |
registerPlugin( 'wp-ultimate-post-grid', { |
| 154 |
render: compose( |
| 155 |
applyWithSelect, |
| 156 |
applyWithDispatch, |
| 157 |
withFocusReturn |
| 158 |
)( Sidebar ), |
| 159 |
} ); |
