Skip to content

Instantly share code, notes, and snippets.

@davidfcarr
Created August 6, 2018 23:00
Show Gist options
  • Save davidfcarr/3fd65a3c28e97d864a8381d922019d72 to your computer and use it in GitHub Desktop.
Save davidfcarr/3fd65a3c28e97d864a8381d922019d72 to your computer and use it in GitHub Desktop.
Problem rich text component block
/**
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 } );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment