0

I am making my very first custom block in gutenburg editor using this tutorial.

NOTE:- ALL THE CODE I HAVE WRITTEN IS INSIDE THE THEME NOT AS A PLUGIN

And the output came correctly the block started displaying in block section

Here is my code:-

function.php

function gutenberg_boilerplate_block() {
    wp_register_script( 'gutenberg-ccard', get_template_directory_uri().'/inc/blocks/block.jsx', array( 'wp-blocks', 'wp-element', 'wp-editor' ) );
    register_block_type( 'card-block/main', array( 'editor_script' => 'gutenberg-ccard', ) );

}
add_action( 'init', 'gutenberg_boilerplate_block' );

block.js

const { RichText, MediaUpload, PlainText } = wp.editor;
const { registerBlockType } = wp.blocks;
const { Button } = wp.components;
const getImageButton = (openEvent) => {
  if(attributes.imageUrl) {
    return (
      '<img '+
          'src={ attributes.imageUrl }'+
          'onClick={ openEvent }'+
          'className="image"'+
        '/>'
    );
  }
  else {
    return (
      '<div className="button-container">'+
              '<Button '+
                'onClick={ openEvent }'+
                'className="button button-large"'+
              '>'+
                'Pick an image'+
              '</Button>'+
            '</div>'
    );
  }
};



registerBlockType('card-block/main', {
    title: 'Card',
    icon: 'heart',
    category: 'common',
    attributes: {
        title: {
            source: 'text',
            selector: '.card__title'
        },
        body: {
            type: 'array',
            source: 'children',
            selector: '.card__body'
        },
        imageAlt: {
            attribute: 'alt',
            selector: '.card__image'
        },
        imageUrl: {
            attribute: 'src',
            selector: '.card__image'
        }
    },
    edit({ attributes, className, setAttributes }) {
      return (

        '<div className="container">'+
          '<MediaUpload'+
            'onSelect={ media => { setAttributes({ imageAlt: media.alt, imageUrl: media.url }); } }'+
            'type="image"'+
            'value={ attributes.imageID }'+
            'render={ ({ open }) => getImageButton(open) }'+
          '/>'+
          '<PlainText'+
            'onChange={ content => setAttributes({ title: content }) }'+
            'value={ attributes.title }'+
            'placeholder="Your card title"'+
            'className="heading"'+
          '/>'+
          '<RichText'+
            'onChange={ content => setAttributes({ body: content }) }'+
            'value={ attributes.body }'+
            'multiline="p"'+
            'placeholder="Your card text"'+
          '/>'+
        '</div>'

      );
    },


    save({ attributes }) {

      const cardImage = (src, alt) => {
        if(!src) return null;

        if(alt) {
          return (
            '<img '+
              'className="card__image" '+
              'src={ src }'+
              'alt={ alt }'+
            '/> '
          );
        }

        // No alt set, so let's hide it from screen readers
        return (
          '<img '+
            'className="card__image" '+
            'src={ src }'+
            'alt=""'+
            'aria-hidden="true"'+
          '/> '
        );
      };

      return (
        '<div className="card">'+
          '{ cardImage(attributes.imageUrl, attributes.imageAlt) }'+
          '<div className="card__content">'+
            '<h3 className="card__title">{ attributes.title }</h3>'+
            '<div className="card__body">'+
              '{ attributes.body }'+
            '</div>'+
         ' </div>'+
        '</div>'
      );
    }
});

So what's the problem.

  1. When I select that custom block from gutenburg the output is like enter image description here

  2. Whenever I am trying to import my scss file it triggers error

Uncaught SyntaxError: Unexpected string

here is the screenshotenter image description here

What's the problem. What I am doing wrong and why it is behaving like that?

2

What you are writing in your js file is not "real" Javascript Code, but an extension named "JSX" which can help you write the elements like XML-Code.

Before you can "use" the block js file, you first have to "compile" it into "real" Javascript code. You can use npx and webpack for this.

The Tutorial you used actually describes how you can setup this environment. Just start from the first part of the tutorial, if you want to learn the basics, or at least at part 6 (Where the setup of the npx and webpack components are described).

Happy Coding.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.