I’m struggling since 3 hours with this problem and I do not see an end.
Problem:
I try to display a post_meta value in the Frontend with the ServerSideRender. The Value is Displayed in the Gutenberg Editor but not in the frontend.
I scaffold a new Block with Create Guten Block
My block.js
/**
* BLOCK: bold-blocks
*
* Registering a basic block with Gutenberg.
* Simple block, renders and saves the same content without any interactivity.
*/
// Import CSS.
import './style.scss';
import './editor.scss';
const {__} = wp.i18n; // Import __() from wp.i18n
const {registerBlockType} = wp.blocks; // Import registerBlockType() from wp.blocks
const {ServerSideRender} = wp.components;
registerBlockType('cgb/block-bold-blocks', {
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __('bold-blocks - Example Meta Content'), // Block title.
icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
keywords: [
__('bold-blocks — CGB Block'),
__('CGB Example'),
__('create-guten-block'),
],
attributes: {
metaToDispaly: {
type: 'string',
source: 'meta',
meta: 'werk',
default: '30'
}
},
edit: function (props) {
// ensure the block attributes matches this plugin's name
console.log(props.attributes);
return (
<ServerSideRender
block="cgb/block-bold-blocks"
attributes={props.attributes}
/>
);
},
save() {
// Rendering in PHP
return null;
},
});
PHP
function bold_blocks_cgb_block_assets()
{
// Styles.
wp_enqueue_style(
'bold_blocks-cgb-style-css', // Handle.
plugins_url('dist/blocks.style.build.css', dirname(__FILE__)), // Block style CSS.
array('wp-blocks') // Dependency to include the CSS after it.
// filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: filemtime — Gets file modification time.
);
} // End function bold_blocks_cgb_block_assets().
// Hook: Frontend assets.
add_action('enqueue_block_assets', 'bold_blocks_cgb_block_assets');
function bold_blocks_cgb_editor_assets()
{
// Scripts.
wp_enqueue_script(
'bold_blocks-cgb-block-js', // Handle.
plugins_url('/dist/blocks.build.js', dirname(__FILE__)), // Block.build.js: We register the block here. Built with Webpack.
array('wp-blocks', 'wp-i18n', 'wp-element'), // Dependencies, defined above.
// filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ), // Version: filemtime — Gets file modification time.
true // Enqueue the script in the footer.
);
// Styles.
wp_enqueue_style(
'bold_blocks-cgb-block-editor-css', // Handle.
plugins_url('dist/blocks.editor.build.css', dirname(__FILE__)), // Block editor CSS.
array('wp-edit-blocks') // Dependency to include the CSS after it.
// filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css' ) // Version: filemtime — Gets file modification time.
);
} // End function bold_blocks_cgb_editor_assets().
// Hook: Editor assets.
add_action('enqueue_block_editor_assets', 'bold_blocks_cgb_editor_assets');
/**************************** MY PART ************************************************/
function bold_register_dynamic_blocks()
{
register_block_type('cgb/block-bold-blocks', array(
'attributes' => array(
'metaToDispaly' => array(
'type' => 'string',
),
),
'render_callback' => function ($attributes) {
return 'Attributes=". print_r($attributes, true );
}
));
}
add_action("init', 'bold_register_dynamic_blocks');
I think the problem is, that the attributes are not added to the post_content
This is what Gutenberg generates:
<!-- wp:cgb/block-bold-blocks /-->
This is what I think Gutenberg should generate (and what works if I put it in the DB field:
<!-- wp:cgb/block-bold-blocks {"metaToDispaly": "C01112107"} /-->
Does anybody know what I’m doing wrong here?