Gutenberg: block_enqueue_script action does not exist

[selul]

I tried to follow the README for building a block in a separate plugin but it seems the block_enqueue_scripts action hook does not exists and the js file responsible for the block is not being loaded.

Would be a good idea to load it using a admin_enqueue_script until this hook will be added ?

[youknowriad]

It's awesome that you're trying to build a blocks plugin 👍. Your feedback will be very useful.
Since we're close the first Gutenberg plugin release, we should add the block_enqueue_scripts the hook soon.

For now, I think using admin_enqueue_script is fine (Just make sure to tweak the priority to load it after Gutenberg scripts).

Also, note that the Blocks API is not frozen yet and is subject to change.

[selul]

@youknowriad thanks for your feedback.

I tried to add the hook into the gutenberg_scripts_and_styles function for the moment and i've have sent a PR in case is useful.

[aduth]

I'm wondering if we need a separate action, or if it's sufficient to merely hook admin_enqueue_scripts, so long as the script you're enqueueing correctly depends upon block scripts.

__Edit:__ Ah, I guess this would need to be limited to the editor screens, in which case having a standalone action may be a helpful convenience.

[westonruter]

I think the need for this would be eliminated by #1217 and being able to define assets when you call register_block_type.

[georgestephanis]

Just generally the entire blocks/README.md needs some love -- the JS code is throwing errors too.

It refers to wp.blocks.query and several other comments in the source refer to wp.blocks but wp.blocks doesn't seem to exist. Is this a case of development outpacing the inline documentation?

Also including wp-blocks as a dependency of the script causes further breakage from blocks/build/index.js even if our script we're enqueueing is strictly a blank file.

index.js?ver=1498356864:6 Uncaught TypeError: Cannot read property 'sprintf' of undefined
    at t.value (index.js?ver=1498356864:6)
    at finishClassComponent (react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:13693)
    at updateClassComponent (react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:13675)
    at beginWork (react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:14120)
    at performUnitOfWork (react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:15966)
    at workLoop (react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16088)
    at HTMLUnknownElement.boundFunc (react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:1462)
    at invokeGuardedCallback (react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:1476)
    at invokeGuardedCallback (react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:1511)
    at performWork (react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16126)
value @ index.js?ver=1498356864:6
finishClassComponent @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:13693
updateClassComponent @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:13675
beginWork @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:14120
performUnitOfWork @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:15966
workLoop @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16088
boundFunc @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:1462
invokeGuardedCallback @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:1476
invokeGuardedCallback @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:1511
performWork @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16126
scheduleUpdate @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16502
scheduleTopLevelUpdate @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16716
updateContainer @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16746
(anonymous) @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:17520
unbatchedUpdates @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16581
renderSubtreeIntoContainer @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:17519
render @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:17547
c @ index.js?ver=1498356864:16
(anonymous) @ admin.php?page=gutenberg:1750
i @ jquery.js?ver=1.12.4:2
add @ jquery.js?ver=1.12.4:2
(anonymous) @ admin.php?page=gutenberg:1750
react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:11744 React caught an error thrown by t. You should fix this error in your code. Consider adding an error boundary to your tree to customize error handling behavior.

TypeError: Cannot read property 'sprintf' of undefined

The error is located at: 
    in t (created by t)
    in t (created by r)
    in r (created by Connect(r))
    in Connect(r) (created by f)
    in div (created by r)
    in r (created by f)
    in f (created by Connect(f))
    in Connect(f) (created by u)
    in div (created by u)
    in u (created by r)
    in r (created by Connect(r))
    in Connect(r) (created by o)
    in div (created by o)
    in o (created by Connect(o))
    in Connect(o)
    in t
    in Provider

The error was thrown at: 
    at t.value (http://wp.dev/wp-content/plugins/gutenberg/components/build/index.js?ver=1498356864:6:118047),
    at finishClassComponent (http://wp.dev/wp-content/plugins/gutenberg/vendor/react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:13693:31),
    at updateClassComponent (http://wp.dev/wp-content/plugins/gutenberg/vendor/react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:13675:12),
    at beginWork (http://wp.dev/wp-content/plugins/gutenberg/vendor/react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:14120:16),
    at performUnitOfWork (http://wp.dev/wp-content/plugins/gutenberg/vendor/react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:15966:16),
    at workLoop (http://wp.dev/wp-content/plugins/gutenberg/vendor/react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16088:26),
    at HTMLUnknownElement.boundFunc (http://wp.dev/wp-content/plugins/gutenberg/vendor/react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:1462:14),
    at invokeGuardedCallback (http://wp.dev/wp-content/plugins/gutenberg/vendor/react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:1476:16),
    at invokeGuardedCallback (http://wp.dev/wp-content/plugins/gutenberg/vendor/react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:1511:34),
    at performWork (http://wp.dev/wp-content/plugins/gutenberg/vendor/react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16126:19)
logCapturedError$1 @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:11744
commitErrorHandling @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16381
commitAllLifeCycles @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:15699
boundFunc @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:1462
invokeGuardedCallback @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:1476
invokeGuardedCallback @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:1511
commitAllWork @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:15798
completeUnitOfWork @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:15941
performWork @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16156
scheduleUpdate @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16502
scheduleTopLevelUpdate @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16716
updateContainer @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16746
(anonymous) @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:17520
unbatchedUpdates @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16581
renderSubtreeIntoContainer @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:17519
render @ react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:17547
c @ index.js?ver=1498356864:16
(anonymous) @ admin.php?page=gutenberg:1750
i @ jquery.js?ver=1.12.4:2
add @ jquery.js?ver=1.12.4:2
(anonymous) @ admin.php?page=gutenberg:1750
react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16219 Uncaught TypeError: Cannot read property 'sprintf' of undefined
    at t.value (index.js?ver=1498356864:6)
    at finishClassComponent (react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:13693)
    at updateClassComponent (react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:13675)
    at beginWork (react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:14120)
    at performUnitOfWork (react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:15966)
    at workLoop (react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16088)
    at HTMLUnknownElement.boundFunc (react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:1462)
    at invokeGuardedCallback (react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:1476)
    at invokeGuardedCallback (react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:1511)
    at performWork (react-dom.e5cfcfc9.js?ver=4.9-alpha-40870-src:16126)

[georgestephanis]

Also, it's probably better to change it to be enqueued in the footer as if it's in the header I've hit a race condition where registerBlockType isn't defined yet.

Maybe I should just sort this out and then submit a PR for fixing the docs. Will give it a go, but don't let me (supposedly) working on this prevent anyone else from taking up the mantle.

[ahmadawais]

I ended up here with the same question. Where are we at with the custom block at the moment. Since points raised by @georgestephanis are in-fact roadblocks for any extension whatsoever!

[ahmadawais]

wp.blocks gets undefined as soon as the block.js file gets enqueued.

[georgestephanis]

Here's what I'm working off of, @ahmadawais -- https://github.com/georgestephanis/gutenberg-tweaks/ -- I'm just trying to sort out how to get anything working third-party. If you'd like to collaborate on getting something functional, I'd be delighted to add you and we can collab on Slack.

[ahmadawais]

I'm just trying to sort out how to get anything working third-party.

@georgestephanis Sure thing, bit away for the moment, but that's exactly what I have had been looking into.

It's mrahmadawais on slack!

[ahmadawais]

@georgestephanis I have created a sample GitHub repo for experimental 3rd party blocks https://github.com/ahmadawais/Gutenberg-Blocks

[westonruter]

The hooks have been implemented in #1717.

[aduth]

Also #1794 for updated docs.