it-swarm.com.ru

Гутенберг: невозможно сохранить атрибуты с помощью ServerRender

Я уже 3 часа борюсь с этой проблемой и не вижу конца. Проблема: я пытаюсь отобразить значение post_meta во внешнем интерфейсе с помощью ServerSideRender. Значение отображается в редакторе Гутенберга, но не в интерфейсе.

 Problem 

Я создаю новый блок с помощью Создать блок Гутена

Мой 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');

Я думаю, что проблема в том, что атрибуты не добавляются в post_content

Вот что генерирует Гутенберг:

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

Это то, что я думаю, что Гутенберг должен генерировать (и что работает, если я помещу это в поле БД:

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

Кто-нибудь знает, что я здесь делаю не так?

1
jsnoob

Я получил результат после 4 часов глупых проб и ошибок

Я не могу прочитать значения из источника мета во внешнем интерфейсе. Я назначил переменную из meta обычному строковому атрибуту, и она работает. Очень просто.

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

    },
});

Я уверен, что я делаю какой-то культ груза здесь. Может кто-нибудь предложить мне более элегантное решение для моей проблемы?

0
jsnoob