GoGo Gold casino app download,Slots significado aeropuerto.Recharge Every day and Get Bonus up-to 50%!

Resolved kicksite
(@kicksite)

10 months, 1 week ago
Hey all,

I was actually sent over here from by

I’ve been beating my head against this issue for the last day and have not been able to track down what is causing this issue.

So, right now I have a custom post type I created called “gallery_slides” that we are using to make individual slides for a bootstrap carousel gallery.

I have created two separate ACF blocks:
- One to use with the “gallery slides” custom post type visual editor. This uses ACF fields to add whatever content to the slide you would want.
- Another to use an ACF relationship field to display whatever slides you want in the carouse gallery.
Everything is working fine for the CPT portion so far. The gallery slides are being saved correctly and I can write them all to a page using WP_Query without any issues.

The problem comes into play when I try the add “gallery slides” using the ACF Relationship field in the block designed to render them to a page. When I add the first one, everything seems fine, when I add a second one from the relationship list, it immediately breaks the block, giving this error:

“This block has encountered an error and cannot be previewed.”

When I check the console, it’s also giving me a “TypeError: e is null, jQuery 5, onAppend…” error. When I click on the post.php link to see where the error occurred, it just says “originalMethod(…args);” If I remove the WP_Query and just try to var_dump the relationship field with a foreach() it still does the same thing.

If I save and refresh the page, the “gallery slides” I chose have been correctly saved, but if I change anything within the relationship field it breaks again. If I preview it, the “gallery slides” are being correctly rendered on the front end.

I have two other custom post types that are being used the same way and they work perfectly fine with the relationship field. They take the relationship field as a variable and run it through a foreach() that does a WP_Query for each one selected.

Does anyone have any idea what might be causing this? I feel like it’s something simple that I overlooking, so any help would be greatly appreciated.

Link to error screenshots: https://drive.google.com/drive/folders/1WQf7glsw0r_8Ove2EciQrwlrKUdWFKTF?usp=drive_link

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Author Konrad Chmielewski
(@hwk-fr)

10 months ago
Hello,

Thanks for the feedback!

I tried to reproduce the issue with an early test, but without success.

Looking at your screenshot, the error pass via acfe-input.min.js but it’s quite unreadable since it’s minified. Can you please add the following code in your wp-config.php file to load unminified files:
```
define('SCRIPT_DEBUG', true);
```
Then reproduce the issue again, and check the browser console. Can you please share the unminified error with the line?

If you have other Relationship fields in other Blocks which work, then it means there is something different with this one specifically. Either in PHP or in JS.

Have you tried to reduce that Relationship/Block to some very basic features to make it looks quite identical to your other Relationship blocks?

Thanks in advance!

Regards.
Plugin Author Konrad Chmielewski
(@hwk-fr)

9 months, 4 weeks ago

Hello,

Any news on this issue? I tried again to reproduce the issue but without success.

Did you manage to set define('SCRIPT_DEBUG', true); in order to get a more readable JS error?

Thanks!

Regards.
Thread Starter kicksite
(@kicksite)

9 months, 3 weeks ago
Hey Konrad,

Apologies for the long delay in getting back to you! I was able to get into the wp-config and add the code you requested. The output in the console when I add more than one post is:

query error:
```
Uncaught TypeError: elem is null

    jQuery 5

        filter

        grep

        filter

        winnow

        is

    onAppend acfe-input.js:2657

    _runHook _acf-hooks.js:249

    doAction _acf-hooks.js:64

    doAction _acf.js:929

    componentDidAppend _acf-blocks.js:1207

    componentDidAppend _acf-blocks.js:1415

    display _acf-blocks.js:1182

    componentDidUpdate _acf-blocks.js:1203

    commitLayoutEffectOnFiber react-dom.js:23343

    commitLayoutMountEffects_complete react-dom.js:24698

    commitLayoutEffects_begin react-dom.js:24684

    commitLayoutEffects react-dom.js:24622

    commitRootImpl react-dom.js:26833

    commitRoot react-dom.js:26692

    finishConcurrentRender react-dom.js:25991

    performConcurrentWorkOnRoot react-dom.js:25819

    workLoop react.js:2653

    flushWork react.js:2626

    performWorkUntilDeadline react.js:2920

    EventHandlerNonNull* react.js:2958

    <anonymous> react.js:13

    <anonymous> react.js:14
```
post.php error:

