editor.PostFeaturedImage example throws an error

[scofennell]

Hi, thank you very much for your awesome work here.

I am attempting to output a simple bit of text after the featured image picker via the example at https://github.com/danielbachhuber/gutenberg-migration-guide/blob/master/filter-admin-post-thumbnail-html.md .

See screenshot, I get TypeError: t is not a function.

In order to reproduce the error, you must click on the featured image UI and select an image.

I would be more than happy to migrate this comment to a more appropriate venue if you could be so kind to suggest one. Thank you again for your awesome work!

[danielbachhuber]

Hi @scofennell,

It looks like your code is producing something pretty close to the expected result. Is the "Set Featured Image" button functional?

You could define( 'WP_DEBUG', true ); and define( 'SAVEQUERIES', true ); locally to get a bit more relevant console output.

[scofennell]

Hi Daniel, thank you for the response to my humble comment!

I should have been more clear. I agree that the demo strings of text are appending and prepending as advertised, but see this gif demonstrating that the featured image control does actually break when this code is executing:

https://media.giphy.com/media/51Y3t4wvBQpllUTKeK/giphy.gif

I added SCRIPT_DEBUG to wp_config (I already had WP_DEBUG and SAVEQUERIES) and I find that I get this error when selecting an image:

TypeError: onSelect is not a function[Learn More] edit-post.js:794:7

    onSelect http://localhost/wp/wp-includes/js/dist/edit-post.js?ver=3.1.7:794 onSelect self-hosted:972 _9Backbone

clickSelect http://localhost/wp/wp-includes/js/media-views.js?ver=5.0.3:5304 clickSelect self-hosted:974 click http://localhost/wp/wp-includes/js/media-views.js?ver=5.0.3:5447 click self-hosted:974 dispatch2jQuery
dispatch
handle

Also, I get the following error as soon as the page loads:

Warning: Unsafe lifecycle methods were found within a strict-mode tree:
    in StrictMode (created by Editor)
    in Editor (created by ComponentWithSelect)
    in ComponentWithSelect (created by Context.Consumer)
    in WithSelect(Editor)

componentWillUpdate: Please update the following components to use componentDidUpdate instead: FillComponent

Learn more about this warning here:
https://fb.me/react-strict-mode-warnings react-dom.js:500:7
Warning: Each child in an array or iterator should have a unique "key" prop.

Check the top-level render call using <div>. See https://fb.me/react-warning-keys for more information.
    in PostFeaturedImageCheck
    in Unknown (created by WithFilters(PostFeaturedImage))
    in WithFilters(PostFeaturedImage) (created by ComponentWithDispatch)
    in ComponentWithDispatch (created by Context.Consumer)
    in WithDispatch(WithFilters(PostFeaturedImage)) (created by ComponentWithSelect)
    in ComponentWithSelect (created by Context.Consumer)
    in WithSelect(WithDispatch(WithFilters(PostFeaturedImage))) (created by FeaturedImage)
    in div (created by PanelBody)
    in PanelBody (created by ForwardRef(PanelBody))
    in PostTypeSupportCheck (created by ComponentWithSelect)
    in ComponentWithSelect (created by Context.Consumer)
    in WithSelect(PostTypeSupportCheck) (created by PostFeaturedImageCheck)
    in ThemeSupportCheck (created by ComponentWithSelect)
    in ComponentWithSelect (created by Context.Consumer)
    in WithSelect(ThemeSupportCheck) (created by PostFeaturedImageCheck)
    in PostFeaturedImageCheck (created by FeaturedImage)
    in FeaturedImage (created by ComponentWithDispatch)
    in ComponentWithDispatch (created by Context.Consumer)
    in WithDispatch(FeaturedImage) (created by ComponentWithSelect)
    in ComponentWithSelect (created by Context.Consumer)
    in WithSelect(WithDispatch(FeaturedImage)) (created by SettingsSidebar)
    in div (created by Panel)
    in Panel (created by SettingsSidebar)
    in div (created by Sidebar)
    in SlotComponent (created by Context.Consumer)
    in Slot (created by SidebarSlot)
    in SidebarSlot (created by Layout)
    in div (created by Layout)
    in Layout (created by ComponentWithSelect)
    in ComponentWithSelect (created by Context.Consumer)
    in WithViewportMatch(Layout) (created by NavigateRegions(WithViewportMatch(Layout)))
    in div (created by NavigateRegions(WithViewportMatch(Layout)))
    in NavigateRegions(WithViewportMatch(Layout)) (created by ComponentWithDispatch)
    in ComponentWithDispatch (created by Context.Consumer)
    in WithDispatch(NavigateRegions(WithViewportMatch(Layout))) (created by ComponentWithSelect)
    in ComponentWithSelect (created by Context.Consumer)
    in WithSelect(WithDispatch(NavigateRegions(WithViewportMatch(Layout)))) (created by Editor)
    in ErrorBoundary (created by Editor)
    in SlotFillProvider (created by EditorProvider)
    in div (created by DropZoneProvider)
    in DropZoneProvider (created by EditorProvider)
    in EditorProvider (created by ComponentWithDispatch)
    in ComponentWithDispatch (created by Context.Consumer)
    in WithDispatch(EditorProvider) (created by Editor)
    in StrictMode (created by Editor)
    in Editor (created by ComponentWithSelect)
    in ComponentWithSelect (created by Context.Consumer)
    in WithSelect(Editor)

One more note. See below for how I am registering my js file. I have found recently that a fair amount of user error seems to come from failing to declare the proper dependencies. See anything wrong here?

		$out = wp_register_script(
			'lxb_af-gutenberg',
			get_template_directory_uri() . '/js/gutenberg.js',
			array( 'jquery', 'wp-blocks', 'wp-element', 'wp-components', 'wp-i18n' ),
			LXB_AF_VERSION,
			FALSE
		);	

(I do go on to enqueue this of course, at enqueue_block_editor_assets).

[danielbachhuber]

Hi @scofennell,

I think the problem is your use of _.extend() here:

I'm not sure whether that's using Underscore or lodash. Could use Object.assign() instead?

[danielbachhuber]

Also worth noting: I tried reproducing this issue locally against WordPress trunk and wasn't able to. Which version of WordPress are you using?

[scofennell]

Hi Daniel, thank you again so much for the help.

I'm experienced with WP but quite new with Gutenberg -- I was actually hoping that by copying the approach in your documentation, I might begin my journey here in earnest. I'm afraid I don't know how to approach this via Object.assign().

To your question, is this using underscore or Lodash, I guess I don't know. I'm just trying to follow the example in your documentation and I'm not aware of what the dependencies might be.

I get the same error each time with a completely reduced test case: Zero plugins, with my code running as the only code in a child theme off of twentynineteen. Tried with core nightly point release, core nightly bleeding edge, and 5.0.3.