edit.js
51 lines
| 1 | import { Notice, Spinner, PanelBody, TextControl, SelectControl } from '@wordpress/components'; |
| 2 | import { __ } from '@wordpress/i18n'; |
| 3 | import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; |
| 4 | import ServerSideRender from '@wordpress/server-side-render'; |
| 5 | |
| 6 | export default function Edit( { attributes, setAttributes } ) { |
| 7 | // attributes |
| 8 | const { postID, period } = attributes; |
| 9 | |
| 10 | // spinner |
| 11 | const spinner = () => { |
| 12 | return <Spinner />; |
| 13 | } |
| 14 | |
| 15 | const error = ( value ) => { |
| 16 | return <Notice status="error">{ __( 'Something went wrong. Try again or refresh the page.', 'post-views-counter' ) }</Notice>; |
| 17 | } |
| 18 | |
| 19 | return ( |
| 20 | <> |
| 21 | <InspectorControls> |
| 22 | <PanelBody title={ __( 'Settings', 'post-views-counter' ) }> |
| 23 | <TextControl |
| 24 | __nextHasNoMarginBottom |
| 25 | label={ __( 'Post ID', 'post-views-counter' ) } |
| 26 | value={ postID } |
| 27 | onChange={ ( value ) => setAttributes( { postID: Number( value ) } ) } |
| 28 | help={ __( 'Enter 0 to use current visited post.', 'post-views-counter' ) } |
| 29 | /> |
| 30 | <SelectControl |
| 31 | __nextHasNoMarginBottom |
| 32 | disabled={ pvcBlockEditorData.periods.length === 1 } |
| 33 | label={ __( 'Views period', 'post-views-counter' ) } |
| 34 | value={ period } |
| 35 | options={ pvcBlockEditorData.periods } |
| 36 | onChange={ ( value ) => setAttributes( { period: value } ) } |
| 37 | /> |
| 38 | </PanelBody> |
| 39 | </InspectorControls> |
| 40 | <div { ...useBlockProps() }> |
| 41 | <ServerSideRender |
| 42 | httpMethod="POST" |
| 43 | block="post-views-counter/post-views" |
| 44 | attributes={ attributes } |
| 45 | LoadingResponsePlaceholder={ spinner } |
| 46 | ErrorResponsePlaceholder={ error } |
| 47 | /> |
| 48 | </div> |
| 49 | </> |
| 50 | ) |
| 51 | } |