3

我正在尝试通过 Gutenberg 的 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;

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

    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[]= 获取完整消息或使用非缩小开发环境获取完整错误和其他有用的警告。

当我点击块时，它说：

编辑器遇到了意外错误。

任何人都可以帮助我吗？

4

1 回答 1

1

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

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

于 2018-10-18T16:26:10.760 回答