How to add a functioning breadcrumbs & undo/redo functionality?

[patricklindsay]

Thanks for the tutorial @getdave ! With no react XP I've used this to create an editor outside of the WP env and it's working great.

Could you give any pointers on how to add the BlockBreadcrumb component ?

After working through the tutorial I tried to do this myself by adding the following snippet into the Editor component, the breadcrumb component is now rendering and clicking on 'Document' does deselect blocks so it's also partially functioning however the component does not update and display breadcrumbs when selecting on blocks.

      footer={
        (
          <div className="edit-post-layout__footer">
          <BlockBreadcrumb />
          </div>
        )
      }

I think you hint at the answer in the tutorial;

It does this in part thanks to being placed as a child of BlockEditorProvider which affords it full access to all information about the state of the current Blocks in the editor.

Looking at the current WP implementation of EditPost they're actually embedding the whole InterfaceSkeleton within the BlockEditorProvider whereas this tutorial has it outside.

Any help would be really appreciated.

[patricklindsay]

I managed to get the BlockBreadcrumb component working by adding it within the BlockEditorProvider(here) however when I tried to do this for the EditorHistoryUndo & EditorHistoryRedo components we're back to the same issue as before - rendering but not updating.

[getdave]

Hi @patricklindsay. Glad you found this useful. I've never actually tried to take this beyond what was in the original tutorial so it's great to see things being stretched a bit.

The BlockEditorProvider does provide a lot of the context needed for many components to function correctly so that's probably why it's working when you nest within this.

I'm afraid I'm not actually sure how to get EditorHistoryUndo and EditorHistoryRedo working. They are outside of the Block Editor package and so they aren't part of the standalone "block editor" experience. Rather they have been implemented as a custom part of the WordPress Block Editor which is @wordpress/editor.

It does feel like breadcrumbs should be part of the Block Editor package so perhaps one good option might be to drop into the Core Editor Slack channel and see if anyone there can advise.

Failing that do you have any public code you can link to?

[patricklindsay]

Ok thanks.

The code is public although it's within a Rails engine and so far the only change I've made to the tutorial (excluding block additions and customizations) is adding the 3 components into the custom block editor component.

https://github.com/yamasolutions/integral/blob/block_editor/app/javascript/components/block-editor/index.js#L88-L90

The Rails app to test this out on is available at https://github.com/yamasolutions/integral-sample/tree/block_editor_spike

[getdave]

@patricklindsay I've spoken with a few folks. Essentially the Undo/Redo from the Editor package selects and dispatches from its own store to get the undo/redo state.

eg: https://github.com/WordPress/gutenberg/blob/ef0704b6990fa56d761dc24432c9860f265c3fad/packages/editor/src/components/editor-history/undo.js#L30

If you look in the action creators these in turn proxy the actions across to the core store

https://github.com/WordPress/gutenberg/blob/ef0704b6990fa56d761dc24432c9860f265c3fad/packages/editor/src/store/actions.js#L375-L402

Perhaps you should create your own Undo/Redo components basiing them on the ones in the Editor package. Then you could copy the same actions as the Editor store has into your store and see if that works.

I tried this and it didn't work, but I suspect I'm missing something which actually creates the undo levels. Shouldn't be too hard to find but I've run out of time today.

Take a look at this branch I made https://github.com/getdave/standalone-block-editor/tree/try/undo-redo

[getdave]

@patricklindsay I've found a moment to work on this. Please do take a look at https://github.com/getdave/standalone-block-editor/pull/15 and let me know what you think.

[patricklindsay]

Quick update on this - I've been using @getdave #15 changes to add undo/redo functionality and it's working great! Only thing that is missing are the keyboard shorts for undo and redo.