WordPress.org

Make WordPress Core

Opened 7 years ago

Last modified 4 months ago

#17133 new enhancement

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

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

Description

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 (2)

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

Download all attachments as: .zip

Change History (28)

#1 @ocean90
7 years ago

  • Component changed from Autosave to Administration

Ctrl+S has been introduced at some point

See #5598

#2 @jcnetsys
7 years ago

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

#3 @ocean90
7 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
7 years ago

  • Milestone changed from Awaiting Review to Future Release

Sounds like a no-brainer. +1

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

#5 @andrewryno
7 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
7 years ago

  • Cc chacha102 added

@evansolomon
7 years ago

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

#7 @SergeyBiryukov
7 years ago

  • Keywords has-patch added; needs-patch removed

#8 @evansolomon
7 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.

Version 0, edited 7 years ago by evansolomon (next)

#9 @chexee
6 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
5 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
4 years ago

  • Component changed from Administration to Plugins
  • Focuses administration added

#12 @chriscct7
3 years ago

  • Severity changed from minor to normal

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


10 months ago

#14 @karmatosed
10 months 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
10 months ago

  • Milestone changed from Future Release to 4.9

#16 @westonruter
8 months 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
8 months 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
8 months 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.


8 months ago

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


8 months ago

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


8 months ago

#22 @jbpaul17
8 months ago

  • Milestone changed from 4.9 to Future Release

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

@Junaidkbr
4 months ago

Patch for codeMirror editor.

#23 @Junaidkbr
4 months ago

  • Keywords needs-testing added; needs-refresh removed

#24 @Junaidkbr
4 months 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 months ago by Junaidkbr (previous) (diff)

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


4 months ago

#26 @SergeyBiryukov
4 months ago

  • Milestone changed from Future Release to 5.0
Note: See TracTickets for help on using tickets.