WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.52k stars 4.21k forks source link

onNavigateToEntityRecord throws error when used with useEntityBlockEditor, useEntityRecord, or getEditedEntityRecord #65543

Closed mijan-xs closed 1 month ago

mijan-xs commented 1 month ago

Description

I am encountering an error when using onNavigateToEntityRecordin combination with useEntityBlockEditor, useEntityRecord, or getEditedEntityRecord. Navigation to entity records does not work as expected, and the function throws an error instead.

Step-by-step reproduction instructions

  1. Create a custom block with wordpress/create-block package
  2. Open src > edit.js file and replace the code with the below code,

    import { __ } from '@wordpress/i18n';
    import {
    useBlockProps,
    store as blockEditorStore,
    } from '@wordpress/block-editor';
    import './editor.scss';
    import { useSelect } from '@wordpress/data';
    import { useEntityBlockEditor } from '@wordpress/core-data';
    import { Button } from '@wordpress/components';
    export default function Edit() {
    const ref = 357; //This is the static post id of loop template
    const {
        onNavigateToEntityRecord,
    } = useSelect(
        (select) => {
            const { getSettings } = select(blockEditorStore);
            return {
                onNavigateToEntityRecord: getSettings().onNavigateToEntityRecord,
            };
        },
        []
    );
    const [blocks] = useEntityBlockEditor('postType', 'post', {
        id: ref,
    });
    const blockProps = useBlockProps();
    const handleEditOriginal = () => {
        onNavigateToEntityRecord({ postId: ref, postType: 'post' })
    };
    return (
        <>
    
            <div {...blockProps}>
                <Button onClick={handleEditOriginal} variant="primary">Edit Original</Button>
            </div>
        </>
    );
    }
  3. Replace ref with the actual post ID to navigate to a specific post
  4. build and active the plugin
  5. use your block
  6. You will see a button click on it After that, you will see the error

Screenshots, screen recording, code snippet

Console Error image

const [blocks] = useEntityBlockEditor('postType', 'post', {
    id: ref,
}); //Throw error when I write this line

Additional Context

Environment info

Please confirm that you have searched existing issues in the repo.

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Mamaduka commented 1 month ago

Related #64814.

Tropicalista commented 1 month ago

Related #64814.

In my case this was solved by upgrading Gutenberg to 19.4. Can you check?

mijan-xs commented 1 month ago

Related #64814.

In my case this was solved by upgrading Gutenberg to 19.4. Can you check?

My issue was also resolved by upgrading to Gutenberg 19.4. It seems like the update fixed the problem. Thanks for the suggestion!