Skip to content

Commit 0dd5fb3

Browse files
author
Ahmad Awais
committed
📦 NEW: Example Multi-block
1 parent 08aba62 commit 0dd5fb3

20 files changed

Lines changed: 7387 additions & 0 deletions

‎examples/02-multi-block/.editorconfig‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# This file is for unifying the coding style for different editors and IDEs
2+
# editorconfig.org
3+
4+
# WordPress Coding Standards
5+
# https://make.wordpress.org/core/handbook/coding-standards/
6+
7+
root = true
8+
9+
[*]
10+
charset = utf-8
11+
end_of_line = lf
12+
insert_final_newline = true
13+
trim_trailing_whitespace = true
14+
indent_style = tab
15+
16+
[*.yml]
17+
indent_style = space
18+
indent_size = 2
19+
20+
[*.md]
21+
trim_trailing_whitespace = false

‎examples/02-multi-block/.eslintignore‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
**/*.min.js
2+
**/*.build.js
3+
**/node_modules/**
4+
**/vendor/**
5+
build
6+
coverage
7+
cypress
8+
node_modules
9+
vendor

‎examples/02-multi-block/.eslintrc.json‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
{
2+
"root": true,
3+
"parser": "babel-eslint",
4+
"extends": [
5+
"wordpress",
6+
"plugin:react/recommended",
7+
"plugin:jsx-a11y/recommended",
8+
"plugin:jest/recommended"
9+
],
10+
"env": {
11+
"browser": false,
12+
"es6": true,
13+
"node": true,
14+
"mocha": true,
15+
"jest/globals": true
16+
},
17+
"parserOptions": {
18+
"sourceType": "module",
19+
"ecmaFeatures": {
20+
"jsx": true
21+
}
22+
},
23+
"globals": {
24+
"wp": true,
25+
"wpApiSettings": true,
26+
"window": true,
27+
"document": true
28+
},
29+
"plugins": ["react", "jsx-a11y", "jest"],
30+
"settings": {
31+
"react": {
32+
"pragma": "wp"
33+
}
34+
},
35+
"rules": {
36+
"array-bracket-spacing": ["error", "always"],
37+
"brace-style": ["error", "1tbs"],
38+
"camelcase": ["error", { "properties": "never" }],
39+
"comma-dangle": ["error", "always-multiline"],
40+
"comma-spacing": "error",
41+
"comma-style": "error",
42+
"computed-property-spacing": ["error", "always"],
43+
"constructor-super": "error",
44+
"dot-notation": "error",
45+
"eol-last": "error",
46+
"eqeqeq": "error",
47+
"func-call-spacing": "error",
48+
"indent": ["error", "tab", { "SwitchCase": 1 }],
49+
"jsx-a11y/label-has-for": [
50+
"error",
51+
{
52+
"required": "id"
53+
}
54+
],
55+
"jsx-a11y/media-has-caption": "off",
56+
"jsx-a11y/no-noninteractive-tabindex": "off",
57+
"jsx-a11y/role-has-required-aria-props": "off",
58+
"jsx-quotes": "error",
59+
"key-spacing": "error",
60+
"keyword-spacing": "error",
61+
"lines-around-comment": "off",
62+
"no-alert": "error",
63+
"no-bitwise": "error",
64+
"no-caller": "error",
65+
"no-console": "error",
66+
"no-const-assign": "error",
67+
"no-debugger": "error",
68+
"no-dupe-args": "error",
69+
"no-dupe-class-members": "error",
70+
"no-dupe-keys": "error",
71+
"no-duplicate-case": "error",
72+
"no-duplicate-imports": "error",
73+
"no-else-return": "error",
74+
"no-eval": "error",
75+
"no-extra-semi": "error",
76+
"no-fallthrough": "error",
77+
"no-lonely-if": "error",
78+
"no-mixed-operators": "error",
79+
"no-mixed-spaces-and-tabs": "error",
80+
"no-multiple-empty-lines": ["error", { "max": 1 }],
81+
"no-multi-spaces": "error",
82+
"no-multi-str": "off",
83+
"no-negated-in-lhs": "error",
84+
"no-nested-ternary": "error",
85+
"no-redeclare": "error",
86+
"no-restricted-syntax": [
87+
"error",
88+
{
89+
"selector":
90+
"ImportDeclaration[source.value=/^@wordpress\\u002F.+\\u002F/]",
91+
"message": "Path access on WordPress dependencies is not allowed."
92+
},
93+
{
94+
"selector": "ImportDeclaration[source.value=/^blocks$/]",
95+
"message": "Use @wordpress/blocks as import path instead."
96+
},
97+
{
98+
"selector": "ImportDeclaration[source.value=/^components$/]",
99+
"message": "Use @wordpress/components as import path instead."
100+
},
101+
{
102+
"selector": "ImportDeclaration[source.value=/^date$/]",
103+
"message": "Use @wordpress/date as import path instead."
104+
},
105+
{
106+
"selector": "ImportDeclaration[source.value=/^editor$/]",
107+
"message": "Use @wordpress/editor as import path instead."
108+
},
109+
{
110+
"selector": "ImportDeclaration[source.value=/^element$/]",
111+
"message": "Use @wordpress/element as import path instead."
112+
},
113+
{
114+
"selector": "ImportDeclaration[source.value=/^i18n$/]",
115+
"message": "Use @wordpress/i18n as import path instead."
116+
},
117+
{
118+
"selector": "ImportDeclaration[source.value=/^data$/]",
119+
"message": "Use @wordpress/data as import path instead."
120+
},
121+
{
122+
"selector": "ImportDeclaration[source.value=/^utils$/]",
123+
"message": "Use @wordpress/utils as import path instead."
124+
},
125+
{
126+
"selector":
127+
"CallExpression[callee.name=/^__|_n|_x$/]:not([arguments.0.type=/^Literal|BinaryExpression$/])",
128+
"message": "Translate function arguments must be string literals."
129+
},
130+
{
131+
"selector":
132+
"CallExpression[callee.name=/^_n|_x$/]:not([arguments.1.type=/^Literal|BinaryExpression$/])",
133+
"message": "Translate function arguments must be string literals."
134+
},
135+
{
136+
"selector":
137+
"CallExpression[callee.name=_nx]:not([arguments.2.type=/^Literal|BinaryExpression$/])",
138+
"message": "Translate function arguments must be string literals."
139+
}
140+
],
141+
"no-shadow": "error",
142+
"no-undef": "error",
143+
"no-undef-init": "error",
144+
"no-unreachable": "error",
145+
"no-unsafe-negation": "error",
146+
"no-unused-expressions": "error",
147+
"no-unused-vars": "error",
148+
"no-useless-computed-key": "error",
149+
"no-useless-constructor": "error",
150+
"no-useless-return": "error",
151+
"no-var": "error",
152+
"no-whitespace-before-property": "error",
153+
"object-curly-spacing": ["error", "always"],
154+
"padded-blocks": ["error", "never"],
155+
"prefer-const": "error",
156+
"quote-props": ["error", "as-needed"],
157+
"react/display-name": "off",
158+
"react/jsx-curly-spacing": [
159+
"error",
160+
{
161+
"when": "always",
162+
"children": true
163+
}
164+
],
165+
"react/jsx-equals-spacing": "error",
166+
"react/jsx-indent": ["error", "tab"],
167+
"react/jsx-indent-props": ["error", "tab"],
168+
"react/jsx-key": "error",
169+
"react/jsx-tag-spacing": "error",
170+
"react/no-children-prop": "off",
171+
"react/no-find-dom-node": "warn",
172+
"react/prop-types": "off",
173+
"semi": "error",
174+
"semi-spacing": "error",
175+
"space-before-blocks": ["error", "always"],
176+
"space-before-function-paren": ["error", "never"],
177+
"space-in-parens": ["error", "always"],
178+
"space-infix-ops": ["error", { "int32Hint": false }],
179+
"space-unary-ops": [
180+
"error",
181+
{
182+
"overrides": {
183+
"!": true
184+
}
185+
}
186+
],
187+
"template-curly-spacing": ["error", "always"],
188+
"valid-jsdoc": ["error", { "requireReturn": false }],
189+
"valid-typeof": "error",
190+
"yoda": "off"
191+
}
192+
}

‎examples/02-multi-block/.gitignore‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# Packages #
2+
############
3+
*.7z
4+
*.dmg
5+
*.gz
6+
*.bz2
7+
*.iso
8+
*.jar
9+
*.rar
10+
*.tar
11+
*.zip
12+
*.tgz
13+
*.map
14+
15+
# Logs and databases #
16+
######################
17+
*.log
18+
*.sql
19+
20+
# OS generated files #
21+
######################
22+
**.DS_Store*
23+
ehthumbs.db
24+
Icon?
25+
Thumbs.db
26+
._*
27+
28+
# Vim generated files #
29+
######################
30+
*.un~
31+
32+
# SASS #
33+
##########
34+
**/.sass-cache
35+
**/.sass-cache/*
36+
**/.map
37+
38+
# Composer #
39+
##########
40+
vendors/composer/
41+
!assets/js/vendor/
42+
wpcs/
43+
composer.lock
44+
45+
# Bower #
46+
##########
47+
assets/bower_components/*
48+
49+
# Codekit #
50+
##########
51+
/codekit-config.json
52+
*.codekit
53+
**.codekit-cache/*
54+
55+
# NPM #
56+
##########
57+
node_modules
58+
**/node_modules/**
59+
60+
# Compiled Files and Build Dirs #
61+
##########
62+
/README.html
63+
64+
# PhpStrom Project Files #
65+
.idea/
66+
library/vendors/composer
67+
assets/img/.DS_Store
68+
assets/sass/HTML
69+
assets/sass/Rails
70+
HTML
71+
Rails
72+
73+
# CGB
74+
.idea/
75+
.vscode/
76+
node_modules/
77+
.DS_Store
78+
*.tgz
79+
my-app*
80+
template/src/__tests__/__snapshots__/
81+
lerna-debug.log
82+
npm-debug.log*
83+
yarn-debug.log*
84+
yarn-error.log*
85+
/.changelog

‎examples/02-multi-block/README.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# 🔰 EXAMPLE: Multi 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 `multi-block` which creates a Gutenberg block also called `multi-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 multi-block` command.
17+
- Go to `./src/` and copy paste the `./src/block` directory as `./src/block2/` where our second block's code will live.
18+
- Open `./src/blocks.js` and import our new block from `./src/block2/block.js` file.
19+
- Go to `./block2/` directory and rename our block from `multi-block` to `multi-block-2` in both `.js` and `.scss` files.
20+
- Now you have two blocks run by a single plugin.
21+
- As you might have noticed all blocks should be imported in the `./src/blocks.js` files as that's the file which gets imported into our webpack config.
22+
23+
_That's about it._
24+
25+
>🌟 Star for updates [create-guten-block →](https://github.com/ahmadawais/create-guten-block) or to appreciate.
26+
27+
28+
<br>
29+
30+
![ELSE ICON](http://on.ahmda.ws/oykk/c)
31+
32+
### Everything Else
33+
34+
This project was bootstrapped with [Create Guten Block](https://github.com/ahmadawais/create-guten-block).
35+
36+
Below you will find some information on how to run scripts.
37+
38+
>You can find the most recent version of this guide [here](https://github.com/ahmadawais/create-guten-block).
39+
40+
## 👉 `npm start`
41+
- Use to compile and run the block in development mode.
42+
- Watches for any changes and reports back any errors in your code.
43+
44+
## 👉 `npm run build`
45+
- Use to build production code for your block inside `dist` folder.
46+
- Runs once and reports back the gzip file sizes of the produced code.
47+
48+
## 👉 `npm run eject`
49+
- Use to eject your plugin out of `create-guten-block`.
50+
- Provides all the configurations so you can customize the project as you want.
51+
- It's a one-way street, `eject` and you have to maintain everything yourself.
52+
- 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.
53+
54+
---
55+
56+
###### — Feel free to tweet and say 👋 at me [@MrAhmadAwais](https://twitter.com/mrahmadawais/)
57+
58+
[![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)

0 commit comments

Comments
 (0)