@wordpress/block-library 7.8.0 → 7.9.0

package/src/gallery/v1/edit.js

@@ -11,7 +11,6 @@ import {
 	map,
 	reduce,
 	some,
-	toString,
 } from 'lodash';
 
 /**
@@ -226,7 +225,7 @@ function GalleryEdit( props ) {
 		// The image id in both the images and attachmentCaptions arrays is a
 		// string, so ensure comparison works correctly by converting the
 		// newImage.id to a string.
-		const newImageId = toString( newImage.id );
+		const newImageId = newImage.id.toString();
 		const currentImage = find( images, { id: newImageId } );
 		const currentImageCaption = currentImage
 			? currentImage.caption
@@ -253,7 +252,7 @@ function GalleryEdit( props ) {
 			newImages.map( ( newImage ) => ( {
 				// Store the attachmentCaption id as a string for consistency
 				// with the type of the id in the images attribute.
-				id: toString( newImage.id ),
+				id: newImage.id.toString(),
 				caption: newImage.caption,
 			} ) )
 		);
@@ -264,7 +263,7 @@ function GalleryEdit( props ) {
 				// The id value is stored in a data attribute, so when the
 				// block is parsed it's converted to a string. Converting
 				// to a string here ensures it's type is consistent.
-				id: toString( newImage.id ),
+				id: newImage.id.toString(),
 			} ) ),
 			columns: attributes.columns
 				? Math.min( newImages.length, attributes.columns )

package/src/gallery/v1/gallery-image.js

@@ -16,6 +16,7 @@ import {
 	RichText,
 	MediaPlaceholder,
 	store as blockEditorStore,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { isBlobURL } from '@wordpress/blob';
 import { compose } from '@wordpress/compose';
@@ -245,6 +246,9 @@ class GalleryImage extends Component {
 				{ ! isEditing && ( isSelected || caption ) && (
 					<RichText
 						tagName="figcaption"
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
 						aria-label={ __( 'Image caption text' ) }
 						placeholder={ isSelected ? __( 'Add caption' ) : null }
 						value={ caption }

package/src/gallery/v1/gallery.js

@@ -6,7 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import {
+	RichText,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
@@ -94,7 +97,10 @@ export const Gallery = ( props ) => {
 			<RichTextVisibilityHelper
 				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
 				tagName="figcaption"
-				className="blocks-gallery-caption"
+				className={ classnames(
+					'blocks-gallery-caption',
+					__experimentalGetElementClassName( 'caption' )
+				) }
 				aria-label={ __( 'Gallery caption text' ) }
 				placeholder={ __( 'Write gallery caption…' ) }
 				value={ caption }

package/src/gallery/v1/save.js

@@ -1,7 +1,16 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -60,7 +69,12 @@ export default function saveV1( { attributes } ) {
 								{ ! RichText.isEmpty( image.caption ) && (
 									<RichText.Content
 										tagName="figcaption"
-										className="blocks-gallery-item__caption"
+										className={ classnames(
+											'blocks-gallery-item',
+											__experimentalGetElementClassName(
+												'caption'
+											)
+										) }
 										value={ image.caption }
 									/>
 								) }
@@ -72,7 +86,10 @@ export default function saveV1( { attributes } ) {
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"
-					className="blocks-gallery-caption"
+					className={ classnames(
+						'blocks-gallery-caption',
+						__experimentalGetElementClassName( 'caption' )
+					) }
 					value={ caption }
 				/>
 			) }

package/src/group/block.json

@@ -21,6 +21,7 @@
 		"__experimentalSettings": true,
 		"align": [ "wide", "full" ],
 		"anchor": true,
+		"ariaLabel": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/html/edit.js

@@ -6,42 +6,19 @@ import { useContext, useState } from '@wordpress/element';
 import {
 	BlockControls,
 	PlainText,
-	transformStyles,
 	useBlockProps,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import {
-	ToolbarButton,
-	Disabled,
-	SandBox,
-	ToolbarGroup,
-} from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { ToolbarButton, Disabled, ToolbarGroup } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Preview from './preview';
 
 export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 	const [ isPreview, setIsPreview ] = useState();
 	const isDisabled = useContext( Disabled.Context );
 
-	const styles = useSelect( ( select ) => {
-		// Default styles used to unset some of the styles
-		// that might be inherited from the editor style.
-		const defaultStyles = `
-			html,body,:root {
-				margin: 0 !important;
-				padding: 0 !important;
-				overflow: visible !important;
-				min-height: auto !important;
-			}
-		`;
-
-		return [
-			defaultStyles,
-			...transformStyles(
-				select( blockEditorStore ).getSettings().styles
-			),
-		];
-	}, [] );
-
 	function switchToPreview() {
 		setIsPreview( true );
 	}
@@ -71,17 +48,10 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 				</ToolbarGroup>
 			</BlockControls>
 			{ isPreview || isDisabled ? (
-				<>
-					<SandBox html={ attributes.content } styles={ styles } />
-					{ /*
-							An overlay is added when the block is not selected in order to register click events.
-							Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it
-							difficult to reselect the block.
-						*/ }
-					{ ! isSelected && (
-						<div className="block-library-html__preview-overlay"></div>
-					) }
-				</>
+				<Preview
+					content={ attributes.content }
+					isSelected={ isSelected }
+				/>
 			) : (
 				<PlainText
 					value={ attributes.content }

package/src/html/preview.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import {
+	transformStyles,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { SandBox } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+// Default styles used to unset some of the styles
+// that might be inherited from the editor style.
+const DEFAULT_STYLES = `
+	html,body,:root {
+		margin: 0 !important;
+		padding: 0 !important;
+		overflow: visible !important;
+		min-height: auto !important;
+	}
+`;
+
+export default function HTMLEditPreview( { content, isSelected } ) {
+	const settingStyles = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings()?.styles;
+	}, [] );
+
+	const styles = useMemo(
+		() => [ DEFAULT_STYLES, ...transformStyles( settingStyles ) ],
+		[ settingStyles ]
+	);
+
+	return (
+		<>
+			<SandBox html={ content } styles={ styles } />
+			{ /*
+				An overlay is added when the block is not selected in order to register click events.
+				Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it
+				difficult to reselect the block.
+			*/ }
+			{ ! isSelected && (
+				<div className="block-library-html__preview-overlay"></div>
+			) }
+		</>
+	);
+}

