Tool bar not appearing for dynamic Gutenberg block
-
The dynamic Gutenberg block below doesn’t create the toolbar that allows you to delete or reposition it in the admin when you click on it. In the admin, the block as printed as is without any wrappers or id’s that are generated with other blocks.
Any assistance would be appreciated.
import { registerBlockType } from '@wordpress/blocks'; import { withSelect } from '@wordpress/data'; import { Panel } from '@wordpress/components'; import Slider from 'react-slick'; const { Spinner } = wp.components; // Import our CSS files import './style.scss'; import './editor.scss'; registerBlockType( 'vpf/stories', { title: 'VPF Stories', icon: 'media-text', category: 'vpf', attributes: { stories: { type: 'array', }, }, edit: withSelect( ( select ) => { const posts = select( 'core' ).getEntityRecords( 'postType', 'vpf_stories' ); const media = {}; if ( posts ) { posts.forEach( post => { media[ post.id ] = select( 'core' ).getMedia( post.featured_media ); } ); } return { posts, media }; } )( props => { const { media, posts } = props; if ( ! posts || ! media ) { return ( <Spinner /> ); } const slickSettings = { dots: true, infinite: true, speed: 500, slidesToShow: 3, slidesToScroll: 3, centerPadding: '40px', responsive: [ { breakpoint: 768, settings: { slidesToShow: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1 } } ] }; return ( <div className="wp-block"> <Panel header="Stories"> <Slider { ...slickSettings }> { posts.map( ( post, i ) => { let alt, img, imageThumbnailSrc; if ( media[ post.id ] ) { img = media[ post.id ].media_details.sizes; imageThumbnailSrc = media[ post.id ].media_details.sizes.storySlider.source_url; alt = media[ post.id ].alt; return ( <div key={ 'slide' + i }> <img src={ imageThumbnailSrc } alt={ alt } /> <p><a href={ post.link }> { post.title.raw }</a></p> </div> ); } } ) } </Slider> </Panel> </div> ); } ), save: ( ) => { return null; } } );
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
- The topic ‘Tool bar not appearing for dynamic Gutenberg block’ is closed to new replies.