JSX: Use <> Fragments (#15261)

* Replace <Fragment /> with </> and remove imports * Update documentation with </> Fragments in JSX
WordPress · May 7, 2019 · 39f568f · 39f568f
1 parent d8f1875
commit 39f568f
Show file tree

Hide file tree

Showing 85 changed files with 255 additions and 313 deletions.
diff --git a/packages/block-editor/src/components/block-editor-keyboard-shortcuts/index.js b/packages/block-editor/src/components/block-editor-keyboard-shortcuts/index.js
@@ -6,7 +6,7 @@ import { first, last, some, flow } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, Fragment } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { KeyboardShortcuts } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
@@ -80,7 +80,7 @@ class BlockEditorKeyboardShortcuts extends Component {
 	render() {
 		const { selectedBlockClientIds } = this.props;
 		return (
-			<Fragment>
+			<>
 				<KeyboardShortcuts
 					shortcuts={ {
 						[ rawShortcut.primary( 'a' ) ]: this.selectAll,
@@ -114,7 +114,7 @@ class BlockEditorKeyboardShortcuts extends Component {
 						) }
 					</BlockActions>
 				) }
-			</Fragment>
+			</>
 		);
 	}
 }

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -10,7 +10,6 @@ import { __ } from '@wordpress/i18n';
 import { getBlockType, getUnregisteredTypeHandlerName } from '@wordpress/blocks';
 import { PanelBody } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
