web-dev-qa-db-fra.com

Gutenberg: impossible de sauvegarder les attributs avec ServerRender

Je lutte depuis 3 heures avec ce problème et je ne vois pas de fin. Problème: j'essaie d'afficher une valeur post_meta dans le frontend avec ServerSideRender. La valeur est affichée dans l'éditeur Gutenberg mais pas dans l'interface.

 Problem 

J'échafaude un nouveau bloc avec Create Guten Block

Mon 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');

Je pense que le problème est que les attributs ne sont pas ajoutés au post_content

C'est ce que génère Gutenberg:

<!-- wp:cgb/block-bold-blocks /-->

C’est ce que Gutenberg devrait générer (et ce qui fonctionne si je le mets dans le champ DB:

<!-- wp:cgb/block-bold-blocks {"metaToDispaly": "C01112107"} /-->

Est-ce que quelqu'un sait ce que je fais mal ici?

serverblock-editor
1
jsnoob

J'ai eu un résultat après 4 heures d'essais et d'erreurs stupides

Je suis incapable de lire les valeurs de source meta dans le frontend. J'ai assigné la variable de méta à un attribut de chaîne ordinaire et cela fonctionne. Peasy facile.

/**
 * 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;

    },
});

Je suis sûr que je fais un culte du fret ici. Quelqu'un peut-il me fournir une solution plus élégante à mon problème?

0
jsnoob