README.md — GiveWP – Donation Plugin and Fundraising Platform 2.7.2

give / blocks / README.md

give / blocks Last commit date

components 6 years ago donation-form 6 years ago donation-form-grid 6 years ago donor-wall 5 years ago utils 6 years ago README.md 6 years ago load.js 7 years ago load.php 6 years ago

README.md

128 lines

1	Blocks
2	=======
3
4	This document outlines guidelines for adding additional blocks to the GiveWP plugin.
5
6	## Structure
7
8	The following outlines the files and directory structure:
9
10	```
11	├── blocks
12	│ ├── components
13	│ │ ├── my-component
14	│ │ │ ├── index.js
15	│ │ │ ├── style.scss
16	│ │ │ ├── REAMDE.md
17	│ ├── my-block
18	│ │ ├── data
19	│ │ │ ├── attributes.js
20	│ │ │ ├── icons.js
21	│ │ │ ├── options.js
22	│ │ ├── edit
23	│ │ │ ├── block.js
24	│ │ │ ├── controls.js
25	│ │ │ ├── inspector.js
26	│ │ ├── class-my-block.php
27	│ │ ├── index.js
28	│ │ ├── style.scss
29	└── load.js
30	```
31
32	## :page_facing_up: load.js
33
34	This is the main entry file responsible for loading various blocks, each new block needs to be added here.
35
36	### Example
37
38	```
39	import '/my-block/index'
40	```
41
42	## :open_file_folder: components
43
44	This directory includes a library of generic React components to be used for creating common UI elements shared between blocks. Identify and extract reusable components as much possible.
45
46	:open_file_folder: my-component
47
48	Each component will be organized in its parent folder to hold various files: page_facing_up: & folder.
49
50	Following outlines the possible structure.
51
52	```
53	├── my-component
54	│ ├── index.js
55	│ ├── style.scss
56	│ ├── REAMDE.md
57	```
58
59	:page_facing_up: index.js
60
61	This is the main script building the component. A component can be made of a single file or multiple files.
62	In the case that the component is more complex it can be split across files and index.js serves as a loader.
63
64	:page_facing_up: style.scss
65
66	All the styling required by the component.
67
68	:page_facing_up: README.md
69
70	Each component added should ship the documentation stating usage and at least one example.
71
72	## :open_file_folder: my-block
73
74	This directory includes all the files that makeup a block.
75
76	The following outlines the possible structure.
77
78	```
79	├── my-block
80	│ ├── data
81	│ │ ├── attributes.js
82	│ │ ├── icons.js
83	│ │ ├── options.js
84	│ ├── edit
85	│ │ ├── block.js
86	│ │ ├── controls.js
87	│ │ ├── inspector.js
88	│ ├── class-my-block.php
89	│ ├── index.js
90	│ ├── style.scss
91	```
92
93	:open_file_folder: data
94
95	Various files for data that can be used across the block.
96
97	:page_facing_up: attributes.js
98
99	To keep code modular and avoid one huge fat file block attributes can be extracted to its own file.
100
101	:page_facing_up: icon(s).js
102
103	Svg icon data object for block
104
105	:page_facing_up: options.js
106
107	array/object for dropdown(s)
108
109	:open_file_folder: data
110
111	Various files for edit UI of block
112
113	:page_facing_up: block.js
114
115	Main block component class or render function for edit UI.
116
117	:page_facing_up: controls.js
118
119	BlockControls extracted to files as wrapper component.
120
121	:page_facing_up: inspector.js
122
123	Inspector controls extracted to files as wrapper component.
124
125	## Note
126
127	Based on the requirement this may contain other files & folders.
128