diff --git a/blocks/editable/index.js b/blocks/editable/index.js index 19c163a06b5d42..6d2a16af6f16d8 100644 --- a/blocks/editable/index.js +++ b/blocks/editable/index.js @@ -11,6 +11,7 @@ import 'element-closest'; * WordPress dependencies */ import { Toolbar } from 'components'; +import { BACKSPACE, DELETE } from 'utils/keycodes'; /** * Internal dependencies @@ -19,9 +20,6 @@ import './style.scss'; import FormatToolbar from './format-toolbar'; import TinyMCE from './tinymce'; -const KEYCODE_BACKSPACE = 8; -const KEYCODE_DELETE = 46; - const alignmentMap = { alignleft: 'left', alignright: 'right', @@ -221,11 +219,11 @@ export default class Editable extends wp.element.Component { onKeyDown( event ) { if ( this.props.onMerge && ( - ( event.keyCode === KEYCODE_BACKSPACE && this.isStartOfEditor() ) || - ( event.keyCode === KEYCODE_DELETE && this.isEndOfEditor() ) + ( event.keyCode === BACKSPACE && this.isStartOfEditor() ) || + ( event.keyCode === DELETE && this.isEndOfEditor() ) ) ) { - const forward = event.keyCode === KEYCODE_DELETE; + const forward = event.keyCode === DELETE; this.onChange(); this.props.onMerge( forward ); event.preventDefault(); @@ -234,7 +232,7 @@ export default class Editable extends wp.element.Component { } onKeyUp( { keyCode } ) { - if ( keyCode === KEYCODE_BACKSPACE ) { + if ( keyCode === BACKSPACE ) { this.onSelectionChange(); } } diff --git a/editor/inserter/menu.js b/editor/inserter/menu.js index 56ae39b231bcf3..add96a3f4d57cb 100644 --- a/editor/inserter/menu.js +++ b/editor/inserter/menu.js @@ -9,6 +9,7 @@ import { connect } from 'react-redux'; * WordPress dependencies */ import { Dashicon, withFocusReturn } from 'components'; +import { TAB, ESCAPE, LEFT, UP, RIGHT, DOWN } from 'utils/keycodes'; /** * Internal dependencies @@ -177,7 +178,7 @@ class InserterMenu extends wp.element.Component { onKeyDown( keydown ) { switch ( keydown.keyCode ) { - case 9 : /* Tab */ + case TAB: if ( keydown.shiftKey ) { // Previous. keydown.preventDefault(); @@ -188,31 +189,31 @@ class InserterMenu extends wp.element.Component { keydown.preventDefault(); this.focusNext( this ); break; - case 27 : /* Escape */ + case ESCAPE: keydown.preventDefault(); this.props.onSelect( null ); break; - case 37 : /* ArrowLeft */ + case LEFT: if ( this.state.currentFocus === 'search' ) { return; } this.focusPrevious( this ); break; - case 38 : /* ArrowUp */ + case UP: keydown.preventDefault(); this.focusPrevious( this ); break; - case 39 : /* ArrowRight */ + case RIGHT: if ( this.state.currentFocus === 'search' ) { return; } this.focusNext( this ); break; - case 40 : /* ArrowDown */ + case DOWN: keydown.preventDefault(); this.focusNext( this ); diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index 30de1a469cbe83..cc93ddf663d919 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -12,6 +12,7 @@ import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'; */ import { Children } from 'element'; import { Toolbar } from 'components'; +import { BACKSPACE, ESCAPE } from 'utils/keycodes'; /** * Internal dependencies @@ -112,7 +113,7 @@ class VisualEditorBlock extends wp.element.Component { } = this.props; // Remove block on backspace - if ( 8 /* Backspace */ === keyCode ) { + if ( BACKSPACE === keyCode ) { if ( target === this.node ) { onRemove( [ uid ] ); @@ -127,7 +128,7 @@ class VisualEditorBlock extends wp.element.Component { } // Deselect on escape - if ( 27 /* Escape */ === keyCode ) { + if ( ESCAPE === keyCode ) { onDeselect(); } } diff --git a/editor/post-title/index.js b/editor/post-title/index.js index 8b4345a6c5ebb7..5cefb34b07d8f1 100644 --- a/editor/post-title/index.js +++ b/editor/post-title/index.js @@ -4,6 +4,11 @@ import { connect } from 'react-redux'; import Textarea from 'react-autosize-textarea'; +/** + * WordPress dependencies + */ +import { ENTER } from 'utils/keycodes'; + /** * Internal dependencies */ @@ -23,7 +28,7 @@ function PostTitle( { title, onUpdate } ) { }; const onKeyDown = ( event ) => { - if ( event.keyCode === 13 ) { + if ( event.keyCode === ENTER ) { event.preventDefault(); } }; diff --git a/index.php b/index.php index bd2c50a428e195..fcca4adf570a3b 100644 --- a/index.php +++ b/index.php @@ -189,6 +189,12 @@ function gutenberg_register_scripts() { ); // Editor Scripts. + wp_register_script( + 'wp-utils', + plugins_url( 'utils/build/index.js', __FILE__ ), + array(), + filemtime( plugin_dir_path( __FILE__ ) . 'utils/build/index.js' ) + ); wp_register_script( 'wp-date', plugins_url( 'date/build/index.js', __FILE__ ), @@ -242,7 +248,7 @@ function gutenberg_register_scripts() { wp_register_script( 'wp-blocks', plugins_url( 'blocks/build/index.js', __FILE__ ), - array( 'wp-element', 'wp-components', 'tinymce-nightly', 'tinymce-nightly-lists' ), + array( 'wp-element', 'wp-components', 'wp-utils', 'tinymce-nightly', 'tinymce-nightly-lists' ), filemtime( plugin_dir_path( __FILE__ ) . 'blocks/build/index.js' ) ); @@ -485,7 +491,7 @@ function gutenberg_scripts_and_styles( $hook ) { wp_enqueue_script( 'wp-editor', plugins_url( 'editor/build/index.js', __FILE__ ), - array( 'wp-api', 'wp-date', 'wp-i18n', 'wp-blocks', 'wp-element', 'wp-components' ), + array( 'wp-api', 'wp-date', 'wp-i18n', 'wp-blocks', 'wp-element', 'wp-components', 'wp-utils' ), filemtime( plugin_dir_path( __FILE__ ) . 'editor/build/index.js' ), true // enqueue in the footer. ); diff --git a/utils/index.js b/utils/index.js new file mode 100644 index 00000000000000..6400ec8e4489f0 --- /dev/null +++ b/utils/index.js @@ -0,0 +1,3 @@ +import * as keycodes from './keycodes'; + +export { keycodes }; diff --git a/utils/keycodes.js b/utils/keycodes.js new file mode 100644 index 00000000000000..6b1bed9f94ae7f --- /dev/null +++ b/utils/keycodes.js @@ -0,0 +1,9 @@ +export const BACKSPACE = 8; +export const TAB = 9; +export const ENTER = 12; +export const ESCAPE = 27; +export const LEFT = 37; +export const UP = 38; +export const RIGHT = 39; +export const DOWN = 40; +export const DELETE = 46; diff --git a/webpack.config.js b/webpack.config.js index 641372175787a9..abf87b7f2b821e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -8,10 +8,11 @@ const ExtractTextPlugin = require( 'extract-text-webpack-plugin' ); const entryPointNames = [ 'element', - 'date', 'i18n', 'components', + 'utils', 'blocks', + 'date', 'editor', ];