Navigate to entity record crash editor

Tropicalista commented 2 months ago

Description

I have a custom post type which I wanna use as a pattern.

If I try something like this, the editor crashes.

    const handleEditForm = () => {
        onNavigateToEntityRecord( {
            postId: ref,
            postType: 'formello',
        } );
    };

The error is:

Uncaught TypeError: Cannot read properties of null (reading 'ownerDocument')
    at apply (rich-text.js?ver=9988fecf32c29c7254e1:2492:18)
    at applyRecord (rich-text.js?ver=9988fecf32c29c7254e1:3709:5)
    at applyFromProps (rich-text.js?ver=9988fecf32c29c7254e1:3806:5)
    at rich-text.js?ver=9988fecf32c29c7254e1:3813:7
    at commitHookEffectListMount (react-dom.development.js:23184:26)
    at commitLayoutEffectOnFiber (react-dom.development.js:23302:17)
    at commitLayoutMountEffects_complete (react-dom.development.js:24722:9)
    at commitLayoutEffects_begin (react-dom.development.js:24708:7)
    at commitLayoutEffects (react-dom.development.js:24646:3)
    at commitRootImpl (react-dom.development.js:26857:5)

Step-by-step reproduction instructions

Create a custom post type (ex. Doc)
Create a new post of custom post type (New doc)
Create a simple block that mimic what patterns do and add function mentioned above
Editor crashes

Screenshots, screen recording, code snippet

No response

Environment info

WP 6.6

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

[X] Yes

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

[X] Yes

Mamaduka commented 2 months ago

@Tropicalista, can you provide code for a simple block that mimics the Patterns (Reusable) block? The issue might be with it.

github-actions[bot] commented 1 month ago

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

Tropicalista commented 3 weeks ago

This is solved with Gutenberg 19.4.0

Tropicalista commented 1 week ago

This come out again with wp 6.7 RC 1.

