Sage 10 Custom Gutenberg Blocks with Node Modules Problems

[swanifrej]

You can’t properly import modules, when creating custom Gutenberg blocks with Sage10.

We have developed multiple custom Gutenberg blocks using Sage10 without problems. However, when creating a faq wrapper block, that uses the react-structured-data package, all of the custom blocks disappear from the Gutenberg context menu when adding new blocks. There is no error message whatsoever. The same block worked in Sage9 without problems.

Sample:
Just adding the import of the module leads to the disappearing of the custom blocks in gutenberg.

import {
  JSONLD,
  Generic,
  GenericCollection,
  Question,
} from 'react-structured-data'

export default ({ name, text }) => {
  return (
    <Question name={name} key={i}>
      <Generic
        type="acceptedAnswer"
        jsonldtype="Answer"
        schema={text}
      />
    </Question>
  )
}

[kero]

Nobody?

I’m working with @swanifrej on this project, if you need any more info to reproduce, let us know. From what I can tell, importing any external library makes the editor.js silently fail.

I suppose it is from extracting the vendors but due to there being no Logs at all, currently have no clue how to debug this.

[kero]

Cross-posted here: https://github.com/pixelcollective/laravel-mix-wp-blocks/issues/1

Reproducable repo here: https://github.com/kingkero/sage/tree/laravel-mix-wp-blocks-test (last commit breaks it)

I just realized this only breaks the develop build, yarn build:production yields the proper results.

[kero]

Okay, found the culprit: vendor.js was not enqueued.

Seems log1x already has this fixed in a current PR

• fix(setup): Enqueue vendor.js with editor scripts. (Fixes #2370, #2371)

[swanifrej]

Solution:
The default app/setup.php shipped with Sage10 doesn’t enqueue vendor.js. A solution would look something like this:

/**
 * Register the theme assets with the block editor.
 *
 * @return void
 */
add_action('enqueue_block_editor_assets', function () {
    wp_register_script('sage/vendor.js', asset('scripts/vendor.js')->uri(), ['jquery'], null);

    if ($manifest = asset('scripts/manifest.asset.php')->get()) {
        $manifest['dependencies'][] = 'sage/vendor.js';

        wp_enqueue_script(
            'sage/editor.js',
            asset('scripts/editor.js')->uri(),
            $manifest['dependencies'],
            $manifest['version']
        );

        wp_add_inline_script('sage/vendor.js', asset('scripts/manifest.js')->contents(), 'before');
    }

    wp_enqueue_style('sage/editor.css', asset('styles/editor.css')->uri(), false, null);
}, 100);

Like @kero said, a PR is already setup for this issue.

Sage 10 fixes/cleanup by Log1x · Pull Request #2413 · roots/sage · GitHub