The above error occurred in the <BlockPreview> component: BlockPreview@https://agility-20.local/wp-content/plugins/advanced-custom-fields-pro/assets/build/js/pro/acf-pro-blocks.js?ver=6.2.5:1220:3 div _BlockBody@https://agility-20.local/wp-content/plugins/advanced-custom-fields-pro/assets/build/js/pro/acf-pro-blocks.js?ver=6.2.5:821:9 withSelect/</<@https://agility-20.local/wp-includes/js/dist/data.js?ver=2b5bb06caaeb5048ed96:4286:31 @https://agility-20.local/wp-includes/js/dist/compose.js?ver=228e7d7fccaae67c220c:3274:10 BlockEdit@https://agility-20.local/wp-content/plugins/advanced-custom-fields-pro/assets/build/js/pro/acf-pro-blocks.js?ver=6.2.5:734:7 Edit@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:16532:7 withToolbarControls</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:15655:7 withInspectorControl</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:16172:78 custom_class_name_withInspectorControl</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:16338:30 withBlockControls</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:37024:24 withDuotoneControls</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:37803:84 withInspectorControls</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:38367:7 layout_withInspectorControls</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:38684:7 content_lock_ui_withBlockControls</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:39624:53 withBlockHooks</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:40091:7 withBlockRenameControl</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:40119:7 withMultipleValidation</<@https://agility-20.local/wp-includes/js/dist/edit-post.js?ver=57aa460a64bb0e4ae963:342:18 withDispatch/</<@https://agility-20.local/wp-includes/js/dist/data.js?ver=2b5bb06caaeb5048ed96:4436:46 withSelect/</<@https://agility-20.local/wp-includes/js/dist/data.js?ver=2b5bb06caaeb5048ed96:4286:31 @https://agility-20.local/wp-includes/js/dist/compose.js?ver=228e7d7fccaae67c220c:3274:10 FilteredComponentRenderer@https://agility-20.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:75975:9 EditWithGeneratedProps@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:16551:7 BlockEdit@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:16609:7 BlockCrashBoundary@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:16932:5 BlockListBlock@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:18189:24 withDataAlign</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:15701:7 withBorderColorPaletteStyles</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:32184:7 withColorPaletteStyles</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:33393:7 withFontSizeInlineStyles</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:34958:43 withElementsStyles</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:37068:112 withDuotoneStyles</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:37911:67 withPositionStyles</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:38391:7 withLayoutStyles</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:38707:7 withChildLayoutStyles</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:38780:7 withSelect/</<@https://agility-20.local/wp-includes/js/dist/data.js?ver=2b5bb06caaeb5048ed96:4286:31 @https://agility-20.local/wp-includes/js/dist/compose.js?ver=228e7d7fccaae67c220c:3274:10 WrappedBlockEdit@https://agility-20.local/wp-content/plugins/advanced-custom-fields-pro/assets/build/js/pro/acf-pro-blocks.js?ver=6.2.5:663:7 FilteredComponentRenderer@https://agility-20.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:75975:9 ifCondition/</<@https://agility-20.local/wp-includes/js/dist/compose.js?ver=228e7d7fccaae67c220c:3232:10 withDispatch/</<@https://agility-20.local/wp-includes/js/dist/data.js?ver=2b5bb06caaeb5048ed96:4436:46 withSelect/</<@https://agility-20.local/wp-includes/js/dist/data.js?ver=2b5bb06caaeb5048ed96:4286:31 @https://agility-20.local/wp-includes/js/dist/compose.js?ver=228e7d7fccaae67c220c:3268:12 Items@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:28528:15 BlockListItems div Root@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:28446:14 BlockList RecursionProvider@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:56319:27 div WritingFlow@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:20398:21 ExperimentalBlockCanvas@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:41820:33 div MotionComponent@https://agility-20.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:18531:46 div MotionComponent@https://agility-20.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:18531:46 div BlockTools@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:55869:20 VisualEditor@https://agility-20.local/wp-includes/js/dist/edit-post.js?ver=57aa460a64bb0e4ae963:3928:22 div NavigableRegion@https://agility-20.local/wp-includes/js/dist/edit-post.js?ver=57aa460a64bb0e4ae963:1390:25 div div div InterfaceSkeleton@https://agility-20.local/wp-includes/js/dist/edit-post.js?ver=57aa460a64bb0e4ae963:1456:27 Layout@https://agility-20.local/wp-includes/js/dist/edit-post.js?ver=57aa460a64bb0e4ae963:8679:63 ErrorBoundary@https://agility-20.local/wp-includes/js/dist/editor.js?ver=09660a848fa8379476ab:5911:5 BlockRefsProvider@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:17775:27 Provider@https://agility-20.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:36532:18 ExperimentalBlockEditorProvider<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:19225:7 withRegistryProvider</<@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:18774:60 WithRegistryProvider(Component) BlockContextProvider@https://agility-20.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:16485:30 EntityProvider@https://agility-20.local/wp-includes/js/dist/core-data.js?ver=77370c9a15a7db2ae084:6358:24 EntityProvider@https://agility-20.local/wp-includes/js/dist/core-data.js?ver=77370c9a15a7db2ae084:6358:24 ExperimentalEditorProvider<@https://agility-20.local/wp-includes/js/dist/editor.js?ver=09660a848fa8379476ab:12495:59 withRegistryProvider</<@https://agility-20.local/wp-includes/js/dist/editor.js?ver=09660a848fa8379476ab:12084:7 WithRegistryProvider(Component) SlotFillProvider@https://agility-20.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:36375:26 provider_SlotFillProvider@https://agility-20.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:36398:5 Provider@https://agility-20.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:36532:18 Editor@https://agility-20.local/wp-includes/js/dist/edit-post.js?ver=57aa460a64bb0e4ae963:9252:16 React will try to recreate this component tree from scratch using the error boundary you provided, BlockCrashBoundary.

