Add undo redo buttons in navigation editor #34533

talldan · 2021-09-03T08:08:31Z

Description

Another iteration on the editor header to bring more consistency between this and the widgets screen.

Most of the code is lifted straight from widgets.

How has this been tested?

Make some changes
Click undo
Click redo

It should work the same as using the shortcuts

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
I've tested my changes with keyboard and screen readers.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

kevin940726

LGTM 👍

github-actions · 2021-09-03T08:14:46Z

Size Change: +599 B (0%)

Total Size: 1.04 MB

Filename	Size	Change
`build/edit-navigation/index.min.js`	14 kB	+365 B (+3%)
`build/edit-navigation/style-rtl.css`	3.26 kB	+117 B (+4%)
`build/edit-navigation/style.css`	3.26 kB	+117 B (+4%)

ℹ️

View Unchanged

Filename	Size
`build/a11y/index.min.js`	931 B
`build/admin-manifest/index.min.js`	1.09 kB
`build/annotations/index.min.js`	2.7 kB
`build/api-fetch/index.min.js`	2.19 kB
`build/autop/index.min.js`	2.08 kB
`build/blob/index.min.js`	459 B
`build/block-directory/index.min.js`	6.2 kB
`build/block-directory/style-rtl.css`	1.01 kB
`build/block-directory/style.css`	1.01 kB
`build/block-editor/default-editor-styles-rtl.css`	378 B
`build/block-editor/default-editor-styles.css`	378 B
`build/block-editor/index.min.js`	119 kB
`build/block-editor/style-rtl.css`	13.8 kB
`build/block-editor/style.css`	13.8 kB
`build/block-library/blocks/archives/editor-rtl.css`	61 B
`build/block-library/blocks/archives/editor.css`	60 B
`build/block-library/blocks/archives/style-rtl.css`	65 B
`build/block-library/blocks/archives/style.css`	65 B
`build/block-library/blocks/audio/editor-rtl.css`	58 B
`build/block-library/blocks/audio/editor.css`	58 B
`build/block-library/blocks/audio/style-rtl.css`	111 B
`build/block-library/blocks/audio/style.css`	111 B
`build/block-library/blocks/audio/theme-rtl.css`	125 B
`build/block-library/blocks/audio/theme.css`	125 B
`build/block-library/blocks/block/editor-rtl.css`	161 B
`build/block-library/blocks/block/editor.css`	161 B
`build/block-library/blocks/button/editor-rtl.css`	474 B
`build/block-library/blocks/button/editor.css`	474 B
`build/block-library/blocks/button/style-rtl.css`	600 B
`build/block-library/blocks/button/style.css`	600 B
`build/block-library/blocks/buttons/editor-rtl.css`	315 B
`build/block-library/blocks/buttons/editor.css`	315 B
`build/block-library/blocks/buttons/style-rtl.css`	370 B
`build/block-library/blocks/buttons/style.css`	370 B
`build/block-library/blocks/calendar/style-rtl.css`	207 B
`build/block-library/blocks/calendar/style.css`	207 B
`build/block-library/blocks/categories/editor-rtl.css`	84 B
`build/block-library/blocks/categories/editor.css`	83 B
`build/block-library/blocks/categories/style-rtl.css`	79 B
`build/block-library/blocks/categories/style.css`	79 B
`build/block-library/blocks/code/style-rtl.css`	90 B
`build/block-library/blocks/code/style.css`	90 B
`build/block-library/blocks/code/theme-rtl.css`	131 B
`build/block-library/blocks/code/theme.css`	131 B
`build/block-library/blocks/columns/editor-rtl.css`	194 B
`build/block-library/blocks/columns/editor.css`	193 B
`build/block-library/blocks/columns/style-rtl.css`	474 B
`build/block-library/blocks/columns/style.css`	475 B
`build/block-library/blocks/cover/editor-rtl.css`	666 B
`build/block-library/blocks/cover/editor.css`	670 B
`build/block-library/blocks/cover/style-rtl.css`	1.23 kB
`build/block-library/blocks/cover/style.css`	1.23 kB
`build/block-library/blocks/embed/editor-rtl.css`	488 B
`build/block-library/blocks/embed/editor.css`	488 B
`build/block-library/blocks/embed/style-rtl.css`	417 B
`build/block-library/blocks/embed/style.css`	417 B
`build/block-library/blocks/embed/theme-rtl.css`	124 B
`build/block-library/blocks/embed/theme.css`	124 B
`build/block-library/blocks/file/editor-rtl.css`	300 B
`build/block-library/blocks/file/editor.css`	300 B
`build/block-library/blocks/file/style-rtl.css`	255 B
`build/block-library/blocks/file/style.css`	255 B
`build/block-library/blocks/file/view.min.js`	322 B
`build/block-library/blocks/freeform/editor-rtl.css`	2.44 kB
`build/block-library/blocks/freeform/editor.css`	2.44 kB
`build/block-library/blocks/gallery/editor-rtl.css`	925 B
`build/block-library/blocks/gallery/editor.css`	929 B
`build/block-library/blocks/gallery/style-rtl.css`	1.6 kB
`build/block-library/blocks/gallery/style.css`	1.59 kB
`build/block-library/blocks/gallery/theme-rtl.css`	122 B
`build/block-library/blocks/gallery/theme.css`	122 B
`build/block-library/blocks/group/editor-rtl.css`	159 B
`build/block-library/blocks/group/editor.css`	159 B
`build/block-library/blocks/group/style-rtl.css`	57 B
`build/block-library/blocks/group/style.css`	57 B
`build/block-library/blocks/group/theme-rtl.css`	70 B
`build/block-library/blocks/group/theme.css`	70 B
`build/block-library/blocks/heading/style-rtl.css`	114 B
`build/block-library/blocks/heading/style.css`	114 B
`build/block-library/blocks/home-link/style-rtl.css`	247 B
`build/block-library/blocks/home-link/style.css`	247 B
`build/block-library/blocks/html/editor-rtl.css`	283 B
`build/block-library/blocks/html/editor.css`	284 B
`build/block-library/blocks/image/editor-rtl.css`	728 B
`build/block-library/blocks/image/editor.css`	728 B
`build/block-library/blocks/image/style-rtl.css`	482 B
`build/block-library/blocks/image/style.css`	487 B
`build/block-library/blocks/image/theme-rtl.css`	124 B
`build/block-library/blocks/image/theme.css`	124 B
`build/block-library/blocks/latest-comments/style-rtl.css`	284 B
`build/block-library/blocks/latest-comments/style.css`	284 B
`build/block-library/blocks/latest-posts/editor-rtl.css`	137 B
`build/block-library/blocks/latest-posts/editor.css`	137 B
`build/block-library/blocks/latest-posts/style-rtl.css`	528 B
`build/block-library/blocks/latest-posts/style.css`	527 B
`build/block-library/blocks/list/style-rtl.css`	94 B
`build/block-library/blocks/list/style.css`	94 B
`build/block-library/blocks/media-text/editor-rtl.css`	266 B
`build/block-library/blocks/media-text/editor.css`	263 B
`build/block-library/blocks/media-text/style-rtl.css`	488 B
`build/block-library/blocks/media-text/style.css`	485 B
`build/block-library/blocks/more/editor-rtl.css`	431 B
`build/block-library/blocks/more/editor.css`	431 B
`build/block-library/blocks/navigation-link/editor-rtl.css`	489 B
`build/block-library/blocks/navigation-link/editor.css`	488 B
`build/block-library/blocks/navigation-link/style-rtl.css`	94 B
`build/block-library/blocks/navigation-link/style.css`	94 B
`build/block-library/blocks/navigation/editor-rtl.css`	1.72 kB
`build/block-library/blocks/navigation/editor.css`	1.72 kB
`build/block-library/blocks/navigation/style-rtl.css`	1.42 kB
`build/block-library/blocks/navigation/style.css`	1.41 kB
`build/block-library/blocks/navigation/view.min.js`	2.52 kB
`build/block-library/blocks/nextpage/editor-rtl.css`	395 B
`build/block-library/blocks/nextpage/editor.css`	395 B
`build/block-library/blocks/page-list/editor-rtl.css`	310 B
`build/block-library/blocks/page-list/editor.css`	310 B
`build/block-library/blocks/page-list/style-rtl.css`	241 B
`build/block-library/blocks/page-list/style.css`	241 B
`build/block-library/blocks/paragraph/editor-rtl.css`	157 B
`build/block-library/blocks/paragraph/editor.css`	157 B
`build/block-library/blocks/paragraph/style-rtl.css`	261 B
`build/block-library/blocks/paragraph/style.css`	261 B
`build/block-library/blocks/post-author/editor-rtl.css`	210 B
`build/block-library/blocks/post-author/editor.css`	210 B
`build/block-library/blocks/post-author/style-rtl.css`	182 B
`build/block-library/blocks/post-author/style.css`	181 B
`build/block-library/blocks/post-comments-form/style-rtl.css`	140 B
`build/block-library/blocks/post-comments-form/style.css`	140 B
`build/block-library/blocks/post-comments/style-rtl.css`	360 B
`build/block-library/blocks/post-comments/style.css`	359 B
`build/block-library/blocks/post-content/editor-rtl.css`	138 B
`build/block-library/blocks/post-content/editor.css`	138 B
`build/block-library/blocks/post-excerpt/editor-rtl.css`	73 B
`build/block-library/blocks/post-excerpt/editor.css`	73 B
`build/block-library/blocks/post-excerpt/style-rtl.css`	69 B
`build/block-library/blocks/post-excerpt/style.css`	69 B
`build/block-library/blocks/post-featured-image/editor-rtl.css`	398 B
`build/block-library/blocks/post-featured-image/editor.css`	398 B
`build/block-library/blocks/post-featured-image/style-rtl.css`	143 B
`build/block-library/blocks/post-featured-image/style.css`	143 B
`build/block-library/blocks/post-template/editor-rtl.css`	99 B
`build/block-library/blocks/post-template/editor.css`	98 B
`build/block-library/blocks/post-template/style-rtl.css`	378 B
`build/block-library/blocks/post-template/style.css`	379 B
`build/block-library/blocks/post-terms/style-rtl.css`	73 B
`build/block-library/blocks/post-terms/style.css`	73 B
`build/block-library/blocks/post-title/style-rtl.css`	60 B
`build/block-library/blocks/post-title/style.css`	60 B
`build/block-library/blocks/preformatted/style-rtl.css`	103 B
`build/block-library/blocks/preformatted/style.css`	103 B
`build/block-library/blocks/pullquote/editor-rtl.css`	198 B
`build/block-library/blocks/pullquote/editor.css`	198 B
`build/block-library/blocks/pullquote/style-rtl.css`	378 B
`build/block-library/blocks/pullquote/style.css`	378 B
`build/block-library/blocks/pullquote/theme-rtl.css`	167 B
`build/block-library/blocks/pullquote/theme.css`	167 B
`build/block-library/blocks/query-pagination-numbers/editor-rtl.css`	122 B
`build/block-library/blocks/query-pagination-numbers/editor.css`	121 B
`build/block-library/blocks/query-pagination/editor-rtl.css`	270 B
`build/block-library/blocks/query-pagination/editor.css`	262 B
`build/block-library/blocks/query-pagination/style-rtl.css`	168 B
`build/block-library/blocks/query-pagination/style.css`	168 B
`build/block-library/blocks/query-title/editor-rtl.css`	85 B
`build/block-library/blocks/query-title/editor.css`	85 B
`build/block-library/blocks/query/editor-rtl.css`	131 B
`build/block-library/blocks/query/editor.css`	132 B
`build/block-library/blocks/quote/style-rtl.css`	187 B
`build/block-library/blocks/quote/style.css`	187 B
`build/block-library/blocks/quote/theme-rtl.css`	220 B
`build/block-library/blocks/quote/theme.css`	222 B
`build/block-library/blocks/rss/editor-rtl.css`	202 B
`build/block-library/blocks/rss/editor.css`	204 B
`build/block-library/blocks/rss/style-rtl.css`	289 B
`build/block-library/blocks/rss/style.css`	288 B
`build/block-library/blocks/search/editor-rtl.css`	165 B
`build/block-library/blocks/search/editor.css`	165 B
`build/block-library/blocks/search/style-rtl.css`	374 B
`build/block-library/blocks/search/style.css`	375 B
`build/block-library/blocks/search/theme-rtl.css`	64 B
`build/block-library/blocks/search/theme.css`	64 B
`build/block-library/blocks/separator/editor-rtl.css`	99 B
`build/block-library/blocks/separator/editor.css`	99 B
`build/block-library/blocks/separator/style-rtl.css`	250 B
`build/block-library/blocks/separator/style.css`	250 B
`build/block-library/blocks/separator/theme-rtl.css`	172 B
`build/block-library/blocks/separator/theme.css`	172 B
`build/block-library/blocks/shortcode/editor-rtl.css`	474 B
`build/block-library/blocks/shortcode/editor.css`	474 B
`build/block-library/blocks/site-logo/editor-rtl.css`	462 B
`build/block-library/blocks/site-logo/editor.css`	464 B
`build/block-library/blocks/site-logo/style-rtl.css`	153 B
`build/block-library/blocks/site-logo/style.css`	153 B
`build/block-library/blocks/site-tagline/editor-rtl.css`	86 B
`build/block-library/blocks/site-tagline/editor.css`	86 B
`build/block-library/blocks/site-title/editor-rtl.css`	84 B
`build/block-library/blocks/site-title/editor.css`	84 B
`build/block-library/blocks/social-link/editor-rtl.css`	165 B
`build/block-library/blocks/social-link/editor.css`	165 B
`build/block-library/blocks/social-links/editor-rtl.css`	812 B
`build/block-library/blocks/social-links/editor.css`	811 B
`build/block-library/blocks/social-links/style-rtl.css`	1.33 kB
`build/block-library/blocks/social-links/style.css`	1.33 kB
`build/block-library/blocks/spacer/editor-rtl.css`	307 B
`build/block-library/blocks/spacer/editor.css`	307 B
`build/block-library/blocks/spacer/style-rtl.css`	48 B
`build/block-library/blocks/spacer/style.css`	48 B
`build/block-library/blocks/table/editor-rtl.css`	471 B
`build/block-library/blocks/table/editor.css`	472 B
`build/block-library/blocks/table/style-rtl.css`	481 B
`build/block-library/blocks/table/style.css`	481 B
`build/block-library/blocks/table/theme-rtl.css`	188 B
`build/block-library/blocks/table/theme.css`	188 B
`build/block-library/blocks/tag-cloud/style-rtl.css`	146 B
`build/block-library/blocks/tag-cloud/style.css`	146 B
`build/block-library/blocks/template-part/editor-rtl.css`	636 B
`build/block-library/blocks/template-part/editor.css`	635 B
`build/block-library/blocks/template-part/theme-rtl.css`	101 B
`build/block-library/blocks/template-part/theme.css`	101 B
`build/block-library/blocks/term-description/editor-rtl.css`	90 B
`build/block-library/blocks/term-description/editor.css`	90 B
`build/block-library/blocks/text-columns/editor-rtl.css`	95 B
`build/block-library/blocks/text-columns/editor.css`	95 B
`build/block-library/blocks/text-columns/style-rtl.css`	166 B
`build/block-library/blocks/text-columns/style.css`	166 B
`build/block-library/blocks/verse/style-rtl.css`	87 B
`build/block-library/blocks/verse/style.css`	87 B
`build/block-library/blocks/video/editor-rtl.css`	571 B
`build/block-library/blocks/video/editor.css`	572 B
`build/block-library/blocks/video/style-rtl.css`	173 B
`build/block-library/blocks/video/style.css`	173 B
`build/block-library/blocks/video/theme-rtl.css`	124 B
`build/block-library/blocks/video/theme.css`	124 B
`build/block-library/common-rtl.css`	853 B
`build/block-library/common.css`	849 B
`build/block-library/editor-rtl.css`	9.52 kB
`build/block-library/editor.css`	9.51 kB
`build/block-library/index.min.js`	150 kB
`build/block-library/reset-rtl.css`	527 B
`build/block-library/reset.css`	527 B
`build/block-library/style-rtl.css`	10.1 kB
`build/block-library/style.css`	10.1 kB
`build/block-library/theme-rtl.css`	658 B
`build/block-library/theme.css`	663 B
`build/block-serialization-default-parser/index.min.js`	1.09 kB
`build/block-serialization-spec-parser/index.min.js`	2.79 kB
`build/blocks/index.min.js`	46.9 kB
`build/components/index.min.js`	209 kB
`build/components/style-rtl.css`	15.8 kB
`build/components/style.css`	15.8 kB
`build/compose/index.min.js`	10.2 kB
`build/core-data/index.min.js`	12.4 kB
`build/customize-widgets/index.min.js`	11.1 kB
`build/customize-widgets/style-rtl.css`	1.5 kB
`build/customize-widgets/style.css`	1.49 kB
`build/data-controls/index.min.js`	614 B
`build/data/index.min.js`	7.1 kB
`build/date/index.min.js`	31.5 kB
`build/deprecated/index.min.js`	428 B
`build/dom-ready/index.min.js`	304 B
`build/dom/index.min.js`	4.53 kB
`build/edit-post/classic-rtl.css`	492 B
`build/edit-post/classic.css`	494 B
`build/edit-post/index.min.js`	29 kB
`build/edit-post/style-rtl.css`	7.19 kB
`build/edit-post/style.css`	7.18 kB
`build/edit-site/index.min.js`	26.3 kB
`build/edit-site/style-rtl.css`	5.07 kB
`build/edit-site/style.css`	5.07 kB
`build/edit-widgets/index.min.js`	16 kB
`build/edit-widgets/style-rtl.css`	4.06 kB
`build/edit-widgets/style.css`	4.06 kB
`build/editor/index.min.js`	37.7 kB
`build/editor/style-rtl.css`	3.74 kB
`build/editor/style.css`	3.73 kB
`build/element/index.min.js`	3.17 kB
`build/escape-html/index.min.js`	517 B
`build/format-library/index.min.js`	5.36 kB
`build/format-library/style-rtl.css`	668 B
`build/format-library/style.css`	669 B
`build/hooks/index.min.js`	1.55 kB
`build/html-entities/index.min.js`	424 B
`build/i18n/index.min.js`	3.6 kB
`build/is-shallow-equal/index.min.js`	501 B
`build/keyboard-shortcuts/index.min.js`	1.49 kB
`build/keycodes/index.min.js`	1.25 kB
`build/list-reusable-blocks/index.min.js`	1.85 kB
`build/list-reusable-blocks/style-rtl.css`	838 B
`build/list-reusable-blocks/style.css`	838 B
`build/media-utils/index.min.js`	2.88 kB
`build/notices/index.min.js`	845 B
`build/nux/index.min.js`	2.03 kB
`build/nux/style-rtl.css`	747 B
`build/nux/style.css`	743 B
`build/plugins/index.min.js`	1.83 kB
`build/primitives/index.min.js`	921 B
`build/priority-queue/index.min.js`	582 B
`build/react-i18n/index.min.js`	671 B
`build/redux-routine/index.min.js`	2.63 kB
`build/reusable-blocks/index.min.js`	2.28 kB
`build/reusable-blocks/style-rtl.css`	256 B
`build/reusable-blocks/style.css`	256 B
`build/rich-text/index.min.js`	10.6 kB
`build/server-side-render/index.min.js`	1.32 kB
`build/shortcode/index.min.js`	1.48 kB
`build/token-list/index.min.js`	562 B
`build/url/index.min.js`	1.74 kB
`build/viewport/index.min.js`	1.02 kB
`build/warning/index.min.js`	248 B
`build/widgets/index.min.js`	6.37 kB
`build/widgets/style-rtl.css`	1.05 kB
`build/widgets/style.css`	1.05 kB
`build/wordcount/index.min.js`	1.04 kB

