Make WordPress Core

Opened 11 years ago

Last modified 3 months ago

#17133 new enhancement

Code Editor: Register ctrl + s event for plugin/theme editor

Reported by: jcnetsys Owned by:
Milestone: Future Release Priority: high
Severity: normal Version: 3.1
Component: Plugins Keywords: has-ux-feedback has-patch needs-testing
Focuses: javascript, administration Cc:


Often when modifying code or writing a post using the wordpress editor I instinctively hit ctrl + s to save it. Up pops the save website dialog which I then have to close. In Gmail when I hit ctrl+ s it saves the email to drafts. I think a similar thing would be useful for wordpress.

Attachments (3)

keystroke_save.patch (2.0 KB) - added by evansolomon 10 years ago.
Allow CMD/CTRL + S to save a file in the theme or plugin editor
17133.patch (736 bytes) - added by Junaidkbr 4 years ago.
Patch for codeMirror editor.
17133.diff (748 bytes) - added by desrosj 3 years ago.

Download all attachments as: .zip

Change History (34)

#1 @ocean90
11 years ago

  • Component changed from Autosave to Administration

Ctrl+S has been introduced at some point

See #5598

#2 @jcnetsys
11 years ago

So it has - for new posts. Could this feature be implemented for the plugin/theme editor also.

#3 @ocean90
11 years ago

  • Keywords 2nd-opinion removed
  • Summary changed from Register ctrl + s event for editors to Register ctrl + s event for plugin/theme editor

#4 @scribu
11 years ago

  • Milestone changed from Awaiting Review to Future Release

Sounds like a no-brainer. +1

Last edited 11 years ago by scribu (previous) (diff)

#5 @andrewryno
11 years ago

Would it also be worth it to expand this to register on all editors that have a "Save" button? For example, I was just thinking of widgets. I type a lot of HTML code in there and I automatically would try to save using the keyboard shortcut.

#6 @chacha102
10 years ago

  • Cc chacha102 added

10 years ago

Allow CMD/CTRL + S to save a file in the theme or plugin editor

#7 @SergeyBiryukov
10 years ago

  • Keywords has-patch added; needs-patch removed

#8 @evansolomon
10 years ago

I changed the submit button ID because jQuery's submit() function does not work on forms where the button has the ID "submit". Alternatively we could leave the name and use click(), but this seemed like a cleaner option.

Last edited 10 years ago by evansolomon (previous) (diff)

#9 @chexee
10 years ago

  • Keywords needs-refresh added

I like this and really can't think of a reason not to implement this. I actually hit CMD+S all the time on these editor pages when making quick fixes and get really annoyed when the Save As Web Page dialog comes up.

I tested Evan's patch. It works in FF, Chrome, and Safari on OS X, but not any browsers on Windows (the Save As dialog pops up).

Surprisingly it works within IE in IETester, so it must register the CTRL+S on some level.

#10 @johnbillion
8 years ago

For those interested, I've started work on a general keyboard shortcuts plugin for WordPress: https://github.com/johnbillion/wordpress-keyboard-shortcuts.

It implements CMD+S/CTRL+S for saving posts, terms and user profiles. The plan is to expand it to settings and the plugin/theme editors too, and anywhere else it's relevant.

#11 @nacin
8 years ago

  • Component changed from Administration to Plugins
  • Focuses administration added

#12 @chriscct7
6 years ago

  • Severity changed from minor to normal

This ticket was mentioned in Slack in #design by karmatosed. View the logs.

5 years ago

#14 @karmatosed
5 years ago

  • Keywords has-ux-feedback added; ux-feedback removed

This would be a great improvement and we discussed this in today's design triage session.

#15 @melchoyce
5 years ago

  • Milestone changed from Future Release to 4.9

#16 @westonruter
4 years ago

  • Summary changed from Register ctrl + s event for plugin/theme editor to Code Editor: Register ctrl + s event for plugin/theme editor

#17 @westonruter
4 years ago

I suggest registering the shortcut via the extraKeys config for CodeMirror.

An example of this is even in the release notes: https://codemirror.net/doc/upgrade_v2.2.html

  extraKeys: {
    "Ctrl-S": function(instance) { saveText(instance.getValue()); },
    "Ctrl-/": "undo"

For our purposes, the function would need to:

  1. Check to see if there are linter errors. If not, then abort.
  2. Make sure the CodeMirror text has been written back into the textarea.
  3. Submit the form.

The patch would be written for https://github.com/WordPress/wordpress-develop/blob/master/src/wp-admin/js/code-editor.js

#18 @westonruter
4 years ago

  • Priority changed from normal to high

Bumping priority to high for visibility and alignment with 4.9 goals, and given proximity to beta 1 deadline.

This ticket was mentioned in Slack in #design by karmatosed. View the logs.

4 years ago

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.

4 years ago

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.

4 years ago

#22 @jbpaul17
4 years ago

  • Milestone changed from 4.9 to Future Release

Punting this to Future Release per the 4.9 bug scrub earlier today.

4 years ago

Patch for codeMirror editor.

#23 @Junaidkbr
4 years ago

  • Keywords needs-testing added; needs-refresh removed

#24 @Junaidkbr
4 years ago

@westonruter Please review my patch and provide your feedback on it. I didn't know about this ticket but worked on the feature on my own. I was about to create a new ticket but found this one on my first search.

Anyway, my patch is not modifying code-editor.js because this file is also used in Custom CSS editor. In code-editor.js, we don't have a context of which editor is this, or at least I didn't find any.

There's another neat way to handle the document save with CodeMirror but I couldn't access the commands property anywhere. Ref: http://codemirror.net/doc/manual.html#commands

About the patch:
Calling component.submit directly from the shortcut event isn't possible because componenet.save needs a parameter which is the form submit event. Due to this limitation, the patch is initiating the form submit event by component.form.submit()

Last edited 4 years ago by Junaidkbr (previous) (diff)

This ticket was mentioned in Slack in #core by junaidkbr. View the logs.

4 years ago

#26 @SergeyBiryukov
4 years ago

  • Milestone changed from Future Release to 5.0

#27 @johnbillion
3 years ago

  • Milestone changed from 5.0 to 5.1

#28 @pento
3 years ago

  • Milestone changed from 5.1 to 5.2

Patch needs testing and review.

3 years ago

#29 @desrosj
3 years ago

  • Focuses javascript added
  • Milestone changed from 5.2 to Future Release

17133.patch is a refresh against trunk (I did not test, though). This still needs testing and review. Beta 1 is in 2 days, so I am going to punt this to Future Release.

If someone wants to own this and shepherd it into 5.2, feel free to move it back.

#30 @thebacklinksss
7 months ago


#31 @spiraltee
3 months ago

I just tested this on WordPress 5.9 and it works for the plugins and themes editor but doesn't work for comments editor.

Last edited 3 months ago by spiraltee (previous) (diff)
Note: See TracTickets for help on using tickets.