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: