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

Я пытаюсь загрузить файл через медиа-библиотеку из 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[]]= для полного сообщения или используйте неминифицированную среду разработки для полных ошибок и дополнительных полезных предупреждений.

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

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

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


javascript wordpress wordpress-gutenberg gutenberg-blocks
person daniyalahmad    schedule 18.10.2018    source источник
comment
Вы можете посмотреть в этой статье organicthemes.com/create-custom-block-wordpress-gutenberg и используйте код из github. ru / Invulu / organic-profile-block / blob / master / block /   -  person Кирилл Меркушев    schedule 18.10.2018
comment
Если вы включите SCRIPT_DEBUG в своем wp-config.php, добавив строку define( 'SCRIPT_DEBUG', true );, вы увидите неуменьшенные ошибки реакции, которые предоставят вам больше информации и помогут в отладке.   -  person niklas    schedule 16.08.2019

Ответы (1)


arrow_upward
0
arrow_downward

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

person Кирилл Меркушев    schedule 18.10.2018
comment
Можно ли каким-то образом изменить размер изображения для функции сохранения, чтобы оно было оптимизировано для Интернета? - person josias; 28.01.2019
comment
При обратном вызове select у вас есть медиа-объект, вы можете получить размер изображения или размер эскиза изображения или свой собственный размер, просто используйте console.log (media); чтобы увидеть, что вы можете использовать. И после того, как вы можете установить размер миниатюры изображения или добавить пользовательскую ширину изображения с атрибутом стиля или добавить поле ввода для добавления атрибута стиля. - person Кирилл Меркушев; 28.01.2019
comment
Спасибо, это было очень полезно! - person josias; 28.01.2019