Access to blocks inside the description editor

[igorschoester]

When opening the Edit description modal, you get the (Gutenberg?) block editor. However, the API does not seem to work at all.
We would like to gain access to the blocks, and specifically the annotation API to highlight some content.

E.g.

// Retrieving the blocks:
wp.data.select( "core/block-editor" ).getBlocks();

// Applying an annotation:
wp.data.dispatch( "core/annotations" ).__experimentalAddAnnotation( annotation );

Where the blocks selector returns an empty array. And the annotations do get added when we try with some manual data, however nothing seems to listen to it.

Is this going to be possible in the near future?

[retrofox]

Hi Igor, it's great that you are interested and concerned about the issue we've been facing lately.

This problem has been quite challenging for me. I suggest that we refrain from using the sub-registry for both editor instances. I've created #42882 where we can test this out.

Just wanted to let you know that I would appreciate feedback from the developers as I'm not entirely confident about this solution. I'm afraid I can't anticipate any potential issues with these changes.

[youknowriad]

My opinion if you're building your own custom editor, is that you should never use useSubRegistry={ false }, you should not access core/block-editor store directly. Instead, you should save the "blocks" value from the onChange handlers into your own stores.

[retrofox]

Currently, the block instances generated in the IFrame editor are propagated to the custom store and processed in the Product Editor properly (I hope).

UI	Store

wp.data.select( 'woo/product-editor-ui' ).getModalEditorBlocks()

I wonder if storing the block instances is enough or if we should propagate other data from core/block-editor to the custom one.

[youknowriad]

Which data in particular are you interested in?

[retrofox]

To the best of my knowledge, storing and getting the blocks seems to be enough. However, I might be mistaken and overlooking something else (perhaps a concern of a beginner :-( ).

[igorschoester]

And access to adding annotations would be nice (as stated in my question).

[igorschoester]

Any updates regarding the availability of the content and annotations of the description?

[retrofox]

Hi, Igor. We've introduced the woo/product-editor-ui store, which helps us pick the block instances in the modal editor.
Although it could slightly change, it's possible to use it.
To try it:

• Create/edit a product
• Edit the description by using the modal editor
• Ensure the first block (core/paragraph) has enough content
• Open the dev console
• Run the following snippet

wp.data.dispatch( 'core/annotations' ).__experimentalAddAnnotation( {
    source: 'my-annotations-plugin',
    blockClientId: wp.data.select( 'woo/product-editor-ui' ).getModalEditorBlocks()[0]?.clientId,
    richTextIdentifier: 'content',
    range: {
        start: 50,
        end: 100,
    },
} );

Sorry for the delayed update.

[igorschoester]

Thank you @retrofox ! 🙏 That is nice to see!

The editor is not persistent though, due to the changing IDs of the annotation is only applied when you have the editor open.
The old annotations remain in the core/annotations store, making you responsible for cleaning old ones up.
Is that how it is supposed to work?

[retrofox]

As you mentioned, the data isn't persistent when the modal closes. I think you should find out how to store this editor instance externally.

[igorschoester]

@retrofox Maybe we can create a workaround, but wouldn't it make more sense if this was just already persistent? The re-finding of the previous ID and removing any potential annotation and adding them back when you open the modal seems very unproductive for all implementation to do.

[mattsherman]

@igorschoester I have a PR up for review that adds sidebar extensibility to the description modal editor.

• Product Editor API: Modal block editor sidebar extensibility (description field) #46597

I haven't tested annotations support yet (it's on my list; I need to familiarize myself with annotations), but block selection and modification works (the PR includes a link to a test plugin that demonstrates this).

Any feedback on description modal editor extensibility support/issues is appreciated... the PR has a list of some known issues that I will be following up on in the next week or so.

[igorschoester]

Nice! Thanks @mattsherman 🙏 I didn't have a chance to check it out yet, but see it is merged.