package/src/image/edit.native.js

@@ -428,6 +428,7 @@ export class ImageEdit extends Component {
 			id: media.id,
 			url: media.url,
 			caption: media.caption,
+			alt: media.alt,
 		};
 
 		let additionalAttributes;

package/src/image/image.js

@@ -29,6 +29,7 @@ import {
 	BlockAlignmentControl,
 	__experimentalImageEditor as ImageEditor,
 	__experimentalImageEditingProvider as ImageEditingProvider,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
@@ -576,6 +577,7 @@ export default function Image( {
 			{ img }
 			{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 				<RichText
+					className={ __experimentalGetElementClassName( 'caption' ) }
 					ref={ captionRef }
 					tagName="figcaption"
 					aria-label={ __( 'Image caption text' ) }

package/src/image/save.js

@@ -7,7 +7,11 @@ import { isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const {
@@ -60,7 +64,11 @@ export default function save( { attributes } ) {
 				image
 			) }
 			{ ! RichText.isEmpty( caption ) && (
-				<RichText.Content tagName="figcaption" value={ caption } />
+				<RichText.Content
+					className={ __experimentalGetElementClassName( 'caption' ) }
+					tagName="figcaption"
+					value={ caption }
+				/>
 			) }
 		</>
 	);

package/src/image/test/edit.native.js

@@ -16,6 +16,7 @@ import Clipboard from '@react-native-clipboard/clipboard';
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import {
+	requestMediaPicker,
 	setFeaturedImage,
 	sendMediaUpload,
 	subscribeMediaUpload,
@@ -49,6 +50,10 @@ jest.mock( 'lodash', () => {
 	return { ...actual, delay: ( cb ) => cb() };
 } );
 
+function mockGetMedia( media ) {
+	jest.spyOn( select( coreStore ), 'getMedia' ).mockReturnValue( media );
+}
+
 const apiFetchPromise = Promise.resolve( {} );
 
 const clipboardPromise = Promise.resolve( '' );
@@ -79,7 +84,7 @@ describe( 'Image Block', () => {
 			<a href="https://cldup.com/cXyG__fTLN.jpg">
 				<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
 			</a>
-		<figcaption>Mountain</figcaption></figure>
+		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
@@ -95,7 +100,7 @@ describe( 'Image Block', () => {
 		fireEvent.press( screen.getByText( 'None' ) );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/><figcaption>Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/><figcaption class="wp-element-caption">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
@@ -105,7 +110,7 @@ describe( 'Image Block', () => {
 		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
 		<figure class="wp-block-image size-large is-style-default">
 			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
-		<figcaption>Mountain</figcaption></figure>
+		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
@@ -121,7 +126,7 @@ describe( 'Image Block', () => {
 		fireEvent.press( screen.getByText( 'Media File' ) );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption>Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
@@ -131,7 +136,7 @@ describe( 'Image Block', () => {
 		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
 		<figure class="wp-block-image size-large is-style-default">
 			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
-		<figcaption>Mountain</figcaption></figure>
+		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
@@ -154,7 +159,7 @@ describe( 'Image Block', () => {
 		fireEvent.press( screen.getByA11yLabel( 'Apply' ) );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><a href="http://wordpress.org"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption>Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><a href="http://wordpress.org"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
@@ -164,7 +169,7 @@ describe( 'Image Block', () => {
 		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
 		<figure class="wp-block-image size-large is-style-default">
 			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
-		<figcaption>Mountain</figcaption></figure>
+		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
@@ -192,7 +197,7 @@ describe( 'Image Block', () => {
 		fireEvent.press( screen.getByText( 'Media File' ) );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption>Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
@@ -204,7 +209,7 @@ describe( 'Image Block', () => {
 			<a href="https://cldup.com/cXyG__fTLN.jpg">
 				<img src="https://cldup.com/cXyG__fTLN.jpg?w=683" alt="" class="wp-image-1"/>
 			</a>
-		<figcaption>Mountain</figcaption></figure>
+		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
@@ -228,7 +233,7 @@ describe( 'Image Block', () => {
 			<a href="https://wordpress.org">
 				<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
 			</a>
-		<figcaption>Mountain</figcaption></figure>
+		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
@@ -246,7 +251,7 @@ describe( 'Image Block', () => {
 		fireEvent.press( linkTargetButton );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><a href="https://wordpress.org" target="_blank" rel="noreferrer noopener"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption>Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><a href="https://wordpress.org" target="_blank" rel="noreferrer noopener"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
@@ -258,7 +263,7 @@ describe( 'Image Block', () => {
 			<a href="https://wordpress.org" target="_blank" rel="noreferrer noopener">
 				<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
 			</a>
-			<figcaption>Mountain</figcaption>
+			<figcaption class="wp-element-caption">Mountain</figcaption>
 		</figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
@@ -277,7 +282,7 @@ describe( 'Image Block', () => {
 		fireEvent.press( linkTargetButton );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><a href="https://wordpress.org"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption>Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><a href="https://wordpress.org"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
@@ -292,12 +297,6 @@ describe( 'Image Block', () => {
 			);
 		}
 
-		function mockGetMedia( media ) {
-			jest.spyOn( select( coreStore ), 'getMedia' ).mockReturnValueOnce(
-				media
-			);
-		}
-
 		it( 'does not prompt to replace featured image during a new image upload', () => {
 			// Arrange
 			const INITIAL_IMAGE = { id: 1, url: 'mock-url-1' };
@@ -406,4 +405,37 @@ describe( 'Image Block', () => {
 			);
 		} );
 	} );
+
+	it( 'sets src and alt attributes when selecting media', async () => {
+		const IMAGE = { id: 1, url: 'mock-image', alt: 'A beautiful mountain' };
+		requestMediaPicker.mockImplementationOnce(
+			( source, filter, multiple, callback ) => {
+				callback( {
+					id: IMAGE.id,
+					url: IMAGE.url,
+					alt: IMAGE.alt,
+				} );
+			}
+		);
+		mockGetMedia( {
+			id: IMAGE.id,
+			source_url: IMAGE.url,
+		} );
+
+		const initialHtml = `
+		<!-- wp:image -->
+		<figure class="wp-block-image">
+				<img alt="" />
+		</figure>
+		<!-- /wp:image -->`;
+		const screen = await initializeEditor( { initialHtml } );
+
+		fireEvent.press( screen.getByText( 'ADD IMAGE' ) );
+		fireEvent.press( screen.getByText( 'WordPress Media Library' ) );
+
+		const expectedHtml = `<!-- wp:image {"id":${ IMAGE.id },"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="${ IMAGE.url }" alt="${ IMAGE.alt }" class="wp-image-${ IMAGE.id }"/></figure>
+<!-- /wp:image -->`;
+		expect( getEditorHtml() ).toBe( expectedHtml );
+	} );
 } );

package/src/list/v2/transforms.js

@@ -1,3 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+/**
+ * External dependencies
+ */
+import { flatMap } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -35,6 +43,15 @@ function getListContentSchema( { phrasingContentSchema } ) {
 	return listContentSchema;
 }
 
+function getListContentFlat( blocks ) {
+	return flatMap( blocks, ( { name, attributes, innerBlocks = [] } ) => {
+		if ( name === 'core/list-item' ) {
+			return [ attributes.content, ...getListContentFlat( innerBlocks ) ];
+		}
+		return getListContentFlat( innerBlocks );
+	} );
+}
+
 const transforms = {
 	from: [
 		{
@@ -123,13 +140,11 @@ const transforms = {
 			type: 'block',
 			blocks: [ block ],
 			transform: ( _attributes, childBlocks ) => {
-				return childBlocks
-					.filter( ( { name } ) => name === 'core/list-item' )
-					.map( ( { attributes } ) =>
-						createBlock( block, {
-							content: attributes.content,
-						} )
-					);
+				return getListContentFlat( childBlocks ).map( ( content ) =>
+					createBlock( block, {
+						content,
+					} )
+				);
 			},
 		} ) ),
 		...[ 'core/quote', 'core/pullquote' ].map( ( block ) => ( {

package/src/list-item/hooks/use-enter.js

@@ -18,7 +18,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import useOutdentListItem from './use-outdent-list-item';
 
 export default function useEnter( props ) {
-	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
 	const { getBlock, getBlockRootClientId, getBlockIndex } =
 		useSelect( blockEditorStore );
 	const propsRef = useRef( props );
@@ -42,8 +42,9 @@ export default function useEnter( props ) {
 					return;
 				}
 				// Here we are in top level list so we need to split.
-				const blockRootClientId = getBlockRootClientId( clientId );
-				const topParentListBlock = getBlock( blockRootClientId );
+				const topParentListBlock = getBlock(
+					getBlockRootClientId( clientId )
+				);
 				const blockIndex = getBlockIndex( clientId );
 				const head = cloneBlock( {
 					...topParentListBlock,
@@ -69,11 +70,13 @@ export default function useEnter( props ) {
 					  ]
 					: [];
 				replaceBlocks(
-					blockRootClientId,
+					topParentListBlock.clientId,
 					[ head, middle, ...tail ],
-					1,
-					0
+					1
 				);
+				// We manually change the selection here because we are replacing
+				// a different block than the selected one.
+				selectionChange( middle.clientId );
 			}
 
 			element.addEventListener( 'keydown', onKeyDown );