javascript - Inspect Controls 中的古腾堡媒体上传

Question

我正在尝试通过古腾堡 Inspect Control 的媒体库上传文件。我目前在 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;

我在这里注册 block 类型:

    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;
        },
    } );

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

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

当我点击阻止时它说:

The editor has encountered an unexpected error.

有人可以帮我吗？

Answer 1

您需要为保存图像链接添加属性字段。然后你需要添加 MediaUpload 元素并添加点击回调。并在保存值(value)之后。您可以将我的代码集成到您的决定。我正在将图像选择添加到检查器控件区域。

    ( 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,
    );