"The above error occurred in the component" when loading a registered block

This topic has 4 replies, 2 voices, and was last updated 2 weeks, 2 days ago by Peter.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts

December 2, 2024 at 11:32 PM #47090

Participant

I tried to register a block with register_block_type for the first time using a block.json.
I used the example we can find on the MB Blocks Page.

First I have this code :

add_action( 'init', function () {
    register_block_type( get_stylesheet_directory() . '/inc/gutenberg/blocks/hero-content' );
} );

Then in the block.json :

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "name": "meta-box/hero-content",
    "title": "Hero Content",
    "description": "A custom hero content block that uses MB fields.",
    "style": [
        "file:./hero-content.css"
    ],
    "category": "formatting",
    "icon": "format-quote",
    "keywords": [
        "hero-content",
        "quote"
    ],
    "supports": {
        "anchor": true
    },
    "attributes": {
        "image": {
            "type": "object",
            "default": {
                "full_url": "https://example.com/photo.png"
            }
        },
        "title": {
            "type": "string",
            "default": "Hello, World!"
        },
        "content": {
            "type": "string",
            "default": "This is a hero content block."
        }
    },
    "render": "file:./hero-content.php"
}

I also have a php file with this code :

<?php

add_filter( 'rwmb_meta_boxes', function( $meta_boxes ) {
    $meta_boxes[] = [
        'title'       => 'Hero Content',
        'id'          => 'hero-content',
        'description' => 'A custom hero content block',

        'type'        => 'block',

        // Block fields, must match block.json's attributes.
        'fields'      => [
            [
                'type' => 'single_image',
                'id'   => 'image',
                'name' => 'Image',
            ],
            [
                'id'   => 'title',
                'name' => 'Title',
            ],
            [
                'type' => 'textarea',
                'id'   => 'content',
                'name' => 'Content',
            ],
        ],
    ];
    return $meta_boxes;
} );

I only have an echo in the hero-content.php that renders correctly until i try to edit the block. I then get this message :
This block has encountered an error and cannot be previewed.

and in console :

