1

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.

Problem

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?

0

I 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} = wp.components;
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.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: {
        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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.