-import { Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -38,7 +37,7 @@ const BlockInspector = ( { selectedBlockClientId, selectedBlockName, blockType,
 	}
 
 	return (
-		<Fragment>
+		<>
 			<div className="editor-block-inspector__card block-editor-block-inspector__card">
 				<BlockIcon icon={ blockType.icon } showColors />
 				<div className="editor-block-inspector__card-content block-editor-block-inspector__card-content">
@@ -73,7 +72,7 @@ const BlockInspector = ( { selectedBlockClientId, selectedBlockName, blockType,
 				</InspectorAdvancedControls.Slot>
 			</div>
 			<SkipToSelectedBlock key="back" />
-		</Fragment>
+		</>
 	);
 };
 

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -7,7 +7,7 @@ import { get, reduce, size, first, last } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, Fragment } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import {
 	focus,
 	isTextField,
@@ -582,7 +582,7 @@ export class BlockListBlock extends Component {
 								</IgnoreNestedEvents>
 							</div>
 							{ showEmptyBlockSideInserter && (
-								<Fragment>
+								<>
 									<div className="editor-block-list__side-inserter block-editor-block-list__side-inserter">
 										<InserterWithShortcuts
 											clientId={ clientId }
@@ -598,7 +598,7 @@ export class BlockListBlock extends Component {
 											clientId={ clientId }
 										/>
 									</div>
-								</Fragment>
+								</>
 							) }
 						</IgnoreNestedEvents>
 					);

diff --git a/packages/block-editor/src/components/block-list/breadcrumb.js b/packages/block-editor/src/components/block-list/breadcrumb.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Component, Fragment } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { Toolbar } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
@@ -54,10 +54,10 @@ export class BlockBreadcrumb extends Component {
 			<div className={ 'editor-block-list__breadcrumb block-editor-block-list__breadcrumb' }>
 				<Toolbar>
 					{ rootClientId && (
-						<Fragment>
+						<>
 							<BlockTitle clientId={ rootClientId } />
 							<span className="editor-block-list__descendant-arrow block-editor-block-list__descendant-arrow" />
-						</Fragment>
+						</>
 					) }
 					<BlockTitle clientId={ clientId } />
 				</Toolbar>

diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js
@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { Fragment } from '@wordpress/element';
 import { IconButton, Dropdown, SVG, Path, KeyboardShortcuts } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
@@ -24,7 +23,7 @@ function BlockNavigationDropdown( { hasBlocks, isDisabled } ) {
 	return	(
 		<Dropdown
 			renderToggle={ ( { isOpen, onToggle } ) => (
-				<Fragment>
+				<>
 					{ isEnabled && <KeyboardShortcuts
 						bindGlobal
 						shortcuts={ {
@@ -41,7 +40,7 @@ function BlockNavigationDropdown( { hasBlocks, isDisabled } ) {
 						shortcut={ displayShortcut.access( 'o' ) }
 						aria-disabled={ ! isEnabled }
 					/>
-				</Fragment>
+				</>
 			) }
 			renderContent={ ( { onClose } ) => (
 				<BlockNavigation onSelect={ onClose } />

diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js
@@ -8,7 +8,6 @@ import { castArray } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Fragment } from '@wordpress/element';
 import { Toolbar, Dropdown, NavigableMenu, MenuItem } from '@wordpress/components';
 import { withDispatch } from '@wordpress/data';
 
@@ -79,7 +78,7 @@ export function BlockSettingsMenu( { clientIds, onSelect } ) {
 								</MenuItem>
 							) }
 							{ ! isLocked && (
-								<Fragment>
+								<>
 									<MenuItem
 										className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
 										onClick={ onInsertBefore }
@@ -96,7 +95,7 @@ export function BlockSettingsMenu( { clientIds, onSelect } ) {
 									>
 										{ __( 'Insert After' ) }
 									</MenuItem>
-								</Fragment>
+								</>
 							) }
 							{ count === 1 && (
 								<BlockModeToggle

diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -9,7 +9,7 @@ import { castArray, filter, first, mapKeys, orderBy, uniq, map } from 'lodash';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { Dropdown, IconButton, Toolbar, PanelBody, Path, SVG } from '@wordpress/components';
 import { getBlockType, getPossibleBlockTransformations, switchToBlockType, hasChildBlocksWithInserterSupport } from '@wordpress/blocks';
-import { Component, Fragment } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { DOWN } from '@wordpress/keycodes';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
@@ -117,17 +117,17 @@ export class BlockSwitcher extends Component {
 								tooltip={ label }
 								onKeyDown={ openOnArrowDown }
 								icon={ (
-									<Fragment>
+									<>
 										<BlockIcon icon={ icon } showColors />
 										<SVG className="editor-block-switcher__transform block-editor-block-switcher__transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M6.5 8.9c.6-.6 1.4-.9 2.2-.9h6.9l-1.3 1.3 1.4 1.4L19.4 7l-3.7-3.7-1.4 1.4L15.6 6H8.7c-1.4 0-2.6.5-3.6 1.5l-2.8 2.8 1.4 1.4 2.8-2.8zm13.8 2.4l-2.8 2.8c-.6.6-1.3.9-2.1.9h-7l1.3-1.3-1.4-1.4L4.6 16l3.7 3.7 1.4-1.4L8.4 17h6.9c1.3 0 2.6-.5 3.5-1.5l2.8-2.8-1.3-1.4z" /></SVG>
-									</Fragment>
+									</>
 								) }
 							/>
 						</Toolbar>
 					);
 				} }
 				renderContent={ ( { onClose } ) => (
-					<Fragment>
+					<>
 						{ hasBlockStyles &&
 							<PanelBody
 								title={ __( 'Block Styles' ) }
@@ -166,7 +166,7 @@ export class BlockSwitcher extends Component {
 								attributes={ { ...blocks[ 0 ].attributes, className: hoveredClassName } }
 							/>
 						}
-					</Fragment>
+					</>
 				) }
 			/>
 		);

diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { withSelect } from '@wordpress/data';
-import { Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -30,11 +29,11 @@ function BlockToolbar( { blockClientIds, isValid, mode } ) {
 	return (
 		<div className="editor-block-toolbar block-editor-block-toolbar">
 			{ mode === 'visual' && isValid && (
-				<Fragment>
+				<>
 					<BlockSwitcher clientIds={ blockClientIds } />
 					<BlockControls.Slot />
 					<BlockFormatControls.Slot />
-				</Fragment>
+				</>
 			) }
 			<BlockSettingsMenu clientIds={ blockClientIds } />
 		</div>

diff --git a/packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md b/packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md
@@ -12,7 +12,6 @@ In a block's `edit` implementation, render a `<BlockControls />` component. Then
 
 ```jsx
 import { registerBlockType } from '@wordpress/blocks';
-import { Fragment } from '@wordpress/element';
 import {
 	BlockControls,
 	BlockVerticalAlignmentToolbar,
@@ -38,7 +37,7 @@ registerBlockType( 'my-plugin/my-block', {
 		const onChange = ( alignment ) => setAttributes( { verticalAlignment: alignment } );
 
 		return (
-			<Fragment>
+			<>
 				<BlockControls>
 					<BlockVerticalAlignmentToolbar
 						onChange={ onChange }
@@ -48,7 +47,7 @@ registerBlockType( 'my-plugin/my-block', {
 				<div>
 					// your Block here
 				</div>
-			</Fragment>
+			</>
 		);
 	}
 } );
@@ -81,4 +80,4 @@ const onChange = ( alignment ) => setAttributes( { verticalAlignment: alignment
 
 ## Examples
 
-The [Core Columns](https://github.com/WordPress/gutenberg/tree/master/packages/block-library/src/columns) Block utilises the `BlockVerticalAlignmentToolbar`.
+The [Core Columns](https://github.com/WordPress/gutenberg/tree/master/packages/block-library/src/columns) Block utilises the `BlockVerticalAlignmentToolbar`.
diff --git a/packages/block-editor/src/components/inspector-controls/README.md b/packages/block-editor/src/components/inspector-controls/README.md
@@ -236,7 +236,6 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 {% ESNext %}
 ```js
 const { registerBlockType } = wp.blocks;
-const { Fragment } = wp.element;
 const {
 	CheckboxControl,
 	RadioControl,
@@ -309,7 +308,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 		}
 
 		return (
-			<Fragment>
+			<>
 				<InspectorControls>
 
 					<CheckboxControl
@@ -366,7 +365,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 					onChange={ onChangeContent }
 					value={ content }
 				/>
-			</Fragment>
+			</>
 		);
 	},
 

diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
@@ -22,7 +22,7 @@ import {
 	withFilters,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { Component, Fragment } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 
@@ -327,15 +327,15 @@ export class MediaPlaceholder extends Component {
 
 		if ( mediaUpload && isAppender ) {
 			return (
-				<Fragment>
+				<>
 					{ this.renderDropZone() }
 					<FormFileUpload
 						onChange={ this.onUpload }
 						accept={ accept }
 						multiple={ multiple }
 						render={ ( { openFileDialog } ) => {
 							const content = (
-								<Fragment>
+								<>
 									<IconButton
 										isLarge
 										className={ classnames(
@@ -350,17 +350,17 @@ export class MediaPlaceholder extends Component {
 									{ mediaLibraryButton }
 									{ this.renderUrlSelectionUI() }
 									{ this.renderCancelLink() }
-								</Fragment>
+								</>
 							);
 							return this.renderPlaceholder( content, openFileDialog );
 						} }
 					/>
-				</Fragment>
+				</>
 			);
 		}
 		if ( mediaUpload ) {
 			const content = (
-				<Fragment>
+				<>
 					{ this.renderDropZone() }
 					<FormFileUpload
 						isLarge
@@ -378,7 +378,7 @@ export class MediaPlaceholder extends Component {
 					{ mediaLibraryButton }
 					{ this.renderUrlSelectionUI() }
 					{ this.renderCancelLink() }
-				</Fragment>
+				</>
 			);
 			return this.renderPlaceholder( content );
 		}

diff --git a/packages/block-editor/src/components/rich-text/format-edit.js b/packages/block-editor/src/components/rich-text/format-edit.js
@@ -2,12 +2,11 @@
  * WordPress dependencies
  */
 import { withSelect } from '@wordpress/data';
-import { Fragment } from '@wordpress/element';
 import { getActiveFormat, getActiveObject } from '@wordpress/rich-text';
 
 const FormatEdit = ( { formatTypes, onChange, value } ) => {
 	return (
-		<Fragment>
+		<>
 			{ formatTypes.map( ( { name, edit: Edit } ) => {
 				if ( ! Edit ) {
 					return null;
@@ -34,7 +33,7 @@ const FormatEdit = ( { formatTypes, onChange, value } ) => {
 					/>
 				);
 			} ) }
-		</Fragment>
+		</>
 	);
 };
 

diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -13,7 +13,7 @@ import memize from 'memize';
 /**
  * WordPress dependencies
  */
-import { Component, Fragment, RawHTML } from '@wordpress/element';
+import { Component, RawHTML } from '@wordpress/element';
 import { isHorizontalEdge } from '@wordpress/dom';
 import { createBlobURL } from '@wordpress/blob';
 import { BACKSPACE, DELETE, ENTER, LEFT, RIGHT, SPACE } from '@wordpress/keycodes';
@@ -1080,7 +1080,7 @@ export class RichText extends Component {
 					onChange={ this.onChange }
 				>
 					{ ( { listBoxId, activeId } ) => (
-						<Fragment>
+						<>
 							<Editable
 								tagName={ Tagname }
 								style={ style }
@@ -1113,7 +1113,7 @@ export class RichText extends Component {
 								</Tagname>
 							}
 							{ isSelected && <FormatEdit value={ record } onChange={ this.onChange } /> }
-						</Fragment>
+						</>
 					) }
 				</Autocomplete>
 				{ isSelected && <RemoveBrowserShortcuts /> }