_{compressed-size-action}

getdave

Great work adding the undo/redo!

Not sure what's happening here but clicking Redo doesn't seem to restore the changes I just "undid".

To replicate:

Add x3 links to the Navigation.
Click Undo to revert the adding of the links.
Click Redo to restore the links.
See that you can't do this. There is only 1 level of redos available.

Also notice how everytime I click "Undo" it requires x3 clicks to remove a menu item that was added, rather than the x2 I would expect.

Kapture.2021-09-03.at.15.26.54.mp4

There's audio commentary on the video above which might help.

talldan · 2021-09-06T03:26:58Z

@getdave Good catch.

I did some further testing and it doesn't seem to be caused by this PR. The editor already had undo/redo functionality via shortcut keys and the problem same can be reproduced in trunk using the shortcut keys for undo/redo.

Testing in the post editor, the navigation block also has the same issue there, so I think this is a deeper problem than just the navigation editor.

I'm going to move ahead with merging this, but I've made a bug report for the problem and will look into that further - #34564.

Valid bug, but not caused by this PR

talldan · 2021-09-06T05:09:11Z

I found a fix for the undo/redo issue in #34565.

talldan added [Type] Enhancement [Feature] Navigation Screen labels Sep 3, 2021

talldan self-assigned this Sep 3, 2021