react-dom.development.js:18704 The above error occurred in the <w> component:

    at w ({mysite}/app/plugins/mb-blocks/assets/index.js?ver=1.5.1:1:34075)
    at div
    at UnforwardedPanelBody ({mysite}/wp/wp-includes/js/dist/components.js?ver=54eab95…:64229:5)
    at RegisterResetAll ({mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:21296:3)
    at ToolsPanelInspectorControl ({mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:21314:3)
    at StyleProvider ({mysite}/wp/wp-includes/js/dist/components.js?ver=54eab95…:33535:5)
    at fill_Fill ({mysite}/wp/wp-includes/js/dist/components.js?ver=54eab95…:33579:5)
    at slot_fill_Fill
    at InspectorControlsFill
    at StyleProvider ({mysite}/wp/wp-includes/js/dist/components.js?ver=54eab95…:33535:5)
    at InspectorControlsFill ({mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:21260:3)
    at div
    at X ({mysite}/app/plugins/mb-blocks/assets/index.js?ver=1.5.1:4:5275)
    at edit
    at Edit ({mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:39093:5)
    at {mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:17556:21
    at {mysite}/wp/wp-includes/js/dist/editor.js?ver=e155066…:6359:69
    at {mysite}/app/plugins/wp…hql-gutenberg/build/index.js?ver=bfddb86…:24:11856
    at FilteredComponentRenderer ({mysite}/wp/wp-includes/js/dist/components.js?ver=54eab95…:70586:9)
    at EditWithGeneratedProps ({mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:39111:5)
    at BlockEdit ({mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:39297:3)
    at BlockCrashBoundary ({mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:39601:5)
    at BlockListBlock ({mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:40598:10)
    at {mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:35390:5
    at {mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:17625:99
    at FilteredComponentRenderer ({mysite}/wp/wp-includes/js/dist/components.js?ver=54eab95…:70586:9)
    at {mysite}/wp/wp-includes/js/dist/data.js?ver=6f178ef…:4489:25
    at BlockListBlockProvider ({mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:40948:5)
    at Items ({mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:50826:3)
    at BlockListItems
    at div
    at block_list_Root ({mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:50720:3)
    at BlockList
    at RecursionProvider ({mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:67548:3)
    at div
    at WritingFlow ({mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:43611:3)
    at div
    at BlockTools ({mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:55747:3)
    at ExperimentalBlockCanvas ({mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:56276:3)
    at div
    at Resizable ({mysite}/wp/wp-includes/js/dist/components.js?ver=54eab95…:65354:28)
    at UnforwardedResizableBox ({mysite}/wp/wp-includes/js/dist/components.js?ver=54eab95…:66399:3)
    at ResizableEditor ({mysite}/wp/wp-includes/js/dist/editor.js?ver=e155066…:24413:3)
    at div
    at VisualEditor ({mysite}/wp/wp-includes/js/dist/editor.js?ver=e155066…:24628:3)
    at SlotComponent ({mysite}/wp/wp-includes/js/dist/components.js?ver=54eab95…:33330:5)
    at Slot
    at UnforwardedSlot ({mysite}/wp/wp-includes/js/dist/components.js?ver=54eab95…:33890:5)
    at EditCanvasContainerSlotSlot
    at div
    at NavigableRegion ({mysite}/wp/wp-includes/js/dist/editor.js?ver=e155066…:7497:3)
    at div
    at div
    at div
    at InterfaceSkeleton ({mysite}/wp/wp-includes/js/dist/editor.js?ver=e155066…:7584:3)
    at EditorInterface ({mysite}/wp/wp-includes/js/dist/editor.js?ver=e155066…:24959:3)
    at Layout ({mysite}/wp/wp-includes/js/dist/edit-post.js?ver=31dde9e…:2763:3)
    at ErrorBoundary ({mysite}/wp/wp-includes/js/dist/editor.js?ver=e155066…:9270:5)
    at BlockRefsProvider ({mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:19804:3)
    at Provider ({mysite}/wp/wp-includes/js/dist/components.js?ver=54eab95…:33905:3)
    at {mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:41829:5
    at {mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:41367:3
    at BlockContextProvider ({mysite}/wp/wp-includes/js/dist/block-editor.js?ver=2cb36d6…:39048:3)
    at EntityProvider ({mysite}/wp/wp-includes/js/dist/core-data.js?ver=1b304f4…:6964:3)
    at EntityProvider ({mysite}/wp/wp-includes/js/dist/core-data.js?ver=1b304f4…:6964:3)
    at {mysite}/wp/wp-includes/js/dist/editor.js?ver=e155066…:21362:3
    at {mysite}/wp/wp-includes/js/dist/editor.js?ver=e155066…:18997:3
    at SlotFillProvider ({mysite}/wp/wp-includes/js/dist/components.js?ver=54eab95…:33743:3)
    at provider_SlotFillProvider ({mysite}/wp/wp-includes/js/dist/components.js?ver=54eab95…:33841:3)
    at Provider ({mysite}/wp/wp-includes/js/dist/components.js?ver=54eab95…:33905:3)
    at Editor ({mysite}/wp/wp-includes/js/dist/edit-post.js?ver=31dde9e…:3062:11)

React will try to recreate this component tree from scratch using the error boundary you provided, BlockCrashBoundary.

What am I doing wrong ? I use Roots/Bedrock for my project, is this caused by this ?
Thanks for your help
Regards, Antoine

December 3, 2024 at 11:04 PM #47097

Peter

Moderator

Hello Cedric,

I use the demo code in the documentation https://docs.metabox.io/extensions/mb-blocks/ and it works properly on my site, here is the screenshot https://imgur.com/7wJpW2a

Can you try to register the block again with a simple environment: only Meta Box and extension plugins, a standard theme of WordPress (2021) activated?

Let me know how it goes.

December 4, 2024 at 7:59 PM #47101

Cédric Dagherir

Participant

Hi,
I switched to twentytwentyfour, only adding :
require_once(__DIR__ . '/blocks/quote/function.php'); in functions.php,

I managed to update to WordPress latest version, also MetaBox and MB Blocks latest version. Since it's Bedrock I originally use :
composer require meta-box/mb-blocks (i used dev:master, and also tried to do via copying the files directly to plugins)
composer require wpackagist-plugin/meta-box

All is installed correctly, I deactivated all other plugins. I run WP 6.7.1, have MetaBox 5.10.4 & MB Blocks 1.7.3.

Now everything is ok on front, but in editor, even if I can edit the attributes, I have an infinite loader for the rendering of the gutenberg block. No errors in Network nor Console.

Screen with infinite loader

Here's what I have in the 200 response for content :

<!-- wp:template-part {"slug":"header","area":"header","tagName":"header","theme":"twentytwentyfour"} /-->

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
	<!-- wp:group {"layout":{"type":"constrained"}} -->
	<div class="wp-block-group">
		<!-- wp:spacer {"height":"var:preset|spacing|50"} -->
		<div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
		<!-- /wp:spacer -->

		<!-- wp:post-title {"textAlign":"center","level":1} /-->

		<!-- wp:spacer {"height":"var:preset|spacing|30","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
		<div style="margin-top:0;margin-bottom:0;height:var(--wp--preset--spacing--30)" aria-hidden="true"
			class="wp-block-spacer"></div>
		<!-- /wp:spacer -->

		<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}}} /-->
	</div>
	<!-- /wp:group -->

	<!-- wp:post-content {"lock":{"move":false,"remove":true},"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer","theme":"twentytwentyfour"} /-->

Everything should properly work but it doesn't. Thanks for your time !
Antoine

December 4, 2024 at 8:06 PM #47102

Cédric Dagherir

Participant

Edit: I have this in index.php?rest_route=%2Fwp%2Fv2%2Fblock-renderer%2Fmeta-box%2Fquote&context=edit&post_id=8&_locale=user:

rendered
: 
"<div id=\"mb-block-quote\" class=\"wp-block-meta-box-quote\" >\r\n\r\n\t<div class=\"quote-content\">\r\n\t\t<div class=\"quote_content\"></div>\r\n\t\t<div class=\"quote_author\"></div>\r\n\t\t<div class=\"quote_positon\"></div>\r\n\t</div>\r\n\r\n\t<div class=\"quote_avater\">\r\n\t\t<img class=\"quote__image\" src=\"\">\r\n\t</div>\r\n\r\n</div>"

December 5, 2024 at 10:52 PM #47105

Peter

Moderator

Hello,

If it still doesn't work on your site, please share the admin account by submitting this contact form https://metabox.io/contact/
I will take a look.

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.