Gutenberg new block gallery

Hi,
I have problem with create new gutenberg block.
I wanna made plugin adding new block gallery with custom renders.

How to display uploader images?
And render all uploaded images?

My actual code

var el = wp.element.createElement;

wp.blocks.registerBlockType('zlapchwile-gutenberg/custom-gallery-block', {
	title: 'Custom gallery',		// Block name visible to user
	icon: 'images-alt2',	// Toolbar icon can be either using WP Dashicons or custom SVG
	category: 'media',	// Under which category the block would appear
	attributes: {			// The data this block will be storing
		type: { type: 'string', default: 'default' },			// Notice box type for loading the appropriate CSS class. Default class is 'default'.
		title: { type: 'string' },			// Notice box title in h4 tag
		content: { type: 'array', source: 'children', selector: 'p' }		/// Notice box content in p tag
	},
	
	edit: function(props) {
		// How our block renders in the editor in edit mode
		
      function updateTitle( event ) {
	      props.setAttributes( { title: event.target.value } );
	   }

	   function updateContent( newdata ) {
	      props.setAttributes( { content: newdata } );
	   }

	   function updateType( newdata ) {
	      props.setAttributes( { type: event.target.value } );
	   }

		return el( 'div', 
			{ 
				className: 'gallery-block grid-gallery'
			}
         )

		);	// End return

	},	// End edit()
	
	save: function(props) {
		// How our block renders on the frontend
		
		return el( 'section', { className: 'gallery-block grid-gallery' },
					el( 'div', { className: 'mygallery' },
						el( 'div', { className: 'item' },
							el( 'a', { className: 'lightbox' },
								el( 'img', 
									{ 
										className: 'img-fluid image scale-on-hover' 
									},
								)
							)
						)
					)
		);	// End return
		
	}	// End save()
});

• This topic was modified 2 years, 9 months ago by matti9410.

The page I need help with: [log in to see the link]