• Resolved SRD75

    (@srd75)


    I’m using this tutorial to create a custom block.

    This is my index.js:

    import './blocks/mandoe-logo-gallery/index.js';

    This is my ./blocks/mandoe-logo-gallery/index.js:

    /**
     * Registers a new block provided a unique name and an object defining its behavior.
     *
     * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
     */
     import { registerBlockType } from '@wordpress/blocks';
    
     /**
      * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
      * All files containing <code>style</code> keyword are bundled together. The code used
      * gets applied both to the front of your site and to the editor. All other files
      * get applied to the editor only.
      *
      * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
      */
     import './style.scss';
     import './editor.scss';
     
     /**
      * Internal dependencies
      */
     import Edit from './edit';
     import save from './save';
     
     /**
      * Every block starts by registering a new block type definition.
      *
      * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
      */
     registerBlockType( mandoe/hero-daily-sales, {
         /**
          * Used to construct a preview for the block to be shown in the block inserter.
          */
          title: __('Mandoe Daily Sales'), // Block title.
          icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
          category: 'common',
          keywords: [
              __('mandoe'),
              __('hero')
          ],
          attributes: {
    		left_text: {
    			type: 'string',
                source: 'html',
                selector: 'div.left_text'
    		},
    		right_text: {
    			type: 'string',
                source: 'html',
                selector: 'div.right_text'
    		},
    		background_image: {
    			type: 'string',
    			source: 'attribute',
    			selector: 'img.hero-image',
    			attribute: 'src',
    		},
    		mobile_image: {
    			type: 'string',
    			source: 'attribute',
    			selector: 'img.daily-sales-mobile-img',
    			attribute: 'src',
    		}
    	},      
         /**
          * @see ./edit.js
          */
         edit: Edit,
     
         /**
          * @see ./save.js
          */
         save,
     } );

    I have run npm build with no errors.

    Why would my custom block not appear in the Gutenberg editor?

    Help appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘custom Gutenberg block will not load’ is closed to new replies.