Wordpress 将图像上载添加到自定义博客设置
我已经用下面的代码完成了这个块。文本框非常完美。但是我必须在设置部分添加一个图像字段Wordpress 将图像上载添加到自定义博客设置,wordpress,wordpress-gutenberg,Wordpress,Wordpress Gutenberg,我已经用下面的代码完成了这个块。文本框非常完美。但是我必须在设置部分添加一个图像字段 ( 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.
( 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',
default: 'Title Here'
},
contenttwo: {
type: 'string',
default: 'Collaboratively customize web-enabled supply chains and turnkey collaboration and idea-sharing Assertively cultivate.'
},
buttontwo: {
type: 'string',
default: 'Read More'
},
titlethree: {
type: 'text',
default: 'Title Here'
},
contentthree: {
type: 'string',
default: 'Collaboratively customize web-enabled supply chains and turnkey collaboration and idea-sharing Assertively cultivate.'
},
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 } );
}
}
),
el(
editor.RichText,
{
tagName: 'h3',
className: 'mcb-call-to-action-title',
value: props.attributes.titleone,
onChange: function( content ) {
props.setAttributes( { titleone: content } );
}
}
),
el(
editor.RichText,
{
tagName: 'div',
className: 'mcb-call-to-action-content',
value: props.attributes.content,
onChange: function( content ) {
props.setAttributes( { content: content } );
}
}
),
el(
editor.RichText,
{
tagName: 'span',
className: 'mcb-call-to-action-button',
value: props.attributes.button,
onChange: function( content ) {
props.setAttributes( { button: content } );
}
}
),
el(
editor.RichText,
{
tagName: 'h3',
className: 'mcb-call-to-action-title',
value: props.attributes.titletwo,
onChange: function( content ) {
props.setAttributes( { titletwo: content } );
}
}
),
el(
editor.RichText,
{
tagName: 'div',
className: 'mcb-call-to-action-content',
value: props.attributes.contenttwo,
onChange: function( content ) {
props.setAttributes( { contenttwo: content } );
}
}
),
el(
editor.RichText,
{
tagName: 'span',
className: 'mcb-call-to-action-button',
value: props.attributes.buttontwo,
onChange: function( content ) {
props.setAttributes( { buttontwo: content } );
}
}
),
el(
editor.RichText,
{
tagName: 'h3',
className: 'mcb-call-to-action-title',
value: props.attributes.titlethree,
onChange: function( content ) {
props.setAttributes( { titlethree: content } );
}
}
),
el(
editor.RichText,
{
tagName: 'div',
className: 'mcb-call-to-action-content',
value: props.attributes.contentthree,
onChange: function( content ) {
props.setAttributes( { contentthree: content } );
}
}
),
el(
editor.RichText,
{
tagName: 'span',
className: 'mcb-call-to-action-button',
value: props.attributes.buttonthree,
onChange: function( content ) {
props.setAttributes( { buttonthree: content } );
}
}
),
)
);
},
save: function( props ) {
return (
el( 'div', { className: props.className },
el( editor.RichText.Content, {
tagName: 'h2',
className: 'mcb-call-to-action-sectiontitle',
value: props.attributes.sectiontitle,
} ),
el( editor.RichText.Content, {
tagName: 'h3',
className: 'mcb-call-to-action-title',
value: props.attributes.titleone,
} ),
el( editor.RichText.Content, {
tagName: 'p',
className: 'mcb-call-to-action-content',
value: props.attributes.content,
} ),
el( 'button', { className: 'mcb-call-to-action-button' },
props.attributes.button
),
el( editor.RichText.Content, {
tagName: 'h3',
className: 'mcb-call-to-action-titletwo',
value: props.attributes.titletwo,
} ),
el( editor.RichText.Content, {
tagName: 'p',
className: 'mcb-call-to-action-contenttwo',
value: props.attributes.contenttwo,
} ),
el( 'button', { className: 'mcb-call-to-action-buttontwo' },
props.attributes.buttontwo
),
el( editor.RichText.Content, {
tagName: 'h3',
className: 'mcb-call-to-action-titlethree',
value: props.attributes.titlethree,
} ),
el( editor.RichText.Content, {
tagName: 'p',
className: 'mcb-call-to-action-contentthree',
value: props.attributes.contentthree,
} ),
el( 'button', { className: 'mcb-call-to-action-buttonthree' },
props.attributes.buttonthree
)
)
);
},
} );
} )( window.wp.blocks, window.wp.editor, window.wp.element );