├── src
    ├── editor.scss
    ├── style.scss
    ├── index.js
    └── blocks
    │   └── container
    │       ├── style.scss
    │       ├── editor.scss
    │       └── index.js
├── .gitignore
├── package.json
├── plugin.php
└── webpack.config.js


/src/editor.scss:
--------------------------------------------------------------------------------
1 | @import "./blocks/container/editor.scss";
2 | 


--------------------------------------------------------------------------------
/src/style.scss:
--------------------------------------------------------------------------------
1 | @import "./blocks/container/style.scss";
2 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Internal dependencies
3 |  */
4 | 
5 | import './blocks/container';
6 | 


--------------------------------------------------------------------------------
/src/blocks/container/style.scss:
--------------------------------------------------------------------------------
1 | .entry-content {
2 | 
3 | 	.wp-block-custom-block-container {
4 | 		padding: 30px 50px;
5 | 		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
6 | 	}
7 | }
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | **/*.min.js
 2 | **/*.build.js
 3 | **/*.build.css
 4 | **/node_modules/**
 5 | **/build/**
 6 | build
 7 | coverage
 8 | cypress
 9 | node_modules
10 | *.sublime-project
11 | *.sublime-workspace
12 | .DS_Store
13 | *.cache
14 | 
15 | 


--------------------------------------------------------------------------------
/src/blocks/container/editor.scss:
--------------------------------------------------------------------------------
1 | .wp-block[data-type="custom-block/container"] {
2 | 
3 | 	> .block-editor-block-list__block-edit {
4 | 		padding: 30px 50px;
5 | 		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
6 | 	}
7 | }
8 | 


--------------------------------------------------------------------------------
/src/blocks/container/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * WordPress dependencies
 3 |  */
 4 | const { __ } = wp.i18n;
 5 | const { registerBlockType } = wp.blocks;
 6 | const { InnerBlocks } = wp.blockEditor;
 7 | 
 8 | registerBlockType( 'custom-block/container', {
 9 | 	title: __( 'Custom Container' ),
10 | 
11 | 	description: __( 'Provide custom container.' ),
12 | 
13 | 	keywords: [
14 | 		__( 'container' ),
15 | 		__( 'wrapper' ),
16 | 		__( 'section' ),
17 | 	],
18 | 
19 | 	supports: {
20 | 		align: [ 'wide', 'full' ],
21 | 		anchor: true,
22 | 		html: false,
23 | 	},
24 | 
25 | 	category: 'common',
26 | 
27 | 	icon: 'editor-kitchensink',
28 | 
29 | 	attributes: {
30 | 		content: {
31 | 			type: 'string',
32 | 		},
33 | 	},
34 | 
35 | 	edit: ( props ) => {
36 | 		const { className } = props;
37 | 
38 | 		return (
39 | 			<div className={ className }>
40 | 				<InnerBlocks renderAppender={ InnerBlocks.ButtonBlockAppender } />
41 | 			</div>
42 | 		);
43 | 	},
44 | 
45 | 	save: ( props ) => {
46 | 		const { className } = props;
47 | 
48 | 		return (
49 | 			<div className={ className }>
50 | 				<InnerBlocks.Content />
51 | 			</div>
52 | 		);
53 | 	},
54 | } );
55 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-custom-block",
 3 |   "version": "1.0.0",
 4 |   "description": "Custom Block for tutorial purposes",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build": "wp-scripts build",
 8 |     "check-engines": "wp-scripts check-engines",
 9 |     "check-licenses": "wp-scripts check-licenses",
10 |     "lint:css": "wp-scripts lint-style",
11 |     "lint:js": "wp-scripts lint-js",
12 |     "lint:pkg-json": "wp-scripts lint-pkg-json",
13 |     "start": "wp-scripts start",
14 |     "test:e2e": "wp-scripts test-e2e",
15 |     "test:unit": "wp-scripts test-unit-js"
16 |   },
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git+https://github.com/phpbits/my-custom-block.git"
20 |   },
21 |   "keywords": [
22 |     "custom",
23 |     "gutenberg",
24 |     "block"
25 |   ],
26 |   "author": "phpbits",
27 |   "license": "ISC",
28 |   "bugs": {
29 |     "url": "https://github.com/phpbits/my-custom-block/issues"
30 |   },
31 |   "homepage": "https://github.com/phpbits/my-custom-block#readme",
32 |   "devDependencies": {
33 |     "@wordpress/scripts": "^3.4.0",
34 |     "css-loader": "^3.1.0",
35 |     "ignore-emit-webpack-plugin": "^2.0.2",
36 |     "mini-css-extract-plugin": "^0.8.0",
37 |     "node-sass": "^4.12.0",
38 |     "path": "^0.12.7",
39 |     "postcss-loader": "^3.0.0",
40 |     "postcss-preset-env": "^6.7.0",
41 |     "sass-loader": "^7.1.0"
42 |   },
43 |   "dependencies": {}
44 | }
45 | 


