Description

This plugin adds a custom Gutenberg blocks in the Gutenberg editor of your WordPress dashboard.

Installation 🔧

1. Download the zipped plugin. Unzip the plugin.

2. Navigate to the Plugins > Add new screen in your WordPress administrative dashboard.

3. Click Add New at the top of the page.

4. Click Upload Plugin at the top of the page.

5. Click Choose File, then find and Upload the downloaded renamed zip file.

6. After the plugin finishes installing, click Activate.

   or, Go to your plugin directory from terminal and Clone this repo in wp-content/plugins directory git clone https://github.com/imranhsayed/custom-blocks And then activate it from Plugins screen in your WordPress administrative dashboard.

7. That's it!

Configuration ( @wordpress/scripts )

• This plugin uses @wordpress/scripts which installs and sets up webpack and babel config out of the box
• The @wordpress/scripts is installed in the root of the project. This is one single plugin that registers many blocks.
• By default @wordpress/package uses src/index.js as entry point and build/index.js

Directory Structure

├── build
│   └── index.js
├── node_modules
├── package-lock.json
├── package.json
└── src
    ├── editor.css
    ├── index.js
    └── style.css
├── custom-functions.php
├── index.php						

Scripts

1. npm run start : will use the src/index.js as entry point and output it to build/index.js for development
2. npm run build : will use the src/index.js as entry point and output it to build/index.js for production

What is included in this plugin ?

• The plugin uses ReactJS & ESNext for creating custom gutenberg block, along with PHP
• It uses Webpack to bundle all of its dependencies into one file index.js
• Has separate stylesheet for front-end & editor.

Useful Blogs:

1. Create Gutenberg Block in 3 Steps
2. Custom Gutenberg Block with ES6
3. Attributes & Components

Gutenberg Handbook

1. Gutenberg Handbook

Gutenberg Tutorials

1. Introduction to Gutenberg
2. Create Gutenberg Block in 3 Steps
3. Custom Gutenberg Block using @wordpress/scripts
4. @wordpress/scripts package features
5. Attributes and Components | State

Gutenberg Talks

1. WordCamp Pune: Introduction to Gutenberg

How to use ?

• Go to WordPress Dashboard > Posts/Pages > Add New > Add block ( + icon ) > Common