To answer your last question, I did try creating a brand new field group with only the custom post type I want to foreach over and ran into the same thing. I even tried recreating the post type and still had the same issue. I will try to see if I can reduce it down like you suggested and see if can get something extremely basic working.
Plugin Author Konrad Chmielewski
(@hwk-fr)

9 months, 3 weeks ago
Hello,

Thank you for the details!

Okay this is the part of the code I suspected. I still didn’t manage to reproduce the issue, but you might be using some advanced Gutenberg component/feature.

ACF Block Type logic is known to throw fake jQuery elements with Gutenberg in some edge cases, and trigger this “onAppend” action. However, this code expects a true jQuery element.

Since I cannot reproduce the issue, as you use some advanced Gutenberg feature, can you please try the following hotfix:
1. Keep the define('SCRIPT_DEBUG', true) enabled for the moment
2. In the file acf-extended/assets/js/acfe-input.js line:2647 replace the whole onAppend method with this code:
Old code:
```
onAppend: function($el) {

	// acf block type "align" attribute pass a react element
	// with acf.doAction('append', this.state.$el))
	// which return a fake jQuery element and break $el.is('...') check
	if (acf.isset($el, 0, '$$typeof')) {
		return;
	}

	// validate
	if ($el.is('.layout')) {

		// get field
		var field = acf.getClosestField($el);

		// trigger
		field.trigger('newLayout', [$el]);
		field.trigger('appendLayout', [$el]);

	}

},
```
New code:
```
onAppend: function($el){

    // check element is a jQuery object with .layout class
    if($el?.[0]?.classList?.contains('layout')){

        // get field
        var field = acf.getClosestField($el);

        // trigger
        field.trigger('newLayout', [$el]);
        field.trigger('appendLayout', [$el]);

    }

},
```
3. Visit your Gutenberg admin page, and refresh your page using CTRL+SHIFT+R to make sure it clears the browser cache and load the updated JS file.

Optionally, you can open the browser console with F12, head over the “Network” tab, and enable “Disable Cache” checkbox, and then refresh with CTRL+SHIFT+R.

Let me know if that fixed the issue.

Thanks!

Regards.
Thread Starter kicksite
(@kicksite)

9 months, 2 weeks ago

That worked!

Where do we go from here? Is this something with how I wrote the code for the block or with how I set up my custom post type?

Plugin Author Konrad Chmielewski
(@hwk-fr)

7 months ago

Hello,

Sorry for the late answer. Just a heads up to let you know the fix has been released with the latest 0.9.x version.

I don’t think it had something to do with how you wrote your block type of post type. It’s just that the ACF Block Type is known to send fake jQuery $el thru react, and somehow the detection of this exception wasn’t working anymore.

Since I couldn’t reproduce the issue, I just used a different, yet more precise method to exclude this behavior.

Regards.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘ACF Relationship Field giving error when added more than one post’ is closed to new replies.