Skip to content

Commit 05db4b5

Browse files
author
Ahmad Awais
committed
📦 NEW: Single + Multi Block Ejected Examples
1 parent 2ad9945 commit 05db4b5

67 files changed

Lines changed: 15539 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

examples/02-multi-block/.editorconfig renamed to examples/02-single-block-ejected/.editorconfig

File renamed without changes.

examples/02-multi-block/.eslintignore renamed to examples/02-single-block-ejected/.eslintignore

File renamed without changes.

examples/02-multi-block/.eslintrc.json renamed to examples/02-single-block-ejected/.eslintrc.json

File renamed without changes.

examples/02-multi-block/.gitignore renamed to examples/02-single-block-ejected/.gitignore

File renamed without changes.

‎examples/02-single-block-ejected/README.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# 🔰 EXAMPLE: Basic Single Block
2+
3+
>This project was bootstrapped with [Create Guten Block](https://github.com/ahmadawais/create-guten-block).
4+
5+
<br>
6+
7+
![WHAT ICON](http://on.ahmda.ws/oy8W/c)
8+
9+
### What/How?
10+
11+
This example includes a WordPress Gutenberg plugin called `single-block` which creates a Gutenberg block also called `single-block`.
12+
13+
👉 This example is created by running the following steps, that you can follow to build it on your own.
14+
15+
- [Install `create-guten-block` →](https://github.com/ahmadawais/create-guten-block#getting-started)
16+
- Run `create-guten-block single-block` command.
17+
18+
_That's about it._
19+
20+
>🌟 Star for updates [create-guten-block →](https://github.com/ahmadawais/create-guten-block) or to appreciate.
21+
22+
23+
<br>
24+
25+
![ELSE ICON](http://on.ahmda.ws/oykk/c)
26+
27+
### Everything Else
28+
29+
This project was bootstrapped with [Create Guten Block](https://github.com/ahmadawais/create-guten-block).
30+
31+
Below you will find some information on how to run scripts.
32+
33+
>You can find the most recent version of this guide [here](https://github.com/ahmadawais/create-guten-block).
34+
35+
## 👉 `npm start`
36+
- Use to compile and run the block in development mode.
37+
- Watches for any changes and reports back any errors in your code.
38+
39+
## 👉 `npm run build`
40+
- Use to build production code for your block inside `dist` folder.
41+
- Runs once and reports back the gzip file sizes of the produced code.
42+
43+
## 👉 `npm run eject`
44+
- Use to eject your plugin out of `create-guten-block`.
45+
- Provides all the configurations so you can customize the project as you want.
46+
- It's a one-way street, `eject` and you have to maintain everything yourself.
47+
- You don't normally have to `eject` a project because by ejecting you lose the connection with `create-guten-block` and from there onwards you have to update and maintain all the dependencies on your own.
48+
49+
---
50+
51+
###### — Feel free to tweet and say 👋 at me [@MrAhmadAwais](https://twitter.com/mrahmadawais/)
52+
53+
[![npm](https://img.shields.io/npm/v/create-guten-block.svg?style=flat-square)](https://www.npmjs.com/package/create-guten-block) [![npm](https://img.shields.io/npm/dt/create-guten-block.svg?style=flat-square&label=downloads)](https://www.npmjs.com/package/create-guten-block) [![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/ahmadawais/create-guten-block) [![Tweet for help](https://img.shields.io/twitter/follow/mrahmadawais.svg?style=social&label=Tweet%20@MrAhmadAwais)](https://twitter.com/mrahmadawais/) [![GitHub stars](https://img.shields.io/github/stars/ahmadawais/create-guten-block.svg?style=social&label=Stars)](https://github.com/ahmadawais/create-guten-block/stargazers) [![GitHub followers](https://img.shields.io/github/followers/ahmadawais.svg?style=social&label=Follow)](https://github.com/ahmadawais?tab=followers)

‎examples/02-single-block-ejected/config/paths.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* Paths
3+
*
4+
* Project related paths.
5+
*/
6+
7+
const path = require( 'path' );
8+
const fs = require( 'fs' );
9+
10+
// Make sure any symlinks in the project folder are resolved:
11+
const pluginDir = fs.realpathSync( process.cwd() );
12+
const resolveApp = relativePath => path.resolve( pluginDir, relativePath );
13+
14+
// Config after eject: we're in ./config/
15+
module.exports = {
16+
dotenv: resolveApp( '.env' ),
17+
pluginBlocksJs: resolveApp( 'src/blocks.js' ),
18+
yarnLockFile: resolveApp( 'yarn.lock' ),
19+
pluginDist: resolveApp( '.' ), // We are in ./dist folder already so the path '.' resolves to ./dist/.
20+
};

‎examples/02-single-block-ejected/config/webpack.config.dev.js‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/**
2+
* Webpack Configuration
3+
*
4+
* Working of a Webpack can be very simple or complex. This is an intenally simple
5+
* build configuration.
6+
*
7+
* Webpack basics — If you are new the Webpack here's all you need to know:
8+
* 1. Webpack is a module bundler. It bundles different JS modules together.
9+
* 2. It needs and entry point and an ouput to process file(s) and bundle them.
10+
* 3. By default it only understands common JavaScript but you can make it
11+
* understand other formats by way of adding a Webpack loader.
12+
* 4. In the file below you will find an entry point, an ouput, and a babel-loader
13+
* that tests all .js files excluding the ones in node_modules to process the
14+
* ESNext and make it compatible with older browsers i.e. it converts the
15+
* ESNext (new standards of JavaScript) into old JavaScript through a loader
16+
* by Babel.
17+
*
18+
* TODO: Instructions.
19+
*
20+
* @since 1.0.0
21+
*/
22+
23+
const paths = require( './paths' );
24+
const autoprefixer = require( 'autoprefixer' );
25+
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
26+
27+
// Extract style.css for both editor and frontend styles.
28+
const blocksCSSPlugin = new ExtractTextPlugin( {
29+
filename: './dist/blocks.style.build.css',
30+
} );
31+
32+
// Extract editor.css for editor styles.
33+
const editBlocksCSSPlugin = new ExtractTextPlugin( {
34+
filename: './dist/blocks.editor.build.css',
35+
} );
36+
37+
// Configuration for the ExtractTextPlugin — DRY rule.
38+
const extractConfig = {
39+
use: [
40+
// "postcss" loader applies autoprefixer to our CSS.
41+
{ loader: 'raw-loader' },
42+
{
43+
loader: 'postcss-loader',
44+
options: {
45+
ident: 'postcss',
46+
plugins: [
47+
autoprefixer( {
48+
browsers: [
49+
'>1%',
50+
'last 4 versions',
51+
'Firefox ESR',
52+
'not ie < 9', // React doesn't support IE8 anyway
53+
],
54+
flexbox: 'no-2009',
55+
} ),
56+
],
57+
},
58+
},
59+
// "sass" loader converst SCSS to CSS.
60+
{
61+
loader: 'sass-loader',
62+
options: {
63+
// Add common CSS file for variables and mixins.
64+
data: '@import "./src/common.scss";\n',
65+
outputStyle: 'nested',
66+
},
67+
},
68+
],
69+
};
70+
71+
// Export configuration.
72+
module.exports = {
73+
entry: {
74+
'./dist/blocks.build': paths.pluginBlocksJs, // 'name' : 'path/file.ext'.
75+
},
76+
output: {
77+
// Add /* filename */ comments to generated require()s in the output.
78+
pathinfo: true,
79+
// The dist folder.
80+
path: paths.pluginDist,
81+
filename: '[name].js', // [name] = './dist/blocks.build' as defined above.
82+
},
83+
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
84+
devtool: 'cheap-eval-source-map',
85+
module: {
86+
rules: [
87+
{
88+
test: /\.(js|jsx|mjs)$/,
89+
exclude: /(node_modules|bower_components)/,
90+
use: {
91+
loader: 'babel-loader',
92+
options: {
93+
94+
// This is a feature of `babel-loader` for webpack (not Babel itself).
95+
// It enables caching results in ./node_modules/.cache/babel-loader/
96+
// directory for faster rebuilds.
97+
cacheDirectory: true,
98+
},
99+
},
100+
},
101+
{
102+
test: /style\.s?css$/,
103+
exclude: /(node_modules|bower_components)/,
104+
use: blocksCSSPlugin.extract( extractConfig ),
105+
},
106+
{
107+
test: /editor\.s?css$/,
108+
exclude: /(node_modules|bower_components)/,
109+
use: editBlocksCSSPlugin.extract( extractConfig ),
110+
},
111+
],
112+
},
113+
// Add plugins.
114+
plugins: [ blocksCSSPlugin, editBlocksCSSPlugin ],
115+
stats: 'minimal',
116+
// stats: 'errors-only',
117+
};

‎examples/02-single-block-ejected/config/webpack.config.prod.js‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
/**
2+
* Webpack Configuration
3+
*
4+
* Working of a Webpack can be very simple or complex. This is an intenally simple
5+
* build configuration.
6+
*
7+
* Webpack basics — If you are new the Webpack here's all you need to know:
8+
* 1. Webpack is a module bundler. It bundles different JS modules together.
9+
* 2. It needs and entry point and an ouput to process file(s) and bundle them.
10+
* 3. By default it only understands common JavaScript but you can make it
11+
* understand other formats by way of adding a Webpack loader.
12+
* 4. In the file below you will find an entry point, an ouput, and a babel-loader
13+
* that tests all .js files excluding the ones in node_modules to process the
14+
* ESNext and make it compatible with older browsers i.e. it converts the
15+
* ESNext (new standards of JavaScript) into old JavaScript through a loader
16+
* by Babel.
17+
*
18+
* TODO: Instructions.
19+
*
20+
* @since 1.0.0
21+
*/
22+
23+
const paths = require( './paths' );
24+
const webpack = require( 'webpack' );
25+
const autoprefixer = require( 'autoprefixer' );
26+
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
27+
28+
// Source maps are resource heavy and can cause out of memory issue for large source files.
29+
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
30+
31+
// Extract style.css for both editor and frontend styles.
32+
const blocksCSSPlugin = new ExtractTextPlugin( {
33+
filename: './dist/blocks.style.build.css',
34+
} );
35+
36+
// Extract editor.css for editor styles.
37+
const editBlocksCSSPlugin = new ExtractTextPlugin( {
38+
filename: './dist/blocks.editor.build.css',
39+
} );
40+
41+
// Configuration for the ExtractTextPlugin — DRY rule.
42+
const extractConfig = {
43+
use: [
44+
// "postcss" loader applies autoprefixer to our CSS.
45+
{ loader: 'raw-loader' },
46+
{
47+
loader: 'postcss-loader',
48+
options: {
49+
ident: 'postcss',
50+
plugins: [
51+
autoprefixer( {
52+
browsers: [
53+
'>1%',
54+
'last 4 versions',
55+
'Firefox ESR',
56+
'not ie < 9', // React doesn't support IE8 anyway
57+
],
58+
flexbox: 'no-2009',
59+
} ),
60+
],
61+
},
62+
},
63+
// "sass" loader converst SCSS to CSS.
64+
{
65+
loader: 'sass-loader',
66+
options: {
67+
// Add common CSS file for variables and mixins.
68+
data: '@import "./src/common.scss";\n',
69+
outputStyle: 'compressed',
70+
},
71+
},
72+
],
73+
};
74+
75+
// Export configuration.
76+
module.exports = {
77+
entry: {
78+
'./dist/blocks.build': paths.pluginBlocksJs, // 'name' : 'path/file.ext'.
79+
},
80+
output: {
81+
// Add /* filename */ comments to generated require()s in the output.
82+
pathinfo: true,
83+
// The dist folder.
84+
path: paths.pluginDist,
85+
filename: '[name].js', // [name] = './dist/blocks.build' as defined above.
86+
},
87+
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
88+
devtool: 'cheap-eval-source-map',
89+
module: {
90+
rules: [
91+
{
92+
test: /\.(js|jsx|mjs)$/,
93+
exclude: /(node_modules|bower_components)/,
94+
use: {
95+
loader: 'babel-loader',
96+
options: {
97+
98+
// This is a feature of `babel-loader` for webpack (not Babel itself).
99+
// It enables caching results in ./node_modules/.cache/babel-loader/
100+
// directory for faster rebuilds.
101+
cacheDirectory: true,
102+
},
103+
},
104+
},
105+
{
106+
test: /style\.s?css$/,
107+
exclude: /(node_modules|bower_components)/,
108+
use: blocksCSSPlugin.extract( extractConfig ),
109+
},
110+
{
111+
test: /editor\.s?css$/,
112+
exclude: /(node_modules|bower_components)/,
113+
use: editBlocksCSSPlugin.extract( extractConfig ),
114+
},
115+
],
116+
},
117+
// Add plugins.
118+
plugins: [
119+
blocksCSSPlugin,
120+
editBlocksCSSPlugin,
121+
// Minify the code.
122+
new webpack.optimize.UglifyJsPlugin( {
123+
compress: {
124+
warnings: false,
125+
// Disabled because of an issue with Uglify breaking seemingly valid code:
126+
// https://github.com/facebookincubator/create-react-app/issues/2376
127+
// Pending further investigation:
128+
// https://github.com/mishoo/UglifyJS2/issues/2011
129+
comparisons: false,
130+
},
131+
mangle: {
132+
safari10: true,
133+
},
134+
output: {
135+
comments: false,
136+
// Turned on because emoji and regex is not minified properly using default
137+
// https://github.com/facebookincubator/create-react-app/issues/2488
138+
ascii_only: true,
139+
},
140+
sourceMap: shouldUseSourceMap,
141+
} ),
142+
],
143+
stats: 'minimal',
144+
// stats: 'errors-only',
145+
};

0 commit comments

Comments
 (0)