When including my {custom} Gutenberg block, I obtain the console error:
Ingredient kind is invalid: anticipated a string (for built-in parts) or a category/perform (for composite parts) however received: object.
Right here is my code:
/**
* BLOCK: hero-section
*/
// Import CSS.
import './editor.scss';
import './model.scss';
import { useBlockProps } from '@wordpress/block-editor';
const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { TextControl } = wp.parts;
const { NumberControl } = wp.parts;
/**
* Register: as a Gutenberg Block.
*
* @hyperlink https://wordpress.org/gutenberg/handbook/block-api/
* @param {string} title Block title.
* @param {Object} settings Block settings.
* @return {?WPBlock} The block, if it has been efficiently
* registered; in any other case `undefined`.
*/
registerBlockType('mandoe/hero-section', {
// Block title. Block names have to be string that accommodates a namespace prefix. Instance: my-plugin/my-custom-block.
title: __('Mandoe Hero Part'), // Block title.
icon: 'protect', // Block icon from Dashicons → https://developer.wordpress.org/useful resource/dashicons/.
class: 'widespread',
key phrases: [
__('mandoe'),
__('hero')
],
apiVersion: 2,
/**
* The edit perform describes the construction of your block within the context of the editor.
* This represents what the editor will render when the block is used.
*
* The "edit" property have to be a sound perform.
*
* @hyperlink https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
*
* @param {Object} props Props.
* @returns {Combined} JSX Part.
*/
attributes: {
hero_heading: {
kind: 'string'
},
button_1_cta: {
kind: 'string'
},
button_2_cta: {
kind: 'string'
},
number_of_5_star_reviews: {
kind: 'quantity'
},
hero_image: {
kind: 'string',
supply: 'attribute',
selector: 'img.hero-image',
attribute: 'src',
},
hero_image_alt: {
kind: 'string'
},
hero_video: {
kind: 'string'
}
},
edit: ({ attributes, setAttributes }) => {
const blockProps = useBlockProps();
const updateFieldValue = (val) => {
setAttributes({ content material: val });
}
return (
<div className="part section-hero">
<div className="row">
<div className="col-45">
<h1 className="fl-heading padding-20-20 mobile-centered" id="hero-title">
<span className="fl-heading-text">
<TextControl
label="Heading"
worth={attributes.hero_heading}
onChange={(val) => {
setAttributes({ hero_heading: val });
}}
/>
</span>
</h1>
<p className="padding-20-20 mobile-centered">
<TextControl
label="Description"
worth={attributes.hero_description}
onChange={(val) => {
setAttributes({ hero_description: val });
}}
/>
</p>
<p id='hero-buttons' className="padding-20-20 mobile-centered" model={{marginBottom: 0}}>
<a href="https://sandbox.mandoemedia.com/signup?origin=mktg_portal" className="pp-button-1" function="button" goal="_self">
<TextControl
label="Button 1 CTA"
worth={attributes.button_1_cta}
onChange={(val) => {
setAttributes({ button_1_cta: val });
}}
/>
</a>
<a href="https://sandbox.mandoemedia.com/sandbox-wizard" className="pp-button-2" function="button" goal="_self" onclick=''>
<span className="pp-button-2-text">
<TextControl
label="Button 2 CTA"
worth={attributes.button_2_cta}
onChange={(val) => {
setAttributes({ button_2_cta: val });
}}
/>
</span>
</a>
</p>
<div className="pp-rating-content padding-20-20">
<div className="pp-rating mobile-centered">
<i className="pp-star-full">★</i><i className="pp-star-full">★</i><i className="pp-star-full">★</i><i className="pp-star-full">★</i><i className="pp-star-full">★</i>
</div>
<div className="pp-rating-title mobile-centered">
<NumberControl
label="Variety of 5 Star Opinions"
isShiftStepEnabled={false}
worth={attributes.number_of_5_star_reviews}
onChange={(val) => {
setAttributes({ number_of_5_star_reviews: Quantity(val) });
}}
/>
+ 5-star critiques on Google</div>
</div>
</div>
<div className="col-55">
<div id="videoLaunch">
<img src="{hero_image}" alt="{hero_image_alt}" />
<div className="mm-video-popup-icon"><i className="fas fa-play"></i></div>
</div>
<div id="vidBoxContainer">
<button kind="button" id="vidClose" title="Shut">
<svg xmlns="http://www.w3.org/2000/svg" model="1.1" viewBox="0 0 24 24">
<path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"></path>
</svg>
</button>
<div id="vidBox">
<video id="mm-video" url="{hero_video}" controls="" controlsList="nodownload"></video>
</div>
</div>
</div>
<div className="clear"></div>
</div>
</div>
);
},
/**
* The save perform defines the way in which through which the completely different attributes ought to be mixed
* into the ultimate markup, which is then serialized by Gutenberg into post_content.
*
* The "save" property have to be specified and have to be a sound perform.
*
* @hyperlink https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
*
* @param {Object} props Props.
* @returns {Combined} JSX Frontend HTML.
*/
save: ({ attributes }) => {
const blockProps = useBlockProps.save();
return (
<div className="part section-hero">
<div className="row">
<div className="col-45">
<h1 className="fl-heading padding-20-20 mobile-centered" id="hero-title">
<span className="fl-heading-text">
{attributes.hero_heading}
</span>
</h1>
<p className="padding-20-20 mobile-centered">
{attributes.hero_description}
</p>
<p id='hero-buttons' className="padding-20-20 mobile-centered" model={{marginBottom: 0}}>
<a href="https://sandbox.mandoemedia.com/signup?origin=mktg_portal" className="pp-button-1" function="button" goal="_self">
{attributes.button_1_cta}
</a>
<a href="https://sandbox.mandoemedia.com/sandbox-wizard" className="pp-button-2" function="button" goal="_self" onclick=''>
<span className="pp-button-2-text">
{attributes.button_2_cta}
</span>
</a>
</p>
<div className="pp-rating-content padding-20-20">
<div className="pp-rating mobile-centered">
<i className="pp-star-full">★</i><i className="pp-star-full">★</i><i className="pp-star-full">★</i><i className="pp-star-full">★</i><i className="pp-star-full">★</i>
</div>
<div className="pp-rating-title mobile-centered">{attributes.number_of_5_star_reviews}+ 5-star critiques on Google</div>
</div>
</div>
<div className="col-55">
<div id="videoLaunch">
<img src="{attributes.hero_image}" alt="{attributes.hero_alt}" className="hero-image"/>
<div className="mm-video-popup-icon"><i className="fas fa-play"></i></div>
</div>
<div id="vidBoxContainer">
<button kind="button" id="vidClose" title="Shut">
<svg xmlns="http://www.w3.org/2000/svg" model="1.1" viewBox="0 0 24 24">
<path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"></path>
</svg>
</button>
<div id="vidBox">
<video id="mm-video" url="{hero_video}" controls="" controlsList="nodownload"></video>
</div>
</div>
</div>
<div className="clear"></div>
</div>
</div>
);
},
});
Assist appreciated.
