Multiple Blocks in registerBlockType() Block.js
Question
I am needing to add multiple blocks into the block.js file of my WordPress plugin. I have the following code, but it doesn’t work as expected.
( function() {
var __ = wp.i18n.__; // The __() function for internationalization.
var createElement = wp.element.createElement; // The wp.element.createElement() function to create elements.
var registerBlockType = wp.blocks.registerBlockType; // The registerBlockType() function to register blocks.
/**
* Register block
*
* @param {string} name Block name.
* @param {Object} settings Block settings.
* @return {?WPBlock} Block itself, if registered successfully,
* otherwise "undefined".
*/
registerBlockType(
'plugin/custom-block-shortcode-block', // Block name. Must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
{
title: __( 'Shortcode', 'plugin-blocks' ), // Block title. __() function allows for internationalization.
icon: 'smiley',
category: 'plugin-blocks', // Block category. Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
// Defines the block within the editor.
edit: function( props ) {
return createElement(
'p', // Tag type.
{
className: props.className, // Class name is generated using the block's name prefixed with wp-block-, replacing the / namespace separator with a single -.
},
'[Shortcode][/Shortcode]' // Block content
);
},
// Defines the saved block.
save: function( props ) {
return createElement(
'p', // Tag type.
{
className: props.className, // Class name is generated using the block's name prefixed with wp-block-, replacing the / namespace separator with a single -.
},
'[Shortcode][/Shortcode]' // Block content
);
},
},
'plugin/custom-block2-shortcode-block', // Block name. Must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
{
title: __( 'Shotcode2', 'plugin-blocks' ), // Block title. __() function allows for internationalization.
icon: 'smiley',
category: 'plugin-blocks', // Block category. Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
// Defines the block within the editor.
edit: function( props ) {
return createElement(
'p', // Tag type.
{
className: props.className, // Class name is generated using the block's name prefixed with wp-block-, replacing the / namespace separator with a single -.
},
'[Shortcode][/Shortcode]' // Block content
);
},
// Defines the saved block.
save: function( props ) {
return createElement(
'p', // Tag type.
{
className: props.className, // Class name is generated using the block's name prefixed with wp-block-, replacing the / namespace separator with a single -.
},
'[Shortcode][/Shortcode]' // Block content
);
},
}
);
})();
This shows the first block, but not the second block, how do I have multiple blocks in one registerBlockType function?
0
javascript
3 years
2019-10-28T16:51:13-05:00
2019-10-28T16:51:13-05:00 0 Answers
89 views
0
Leave an answer