components
6 years ago
donation-form
6 years ago
donation-form-grid
6 years ago
donor-wall
6 years ago
utils
7 years ago
README.md
8 years ago
load.js
7 years ago
load.php
6 years ago
README.md
127 lines
| 1 | Blocks |
| 2 | ======= |
| 3 | |
| 4 | Want to add new blocks to Give this document outlines guidelines for the same. |
| 5 | |
| 6 | |
| 7 | ## Structure |
| 8 | |
| 9 | Following outlines the files & folders |
| 10 | |
| 11 | ``` |
| 12 | ├── blocks |
| 13 | │ ├── components |
| 14 | │ │ ├── my-component |
| 15 | │ │ │ ├── index.js |
| 16 | │ │ │ ├── style.scss |
| 17 | │ │ │ ├── REAMDE.md |
| 18 | │ ├── my-block |
| 19 | │ │ ├── data |
| 20 | │ │ │ ├── attributes.js |
| 21 | │ │ │ ├── icons.js |
| 22 | │ │ │ ├── options.js |
| 23 | │ │ ├── edit |
| 24 | │ │ │ ├── block.js |
| 25 | │ │ │ ├── controls.js |
| 26 | │ │ │ ├── inspector.js |
| 27 | │ │ ├── class-my-block.php |
| 28 | │ │ ├── index.js |
| 29 | │ │ ├── style.scss |
| 30 | └── load.js |
| 31 | ``` |
| 32 | |
| 33 | ## :page_facing_up: load.js |
| 34 | |
| 35 | Main entry file responsible for loading various blocks, each new block needs to be added here. |
| 36 | |
| 37 | ### example |
| 38 | |
| 39 | ``` |
| 40 | import '/my-block/index' |
| 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 is 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 | Its the main file building the component, a component can be made of a single file or multiple files. |
| 62 | In case the component is 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 & example. |
| 71 | |
| 72 | ## :open_file_folder: my-block |
| 73 | |
| 74 | This directory includes all the files that makeup block. |
| 75 | |
| 76 | 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 may contain other files & folder. |