Я пытаюсь создать несколько пользовательских блоков в Гутенберге.Это позволяет мне регистрироваться только по одному.
Я пытался объединить recipe_card_block() и first_block(), но это не помогает.
Оба блока работают правильно по отдельности.Если я удалю recipe_card_block(), в инсерторе появится first_block() (и наоборот).Однако, когда присутствуют оба, появится только первый.Изменение порядка их регистрации влияет на то, какой из них появляется.
Мне кажется, что они как-то перезаписывают друг друга, но я не понимаю, как это происходит.
Вот код в functions.php.
function recipe_card_block(){
wp_register_script(
'recipe-card-script', // name of script
get_template_directory_uri() . '/js/recipe-card.js', // path to script
array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components' ) // dependencies
);
wp_register_style(
'recipe-card-style',
get_template_directory_uri() . '/css/recipe-card-style.css',
array( 'wp-edit-blocks' )
);
register_block_type('gadam/recipe-card', array(
'editor_script' => 'recipe-card-script', // default script / script to define behavior within the editor
'style' => 'recipe-card-style' // default styles
) );
}
add_action( 'init', 'recipe_card_block' );
function first_block(){
wp_register_script(
'first-block-script', // name of script
get_template_directory_uri() . '/js/first-block.js', // path to script
array( 'wp-blocks', 'wp-element', 'wp-editor' ) // dependencies
);
// styles for editor view
wp_register_style(
'first-block-editor-style',
get_template_directory_uri() . '/css/first-block-editor-style.css',
array( 'wp-edit-blocks' )
);
// default styles
wp_register_style(
'first-block-style',
get_template_directory_uri() . '/css/first-block-style.css',
array( 'wp-edit-blocks' )
);
register_block_type('gadam/first-block', array(
'editor_script' => 'first-block-script', // default script / script to define behavior within the editor
'editor_style' => 'first-block-editor-style', // styles for editor view
'style' => 'first-block-style' // default styles
) );
}
add_action( 'init', 'first_block' );
Это код в first-block.js
const { registerBlockType } = wp.blocks;
const { RichText, BlockControls, InspectorControls, AlignmentToolbar, FontSizePicker } = wp.editor;
const { Fragment } = wp.element;
registerBlockType( 'gadam/first-block', {
title: 'First Block',
icon: 'welcome-learn-more',
category: 'custom-blocks',
attributes: {
content: {
type: 'string',
source: 'html',
selector: 'p'
},
alignment: {
type: 'string'
},
fontSize: {
type: 'number',
default: 18
}
},
edit( { attributes, className, setAttributes } ) {
const { content, alignment, fontSize } = attributes;
const fontSizes = [
{
name: 'Small',
slug: 'small',
size: 14
},
{
name: 'Normal',
slug: 'normal',
size: 18
},
{
name: 'Large',
slug: 'large',
size: 24
}
];
function onChangeContent( newContent ) {
setAttributes( { content: newContent } );
}
function onChangeAlignment( newAlignment ) {
setAttributes( { alignment: newAlignment } );
}
function onChangeFontSize( newFontSize ) {
setAttributes( { fontSize: newFontSize } );
}
return (
<Fragment>
<BlockControls>
<AlignmentToolbar
value={ alignment }
onChange={ onChangeAlignment }
/>
</BlockControls>
<InspectorControls>
<AlignmentToolbar
value={ alignment }
onChange={ onChangeAlignment }
/>
<FontSizePicker
fontSizes={ fontSizes }
value={ fontSize }
onChange={ onChangeFontSize }
/>
</InspectorControls>
<RichText
key="editable"
tagName="p"
className={ className }
style={ { textAlign: alignment, fontSize: fontSize } }
onChange={ onChangeContent }
value={ content }
/>
</Fragment>
);
},
save( { attributes } ) {
const { content, alignment, fontSize } = attributes;
const baseClass = 'wp-block-gadam-first-block';
return (
<div class="container">
<div class={ baseClass }>
<RichText.Content
style={ { textAlign: alignment, fontSize: fontSize } }
value={ content }
tagName="p"
/>
</div>
</div>
);
},
} );
И, наконец, это recipe-card.js
const { registerBlockType } = wp.blocks;
const { RichText, BlockControls, InspectorControls, AlignmentToolbar, FontSizePicker } = wp.editor;
const { Fragment } = wp.element;
registerBlockType( 'gadam/recipe-card', {
title: 'Recipe Card',
icon: 'index-card',
category: 'custom-blocks',
attributes: {
content: {
type: 'string',
source: 'html',
selector: 'p'
},
alignment: {
type: 'string'
},
fontSize: {
type: 'number',
default: 18
}
},
edit( { attributes, className, setAttributes } ) {
const { content, alignment, fontSize } = attributes;
const fontSizes = [
{
name: 'Small',
slug: 'small',
size: 14
},
{
name: 'Normal',
slug: 'normal',
size: 18
},
{
name: 'Large',
slug: 'large',
size: 24
}
];
function onChangeContent( newContent ) {
setAttributes( { content: newContent } );
}
function onChangeAlignment( newAlignment ) {
setAttributes( { alignment: newAlignment } );
}
function onChangeFontSize( newFontSize ) {
setAttributes( { fontSize: newFontSize } );
}
return (
<Fragment>
<BlockControls>
<AlignmentToolbar
value={ alignment }
onChange={ onChangeAlignment }
/>
</BlockControls>
<InspectorControls>
<AlignmentToolbar
value={ alignment }
onChange={ onChangeAlignment }
/>
<FontSizePicker
fontSizes={ fontSizes }
value={ fontSize }
onChange={ onChangeFontSize }
/>
</InspectorControls>
<RichText
key="editable"
tagName="p"
className={ className }
style={ { textAlign: alignment, fontSize: fontSize } }
onChange={ onChangeContent }
value={ content }
/>
</Fragment>
);
},
save( { attributes } ) {
const { content, alignment, fontSize } = attributes;
const baseClass = 'wp-block-gadam-recipe-card';
return (
<div class="container">
<div class={ baseClass }>
<RichText.Content
style={ { textAlign: alignment, fontSize: fontSize } }
value={ content }
tagName="p"
/>
</div>
</div>
);
},
} );