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 } = wpponents;
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.
When I select that custom block from gutenburg the output is like
Whenever I am trying to import my scss file it triggers error
Uncaught SyntaxError: Unexpected string
here is the screenshot
What's the problem. What I am doing wrong and why it is behaving like that?
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 } = wpponents;
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.
When I select that custom block from gutenburg the output is like
Whenever I am trying to import my scss file it triggers error
Uncaught SyntaxError: Unexpected string
here is the screenshot
What's the problem. What I am doing wrong and why it is behaving like that?
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.