• Resolved Michael Levy

    (@eruna_msl)


    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)
  • Thread Starter Michael Levy

    (@eruna_msl)

    I solved the problem. The issue was with the block registration. The project was based on create-guten-block and two lines listed in the documentation needed to be removed.

    register_block_type( 'vpf/stories', array(
            /// 'api_version' => 2,
            /// 'editor_script' => 'gutenberg-vpf-dynamic',
            'render_callback' => 'gutenberg_vpf_stories_dynamic_callback'
     ) );
Viewing 1 replies (of 1 total)
  • The topic ‘Tool bar not appearing for dynamic Gutenberg block’ is closed to new replies.