talldan requested review from adamziel, draganescu, getdave, kevin940726 and tellthemachines as code owners Sep 3, 2021

talldan added this to PRs pending review in Navigation editor via automation Sep 3, 2021

kevin940726 approved these changes Sep 3, 2021

View changes

talldan mentioned this pull request Sep 3, 2021

Navigation Editor Tracking Issue #29102

Open

13 of 52 tasks

getdave reviewed Sep 3, 2021

View changes

talldan mentioned this pull request Sep 6, 2021

Undo/redo trap in the navigation block #34564

Closed

talldan added 3 commits Sep 3, 2021

Add undo/redo buttons

b132dcb

Tidy up responsive styles

91ad29d

Update package lock

d5d5f30

talldan force-pushed the add/undo-redo-buttons-in-nav-editor branch from eae0819 to d5d5f30 Sep 6, 2021

Navigation editor automation moved this from PRs pending review to Done Sep 6, 2021

talldan deleted the add/undo-redo-buttons-in-nav-editor branch Sep 6, 2021

github-actions bot added this to the Gutenberg 11.5 milestone Sep 6, 2021

talldan mentioned this pull request Sep 6, 2021

Increase in npm ERR! cb() never called! errors #33424

Open

WordPress / gutenberg

Add undo redo buttons in navigation editor #34533

Add undo redo buttons in navigation editor #34533

talldan commented Sep 3, 2021

kevin940726 left a comment

github-actions bot commented Sep 3, 2021 •

edited

getdave left a comment •

edited

talldan commented Sep 6, 2021

talldan commented Sep 6, 2021

WordPress / gutenberg

Add undo redo buttons in navigation editor #34533

Add undo redo buttons in navigation editor #34533

Conversation

talldan commented Sep 3, 2021

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

kevin940726 left a comment

github-actions bot commented Sep 3, 2021 • edited

getdave left a comment • edited

talldan commented Sep 6, 2021

talldan commented Sep 6, 2021

github-actions bot commented Sep 3, 2021 •

edited

getdave left a comment •

edited