Загрузка материалов Гутенберга в Inspect Controls - PullRequest
Новая
       63

Загрузка материалов Гутенберга в Inspect Controls

0 голосов
/ 18 октября 2018

Я пытаюсь загрузить файл через медиатеку из 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;
        },
    } );

Но по какой-то причине он не работает для меня.В консоли это дает мне эту ошибку:

Ошибка: Minified React error # 130;посетите https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= для полного сообщения или используйте неминифицированную среду разработки для полных ошибок и дополнительных полезных предупреждений.

, и когда я нажимаю на блок, он говорит:

Редактор обнаружил неожиданную ошибку.

Может кто-нибудь помочь мне в этом?

1 Ответ

0 голосов
/ 18 октября 2018

Вам необходимо добавить поле атрибутов для сохранения ссылки на изображение.Затем вам нужно добавить элемент 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,
    );
...