WordPress Gutenberg react make import of __experimentalUseInnerBlocksProps which is no more experimetal

Question

I have a plugin with import

import { __experimentalUseInnerBlocksProps as useInnerBlocksProps } from '@wordpress/block-editor';

but it's not working with newest Gutenberg plugin 11.9, because this useInnerBlocksProps is no longer experimental

so I can use

import { useInnerBlocksProps } from '@wordpress/block-editor';

but then it will not work for older versions, or WordPress installation without Gutenberg plugin.

What's the correct way to make it compatible with both scenarios? How to import __experimentalUseInnerBlocksProps if exists and directly useInnerBlocksProps if not?

Answer 1

Ok, this is probably the easiest workaround I was able to find, but if someone has better idea, then feel free to post it here ;)

import {
    __experimentalUseInnerBlocksProps,
    useInnerBlocksProps,
} from '@wordpress/block-editor';

if( typeof useInnerBlocksProps == 'undefined' ){
    var compatibleUseInnerBlocksProps = __experimentalUseInnerBlocksProps;
}else{
    var compatibleUseInnerBlocksProps = useInnerBlocksProps;
}

• so basically I can import both (experimental and no-experimental) without any error
• then I can just do simple type test if the new one is already supported
• if it's supported I will remember it in compatibleUseInnerBlocksProps variable
• otherwise I will remember old experimental
• then I need to replace all other occurrences of useInnerBlocksProps with compatibleUseInnerBlocksProps in my code

Answer 2

I used the logic from the accepted answer, which works great.

But I implemented it a little differently. I import useInnerBlocksProps as nonExperimentalUseInnerBlocksProps. This way, I can keep using useInnerBlocksProps where I use it in the code. This will make it easier to remove support for __experimentalUseInnerBlocksProps in the future.

import {
  useInnerBlocksProps as nonExperimentalUseInnerBlocksProps,
  __experimentalUseInnerBlocksProps,
} from '@wordpress/block-editor';

const useInnerBlocksProps =
  typeof nonExperimentalUseInnerBlocksProps == 'undefined'
    ? __experimentalUseInnerBlocksProps
    : nonExperimentalUseInnerBlocksProps;