Visual Revisions: Global data methods like 'select' don't work in this mode

[pbiron]

Description

I've got a custom block that has worked just fine in the post editor since ~2021. When I go to see the 7.0-beta1 Visual Revisions for a page that uses that block I get the dreaded "This block has encountered an error and cannot be previewed." message.

In my block's edit script, at one point I call

const parent         = select( 'core/block-editor' ).getBlockParentsByBlockName( clientId, 'myblocks/my-parent-block-name' );
const { buttonOnly } = select( 'core/block-editor' ).getBlockAttributes( Array.isArray( parent ) ? parent[0] : parent );

That works fine in the editor (i.e., parent gets set to an array with the clientId of the parent block).  But when I load the Visual Revision screen getBlockParentsByBlockName() returns an empty array, and thus the next call to getBlockAttributes() results in a run-time error.

A little bit of context in case it helps:

• this is an apiVersion: 1 block. Don't know if that part of the prob. Eventually, I'll need to fix that before 7.0 comes out, but I don't have time to do that right now...

Step-by-step reproduction instructions

n/a

Screenshots, screen recording, code snippet

No response

Environment info

• 7.0-beta1, custom hybrid theme
• Chrome 145.0.7632.110
• Win11 Pro for Workstations

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

• Yes

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

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[pbiron]

I just installed/activated GB 22.6.0 (which was just released today) to see if that would fix the problem and no, it doesn't.

[Mamaduka]

@pbiron, just to confirm. These selectors are called with the useSelect hook, not the global select method. Is that correct?

[pbiron]

@Mamaduka no, they're not done from within a useSelect, as it's an apiVersion 1 block (one of the first blocks I ever wrote, doesn't even use JSX :-) I've long wanted to update the code but since it's always worked in the editor itself just hasn't been justified to find the time.

[Mamaduka]

Thanks for the confirmation, @pbiron!

The good news is that the problem has nothing to do with apiVersion, the bad news is that it's caused by the global select method. It always uses the default registry and doesn't work with custom registries. I think @ellatrix also had the same suspicion in the Slack conversation.

Sidenote: We should probably document this pitfall for global methods.

Steps to reproduce

1. Open a post.
2. Register the test block.
3. Add group block and save.
4. Add a test block to the group and save.
5. Switch to revisions.
6. Notice that the parent logs an empty array.

Test block via DevTools

wp.blocks.registerBlockType('test/selectors-in-revisions', {
    apiVersion: 3,
    title: 'Test Block for revisions',
    edit: function Edit({clientId}) {
        wp.element.useEffect( () => {
            const parent = wp.data.select('core/block-editor').getBlockParentsByBlockName(clientId, 'core/group');
            console.log(parent);
        }, [clientId])

        return wp.element.createElement('div', wp.blockEditor.useBlockProps(), wp.element.createElement(wp.components.Button, {
            variant: 'primary',
            onClick: () => {
                const parent = wp.data.select('core/block-editor').getBlockParentsByBlockName(clientId, 'core/group');
                console.log(parent);
            }
        }, 'Hello revisions'));
    },
});

[pbiron]

Than you so much @Mamaduka!!!!!!

Your example helped me solve my problem: I've rewritten those 2 statements as:

const { buttonOnly } = useSelect( ( select ) => {
	const parent = select( 'core/block-editor' ).getBlockParentsByBlockName( clientId, 'myblocks/my-parent-block-name' );

	return select( 'core/block-editor' ).getBlockAttributes( Array.isArray( parent ) ? parent[0] : parent );
}, [ clientId ] )

and the block now works in both the editor and the Visual Revisions screens without generating any errors.

Sidenote: We should probably document this pitfall for global methods.

Completely agree! This limitation of the global select should definitely be called out in a DevNote for 7.0 and also whatever long-term documentation will be written about this feature.

[ellatrix]

I'm aware of this, and we'll fix it

[ellatrix]

Sorry: misread this as useEnity* or useSelect not working for the block editor store. Yes, global selectors won't work. I'm not sure how we can fix that though, other than creating a brand new page for revisions? 🤔

[ellatrix]

I don't think blocks should use global selectors in the first place, so not sure if we should try to fix this at all.

[pbiron]

I don't have an opinion on whether this should be "fixed" in GB/core. But it definitely needs to be documented (both in a DevNote for 7.0 and in the block handbook) that devs shouldn't use the global selectors!