"检查控件"中的古腾堡媒体上传

Question

我正在尝试通过古腾堡的检查控制通过媒体库上传文件。我目前在JS中使用此代码：

var el = wp.element.createElement,
registerBlockType = wp.blocks.registerBlockType,
ServerSideRender = wp.components.ServerSideRender,
TextControl = wp.components.TextControl,
TextareaControl = wp.components.TextareaControl,
MediaUpload = wp.components.MediaUpload,
InspectorControls = wp.editor.InspectorControls;

在这里我正在注册块类型：

registerBlockType( 'myplugin/about-section', {
title: 'About Section',
icon: 'megaphone',
category: 'widgets',
edit: function( props ) {
return [
el( ServerSideRender, {
block: 'malinda/about-section',
attributes: props.attributes,
} ),
el( InspectorControls, {},
el( MediaUpload, {
label: 'Background Image',
value: props.attributes.bgimg,
// I think something need to be done here..
} ),
),
];
},
save: function() {
return null;
},
} );

但出于某种原因，它对我不起作用。在控制台中，它给了我这个错误：

错误：缩小了 React 错误 #130;请访问 https://reactjs.org/docs/error-decoder.html？invariant=130&args[]=undefined&args[]= 获取完整消息或使用非缩小开发环境获取完整消息 错误和其他有用的警告。

当我单击块时，它说：

编辑器遇到意外错误。

谁能帮我？

Answer 1

您需要为保存图像链接添加属性字段。然后你需要添加媒体上传元素并在点击时添加回调。并在保存价值后。您可以将我的代码集成到您的代码中 决定。我正在将图像选择添加到检查器控制区域。

( function( editor, components, i18n, element ) {

	var el = element.createElement;
	var registerBlockType = wp.blocks.registerBlockType;
	var InspectorControls = wp.editor.InspectorControls;
var MediaUpload = wp.editor.MediaUpload;

	registerBlockType( 'designa/image-block', {
		title: 'Image block',
		description: 'Image block.',
		icon: 'video-alt3',
		category: 'common',
		
		attributes: {
			mediaURL: {
				type: 'string',
				source: 'attribute',
				selector: 'img',
				attribute: 'src',
			}
		},


		edit: function( props ) {
		    
		    var attributes = props.attributes;
		    
		    var onSelectImage = function( media ) {
				return props.setAttributes({
					mediaURL: media.url
				});
			};

			return [
				el( InspectorControls, { key: 'inspector' },
					el( components.PanelBody, {
						title: 'Image block',
						className: 'image-block',
						initialOpen: true,
					},

						el( MediaUpload, {
							onSelect: onSelectImage,
							type: 'image',
							render: function( obj ) {
								return el( components.Button, {
									    className: 'components-icon-button image-block-btn is-button is-default is-large',
									    onClick: obj.open
									},
									el( 'svg', { className: 'dashicon dashicons-edit', width: '20', height: '20' },
										el( 'path', { d: "M2.25 1h15.5c.69 0 1.25.56 1.25 1.25v15.5c0 .69-.56 1.25-1.25 1.25H2.25C1.56 19 1 18.44 1 17.75V2.25C1 1.56 1.56 1 2.25 1zM17 17V3H3v14h14zM10 6c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm3 5s0-6 3-6v10c0 .55-.45 1-1 1H5c-.55 0-1-.45-1-1V8c2 0 3 4 3 4s1-3 3-3 3 2 3 2z" } )
									),
									el( 'span', {},
									    'Select image'
									),
								);
							}
						}),
					
					),
				)
			];
		},


		save: function( props ) {
			var attributes = props.attributes;

			return (
			    el( 'div', {
					className: props.className
				},
				el( 'img', {
				    src: attributes.mediaURL
				})
				)
			);

		},


	} );

} )(
	window.wp.editor,
	window.wp.components,
	window.wp.i18n,
	window.wp.element,
);