[ad_1]
I’m using @wordpress/create-block to create a custom Gutenberg block.
When adding the block in Gutenberg, I receive the error:
Error: Minified React error #130; visit for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
edit.js:
/**
* React hook that is used to mark the block wrapper element.
* It provides all the necessary props like the class name.
*
* @see
*/
import { useBlockProps, TextControl, NumberControl, MediaPlaceholder } from '@wordpress/block-editor';
/**
* The save function defines the way in which the different attributes should
* be combined into the final markup, which is then serialized by the block
* editor into <code>post_content</code>.
*
* @see
*
* @param {Object} props Properties passed to the function.
* @param {Object} props.attributes Available block attributes.
* @return {WPElement} Element to render.
*/
export default function Edit( { attributes, setAttributes } ) {
return (
<div className="section 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'
value={ attributes.hero_heading }
onChange={(val) => {
setAttributes({ hero_heading: val });
}}
/>
</span>
</h1>
<p className="padding-20-20 mobile-centered">
<TextControl
label='Description'
value={ attributes.hero_description }
onChange={(val) => {
setAttributes({ hero_description: val });
}}
/>
</p>
<p id='hero-buttons' className='padding-20-20 mobile-centered' style={{marginBottom: 0}}>
<a href='https://sandbox.mandoemedia.com/signup?origin=mktg_portal' className='pp-button-1' role='button' target='_self'>
<TextControl
label='Button 1 CTA'
value={attributes.button_1_cta}
onChange={(val) => {
setAttributes({ button_1_cta: val });
}}
/>
</a>
<a href='https://sandbox.mandoemedia.com/sandbox-wizard' className='pp-button-2' role='button' target='_self' onclick=''>
<span className='pp-button-2-text'>
<TextControl
label='Button 2 CTA'
value={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='Number of 5 Star Reviews'
isShiftStepEnabled={false}
value={ attributes.number_of_5_star_reviews }
onChange={(val) => {
setAttributes({ number_of_5_star_reviews: Number(val) });
}}
/>
+ 5-star reviews on Google</div>
</div>
</div>
<div className="col-55">
<div id="videoLaunch">
if(attributes.hero_image_URL) {
(
<img
src={ attributes.hero_image_URL }
// onClick={ openEvent }
id="mm-hero"
/>
)
}
else {
(
<MediaPlaceholder
onSelect = { media => { setAttributes({ hero_image_alt: media.alt, hero_image_URL: media.url }); } }
allowedTypes = { [ 'image' ] }
multiple = { false }
labels = { { title: 'Upload' } }
>
</MediaPlaceholder>
)
}
<div className="mm-video-popup-icon"><i className="fas fa-play"></i></div>
</div>
<div id="vidBoxContainer">
<button type="button" id="vidClose" title="Close">
<svg xmlns="http://www.w3.org/2000/svg" version="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={attributes.hero_video} controls="" controlsList="nodownload"></video>
</div>
</div>
</div>
<div className="clear"></div>
</div>
</div>
);
} block.json:
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "mandoe/mandoe-hero",
"version": "0.1.0",
"title": "Mandoe Hero Section",
"category": "text",
"icon": "flag",
"description": "A hero section with dual CTA buttons and video",
"attributes": {
"hero_heading": {
"type": "string"
},
"button_1_cta": {
"type": "string"
},
"button_2_cta": {
"type": "string"
},
"number_of_5_star_reviews": {
"type": "number"
},
"hero_image_ID": {
"type": "number",
"default": 0,
"selector": "#mm-hero"
},
"hero_image_URL": {
"type": "string",
"default": "https://mandoemedia.com/wp-content/uploads/2022/08/Mandoe-digital-signage.jpg",
"selector": "#mm-hero"
},
"hero_image_alt": {
"type": "string",
"selector": "#mm-hero"
},
"hero_video": {
"type": "string",
"selector": "#mm-video"
}
},
"supports": {
"html": false
},
"textdomain": "mandoe",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css"
}Are you able to see where this error is coming from?
Help appreciated.