The above error occurred in the <ForwardRef(PostTitle)> component:

    at PostTitle (http://localhost:10005/wp-includes/js/dist/editor.js?ver=f84c1fcefdc6332efbd1:20825:53)
    at div
    at div
    at WritingFlow (http://localhost:10005/wp-includes/js/dist/block-editor.js?ver=ba158b1bfcaf2bda05b0:43957:3)
    at div
    at BlockTools (http://localhost:10005/wp-includes/js/dist/block-editor.js?ver=ba158b1bfcaf2bda05b0:58576:3)
    at ExperimentalBlockCanvas (http://localhost:10005/wp-includes/js/dist/block-editor.js?ver=ba158b1bfcaf2bda05b0:59136:3)
    at div
    at Resizable (http://localhost:10005/wp-includes/js/dist/components.js?ver=75e0765bccdbc4da087e:62986:28)
    at UnforwardedResizableBox (http://localhost:10005/wp-includes/js/dist/components.js?ver=75e0765bccdbc4da087e:64031:3)
    at ResizableEditor (http://localhost:10005/wp-includes/js/dist/editor.js?ver=f84c1fcefdc6332efbd1:27050:3)
    at div
    at VisualEditor (http://localhost:10005/wp-includes/js/dist/editor.js?ver=f84c1fcefdc6332efbd1:27266:3)
    at SlotComponent (http://localhost:10005/wp-includes/js/dist/components.js?ver=75e0765bccdbc4da087e:33416:5)
    at Slot
    at UnforwardedSlot (http://localhost:10005/wp-includes/js/dist/components.js?ver=75e0765bccdbc4da087e:33976:5)
    at EditCanvasContainerSlotSlot
    at div
    at http://localhost:10005/wp-includes/js/dist/editor.js?ver=f84c1fcefdc6332efbd1:9868:3
    at div
    at div
    at div
    at InterfaceSkeleton (http://localhost:10005/wp-includes/js/dist/editor.js?ver=f84c1fcefdc6332efbd1:9958:3)
    at EditorInterface (http://localhost:10005/wp-includes/js/dist/editor.js?ver=f84c1fcefdc6332efbd1:27596:3)
    at BlockRefsProvider (http://localhost:10005/wp-includes/js/dist/block-editor.js?ver=ba158b1bfcaf2bda05b0:27719:3)
    at Provider (http://localhost:10005/wp-includes/js/dist/components.js?ver=75e0765bccdbc4da087e:33991:3)
    at http://localhost:10005/wp-includes/js/dist/block-editor.js?ver=ba158b1bfcaf2bda05b0:36995:5
    at http://localhost:10005/wp-includes/js/dist/block-editor.js?ver=ba158b1bfcaf2bda05b0:36539:3
    at BlockContextProvider (http://localhost:10005/wp-includes/js/dist/block-editor.js?ver=ba158b1bfcaf2bda05b0:37058:3)
    at EntityProvider (http://localhost:10005/wp-includes/js/dist/core-data.js?ver=c8526dfd5ea638e51031:6994:3)
    at EntityProvider (http://localhost:10005/wp-includes/js/dist/core-data.js?ver=c8526dfd5ea638e51031:6994:3)
    at http://localhost:10005/wp-includes/js/dist/editor.js?ver=f84c1fcefdc6332efbd1:24561:3
    at http://localhost:10005/wp-includes/js/dist/editor.js?ver=f84c1fcefdc6332efbd1:21964:3
    at Editor (http://localhost:10005/wp-includes/js/dist/editor.js?ver=f84c1fcefdc6332efbd1:29324:3)
    at div
    at ErrorBoundary (http://localhost:10005/wp-includes/js/dist/editor.js?ver=f84c1fcefdc6332efbd1:11688:5)
    at SlotFillProvider (http://localhost:10005/wp-includes/js/dist/components.js?ver=75e0765bccdbc4da087e:33829:3)
    at provider_SlotFillProvider (http://localhost:10005/wp-includes/js/dist/components.js?ver=75e0765bccdbc4da087e:33927:3)
    at Provider (http://localhost:10005/wp-includes/js/dist/components.js?ver=75e0765bccdbc4da087e:33991:3)
    at Layout (http://localhost:10005/wp-includes/js/dist/edit-post.js?ver=9567d2bb2ad838a6bbda:3116:11)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Mamaduka commented 1 week ago

@Tropicalista, the issue is fixed in Gutenberg 19.4 but not in WP 6.7 RC1. Is that correct?

Tropicalista commented 1 week ago

Yes it's correct. Can this be related?

Tropicalista commented 1 week ago

To clarify things, onNavigateToEntityRecord works on 19.3 and up. It does not work on WP 6.7-RC1 without Gutenberg.

I'm testing with formello plugin. The code I'm using to test this up is here.

From what I see the wp 6.7 should use Gutenberg 19.3. Am I correct?

t-hamano commented 5 days ago

I tested it with the following steps and I think I was able to reproduce it.

Start WordPress 6.7 RC1 environment
Activate the Formllo plugin
Switch Gutenberg branch to release/19.5
Deactivate Gutenberg plugin
Create a new form from the Forms menu
Add the form to the post editor
Click "Edit original" from the block toolbar
❌ The editor crashes.
Activate Gutenberg plugin
Perform steps 6-7
✅ The editor does not crash

Interestingly, this issue does not occur in the release/19.5 branch of Gutenberg, but the editor crashes in the trunk (86a3bc9bb3). So, the result is as follows:

❌ WordPress 6.7 RC1
✅ Gutenberg release/19.5 branch
❌ Gutenberg trunk (86a3bc9bb3)

It is still unclear whether this is a plugin issue or a Gutenberg issue.

https://github.com/user-attachments/assets/9c430da1-4809-4763-904d-b8a6ee01fa69

t-hamano commented 4 days ago

@Tropicalista I tested this issue again with minimal code and am unable to reproduce the issue in 6.7 RC1.

The following code creates a custom post called "Book" and tests navigating to the post via a block.

Details

PHP: ```php add_action( 'init', function () { register_post_type( 'book', array( 'public' => true, 'label' => 'Books', 'show_in_rest' => true, ) ); } ); ``` JavaScript: ```javascript wp.blocks.registerBlockType( 'test/navigate-entity-test', { apiVersion: 3, title: 'Navigate Entity Test', edit: () => { const { onNavigateToEntityRecord } = wp.data .select( 'core/block-editor' ) .getSettings(); return wp.element.createElement( 'div', wp.blockEditor.useBlockProps(), wp.element.createElement( 'button', { onClick: () => { onNavigateToEntityRecord( { postId: 8, // Replace with the actual post ID postType: 'book', } ); }, }, 'Navigate to Custom Post Type (Books) entity' ) ); }, } ); ```

https://github.com/user-attachments/assets/07827568-23f1-4e90-bb86-5e9f72b83aa8

Is your code attempting to access a variable or element that may be undefined?

ndiego commented 4 days ago

Moving this back to "In Discussion" on the 6.7 project board for the time being.

Tropicalista commented 2 days ago

I think I found the problem.

This code works. But of course it will not display the children

export default function ReusableBlockEdit( {
    attributes: { ref },
    clientId,
    name,
    setAttributes,
} ) {
    const [ isModalOpen, setModalOpen ] = useState( false );
    const [ isDisabled, setIsDisabled ] = useState( true );
    const [ titleTemp, createTitle ] = useState( '' );

    const { onNavigateToEntityRecord } = useSelect(
        ( select ) => {
            const {
                getSettings,
            } = select( blockEditorStore );

            // For editing link to the site editor if the theme and user permissions support it.
            return {
                onNavigateToEntityRecord:
                    getSettings().onNavigateToEntityRecord,
            };
        },
        [ clientId, ref ]
    );

    const handleEditOriginal = () => {
        onNavigateToEntityRecord( {
            postId: ref,
            postType: 'formello_form',
        } );
    };

    const blockProps = useBlockProps();

    const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps );

    return (
        <div { ...innerBlocksProps }>
            <BlockControls>
                <ToolbarGroup>
                    <ToolbarButton onClick={ handleEditOriginal }>
                        { __( 'Edit form', 'formello' ) }
                    </ToolbarButton>
                </ToolbarGroup>
            </BlockControls>
            { children }
        </div>
    );
}

IT will crash if I change the code to something like this:

    const [ blocks, onInput, onChange ] = useEntityBlockEditor(
        'postType',
        'formello_form',
        { id: ref }
    );

    const innerBlocksProps = useInnerBlocksProps( blockProps, {
        value: blocks,
        onInput,
        onChange,
        allowedBlocks: [ 'formello/form' ],
        renderAppender: blocks?.length
            ? undefined
            : InnerBlocks.ButtonBlockAppender,
    } );

Do you have any idea of what should I do to prevent this error? Is it a bug or is my code worng?

t-hamano commented 1 day ago

I'm still not sure if this is a problem with Gutenberg itself.

@Tropicalista

Just to be sure, does this issue occur in 6.7 RC2?
Could you enable SCRIPT_DEBUG and tell us the error you get?
Could you provide the minimal but complete Edit component code that causes the crash?

Tropicalista commented 1 day ago

@t-hamano I have uploaded a demo repo that you can test here:

Link to repo: https://github.com/Tropicalista/navigate-to-entity/tree/master

I have created a super simple post type book.
I have created a simple pattern
I have created a simple block that use navigate to entity
I have created a blog post to embed both
The pattern works, the custom post type does not.

To be clear, if I use the code you shared before, without a children block, it works.

The code of the block is very simple and you can see it here: https://github.com/Tropicalista/navigate-to-entity/blob/master/src/edit.js

WordPress / gutenberg