WP Custom Gutenberg Blocks Boilerplate is a starter WordPress plugin to develop Custom WordPress Gutenberg Blocks.
WP Custom Gutenberg Blocks Boilerplateis a starter WordPress plugin to develop Custom WordPress Gutenberg Blocks. The started plugin is created from WP React Plugin Boilerplate, in addition it adds ability to add custom Gutenberg Blocks.
Upload the plugin files to the /wp-content/plugins/wp-custom-gutenberg-blocks-boilerplate directory, or install the plugin through the WordPress plugins screen directly
You need to rename the plugin folder name and files name. Also need to rename constants, variables, classes , text-domain, and functions inside of it to fit your needs. For example, if your plugin is named my-custom-blocks then:
- rename folder from
wp-custom-gutenberg-blocks-boilerplatetomy-custom-blocks - rename all files from
wp-custom-gutenberg-blocks-boilerplatetomy-custom-blocksPHP,JS and CSS - change
wp_custom_gutenberg_blocks_boilerplatetomy_custom_blocks - change
wp-custom-gutenberg-blocks-boilerplatetomy-custom-blocks - change
Wp_Custom_Gutenberg_Blocks_BoilerplatetoMy_Custom_Blocks - change
WP_CUSTOM_GUTENBERG_BLOCKS_BOILERPLATEtoMY_CUSTOM_BLOCKS
It's safe to activate the plugin at this point. Activate the plugin through the 'Plugins' screen in WordPress
WP Custom Gutenberg Blocks Boilerplate Folder Information
INSIDE: /wp-installatioon-folder/wp-content/plugins/your-renamed-plugin-folder
├── .gitignore
├── index.php
├── LICENSE.txt
├── package.json
├── readme.md
├── README.txt
├── uninstall.php
├── your-renamed-plugin.php
|
├── admin
| | ├── class-your-renamed-plugin-admin.php
| | └── index.php
| |
| └── partials
| └── your-renamed-plugin-admin-display.php
|
├── assets
| └── library
| └── at-grid (folder and css)
|
├── build(auto created via NPM)
| ├── admin
| ├── blocks
| └── public
|
├── includes
| ├── class-your-renamed-plugin.php
| ├── class-your-renamed-plugin-activator.php
| ├── class-your-renamed-plugin-deactivator.php
| ├── class-your-renamed-plugin-i18n.php
| ├── class-your-renamed-plugin-include.php
| ├── class-your-renamed-plugin-loader.php
| ├── functions.php
| └── index.php
|
├── languages
| └── your-renamed-plugin.pot
|
├── public
| | ├── class-your-renamed-plugin-public.php
| | └── index.php
| |
| ├── css
| | └── your-renamed-plugin-public.css
| |
| ├── js
| | └── your-renamed-plugin-public.js
| |
| └── partials
| └── your-renamed-plugin-public-display.php
|
└── src
├── admin
| └── settings
| ├── atoms
| | ├── nav.js
| | └── save-btn.js
| ├── molecules
| | ├── navlist.js
| | └── notice.js
| ├── organisms
| | ├── footer.js
| | └── header.js
| ├── pages
| | ├── advanced.js
| | └── general.js
| ├── utils
| | └── get-nav.js
| ├── routes.js
| └── style.scss
|
├── api
| └── settings.js
|
├── blocks
| ├── step-1-intro
| | ├── blocks.json
| | ├── edit.js
| | ├── index.js
| | └── save.js
| ├── step-2-styles-scripts
| | ├── blocks.json
| | ├── edit.js
| | ├── editor.scss
| | ├── index.js
| | ├── save.js
| | └── style.scss
| ├── step-3-block-controls
| | ├── atoms
| | | └── block-conrols-customization.js
| | ├── utils
| | | └── dynamic-css.js
| | ├── blocks.json
| | ├── edit.js
| | ├── index.js
| | └── save.js
| ├── step-4-normal-block
| | ├── blocks.json
| | ├── edit.js
| | ├── index.js
| | └── save.js
| ├── step-5-inner-block
| | ├── blocks.json
| | ├── edit.js
| | ├── index.js
| | └── save.js
| ├──step-6-dynamic-block
| | ├── blocks.json
| | ├── edit.js
| | ├── index.js
| | └── index.php
| ├── step-7-provides-context
| | ├── blocks.json
| | ├── edit.js
| | ├── index.js
| | └── save.js
| ├── step-8-uses-context
| | ├── blocks.json
| | ├── edit.js
| | ├── index.js
| | └── save.js
| ├── step-9-transforms
| | ├── blocks.json
| | ├── edit.js
| | ├── index.js
| | ├── save.js
| | └── transforms.js
| ├── step-10-deprecated
| | ├── blocks.json
| | ├── block-deprecated.json
| | ├── deprecated.js
| | ├── edit.js
| | ├── edit-deprecated.js
| | ├── index.js
| | ├── index-deprecated.js
| | ├── save.js
| | └── save-deprecated.js
| └── step-10-deprecated
| ├── blocks.json
| ├── edit.js
| ├── index.js
| └── save.js
|
├── context
| └── SettingsContext.js
├── reducer
| └── settings-reducer.js
|
└── settings.js Don't have Node.js + npm installed? You have to install them first. (CLICK TO EXPAND)
Go to the Node's site download + install Node on your system. This will install both Node.js and npm, i.e., node package manager — the command line interface of Node.js.
You can verify the install by opening your terminal app and typing...
node -v
# Results into 7.19.1 — or installed version.
npm -v
# Results into v14.15.1 — or installed version.Follow the following steps to add your functionalities to the plugin:
- Navigate to plugin files
/wp-content/plugins/your-renamed-plugin-folder, open terminal app. - Run the
npm installcommand to install npm dependencies, wait sometimes to complete it. - Run the
npm run packages-updatecommand to update the package. - Run
npm run startcommand to initialize development of React JS, Development can be done any time. Use it in the development environment. - Run the
npm run buildcommand to finalize the development and be ready for production. The command creates production files. After building the production file move it to the production level.
Go to WordPress Dashboard => React Settings and View the Default Settings of the Plugin.
- Initial Release
- GPLv2 or later © Santosh Kunwar.
I would like to thanks all the React.js team, Gutenberg Team, WordPress Core Contributors, WordPress Plugin Boilerplate teams and My friends to motivate me to create the starter plugin.
I just love WordPress more…
WordPress Profile
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent