This document outlines guidelines for adding additional blocks to the GiveWP plugin.

The following outlines the files and directory structure:

├── blocks
│   ├── components
│   │   ├── my-component
│   │   │   ├── index.js
│   │   │   ├── style.scss
│   │   │   ├── REAMDE.md                
│   ├── my-block
│   │   ├── data
│   │   │   ├── attributes.js
│   │   │   ├── icons.js
│   │   │   ├── options.js
│   │   ├── edit
│   │   │   ├── block.js
│   │   │   ├── controls.js
│   │   │   ├── inspector.js
│   │   ├── class-my-block.php
│   │   ├── index.js
│   │   ├── style.scss
└── load.js

This is the main entry file responsible for loading various blocks, each new block needs to be added here.

import '/my-block/index'

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.

📂 my-component

Each component will be organized in its parent folder to hold various files: page_facing_up: & folder.

Following outlines the possible structure.

├── my-component
│   ├── index.js
│   ├── style.scss
│   ├── REAMDE.md  

📄 index.js

This is the main script building the component. A component can be made of a single file or multiple files. In the case that the component is more complex it can be split across files and index.js serves as a loader.

📄 style.scss

All the styling required by the component.

📄 README.md

Each component added should ship the documentation stating usage and at least one example.

This directory includes all the files that makeup a block.

The following outlines the possible structure.

├── my-block
│   ├── data
│   │   ├── attributes.js
│   │   ├── icons.js
│   │   ├── options.js
│   ├── edit
│   │   ├── block.js
│   │   ├── controls.js
│   │   ├── inspector.js
│   ├── class-my-block.php
│   ├── index.js
│   ├── style.scss 

📂 data

Various files for data that can be used across the block.

📄 attributes.js

To keep code modular and avoid one huge fat file block attributes can be extracted to its own file.

📄 icon(s).js

Svg icon data object for block

📄 options.js

array/object for dropdown(s)

📂 data

Various files for edit UI of block

📄 block.js

Main block component class or render function for edit UI.

📄 controls.js

BlockControls extracted to files as wrapper component.

📄 inspector.js

Inspector controls extracted to files as wrapper component.

Based on the requirement this may contain other files & folders.