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} = wpponents;
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 → /.
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?
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} = wpponents;
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/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?
Share Improve this question asked Nov 18, 2018 at 16:38 jsnoobjsnoob 311 silver badge4 bronze badges1 Answer
Reset to default 1I got a result after 4 hours of stupid try & error
I'm unable to read values from source meta in the frontend. I assigned the variable from meta to a regular string attribute and it works. Easy Peasy.
/**
* 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} = wpponents;
const {AlignmentToolbar, BlockControls, InspectorControls,} = wp.editor;
const {
PanelBody,
PanelRow,
Fragment
} = wp.element;
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/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: {
metaToDisplay: {
type: 'string',
source: 'meta',
meta: 'werk',
},
className: {
type: 'string',
default: 'fuck'
},
werkId: {
type: 'string',
value: 'foo',
default: 'shit'
}
},
edit(props) {
// const {attributes: {metaToDisplay, className}, setAttributes, isSelected} = props;
let metaToDisplay = props.attributes.metaToDisplay;
let className = props.className;
props.setAttributes( { werkId: metaToDisplay } );
props.werkId = props.metaToDisplay;
return (
<ServerSideRender
block="cgb/block-bold-blocks"
attributes={{
metaToDisplay: metaToDisplay,
className: className,
werkId: metaToDisplay
}}
/>
)
;
},
save: function (props) {
// const {attributes: {metaToDisplay, className}, setAttributes} = props;
// Rendering in PHP
return null;
},
});
I'm sure, that I'm doing some kind of cargo cult here. Can somebody provide me a more elegant solution for my problem?