--------------------------------------------------------------------------------
/plugin.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Plugin Name: My Custom Block
 4 |  * Plugin URI: https://github.com/phpbits/my-custom-block
 5 |  * Description: Custom Gutenberg block for tutorial purposes
 6 |  * Version: 1.0
 7 |  * Author: Jeffrey Carandang
 8 |  * Author URI: https://jeffreycarandang.com/
 9 |  *
10 |  * @category Gutenberg
11 |  * @author Jeffrey Carandang
12 |  * @version 1.0
13 |  */
14 | 
15 | // Exit if accessed directly.
16 | if ( ! defined( 'ABSPATH' ) ) exit;
17 | 
18 | function my_custom_block_editor_assets(){
19 | 	$url = untrailingslashit( plugin_dir_url( __FILE__ ) );
20 | 	
21 |     // Scripts.
22 |     wp_enqueue_script(
23 |         'my-custom-block-js', // Handle.
24 |         $url . '/build/index.js',
25 |         array( 'wp-blocks', 'wp-i18n', 'wp-element' )
26 |     );
27 | 
28 |     // Styles.
29 |     wp_enqueue_style(
30 |         'my-custom-block-editor-css', // Handle.
31 |         $url . '/build/editor.css',
32 |         array( 'wp-edit-blocks' )
33 |     );
34 | 
35 | } // End function my_custom_block_editor_assets().
36 | 
37 | // Hook: Editor assets.
38 | add_action( 'enqueue_block_editor_assets', 'my_custom_block_editor_assets' );
39 | 
40 | function my_custom_block_assets(){
41 | 	$url = untrailingslashit( plugin_dir_url( __FILE__ ) );
42 | 	
43 | 	wp_enqueue_style(
44 |         'my-custom-block-frontend-css', // Handle.
45 |         $url . '/build/style.css'
46 |     );
47 | }
48 | 
49 | // Hook: Frontend assets.
50 | add_action( 'enqueue_block_assets', 'my_custom_block_assets' );


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const defaultConfig = require( './node_modules/@wordpress/scripts/config/webpack.config.js' );
 2 | const path = require( 'path' );
 3 | const postcssPresetEnv = require( 'postcss-preset-env' );
 4 | const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 5 | const IgnoreEmitPlugin = require( 'ignore-emit-webpack-plugin' );
 6 | 
 7 | const production = process.env.NODE_ENV === '';
 8 | 
 9 | module.exports = {
10 | 	...defaultConfig,
11 | 	entry: {
12 | 		index: path.resolve( process.cwd(), 'src', 'index.js' ),
13 | 		style: path.resolve( process.cwd(), 'src', 'style.scss' ),
14 | 		editor: path.resolve( process.cwd(), 'src', 'editor.scss' ),
15 | 	},
16 | 	optimization: {
17 | 		...defaultConfig.optimization,
18 | 		splitChunks: {
19 | 			cacheGroups: {
20 | 				editor: {
21 | 					name: 'editor',
22 | 					test: /editor\.(sc|sa|c)ss$/,
23 | 					chunks: 'all',
24 | 					enforce: true,
25 | 				},
26 | 				style: {
27 | 					name: 'style',
28 | 					test: /style\.(sc|sa|c)ss$/,
29 | 					chunks: 'all',
30 | 					enforce: true,
31 | 				},
32 | 				default: false,
33 | 			},
34 | 		},
35 | 	},
36 | 	module: {
37 | 		...defaultConfig.module,
38 | 		rules: [
39 | 			...defaultConfig.module.rules,
40 | 			{
41 | 				test: /\.(sc|sa|c)ss$/,
42 | 				exclude: /node_modules/,
43 | 				use: [
44 | 					{
45 | 						loader: MiniCssExtractPlugin.loader,
46 | 					},
47 | 					{
48 | 						loader: 'css-loader',
49 | 						options: {
50 | 							sourceMap: ! production,
51 | 						},
52 | 					},
53 | 					{
54 | 						loader: 'sass-loader',
55 | 						options: {
56 | 							sourceMap: ! production,
57 | 						},
58 | 					},
59 | 					{
60 | 						loader: 'postcss-loader',
61 | 						options: {
62 | 							ident: 'postcss',
63 | 							plugins: () => [
64 | 								postcssPresetEnv( {
65 | 									stage: 3,
66 | 									features: {
67 | 										'custom-media-queries': {
68 | 											preserve: false,
69 | 										},
70 | 										'custom-properties': {
71 | 											preserve: true,
72 | 										},
73 | 										'nesting-rules': true,
74 | 									},
75 | 								} ),
76 | 							],
77 | 						},
78 | 					},
79 | 				],
80 | 			},
81 | 		],
82 | 	},
83 | 	plugins: [
84 | 		...defaultConfig.plugins,
85 | 		new MiniCssExtractPlugin( {
86 | 			filename: '[name].css',
87 | 		} ),
88 | 		new IgnoreEmitPlugin( [ 'editor.js', 'style.js' ] ),
89 | 	],
90 | };
91 | 


--------------------------------------------------------------------------------