Gutenberg块在前端输出JSON-这正常吗?

时间:2019-12-07 作者:Brian

我有一个自定义块,它修改了一个最终的附加Gutenberg截面块,以便我可以定义截面类型,例如exercise 并应用一些自定义格式。

我注意到在前端,修改后的块在块上方显示JSON。像这样:

<!-- wp:uagb/section {"block_id":"e00ee750-246d-46fd-a034-c6dc37497309","contenttype":"exercise","contenttitle":"here is exercise 1","contentname":"Exercise"} -->
未修改的块不显示任何JSON,因此我认为这与我的修改有关。

这是我的代码:


const { assign } = lodash;
const { addFilter } = wp.hooks;
const { __ } = wp.i18n;

// Enable spacing control on the following blocks
const enableBlockContentTypeAttribute = [
    \'uagb/section\',
];

// Available spacing control options
const contenttypeControlOptions = [
    {
        label: __( \'None\' ),
        value: \'\',
    },
    {
        label: __( \'Exercise\' ),
        value: \'exercise\',
    },
    {
        label: __( \'Concept\' ),
        value: \'concept\',
    },
    {
        label: __( \'Something\' ),
        value: \'something\',
    },
];

/**
 * Add spacing control attribute to block.
 *
 * @param {object} settings Current block settings.
 * @param {string} name Name of block.
 *
 * @returns {object} Modified block settings.
 */
const addBlockContentTypeAttribute = ( settings, name ) => {
    // Do nothing if it\'s another block than our defined ones.

    if ( ! enableBlockContentTypeAttribute.includes( name ) ) {
        return settings;
    }
    //console.log(\'Add content type option\');
    // Use Lodash\'s assign to gracefully handle if attributes are undefined
    settings.attributes = assign( settings.attributes, {
        contenttype: {
            type: \'string\',
            default: contenttypeControlOptions[ 0 ].value,
        },
        contenttitle: {
            type: \'string\',
            default: \'\',
        },
        contentname: {
            type: \'string\',
            default: contenttypeControlOptions[ 0 ].label,
        },

    } );

    return settings;
};

addFilter( \'blocks.registerBlockType\', \'my-mods/attribute/contenttype\', addBlockContentTypeAttribute );

const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { InspectorControls, InnerBlocks } = wp.editor;
const { PanelBody, PanelRow, SelectControl, TextControl } = wp.components;

/**
 * Create HOC to add content type control to inspector controls of block.
 */
const withContentTypeControl = createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
    // Do nothing if it\'s another block than our defined ones.
    if ( ! enableBlockContentTypeAttribute.includes( props.name ) ) {
        return (
            <BlockEdit { ...props } />
    );
    }
    //console.log(props.attributes);
    const { contenttype } = props.attributes;
    const { contenttitle } = props.attributes;
    const { contentname } = props.attributes;

    function getContentTitle ( content ) {
        props.setAttributes({contenttitle: content});
    }

    return (
        <Fragment>
        <BlockEdit { ...props } />
<InspectorControls>
    <PanelBody
    title={ __( \'Choose Content Type\' ) }
    initialOpen={ true }
        >
        <SelectControl
    label={ __( \'Content Type\' ) }
    value={ contenttype }
    options={ contenttypeControlOptions }
    onChange={ ( selectedContentTypeOption ) => {
        var name = contenttypeControlOptions.filter(obj => {
                return obj.value === selectedContentTypeOption
            });
        //console.log(name);
        name = name[0].label;
        //console.log(name);
        props.setAttributes( {
            contenttype: selectedContentTypeOption,
            contentname: name,
        } );
    } }
/>

<TextControl
    label={ __( \'Content Title\' ) }
    value={ contenttitle }
    onChange={ ( getContentTitle ) => {
        props.setAttributes( {
            contenttitle: getContentTitle,
        });
    }}
/>

</PanelBody>
    </InspectorControls>
    </Fragment>
);
};
}, \'withSpacingControl\' );

addFilter( \'editor.BlockEdit\', \'my-mods/with-contenttype-control\', withContentTypeControl );



// do something with these attributes - add header to section if exercise type block
const addContentTypeMarkup = ( element, blockType, attributes ) => {
    // Do nothing if it\'s another block than our defined ones.
    if ( ! enableBlockContentTypeAttribute.includes( blockType.name ) ) {
        return element;
    }
    if ( attributes.contenttitle) {

        // add header with anchor link and class name
        var title_slug = attributes.contenttitle.trim().split(/\\s+/).join(\'-\');

        var iconclassbase=\'contenticon \';
        var iconclass=\'\';
        switch(attributes.contenttype) {
            case \'exercise\':
                iconclass =  \'fas fa-guitar\';
                break;
            case \'concept\':
                iconclass = \'fas fa-atom\';
                break;
            default:
                iconclass = \'fas fa-atom\';
        }
        iconclass = iconclassbase + iconclass;

        return (
            <React.Fragment>
            <div id = {`${title_slug}`} className = {`contenttype-wrapper sometopictype-${attributes.contenttype}`} content-id="" data-id = {`${attributes.block_id}`}>
                <div className = "heading d-flex flex-row">
                    <i className={`${iconclass} fa-7x`}></i>
                    <div className = "col">
                       <div className = "row"><span className="content-name">{attributes.contentname}</span></div>
                       <div className = "row"><h3 dangerouslySetInnerHTML={ { __html: attributes.contenttitle } }></h3></div>
                    </div>
                </div>
                {element}
            </div>
        </React.Fragment>
    )
    } else {
        return element;
    }

};

addFilter( \'blocks.getSaveElement\', \'my-mods/add-content-type-markup\', addContentTypeMarkup);
是否需要此JSON输出?如果没有,我如何禁用它?

谢谢Brian

1 个回复
SO网友:Tom J Nowell

是的,这对于帖子内容来说是正常的,但如果您正确处理了内容,例如使用the_content() 以显示它。这意味着您正在显示尚未通过的原始内容the_content 滤器

相关推荐

Admin Theme customization

我遵循wordpress codex网站上关于通过插件创建管理主题的说明。我激活了插件,但我的样式表没有包含在<head>.. 这是我的代码:add_action( \'admin_init\', \'kd_plugin_admin_init\' ); add_action( \'admin_menu\', \'kd_plugin_admin_menu\' ); function kd_plugin_admin_init() { /* Register