Skip to content

Commit

Permalink
JSX: Use <> Fragments (#15261)
Browse files Browse the repository at this point in the history
* Replace <Fragment /> with </> and remove imports

* Update documentation with </> Fragments in JSX
  • Loading branch information
sirreal authored May 7, 2019
1 parent d8f1875 commit 39f568f
Show file tree
Hide file tree
Showing 85 changed files with 255 additions and 313 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -80,7 +80,7 @@ class BlockEditorKeyboardShortcuts extends Component {
render() {
const { selectedBlockClientIds } = this.props;
return (
<Fragment>
<>
<KeyboardShortcuts
shortcuts={ {
[ rawShortcut.primary( 'a' ) ]: this.selectAll,
Expand Down Expand Up @@ -114,7 +114,7 @@ class BlockEditorKeyboardShortcuts extends Component {
) }
</BlockActions>
) }
</Fragment>
</>
);
}
}
Expand Down
5 changes: 2 additions & 3 deletions packages/block-editor/src/components/block-inspector/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -73,7 +72,7 @@ const BlockInspector = ( { selectedBlockClientId, selectedBlockName, blockType,
</InspectorAdvancedControls.Slot>
</div>
<SkipToSelectedBlock key="back" />
</Fragment>
</>
);
};

Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/block-list/block.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 }
Expand All @@ -598,7 +598,7 @@ export class BlockListBlock extends Component {
clientId={ clientId }
/>
</div>
</Fragment>
</>
) }
</IgnoreNestedEvents>
);
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/block-list/breadcrumb.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -24,7 +23,7 @@ function BlockNavigationDropdown( { hasBlocks, isDisabled } ) {
return (
<Dropdown
renderToggle={ ( { isOpen, onToggle } ) => (
<Fragment>
<>
{ isEnabled && <KeyboardShortcuts
bindGlobal
shortcuts={ {
Expand All @@ -41,7 +40,7 @@ function BlockNavigationDropdown( { hasBlocks, isDisabled } ) {
shortcut={ displayShortcut.access( 'o' ) }
aria-disabled={ ! isEnabled }
/>
</Fragment>
</>
) }
renderContent={ ( { onClose } ) => (
<BlockNavigation onSelect={ onClose } />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 }
Expand All @@ -96,7 +95,7 @@ export function BlockSettingsMenu( { clientIds, onSelect } ) {
>
{ __( 'Insert After' ) }
</MenuItem>
</Fragment>
</>
) }
{ count === 1 && (
<BlockModeToggle
Expand Down
10 changes: 5 additions & 5 deletions packages/block-editor/src/components/block-switcher/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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' ) }
Expand Down Expand Up @@ -166,7 +166,7 @@ export class BlockSwitcher extends Component {
attributes={ { ...blocks[ 0 ].attributes, className: hoveredClassName } }
/>
}
</Fragment>
</>
) }
/>
);
Expand Down
5 changes: 2 additions & 3 deletions packages/block-editor/src/components/block-toolbar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* WordPress dependencies
*/
import { withSelect } from '@wordpress/data';
import { Fragment } from '@wordpress/element';

/**
* Internal dependencies
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -38,7 +37,7 @@ registerBlockType( 'my-plugin/my-block', {
const onChange = ( alignment ) => setAttributes( { verticalAlignment: alignment } );

return (
<Fragment>
<>
<BlockControls>
<BlockVerticalAlignmentToolbar
onChange={ onChange }
Expand All @@ -48,7 +47,7 @@ registerBlockType( 'my-plugin/my-block', {
<div>
// your Block here
</div>
</Fragment>
</>
);
}
} );
Expand Down Expand Up @@ -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`.
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,6 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
{% ESNext %}
```js
const { registerBlockType } = wp.blocks;
const { Fragment } = wp.element;
const {
CheckboxControl,
RadioControl,
Expand Down Expand Up @@ -309,7 +308,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
}

return (
<Fragment>
<>
<InspectorControls>

<CheckboxControl
Expand Down Expand Up @@ -366,7 +365,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
onChange={ onChangeContent }
value={ content }
/>
</Fragment>
</>
);
},

Expand Down
14 changes: 7 additions & 7 deletions packages/block-editor/src/components/media-placeholder/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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(
Expand All @@ -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
Expand All @@ -378,7 +378,7 @@ export class MediaPlaceholder extends Component {
{ mediaLibraryButton }
{ this.renderUrlSelectionUI() }
{ this.renderCancelLink() }
</Fragment>
</>
);
return this.renderPlaceholder( content );
}
Expand Down
5 changes: 2 additions & 3 deletions packages/block-editor/src/components/rich-text/format-edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -34,7 +33,7 @@ const FormatEdit = ( { formatTypes, onChange, value } ) => {
/>
);
} ) }
</Fragment>
</>
);
};

Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/rich-text/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -1080,7 +1080,7 @@ export class RichText extends Component {
onChange={ this.onChange }
>
{ ( { listBoxId, activeId } ) => (
<Fragment>
<>
<Editable
tagName={ Tagname }
style={ style }
Expand Down Expand Up @@ -1113,7 +1113,7 @@ export class RichText extends Component {
</Tagname>
}
{ isSelected && <FormatEdit value={ record } onChange={ this.onChange } /> }
</Fragment>
</>
) }
</Autocomplete>
{ isSelected && <RemoveBrowserShortcuts /> }
Expand Down
Loading

0 comments on commit 39f568f

Please sign in to comment.