Problem rich text component block

block.js

/**
2	 * BLOCK: wpt
3	 *
4	 * Registering a basic block with Gutenberg.
5	 * Simple block, renders and saves the same content without any interactivity.
6	 */
7	
8	//  Import CSS.
9	import './style.scss';
10	import './editor.scss';
11	
12	const { __ } = wp.i18n; // Import __() from wp.i18n
13	const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
14	
15	/**
16	 * Register: aa Gutenberg Block.
17	 *
18	 * Registers a new block provided a unique name and an object defining its
19	 * behavior. Once registered, the block is made editor as an option to any
20	 * editor interface where blocks are implemented.
21	 *
22	 * @link https://wordpress.org/gutenberg/handbook/block-api/
23	 * @param  {string}   name     Block name.
24	 * @param  {Object}   settings Block settings.
25	 * @return {?WPBlock}          The block, if it has been successfully
26	 *                             registered; otherwise `undefined`.
27	 */
28	registerBlockType( 'wp4toastmasters/agendanote', {
29	        // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
30	        title: __( 'Toastmasters Agenda Note' ), // Block title.
31	        icon: 'admin-comments', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
32	        category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
33	        keywords: [
34	                __( 'Toastmasters' ),
35	                __( 'Agenda' ),
36	                __( 'Rich Text' ),
37	        ],
38	attributes: {
39	        content: {
40	            type: 'array',
41	            source: 'children',
42	            selector: 'p',
43	        },
44	        time_allowed: {
45	            type: 'string',
46	            default: '',
47	        },
48	    },
49	
50	    edit: function( props ) {   
51	
52	        const { attributes: { time_allowed, content }, setAttributes, isSelected } = props;
53	       
54	        function setTime( event ) {
55	                const selected = event.target.querySelector( '#time_allowed option:checked' );
56	                setAttributes( { time_allowed: selected.value } );
57	                event.preventDefault();
58	        }               
59	               
60	        function getRichText () {
61	        return wp.element.createElement( wp.editor.RichText, {
62	            tagName: 'p',
63	            className: props.className,
64	            value: props.attributes.content,
65	            onChange: function( content ) {
66	                props.setAttributes( { content: content } );
67	            }
68	        } );           
69	        }
70	
71	function showForm () {
72	if(!isSelected)
73	        return (<em> Click to edit </em>);
74	return (<form onSubmit={ setTime } >
75	                        <p><em>The text you enter below will appear on the agenda only</em></p>
76	                        { getRichText() }
77	<div>                   <label>Time Allowed:</label> <select id="time_allowed"  value={ time_allowed } onChange={ setTime }>
78	                                                <option value="">Not Set</option>
79	<option value="1">1</option>
80	<option value="2">2</option>
81	<option value="3">3</option>
82	<option value="4">4</option>
83	<option value="5">5</option>
84	<option value="6">6</option>
85	<option value="7">7</option>
86	<option value="8">8</option>
87	<option value="9">9</option>
88	<option value="10">10</option>
89	<option value="11">11</option>
90	<option value="12">12</option>
91	<option value="13">13</option>
92	<option value="14">14</option>
93	<option value="15">15</option>
94	<option value="16">16</option>
95	<option value="17">17</option>
96	<option value="18">18</option>
97	<option value="19">19</option>
98	<option value="20">20</option>
99	<option value="21">21</option>
100	<option value="22">22</option>
101	<option value="23">23</option>
102	<option value="24">24</option>
103	<option value="25">25</option>
104	<option value="26">26</option>
105	<option value="27">27</option>
106	<option value="28">28</option>
107	<option value="29">29</option>
108	<option value="30">30</option>
109	<option value="31">31</option>
110	<option value="32">32</option>
111	<option value="33">33</option>
112	<option value="34">34</option>
113	<option value="35">35</option>
114	<option value="36">36</option>
115	<option value="37">37</option>
116	<option value="38">38</option>
117	<option value="39">39</option>
118	<option value="40">40</option>
119	<option value="41">41</option>
120	<option value="42">42</option>
121	<option value="43">43</option>
122	<option value="44">44</option>
123	<option value="45">45</option>
124	<option value="46">46</option>
125	<option value="47">47</option>
126	<option value="48">48</option>
127	<option value="49">49</option>
128	<option value="50">50</option>
129	<option value="51">51</option>
130	<option value="52">52</option>
131	<option value="53">53</option>
132	<option value="54">54</option>
133	<option value="55">55</option>
134	<option value="56">56</option>
135	<option value="57">57</option>
136	<option value="58">58</option>
137	<option value="59">59</option>
138	<option value="60">59</option>
139	</select> minutes
140	<br /><em>Example: For stage directions like, "Here, we take a 5 minute break," you would set this to 5.</em>
141	</div>
142	</form>);
143	}
144	       
145	        return (<div className={ props.className }>
146	                                <strong>Toastmasters Agenda Note</strong> {!isSelected && content}
147	                {showForm()}
148	                        </div>
149	);
150	       
151	    },
152	    save: function(props) {
153	    return (<div><p class="agenda_note" maxtime={props.attributes.time_allowed}>{props.attributes.content}</p></div>);
154	    }
155	} ); 
156	
157	registerBlockType( 'wp4toastmasters/signupnote', {
158	        // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
159	        title: __( 'Toastmasters Signup Form Note' ), // Block title.
160	        icon: 'admin-comments', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
161	        category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
162	        keywords: [
163	                __( 'Toastmasters' ),
164	                __( 'Signup' ),
165	                __( 'Rich Text' ),
166	        ],
167	attributes: {
168	        content: {
169	            type: 'array',
170	            source: 'children',
171	            selector: 'p',
172	        },
173	    },
174	
175	    edit: function( props ) {   
176	
177	        const { attributes: { content }, setAttributes, isSelected } = props;
178	       
179	        function getRichText () {
180	        return wp.element.createElement( wp.editor.RichText, {
181	            tagName: 'p',
182	            className: props.className,
183	            value: props.attributes.content,
184	            onChange: function( content ) {
185	                props.setAttributes( { content: content } );
186	            }
187	        } );           
188	        }
189	
190	function showForm () {
191	if(!isSelected)
192	        return (<em> Click to edit </em>);
193	return (<form >
194	                        <p><em>The text you enter below will appear on the signup form only (not the agenda)</em></p>
195	                        { getRichText() }
196	</form>);
197	}
198	               
199	        return (<div className={ props.className }>
200	                                <strong>Toastmasters Signup Form Note</strong> {!isSelected && content}
201	                {showForm()}
202	                        </div>
203	);
204	       
205	    },
206	    save: function(props) {
207	       
208	    return (<div><p class="signup_note">{props.attributes.content}</p></div>);
209	    }
210	} );