49 | );
50 | },
51 |
52 | /**
53 | * save function
54 | *
55 | * Makes the markup that will be rendered on the site page
56 | *
57 | * @return {JSX object} ECMAScript JSX Markup for the site
58 | */
59 | save ( ) {
60 | return ( // This will be displayed on the website page
61 |
The custom red title :)
62 | );
63 | },
64 | }
65 | );
--------------------------------------------------------------------------------
/block-simple/block.build.js:
--------------------------------------------------------------------------------
1 | /******/ (function(modules) { // webpackBootstrap
2 | /******/ // The module cache
3 | /******/ var installedModules = {};
4 | /******/
5 | /******/ // The require function
6 | /******/ function __webpack_require__(moduleId) {
7 | /******/
8 | /******/ // Check if module is in cache
9 | /******/ if(installedModules[moduleId]) {
10 | /******/ return installedModules[moduleId].exports;
11 | /******/ }
12 | /******/ // Create a new module (and put it into the cache)
13 | /******/ var module = installedModules[moduleId] = {
14 | /******/ i: moduleId,
15 | /******/ l: false,
16 | /******/ exports: {}
17 | /******/ };
18 | /******/
19 | /******/ // Execute the module function
20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21 | /******/
22 | /******/ // Flag the module as loaded
23 | /******/ module.l = true;
24 | /******/
25 | /******/ // Return the exports of the module
26 | /******/ return module.exports;
27 | /******/ }
28 | /******/
29 | /******/
30 | /******/ // expose the modules object (__webpack_modules__)
31 | /******/ __webpack_require__.m = modules;
32 | /******/
33 | /******/ // expose the module cache
34 | /******/ __webpack_require__.c = installedModules;
35 | /******/
36 | /******/ // define getter function for harmony exports
37 | /******/ __webpack_require__.d = function(exports, name, getter) {
38 | /******/ if(!__webpack_require__.o(exports, name)) {
39 | /******/ Object.defineProperty(exports, name, {
40 | /******/ configurable: false,
41 | /******/ enumerable: true,
42 | /******/ get: getter
43 | /******/ });
44 | /******/ }
45 | /******/ };
46 | /******/
47 | /******/ // getDefaultExport function for compatibility with non-harmony modules
48 | /******/ __webpack_require__.n = function(module) {
49 | /******/ var getter = module && module.__esModule ?
50 | /******/ function getDefault() { return module['default']; } :
51 | /******/ function getModuleExports() { return module; };
52 | /******/ __webpack_require__.d(getter, 'a', getter);
53 | /******/ return getter;
54 | /******/ };
55 | /******/
56 | /******/ // Object.prototype.hasOwnProperty.call
57 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
58 | /******/
59 | /******/ // __webpack_public_path__
60 | /******/ __webpack_require__.p = "";
61 | /******/
62 | /******/ // Load entry module and return exports
63 | /******/ return __webpack_require__(__webpack_require__.s = 0);
64 | /******/ })
65 | /************************************************************************/
66 | /******/ ([
67 | /* 0 */
68 | /***/ (function(module, exports) {
69 |
70 | /**
71 | * Simple block
72 | *
73 | * Creates a simple block that makes a red title
74 | */
75 |
76 | // Required components
77 | var __ = wp.i18n.__;
78 | var registerBlockType = wp.blocks.registerBlockType;
79 |
80 | /**
81 | * Registers and creates block
82 | *
83 | * Compatible with Gutenberg 2.8
84 | *
85 | */
86 |
87 | registerBlockType('gutenberg-blocks-sample/block-simple', // Name of the block with a required name space
88 | {
89 | title: __('GB Sample - Simple Red Title'), // Title, displayed in the editor
90 | icon: 'universal-access-alt', // Icon, from WP icons
91 | category: 'common', // Block category, where the block will be added in the editor
92 |
93 | /**
94 | * edit function
95 | *
96 | * Makes the markup for the editor interface.
97 | *
98 | * @param {object} className
99 | * Automatic CSS class. Based on the block name:
100 | * gutenberg-block-samples-block-simple
101 | *
102 | * @return JSX ECMAScript Markup for the editor
103 | */
104 | edit: function edit(_ref) {
105 | var className = _ref.className;
106 |
107 | return (// This will be displayed on the editor
108 | wp.element.createElement(
109 | 'p',
110 | { className: className },
111 | 'This custom block will create a red title'
112 | )
113 | );
114 | },
115 |
116 |
117 | /**
118 | * save function
119 | *
120 | * Makes the markup that will be rendered on the site page
121 | *
122 | * @return JSX ECMAScript Markup for the site
123 | */
124 | save: function save() {
125 | return (// This will be displayed on the website page
126 | wp.element.createElement(
127 | 'h1',
128 | null,
129 | 'The custom red title :)'
130 | )
131 | );
132 | }
133 | });
134 |
135 | /***/ })
136 | /******/ ]);
--------------------------------------------------------------------------------
/block-dynamic/block.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Simple dynamic block sample
3 | *
4 | * Creates a block that doesn't render the save side, because it's rendered on PHP
5 | */
6 |
7 | // Required components
8 | const { __ } = wp.i18n;
9 | const { registerBlockType, RichText } = wp.blocks;
10 |
11 | /**
12 | * Registers and creates block
13 | *
14 | * Compatible with Gutenberg 2.8
15 | *
16 | * @param Name Name of the block with a required name space
17 | * @param ObjectArgs Block configuration {
18 | * title - Title, displayed in the editor
19 | * icon - Icon, from WP icons
20 | * category - Block category, where the block will be added in the editor
21 | * attributes - Object with all binding elements between the view HTML and the functions
22 | * edit function - Returns the markup for the editor interface.
23 | * save function - Returns the markup that will be rendered on the site page
24 | * }
25 | *
26 | */
27 | registerBlockType(
28 | 'gutenberg-blocks-sample/block-dynamic', // Name of the block with a required name space
29 | {
30 | title: __('Dynamic Sum Block (Sample)'), // Title, displayed in the editor
31 | icon: 'universal-access-alt', // Icon, from WP icons
32 | category: 'common', // Block category, where the block will be added in the editor
33 |
34 | /**
35 | * Object with all binding elements between the view HTML and the functions
36 | * It lets you bind data from DOM elements and storage attributes
37 | */
38 | attributes: {
39 | // Number 1
40 | // It doesn't use source attribute, so it doesn't come from save() rendered DOM
41 | // They'll be saved on the block's source code as a JSON
42 | number1: {
43 | type: 'string',
44 | },
45 | // Number 2
46 | // It doesn't use source attribute, so it doesn't come from save() rendered DOM
47 | // They'll be saved on the block's source code as a JSON
48 | number2: {
49 | type: 'string',
50 | },
51 | },
52 |
53 | /**
54 | * edit function
55 | *
56 | * Makes the markup for the editor interface.
57 | *
58 | * @param object props Let's you bind markup and attributes as well as other controls
59 | *
60 | * @return JSX ECMAScript Markup for the editor
61 | */
62 | edit ( props ) {
63 |
64 | var number1 = props.attributes.number1 // To bind attribute number 1
65 | var number2 = props.attributes.number2 // To bind attribute number 2
66 |
67 | function onChangeNumber1 ( content ) {
68 | props.setAttributes({number1: content})
69 | }
70 |
71 | function onChangeNumber2 ( content ) {
72 | props.setAttributes({number2: content})
73 | }
74 |
75 | return (
76 |
{/* You have to have a wrapper tag when your markup has more than 1 tag */}
77 |
Sample dynamic PHP server-side block
78 |
This block will sum the numbers and render HTML on the server side
79 |
80 |
86 |
87 |
93 |
94 | )
95 | },
96 |
97 | /**
98 | * save function
99 | *
100 | * Makes the markup that will be rendered on the site page
101 | *
102 | * In this case, it does not render, because this block is rendered on server side
103 | *
104 | * @param object props Let's you bind markup and attributes as well as other controls
105 | * @return JSX ECMAScript Markup for the site
106 | */
107 | save ( props ) {
108 | return null // See PHP side. This block is rendered on PHP.
109 | },
110 | }
111 | );
--------------------------------------------------------------------------------
/block-editable/block.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Simple editable block sample
3 | *
4 | * Creates an editable block to make a link
5 | *
6 | * @requires Gutenberg 4.3
7 | */
8 |
9 | // Required components from WordPress
10 | const { registerBlockType } = wp.blocks // registerBlockType function that creates a block
11 | const { RichText } = wp.editor // RichText component for editable inputs
12 |
13 | // Other components
14 | const { __ } = wp.i18n // Internationalisation
15 |
16 |
17 | /**
18 | * Registers and creates block
19 | *
20 | * @param {string} Name Name of the block with a required name space
21 | * @param {object} ObjectArgs Block configuration {
22 | * title - Title, displayed in the editor
23 | * icon - Icon, from WP icons
24 | * category - Block category, where the block will be added in the editor
25 | * attributes - Object with all binding elements between the view HTML and the functions
26 | * edit function - Returns the markup for the editor interface.
27 | * save function - Returns the markup that will be rendered on the site page
28 | * }
29 | *
30 | */
31 | registerBlockType(
32 | 'gutenberg-blocks-sample/block-editable', // Name of the block with a required name space
33 | {
34 | title: __('GB Sample - Editable Link'), // Title, displayed in the editor
35 | icon: 'universal-access-alt', // Icon, from WP icons
36 | category: 'common', // Block category, where the block will be added in the editor
37 |
38 | /**
39 | * Object with all binding elements between the view HTML and the functions
40 | * Let's you bind data from DOM elements and storage attributes
41 | * To make things editable, you'll need them mapped as those attributes
42 | */
43 | attributes: {
44 | link_text: {
45 | selector: 'a', // tag a
46 | source: 'children', // children of a, to bind the link text
47 | },
48 | link_url: {
49 | selector: 'a', // tag a
50 | source: 'attribute', // attribute of the tag
51 | attribute: 'href', // attribute href, to bind the href of the link
52 | },
53 | },
54 |
55 | /**
56 | * edit function
57 | *
58 | * Makes the markup for the editor interface.
59 | *
60 | * @param {object} Props {
61 | * attributes - Attribute values
62 | * className - Automatic class: gutenberg-blocks-sample-block-editable
63 | * setAttributes - Function that bind the values to the interface
64 | * }
65 | *
66 | * @return {JSX object} ECMAScript Markup for the editor
67 | */
68 | edit ( props ) {
69 |
70 | let { attributes, className, setAttributes } = props
71 |
72 | let link_text = attributes.link_text // To bind attribute link_text
73 | let link_url = attributes.link_url // To bind attribute link_url
74 |
75 | function onChangeContentURL ( content ) {
76 | setAttributes({link_url: content})
77 | }
78 |
79 | function onChangeContentName ( content ) {
80 | setAttributes({link_text: content})
81 | }
82 |
83 | return (
84 |
{/* You have to have a wrapper tag when your markup has more than 1 tag */}
85 |
103 | )
104 | },
105 |
106 | /**
107 | * save function
108 | *
109 | * Makes the markup that will be rendered on the site page
110 | *
111 | * @param {object} Props {
112 | * attributes - Attribute values
113 | * className - Automatic class: gutenberg-blocks-sample-block-editable
114 | * setAttributes - Function that bind the values to the interface
115 | * }
116 | * @return {JSX object} ECMAScript Markup for the site
117 | */
118 | save ( props ) {
119 |
120 | let { attributes } = props
121 |
122 | return (
123 | {attributes.link_text}
124 | )
125 | },
126 | }
127 | );
--------------------------------------------------------------------------------
/block-inspected/block.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Simple editable block with inspection controls
3 | *
4 | * Creates an editable block to make a link button, but with inspection controlls on the sidebar
5 | */
6 |
7 |
8 | /**
9 | * Required components
10 | */
11 | const { __ } = wp.i18n;
12 | const {
13 | registerBlockType, // Basic block register function
14 | RichText, // Element Tag for all editable inputs
15 | InspectorControls, // Element Tag for sidebar view
16 | ColorPalette, // Element Tag for Gutenberg standard Palette selector
17 | source // For attribute sources
18 | } = wp.blocks;
19 |
20 |
21 | /**
22 | * Registers and creates block
23 | *
24 | * Compatible with Gutenberg 2.8
25 | *
26 | * @param Name Name of the block with a required name space
27 | * @param ObjectArgs Block configuration {
28 | * title - Title, displayed in the editor
29 | * icon - Icon, from WP icons
30 | * category - Block category, where the block will be added in the editor
31 | * attributes - Object with all binding elements between the view HTML and the functions
32 | * edit function - Returns the markup for the editor interface.
33 | * save function - Returns the markup that will be rendered on the site page
34 | * }
35 | *
36 | */
37 | registerBlockType(
38 | 'gutenberg-blocks-sample/block-inspected', // Name of the block with a required name space
39 | {
40 | title: __('Editable Inspected Button (Sample)'), // Title, displayed in the editor
41 | icon: 'universal-access-alt', // Icon, from WP icons
42 | category: 'common', // Block category, where the block will be added in the editor
43 |
44 | /**
45 | * Object with all binding elements between the view HTML and the functions
46 | * Let's you bind data from DOM elements and storage attributes
47 | */
48 | attributes: {
49 | // Text of the link-button
50 | link_text: {
51 | selector: 'a', // From tag a
52 | source: 'children', // binds children of a: the link text
53 | },
54 | // URL of the link-button
55 | link_url: {
56 | selector: 'a', // From tag a
57 | source: 'attribute', // binds an attribute of the tag
58 | attribute: 'href', // binds href of a: the link url
59 | },
60 | // To storage background colour of the button
61 | button_color: {
62 | type: 'string',
63 | default: 'red', // Default value for newly added block
64 | },
65 | // To storage text colour of the button
66 | text_color: {
67 | type: 'string',
68 | default: 'white', // Default value for newly added block
69 | },
70 | // To storage the complete style of the button that will be 'merged' with the selected colours
71 | button_style: {
72 | selector: 'a', // From tag a
73 | source: 'attribute', // binds an attribute of the tag
74 | attribute: 'style', // binds style of a: the dynamic colours
75 | }
76 | },
77 |
78 | /**
79 | * edit function
80 | *
81 | * Makes the markup for the editor interface.
82 | *
83 | * @param object props Let's you bind markup and attributes as well as other controls
84 | *
85 | * @return JSX ECMAScript Markup for the editor
86 | */
87 | edit ( props ) {
88 |
89 | var link_text = props.attributes.link_text // To bind attribute link_text
90 | var link_url = props.attributes.link_url // To bind attribute link_url
91 | var text_color = props.attributes.text_color // To bind text colour
92 | var button_color = props.attributes.button_color // To bind button background colour
93 |
94 | // Style object for the button
95 | // I created a style in JSX sintax to keep it here for
96 | // the dynamic changes
97 | var button_style = props.attributes.button_style // To bind the style of the button
98 | button_style = {
99 | backgroundColor: button_color,
100 | color: text_color,
101 | padding: '14px 25px',
102 | textAlign: 'center',
103 | textDecoration: 'none',
104 | display: 'inline-block',
105 | }
106 |
107 | //
108 | // onChange event functions
109 | //
110 | function onChangeContentURL ( content ) {
111 | props.setAttributes({link_url: content})
112 | }
113 |
114 | function onChangeContentName ( content ) {
115 | props.setAttributes({link_text: content})
116 | }
117 |
118 | function onChangeButtonColor ( content ) {
119 | props.setAttributes({button_color: content})
120 | }
121 |
122 | function onChangeTextColor ( content ) {
123 | props.setAttributes({text_color: content})
124 | }
125 |
126 | return [
127 | {/* Whatever is inside this block will be displayed on the sidebar */}
128 |
129 | {/* WordPress class for labels */}
130 |
136 |
137 |
140 |
141 |
144 |
145 |
146 | ,
147 |
{/* You have to have a wrapper tag when your markup has more than 1 tag */}
148 |
149 |
154 |
155 |
156 | ]
157 | },
158 |
159 | /**
160 | * save function
161 | *
162 | * Makes the markup that will be rendered on the site page
163 | *
164 | * @param object props Let's you bind markup and attributes as well as other controls
165 | * @return JSX ECMAScript Markup for the site
166 | */
167 | save ( props ) {
168 |
169 | var button_style = {
170 | backgroundColor: props.attributes.button_color,
171 | color: props.attributes.text_color,
172 | }
173 |
174 | return (
175 | {props.attributes.link_text}
176 | )
177 | },
178 | }
179 | );
--------------------------------------------------------------------------------
/block-editable/block.build.js:
--------------------------------------------------------------------------------
1 | /******/ (function(modules) { // webpackBootstrap
2 | /******/ // The module cache
3 | /******/ var installedModules = {};
4 | /******/
5 | /******/ // The require function
6 | /******/ function __webpack_require__(moduleId) {
7 | /******/
8 | /******/ // Check if module is in cache
9 | /******/ if(installedModules[moduleId]) {
10 | /******/ return installedModules[moduleId].exports;
11 | /******/ }
12 | /******/ // Create a new module (and put it into the cache)
13 | /******/ var module = installedModules[moduleId] = {
14 | /******/ i: moduleId,
15 | /******/ l: false,
16 | /******/ exports: {}
17 | /******/ };
18 | /******/
19 | /******/ // Execute the module function
20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21 | /******/
22 | /******/ // Flag the module as loaded
23 | /******/ module.l = true;
24 | /******/
25 | /******/ // Return the exports of the module
26 | /******/ return module.exports;
27 | /******/ }
28 | /******/
29 | /******/
30 | /******/ // expose the modules object (__webpack_modules__)
31 | /******/ __webpack_require__.m = modules;
32 | /******/
33 | /******/ // expose the module cache
34 | /******/ __webpack_require__.c = installedModules;
35 | /******/
36 | /******/ // define getter function for harmony exports
37 | /******/ __webpack_require__.d = function(exports, name, getter) {
38 | /******/ if(!__webpack_require__.o(exports, name)) {
39 | /******/ Object.defineProperty(exports, name, {
40 | /******/ configurable: false,
41 | /******/ enumerable: true,
42 | /******/ get: getter
43 | /******/ });
44 | /******/ }
45 | /******/ };
46 | /******/
47 | /******/ // getDefaultExport function for compatibility with non-harmony modules
48 | /******/ __webpack_require__.n = function(module) {
49 | /******/ var getter = module && module.__esModule ?
50 | /******/ function getDefault() { return module['default']; } :
51 | /******/ function getModuleExports() { return module; };
52 | /******/ __webpack_require__.d(getter, 'a', getter);
53 | /******/ return getter;
54 | /******/ };
55 | /******/
56 | /******/ // Object.prototype.hasOwnProperty.call
57 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
58 | /******/
59 | /******/ // __webpack_public_path__
60 | /******/ __webpack_require__.p = "";
61 | /******/
62 | /******/ // Load entry module and return exports
63 | /******/ return __webpack_require__(__webpack_require__.s = 0);
64 | /******/ })
65 | /************************************************************************/
66 | /******/ ([
67 | /* 0 */
68 | /***/ (function(module, exports) {
69 |
70 | /**
71 | * Simple editable block sample
72 | *
73 | * Creates an editable block to make a link
74 | *
75 | * @requires Gutenberg 4.3
76 | */
77 |
78 | // Required components from WordPress
79 | var registerBlockType = wp.blocks.registerBlockType; // registerBlockType function that creates a block
80 |
81 | var RichText = wp.editor.RichText; // RichText component for editable inputs
82 |
83 | // Other components
84 |
85 | var __ = wp.i18n.__; // Internationalisation
86 |
87 |
88 | /**
89 | * Registers and creates block
90 | *
91 | * @param {string} Name Name of the block with a required name space
92 | * @param {object} ObjectArgs Block configuration {
93 | * title - Title, displayed in the editor
94 | * icon - Icon, from WP icons
95 | * category - Block category, where the block will be added in the editor
96 | * attributes - Object with all binding elements between the view HTML and the functions
97 | * edit function - Returns the markup for the editor interface.
98 | * save function - Returns the markup that will be rendered on the site page
99 | * }
100 | *
101 | */
102 |
103 | registerBlockType('gutenberg-blocks-sample/block-editable', // Name of the block with a required name space
104 | {
105 | title: __('GB Sample - Editable Link'), // Title, displayed in the editor
106 | icon: 'universal-access-alt', // Icon, from WP icons
107 | category: 'common', // Block category, where the block will be added in the editor
108 |
109 | /**
110 | * Object with all binding elements between the view HTML and the functions
111 | * Let's you bind data from DOM elements and storage attributes
112 | * To make things editable, you'll need them mapped as those attributes
113 | */
114 | attributes: {
115 | link_text: {
116 | selector: 'a', // tag a
117 | source: 'children' // children of a, to bind the link text
118 | },
119 | link_url: {
120 | selector: 'a', // tag a
121 | source: 'attribute', // attribute of the tag
122 | attribute: 'href' // attribute href, to bind the href of the link
123 | }
124 | },
125 |
126 | /**
127 | * edit function
128 | *
129 | * Makes the markup for the editor interface.
130 | *
131 | * @param {object} Props {
132 | * attributes - Attribute values
133 | * className - Automatic class: gutenberg-blocks-sample-block-editable
134 | * setAttributes - Function that bind the values to the interface
135 | * }
136 | *
137 | * @return {JSX object} ECMAScript Markup for the editor
138 | */
139 | edit: function edit(props) {
140 | var attributes = props.attributes,
141 | className = props.className,
142 | setAttributes = props.setAttributes;
143 |
144 |
145 | var link_text = attributes.link_text; // To bind attribute link_text
146 | var link_url = attributes.link_url; // To bind attribute link_url
147 |
148 | function onChangeContentURL(content) {
149 | setAttributes({ link_url: content });
150 | }
151 |
152 | function onChangeContentName(content) {
153 | setAttributes({ link_text: content });
154 | }
155 |
156 | return wp.element.createElement(
157 | 'div',
158 | { id: 'block-editable-box' },
159 | ' ',
160 | wp.element.createElement(
161 | 'p',
162 | null,
163 | 'GB Sample - Editable link block'
164 | ),
165 | wp.element.createElement(
166 | 'label',
167 | null,
168 | 'Name:'
169 | ),
170 | wp.element.createElement(RichText, {
171 | className: className // Automatic class: gutenberg-blocks-sample-block-editable
172 | , onChange: onChangeContentName // onChange event callback
173 | , value: link_text // Binding
174 | , placeholder: 'Name of the link'
175 | }),
176 | wp.element.createElement(
177 | 'label',
178 | null,
179 | 'URL:'
180 | ),
181 | wp.element.createElement(RichText, {
182 | format: 'string' // Default is 'element'. Wouldn't work for a tag attribute
183 | , className: className // Automatic class: gutenberg-blocks-sample-block-editable
184 | , onChange: onChangeContentURL // onChange event callback
185 | , value: link_url // Binding
186 | , placeholder: 'URL of the link'
187 | }),
188 | wp.element.createElement(
189 | 'p',
190 | null,
191 | wp.element.createElement(
192 | 'a',
193 | { href: 'https://github.com/eudesgit/gutenberg-blocks-sample' },
194 | 'Find out more'
195 | )
196 | )
197 | );
198 | },
199 |
200 |
201 | /**
202 | * save function
203 | *
204 | * Makes the markup that will be rendered on the site page
205 | *
206 | * @param {object} Props {
207 | * attributes - Attribute values
208 | * className - Automatic class: gutenberg-blocks-sample-block-editable
209 | * setAttributes - Function that bind the values to the interface
210 | * }
211 | * @return {JSX object} ECMAScript Markup for the site
212 | */
213 | save: function save(props) {
214 | var attributes = props.attributes;
215 |
216 |
217 | return wp.element.createElement(
218 | 'a',
219 | { href: attributes.link_url },
220 | attributes.link_text
221 | );
222 | }
223 | });
224 |
225 | /***/ })
226 | /******/ ]);
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "[]"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright [yyyy] [name of copyright owner]
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
/gutenberg-blocks-sample.php:
--------------------------------------------------------------------------------
1 | plugin_name = 'gutenberg-blocks-sample';
59 |
60 | $this->actions = [];
61 | $this->filters = [];
62 |
63 | // Register hooks
64 | $this->hooks();
65 |
66 | }
67 |
68 | /**
69 | * Getters
70 | */
71 | public function get_plugin_name ( ) { return $this->plugin_name; }
72 |
73 | /**
74 | * Register all hooks
75 | *
76 | * @since 1.0.0
77 | * @access private
78 | */
79 | private function hooks ( ) {
80 |
81 | $this->add_action('init', $this, 'register_simple_block_action');
82 | $this->add_action('init', $this, 'register_editable_block_action');
83 | $this->add_action('init', $this, 'register_inspected_block_action');
84 | $this->add_action('init', $this, 'register_dynamic_block_action');
85 |
86 | }
87 |
88 | /**
89 | * Registers the simple block JS script and its styles
90 | *
91 | * @since 1.0.0
92 | * @return void
93 | */
94 | public function register_simple_block_action ( ) {
95 |
96 | $block_name = 'block-simple';
97 |
98 | $block_namespace = 'gutenberg-blocks-sample/' . $block_name;
99 |
100 | $script_slug = $this->plugin_name . '-' . $block_name;
101 | $style_slug = $this->plugin_name . '-' . $block_name . '-style';
102 | $editor_style_slug = $this->plugin_name . '-' . $block_name . '-editor-style';
103 |
104 | // The JS block script
105 | $script_file = $block_name . '/block.build.js';
106 | wp_enqueue_script(
107 | $script_slug,
108 | plugin_dir_url(__FILE__) . $script_file,
109 | [ // Dependencies that will have to be imported on the block JS file
110 | 'wp-blocks', // Required: contains registerBlockType function that creates a block
111 | 'wp-element', // Required: contains element function that handles HTML markup
112 | 'wp-i18n', // contains registerBlockType function that creates a block
113 | ],
114 | plugin_dir_path(__FILE__) . $script_file
115 | );
116 |
117 | // The block style
118 | // It will be loaded on the editor and on the site
119 | wp_register_style(
120 | $style_slug,
121 | plugin_dir_url( __FILE__ ) . $block_name . '/css/style.css',
122 | ['wp-blocks'], // General style
123 | GBC_VERSION
124 | );
125 |
126 | // The block style for the editor only
127 | wp_register_style(
128 | $editor_style_slug,
129 | plugin_dir_url( __FILE__ ) . $block_name . '/css/editor.css',
130 | ['wp-edit-blocks'], // Style for the editor
131 | GBC_VERSION
132 | );
133 |
134 | // Registering the block
135 | register_block_type(
136 | $block_namespace, // Block name with namespace
137 | [
138 | 'style' => $style_slug, // General block style slug
139 | 'editor_style' => $editor_style_slug, // Editor block style slug
140 | 'editor_script' => $script_slug, // The block script slug
141 | ]
142 | );
143 |
144 | }
145 |
146 | /**
147 | * Registers the editable block JS script and its styles
148 | *
149 | * @since 1.0.0
150 | * @return void
151 | */
152 | public function register_editable_block_action ( ) {
153 |
154 | $block_name = 'block-editable';
155 |
156 | $block_namespace = 'gutenberg-blocks-sample/' . $block_name;
157 |
158 | $script_slug = $this->plugin_name . '-' . $block_name;
159 | $style_slug = $this->plugin_name . '-' . $block_name . '-style';
160 | $editor_style_slug = $this->plugin_name . '-' . $block_name . '-editor-style';
161 |
162 | // The JS block script
163 | $script_file = $block_name . '/block.build.js';
164 | wp_enqueue_script(
165 | $script_slug,
166 | plugin_dir_url(__FILE__) . $script_file,
167 | [ // Dependencies that will have to be imported on the block JS file
168 | 'wp-blocks', // Required: contains registerBlockType function that creates a block
169 | 'wp-element', // Required: contains element function that handles HTML markup
170 | 'wp-editor', // Required: contains RichText component for editable inputs
171 | 'wp-i18n', // contains registerBlockType function that creates a block
172 | ],
173 | filemtime(plugin_dir_path(__FILE__) . $script_file)
174 | );
175 |
176 | // The block style
177 | // It will be loaded on the editor and on the site
178 | wp_register_style(
179 | $style_slug,
180 | plugin_dir_url( __FILE__ ) . $block_name . '/css/style.css',
181 | ['wp-blocks'], // General style
182 | GBC_VERSION
183 | );
184 |
185 | // The block style for the editor only
186 | wp_register_style(
187 | $editor_style_slug,
188 | plugin_dir_url( __FILE__ ) . $block_name . '/css/editor.css',
189 | ['wp-edit-blocks'], // Style for the editor
190 | GBC_VERSION
191 | );
192 |
193 | // Registering the block
194 | register_block_type(
195 | $block_namespace, // Block name with namespace
196 | [
197 | 'style' => $style_slug, // General block style slug
198 | 'editor_style' => $editor_style_slug, // Editor block style slug
199 | 'editor_script' => $script_slug, // The block script slug
200 | ]
201 | );
202 |
203 | }
204 |
205 | /**
206 | * Registers the inspected block JS script and its styles
207 | *
208 | * @since 1.0.0
209 | * @return void
210 | */
211 | public function register_inspected_block_action ( ) {
212 |
213 | $block_name = 'block-inspected';
214 |
215 | $block_namespace = 'gutenberg-blocks-sample/' . $block_name;
216 |
217 | $script_slug = $this->plugin_name . '-' . $block_name;
218 | $style_slug = $this->plugin_name . '-' . $block_name . '-style';
219 | $editor_style_slug = $this->plugin_name . '-' . $block_name . '-editor-style';
220 |
221 | // The JS block script
222 | wp_enqueue_script(
223 | $script_slug,
224 | plugin_dir_url( __FILE__ ) . $block_name . '/block.build.js',
225 | ['wp-blocks', 'wp-i18n', 'wp-element'], // Required scripts for the block
226 | GBC_VERSION
227 | );
228 |
229 | // The block style
230 | // It will be loaded on the editor and on the site
231 | wp_register_style(
232 | $style_slug,
233 | plugin_dir_url( __FILE__ ) . $block_name . '/css/style.css',
234 | ['wp-blocks'], // General style
235 | GBC_VERSION
236 | );
237 |
238 | // The block style for the editor only
239 | wp_register_style(
240 | $editor_style_slug,
241 | plugin_dir_url( __FILE__ ) . $block_name . '/css/editor.css',
242 | ['wp-edit-blocks'], // Style for the editor
243 | GBC_VERSION
244 | );
245 |
246 | // Registering the block
247 | register_block_type(
248 | $block_namespace, // Block name with namespace
249 | [
250 | 'style' => $style_slug, // General block style slug
251 | 'editor_style' => $editor_style_slug, // Editor block style slug
252 | 'editor_script' => $script_slug, // The block script slug
253 | ]
254 | );
255 |
256 | }
257 |
258 | /**
259 | * Registers the dynamic server side block JS script and its styles
260 | *
261 | * @since 1.0.0
262 | * @return void
263 | */
264 | public function register_dynamic_block_action ( ) {
265 |
266 | $block_name = 'block-dynamic';
267 |
268 | $block_namespace = 'gutenberg-blocks-sample/' . $block_name;
269 |
270 | $script_slug = $this->plugin_name . '-' . $block_name;
271 | $style_slug = $this->plugin_name . '-' . $block_name . '-style';
272 | $editor_style_slug = $this->plugin_name . '-' . $block_name . '-editor-style';
273 |
274 | // The JS block script
275 | wp_enqueue_script(
276 | $script_slug,
277 | plugin_dir_url( __FILE__ ) . $block_name . '/block.build.js',
278 | ['wp-blocks', 'wp-i18n', 'wp-element'], // Required scripts for the block
279 | GBC_VERSION
280 | );
281 |
282 | // The block style
283 | // It will be loaded on the editor and on the site
284 | wp_register_style(
285 | $style_slug,
286 | plugin_dir_url( __FILE__ ) . $block_name . '/css/style.css',
287 | ['wp-blocks'], // General style
288 | GBC_VERSION
289 | );
290 |
291 | // The block style for the editor only
292 | wp_register_style(
293 | $editor_style_slug,
294 | plugin_dir_url( __FILE__ ) . $block_name . '/css/editor.css',
295 | ['wp-edit-blocks'], // Style for the editor
296 | GBC_VERSION
297 | );
298 |
299 | // Registering the block
300 | register_block_type(
301 | $block_namespace, // Block name with namespace
302 | [
303 | 'style' => $style_slug, // General block style slug
304 | 'editor_style' => $editor_style_slug, // Editor block style slug
305 | 'editor_script' => $script_slug, // The block script slug
306 | 'render_callback' => [$this, 'block_dynamic_render_cb'], // The render callback
307 | ]
308 | );
309 |
310 | }
311 |
312 | /**
313 | * CALLBACK
314 | *
315 | * Render callback for the dynamic block.
316 | *
317 | * Instead of rendering from the block's save(), this callback will render the front-end
318 | *
319 | * @since 1.0.0
320 | * @param $att Attributes from the JS block
321 | * @return string Rendered HTML
322 | */
323 | public function block_dynamic_render_cb ( $att ) {
324 |
325 | // Coming from RichText, each line is an array's element
326 | $soma = $att['number1'][0] + $att['number2'][0];
327 |
328 | $html = "
$soma
";
329 |
330 | return $html;
331 |
332 | }
333 |
334 | /**
335 | * Add a new action to the collection to be registered with WordPress.
336 | *
337 | * @since 1.0.0
338 | * @param string $hook The name of the WordPress action that is being registered.
339 | * @param object $component A reference to the instance of the object on which the action is defined.
340 | * @param string $callback The name of the function definition on the $component.
341 | * @param int $priority Optional. The priority at which the function should be fired. Default is 10.
342 | * @param int $accepted_args Optional. The number of arguments that should be passed to the $callback. Default is 1.
343 | */
344 | protected function add_action( $hook, $component, $callback, $priority = 10, $accepted_args = 1 ) {
345 | $this->actions = $this->add( $this->actions, $hook, $component, $callback, $priority, $accepted_args );
346 | }
347 |
348 | /**
349 | * A utility function that is used to register the actions and hooks into a single
350 | * collection.
351 | *
352 | * @since 1.0.0
353 | * @access private
354 | * @param array $hooks The collection of hooks that is being registered (that is, actions or filters).
355 | * @param string $hook The name of the WordPress filter that is being registered.
356 | * @param object $component A reference to the instance of the object on which the filter is defined.
357 | * @param string $callback The name of the function definition on the $component.
358 | * @param int $priority The priority at which the function should be fired.
359 | * @param int $accepted_args The number of arguments that should be passed to the $callback.
360 | * @return array The collection of actions and filters registered with WordPress.
361 | */
362 | private function add( $hooks, $hook, $component, $callback, $priority, $accepted_args ) {
363 |
364 | $hooks[] = [
365 | 'hook' => $hook,
366 | 'component' => $component,
367 | 'callback' => $callback,
368 | 'priority' => $priority,
369 | 'accepted_args' => $accepted_args
370 | ];
371 |
372 | return $hooks;
373 |
374 | }
375 |
376 | /**
377 | * Run the loader to execute all of the hooks with WordPress.
378 | *
379 | * @since 1.0.0
380 | */
381 | public function run() {
382 | $this->run_adds();
383 | }
384 |
385 | /**
386 | * Register the filters and actions with WordPress.
387 | *
388 | * @since 1.0.0
389 | */
390 | public function run_adds() {
391 |
392 | foreach ( $this->actions as $hook ) {
393 | add_action( $hook['hook'], array( $hook['component'], $hook['callback'] ), $hook['priority'], $hook['accepted_args'] );
394 | }
395 |
396 | }
397 |
398 |
399 |
400 | }
401 |
402 | /*
403 | * BEGIN
404 | */
405 | $gsb = new Gutenberg_Blocks_Sample();
406 | $gsb->run();
--------------------------------------------------------------------------------