Hi, i'm trying to make custom gutenberg block with predefined layout selection. So i've used 'core/column' & 'core/columns' as start point.
But now i'm facing a problem, when i try to create a block of 'gutenberg-modules/columns' i'm getting following error in a console:
TypeError: Cannot read property 'blockType' of undefined
at ColumnsEdit (edit.js:214)
...
So, this function implemented just as original one and contains following code:
````javascript
const {
blockType,
defaultVariation,
hasInnerBlocks,
variations,
} = useSelect(
(select) => {
const {
__experimentalGetBlockVariations,
getBlockType,
__experimentalGetDefaultBlockVariation,
} = select('core/blocks');
return {
blockType: getBlockType(name),
defaultVariation: __experimentalGetDefaultBlockVariation(
name,
'block'
),
hasInnerBlocks:
select('core/block-editor').getBlocks(clientId).length >
0,
variations: __experimentalGetBlockVariations(name, 'block'),
};
},
[clientId, name]
);
```
As i mentioned,
(select) => {...}` works just fine and returns correct data, but useSelect returns undefined by itself.
Full code can be found here
Hi @epiqueras, @youknowriad any idea of why useSelect may be returning undefined in this case?
name
is probably not what you expect.
@epiqueras name
= gutenberg-modules/columns, should I expect something else?
Something in the function passed to useSelect is making it throw. Try
guarding property accesses and singling out selector calls.
Something in the function passed to useSelect is making it throw. Try
guarding property accesses and singling out selector calls.
Thank you for the insights, it seems this is the most probable cause.
But I think we have a bug in useSelect, if an error is thrown in the function passed to useSelect that error should be noticeable to the developer.
We have logic for that:
https://github.com/WordPress/gutenberg//blob/4857ad58c1241b3d63d21a6880c989b85746c3dc/packages/data/src/components/use-select/index.js#L99-L118
But that logic does not seems to work, In my tests when I made something inside useSelect break the error I got was similar to the error @mevepe got. The error was because useSelect returned undefined, not because something inside useSelect trowed an error.
cc: @nerrad in case you have some additional insights.
Look like its __experimentalGetDefaultBlockVariation
, i've removed destruct part and got real error: backend.js:6 Error: An error occurred while running 'mapSelect': __experimentalGetDefaultBlockVariation is not a function
This is the expected behavior. It鈥檚 logic for protecting against zombie
child updates. It鈥檚 only an issue here because the error is being thrown in
the first call.
Perhaps a nicer error message for these specific cases would be good.
Hi @mevepe, __experimentalGetDefaultBlockVariation now is a stable API, you can use getDefaultBlockVariation.
@jorgefilipecosta cool!
Thanks for help everyone, should I close this issue?
Thanks for help everyone, should I close this issue?
I think we can keep the issue open as If useSelect allows the error to pass out it would be easy to understand the problem.