|
1
|
|
|
/** |
|
2
|
|
|
* BLOCK: fooplugins/foogallery |
|
3
|
|
|
* |
|
4
|
|
|
* Registering a basic FooGallery block with Gutenberg. |
|
5
|
|
|
*/ |
|
6
|
|
|
|
|
7
|
|
|
import './style.scss'; |
|
|
|
|
|
|
8
|
|
|
import './editor.scss'; |
|
|
|
|
|
|
9
|
|
|
import FooGalleryEdit from './edit'; |
|
|
|
|
|
|
10
|
|
|
|
|
11
|
|
|
const { __ } = wp.i18n; // Import __() from wp.i18n |
|
|
|
|
|
|
12
|
|
|
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks |
|
|
|
|
|
|
13
|
|
|
|
|
14
|
|
|
/** |
|
15
|
|
|
* Register: aa Gutenberg Block. |
|
16
|
|
|
* |
|
17
|
|
|
* Registers a new block provided a unique name and an object defining its |
|
18
|
|
|
* behavior. Once registered, the block is made editor as an option to any |
|
19
|
|
|
* editor interface where blocks are implemented. |
|
20
|
|
|
* |
|
21
|
|
|
* @link https://wordpress.org/gutenberg/handbook/block-api/ |
|
22
|
|
|
* @param {string} name Block name. |
|
23
|
|
|
* @param {Object} settings Block settings. |
|
24
|
|
|
* @return {?WPBlock} The block, if it has been successfully |
|
25
|
|
|
* registered; otherwise `undefined`. |
|
26
|
|
|
*/ |
|
27
|
|
|
registerBlockType( 'fooplugins/foogallery', { |
|
28
|
|
|
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block. |
|
29
|
|
|
title: __( 'FooGallery' ), // Block title. |
|
30
|
|
|
description: __( 'Insert a FooGallery into your content' ), |
|
31
|
|
|
icon: 'format-gallery', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/. |
|
32
|
|
|
category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed. |
|
33
|
|
|
keywords: [ |
|
34
|
|
|
__( 'foogallery' ), |
|
35
|
|
|
__( 'gallery' ), |
|
36
|
|
|
], |
|
37
|
|
|
supports: { |
|
38
|
|
|
multiple: true, |
|
39
|
|
|
html: false |
|
40
|
|
|
}, |
|
41
|
|
|
attributes: { |
|
42
|
|
|
id: { |
|
43
|
|
|
type: 'number', |
|
44
|
|
|
default: 0 |
|
45
|
|
|
} |
|
46
|
|
|
}, |
|
47
|
|
|
/** |
|
48
|
|
|
* The edit function describes the structure of your block in the context of the editor. |
|
49
|
|
|
* This represents what the editor will render when the block is used. |
|
50
|
|
|
* |
|
51
|
|
|
* The "edit" property must be a valid function. |
|
52
|
|
|
* |
|
53
|
|
|
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/ |
|
54
|
|
|
*/ |
|
55
|
|
|
edit(props) { |
|
56
|
|
|
return (<FooGalleryEdit {...props}/>) |
|
|
|
|
|
|
57
|
|
|
}, |
|
58
|
|
|
|
|
59
|
|
|
|
|
60
|
|
|
/** |
|
61
|
|
|
* The save function defines the way in which the different attributes should be combined |
|
62
|
|
|
* into the final markup, which is then serialized by Gutenberg into post_content. |
|
63
|
|
|
* |
|
64
|
|
|
* The "save" property must be specified and must be a valid function. |
|
65
|
|
|
* |
|
66
|
|
|
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/ |
|
67
|
|
|
*/ |
|
68
|
|
|
save() { |
|
69
|
|
|
// Rendering in PHP |
|
70
|
|
|
return null; |
|
71
|
|
|
}, |
|
72
|
|
|
} ); |
|
73
|
|
|
|
Generally using ECMAScript 6 specific syntax is fine if you are sure that it is already supported by all engines which are supposed to run this code.
Further Reading: