微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

将图片上传添加到“自定义博客”设置

如何解决将图片上传添加到“自定义博客”设置

我已通过以下代码完成了此代码块。文本框即将到来。但是我必须在设置部分添加一个图像字段。

( function( blocks,editor,element ) {
    var el = element.createElement;

    blocks.registerBlockType( 'mcb/call-to-action',{
        title: 'MCB: Call to Action',// The title of block in editor.
        icon: 'admin-comments',// The icon of block in editor.
        category: 'common',// The category of block in editor.
        attributes: {
            sectiontitle: {
                type: 'text',default: 'Section title goes here'
            },titleone: {
                type: 'text',default: 'Title Here'
            },content: {
                type: 'string',default: 'Collaboratively customize web-enabled supply chains and turnkey collaboration and idea-sharing Assertively cultivate.'
            },button: {
                type: 'string',default: 'Read More'
            },titletwo: {
                type: 'text',contenttwo: {
                type: 'string',buttontwo: {
                type: 'string',titlethree: {
                type: 'text',contentthree: {
                type: 'string',buttonthree: {
                type: 'string',default: 'Read More'
            }

        },edit: function( props ) {
            return (
                el( 'div',{ className: props.className },el(
                        editor.RichText,{
                            tagName: 'h2',className: 'mcb-call-to-action-sectiontitle',value: props.attributes.sectiontitle,onChange: function( content ) {
                                props.setAttributes( { sectiontitle: content } );
                            }
                        }
                    ),{
                            tagName: 'h3',className: 'mcb-call-to-action-title',value: props.attributes.titleone,onChange: function( content ) {
                                props.setAttributes( { titleone: content } );
                            }
                        }
                    ),{
                            tagName: 'div',className: 'mcb-call-to-action-content',value: props.attributes.content,onChange: function( content ) {
                                props.setAttributes( { content: content } );
                            }
                        }
                    ),{
                            tagName: 'span',className: 'mcb-call-to-action-button',value: props.attributes.button,onChange: function( content ) {
                                props.setAttributes( { button: content } );
                            }
                        }
                    ),value: props.attributes.titletwo,onChange: function( content ) {
                                props.setAttributes( { titletwo: content } );
                            }
                        }
                    ),value: props.attributes.contenttwo,onChange: function( content ) {
                                props.setAttributes( { contenttwo: content } );
                            }
                        }
                    ),value: props.attributes.buttontwo,onChange: function( content ) {
                                props.setAttributes( { buttontwo: content } );
                            }
                        }
                    ),value: props.attributes.titlethree,onChange: function( content ) {
                                props.setAttributes( { titlethree: content } );
                            }
                        }
                    ),value: props.attributes.contentthree,onChange: function( content ) {
                                props.setAttributes( { contentthree: content } );
                            }
                        }
                    ),value: props.attributes.buttonthree,onChange: function( content ) {
                                props.setAttributes( { buttonthree: content } );
                            }
                        }
                    ),)

            );
        },save: function( props ) {
            return (
                el( 'div',el( editor.RichText.Content,{
                        tagName: 'h2',} ),{
                        tagName: 'h3',{
                        tagName: 'p',el( 'button',{ className: 'mcb-call-to-action-button' },props.attributes.button
                    ),className: 'mcb-call-to-action-titletwo',className: 'mcb-call-to-action-contenttwo',{ className: 'mcb-call-to-action-buttontwo' },props.attributes.buttontwo
                    ),className: 'mcb-call-to-action-titlethree',className: 'mcb-call-to-action-contentthree',{ className: 'mcb-call-to-action-buttonthree' },props.attributes.buttonthree
                    )
                )
            );
        },} );
} )( window.wp.blocks,window.wp.editor,window.wp.element );

我是自定义区块中的新手。请让我知道如何在设置部分添加图像并在块中使用它。

谢谢。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。