1 |
|
2 |
|
3 |
|
4 | import { Component, Fragment } from '@wordpress/element';
|
5 | import {
|
6 | Button,
|
7 | Disabled,
|
8 | PanelBody,
|
9 | Placeholder,
|
10 | RangeControl,
|
11 | ServerSideRender,
|
12 | TextControl,
|
13 | ToggleControl,
|
14 | Toolbar,
|
15 | } from '@wordpress/components';
|
16 | import { __ } from '@wordpress/i18n';
|
17 | import {
|
18 | BlockControls,
|
19 | InspectorControls,
|
20 | } from '@wordpress/block-editor';
|
21 |
|
22 | const DEFAULT_MIN_ITEMS = 1;
|
23 | const DEFAULT_MAX_ITEMS = 10;
|
24 |
|
25 | class RSSEdit extends Component {
|
26 | constructor() {
|
27 | super( ...arguments );
|
28 |
|
29 | this.state = {
|
30 | editing: ! this.props.attributes.feedURL,
|
31 | };
|
32 |
|
33 | this.toggleAttribute = this.toggleAttribute.bind( this );
|
34 | this.onSubmitURL = this.onSubmitURL.bind( this );
|
35 | }
|
36 |
|
37 | toggleAttribute( propName ) {
|
38 | return () => {
|
39 | const value = this.props.attributes[ propName ];
|
40 | const { setAttributes } = this.props;
|
41 |
|
42 | setAttributes( { [ propName ]: ! value } );
|
43 | };
|
44 | }
|
45 |
|
46 | onSubmitURL( event ) {
|
47 | event.preventDefault();
|
48 |
|
49 | const { feedURL } = this.props.attributes;
|
50 | if ( feedURL ) {
|
51 | this.setState( { editing: false } );
|
52 | }
|
53 | }
|
54 |
|
55 | render() {
|
56 | const {
|
57 | blockLayout,
|
58 | columns,
|
59 | displayAuthor,
|
60 | displayExcerpt,
|
61 | displayDate,
|
62 | excerptLength,
|
63 | feedURL,
|
64 | itemsToShow,
|
65 | } = this.props.attributes;
|
66 | const { setAttributes } = this.props;
|
67 |
|
68 | if ( this.state.editing ) {
|
69 | return (
|
70 | <Placeholder
|
71 | icon="rss"
|
72 | label="RSS"
|
73 | >
|
74 | <form onSubmit={ this.onSubmitURL }>
|
75 | <TextControl
|
76 | placeholder={ __( 'Enter URL here…' ) }
|
77 | value={ feedURL }
|
78 | onChange={ ( value ) => setAttributes( { feedURL: value } ) }
|
79 | className={ 'components-placeholder__input' }
|
80 | />
|
81 | <Button isLarge type="submit">
|
82 | { __( 'Use URL' ) }
|
83 | </Button>
|
84 | </form>
|
85 | </Placeholder>
|
86 | );
|
87 | }
|
88 |
|
89 | const toolbarControls = [
|
90 | {
|
91 | icon: 'edit',
|
92 | title: __( 'Edit RSS URL' ),
|
93 | onClick: () => this.setState( { editing: true } ),
|
94 | },
|
95 | {
|
96 | icon: 'list-view',
|
97 | title: __( 'List View' ),
|
98 | onClick: () => setAttributes( { blockLayout: 'list' } ),
|
99 | isActive: blockLayout === 'list',
|
100 | },
|
101 | {
|
102 | icon: 'grid-view',
|
103 | title: __( 'Grid View' ),
|
104 | onClick: () => setAttributes( { blockLayout: 'grid' } ),
|
105 | isActive: blockLayout === 'grid',
|
106 | },
|
107 | ];
|
108 |
|
109 | return (
|
110 | <Fragment>
|
111 | <BlockControls>
|
112 | <Toolbar controls={ toolbarControls } />
|
113 | </BlockControls>
|
114 | <InspectorControls>
|
115 | <PanelBody title={ __( 'RSS Settings' ) }>
|
116 | <RangeControl
|
117 | label={ __( 'Number of items' ) }
|
118 | value={ itemsToShow }
|
119 | onChange={ ( value ) => setAttributes( { itemsToShow: value } ) }
|
120 | min={ DEFAULT_MIN_ITEMS }
|
121 | max={ DEFAULT_MAX_ITEMS }
|
122 | required
|
123 | />
|
124 | <ToggleControl
|
125 | label={ __( 'Display author' ) }
|
126 | checked={ displayAuthor }
|
127 | onChange={ this.toggleAttribute( 'displayAuthor' ) }
|
128 | />
|
129 | <ToggleControl
|
130 | label={ __( 'Display date' ) }
|
131 | checked={ displayDate }
|
132 | onChange={ this.toggleAttribute( 'displayDate' ) }
|
133 | />
|
134 | <ToggleControl
|
135 | label={ __( 'Display excerpt' ) }
|
136 | checked={ displayExcerpt }
|
137 | onChange={ this.toggleAttribute( 'displayExcerpt' ) }
|
138 | />
|
139 | { displayExcerpt &&
|
140 | <RangeControl
|
141 | label={ __( 'Max number of words in excerpt' ) }
|
142 | value={ excerptLength }
|
143 | onChange={ ( value ) => setAttributes( { excerptLength: value } ) }
|
144 | min={ 10 }
|
145 | max={ 100 }
|
146 | required
|
147 | />
|
148 | }
|
149 | { blockLayout === 'grid' &&
|
150 | <RangeControl
|
151 | label={ __( 'Columns' ) }
|
152 | value={ columns }
|
153 | onChange={ ( value ) => setAttributes( { columns: value } ) }
|
154 | min={ 2 }
|
155 | max={ 6 }
|
156 | required
|
157 | />
|
158 | }
|
159 | </PanelBody>
|
160 | </InspectorControls>
|
161 | <Disabled>
|
162 | <ServerSideRender
|
163 | block="core/rss"
|
164 | attributes={ this.props.attributes }
|
165 | />
|
166 | </Disabled>
|
167 | </Fragment>
|
168 | );
|
169 | }
|
170 | }
|
171 |
|
172 | export default RSSEdit;
|