Code Quality: Use <> instead of Fragment

docs/reference-guides/filters/block-filters.md

@@ -179,19 +179,18 @@ _Example:_
 
 ```js
 const { createHigherOrderComponent } = wp.compose;
-const { Fragment } = wp.element;
 const { InspectorControls } = wp.blockEditor;
 const { PanelBody } = wp.components;
 
 const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => {
 	return ( props ) => {
 		return (
-			<Fragment>
+			<>
 				<BlockEdit { ...props } />
 				<InspectorControls>
 					<PanelBody>My custom control</PanelBody>
 				</InspectorControls>
-			</Fragment>
+			</>
 		);
 	};
 }, 'withInspectorControl' );

docs/reference-guides/slotfills/README.md

@@ -75,7 +75,7 @@ const PostStatus = ( { isOpened, onTogglePanel } ) => (
 	>
 		<PluginPostStatusInfo.Slot>
 			{ ( fills ) => (
-				<Fragment>
+				<>
 					<PostVisibility />
 					<PostSchedule />
 					<PostFormat />
@@ -84,7 +84,7 @@ const PostStatus = ( { isOpened, onTogglePanel } ) => (
 					<PostAuthor />
 					{ fills }
 					<PostTrash />
-				</Fragment>
+				</>
 			) }
 		</PluginPostStatusInfo.Slot>
 	</PanelBody>

docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md

@@ -9,17 +9,16 @@ This is done by setting the `target` on `<PluginSidebarMoreMenuItem>` to match t
 import { registerPlugin } from '@wordpress/plugins';
 import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
 import { image } from '@wordpress/icons';
-import { Fragment } from '@wordpress/element';
 
 const PluginSidebarMoreMenuItemTest = () => (
-	<Fragment>
+	<>
 		<PluginSidebarMoreMenuItem target="sidebar-name" icon={ image }>
 			Expanded Sidebar - More item
 		</PluginSidebarMoreMenuItem>
 		<PluginSidebar name="sidebar-name" icon={ image } title="My Sidebar">
 			Content of the sidebar
 		</PluginSidebar>
-	</Fragment>
+	</>
 );
 
 registerPlugin( 'plugin-sidebar-expanded-test', {

packages/block-editor/src/components/block-inspector/index.js

@@ -17,7 +17,7 @@ import {
 	__unstableMotion as motion,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useCallback, Fragment } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -268,12 +268,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 				</AnimatedContainer>
 			) }
 		>
-			<Fragment>
-				<BlockInspectorSingleBlock
-					clientId={ selectedBlockClientId }
-					blockName={ blockType.name }
-				/>
-			</Fragment>
+			<BlockInspectorSingleBlock
+				clientId={ selectedBlockClientId }
+				blockName={ blockType.name }
+			/>
 		</BlockInspectorSingleBlockWrapper>
 	);
 };

packages/block-editor/src/components/responsive-block-control/label.js

@@ -4,7 +4,6 @@
 import { useInstanceId } from '@wordpress/compose';
 import { VisuallyHidden } from '@wordpress/components';
 import { _x, sprintf } from '@wordpress/i18n';
-import { Fragment } from '@wordpress/element';
 
 export default function ResponsiveBlockControlLabel( {
 	property,
@@ -24,13 +23,13 @@ export default function ResponsiveBlockControlLabel( {
 			viewport.label
 		);
 	return (
-		<Fragment>
+		<>
 			<span aria-describedby={ `rbc-desc-${ instanceId }` }>
 				{ viewport.label }
 			</span>
 			<VisuallyHidden as="span" id={ `rbc-desc-${ instanceId }` }>
 				{ accessibleLabel }
 			</VisuallyHidden>
-		</Fragment>
+		</>
 	);
 }

packages/block-editor/src/components/responsive-block-control/test/index.js

@@ -38,13 +38,13 @@ const sizeOptions = [
 
 const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 	return (
-		<Fragment>
+		<>
 			<SelectControl label={ labelComponent } options={ sizeOptions } />
 			<p id={ device.id }>
 				{ device.label } is used here for testing purposes to ensure we
 				have access to details about the device.
 			</p>
-		</Fragment>
+		</>
 	);
 };
 

packages/block-library/src/cover/edit/inspector-controls.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Fragment, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import {
 	Button,
 	ExternalLink,
@@ -146,7 +146,7 @@ export default function CoverInspectorControls( {
 				{ !! url && (
 					<PanelBody title={ __( 'Media settings' ) }>
 						{ isImageBackground && (
-							<Fragment>
+							<>
 								<ToggleControl
 									label={ __( 'Fixed background' ) }
 									checked={ hasParallax }
@@ -158,7 +158,7 @@ export default function CoverInspectorControls( {
 									checked={ isRepeated }
 									onChange={ toggleIsRepeated }
 								/>
-							</Fragment>
+							</>
 						) }
 						{ showFocalPointPicker && (
 							<FocalPointPicker

packages/block-library/src/navigation-link/edit.js

@@ -30,7 +30,7 @@ import {
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
-import { Fragment, useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import {
 	placeCaretAtHorizontalEdge,
 	__unstableStripHTML as stripHTML,
@@ -455,7 +455,7 @@ export default function NavigationLinkEdit( {
 			: __( 'This item is missing a link' );
 
 	return (
-		<Fragment>
+		<>
 			<BlockControls>
 				<ToolbarGroup>
 					<ToolbarButton
@@ -645,6 +645,6 @@ export default function NavigationLinkEdit( {
 				</a>
 				<div { ...innerBlocksProps } />
 			</div>
-		</Fragment>
+		</>
 	);
 }

packages/block-library/src/navigation-submenu/edit.js

@@ -27,7 +27,7 @@ import {
 	getColorClassName,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
-import { Fragment, useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { link as linkIcon, removeSubmenu } from '@wordpress/icons';
 import { useResourcePermissions } from '@wordpress/core-data';
@@ -438,7 +438,7 @@ export default function NavigationSubmenuEdit( {
 		! selectedBlockHasChildren || onlyDescendantIsEmptyLink;
 
 	return (
-		<Fragment>
+		<>
 			<BlockControls>
 				<ToolbarGroup>
 					{ ! openSubmenusOnClick && (
@@ -571,6 +571,6 @@ export default function NavigationSubmenuEdit( {
 				) }
 				<div { ...innerBlocksProps } />
 			</div>
-		</Fragment>
+		</>
 	);
 }

packages/block-library/src/social-link/edit.js

@@ -12,7 +12,7 @@ import {
 	URLInput,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { Fragment, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import {
 	Button,
 	PanelBody,
@@ -89,7 +89,7 @@ const SocialLinkEdit = ( {
 	} );
 
 	return (
-		<Fragment>
+		<>
 			<InspectorControls>
 				<PanelBody
 					title={ sprintf(
@@ -144,7 +144,7 @@ const SocialLinkEdit = ( {
 					) }
 				</Button>
 			</li>
-		</Fragment>
+		</>
 	);
 };
 

packages/components/src/dimension-control/index.js

@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -50,10 +49,10 @@ export function DimensionControl( props ) {
 	};
 
 	const selectLabel = (
-		<Fragment>
+		<>
 			{ icon && <Icon icon={ icon } /> }
 			{ label }
-		</Fragment>
+		</>
 	);
 
 	return (

packages/components/src/dropdown-menu/README.md

@@ -101,14 +101,13 @@ const MyDropdownMenu = () => (
 Alternatively, specify a `children` function which returns elements valid for use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.
 
 ```jsx
-import { Fragment } from '@wordpress/element';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';
 
 const MyDropdownMenu = () => (
 	<DropdownMenu icon={ more } label="Select a direction">
 		{ ( { onClose } ) => (
-			<Fragment>
+			<>
 				<MenuGroup>
 					<MenuItem icon={ arrowUp } onClick={ onClose }>
 						Move Up
@@ -122,7 +121,7 @@ const MyDropdownMenu = () => (
 						Remove
 					</MenuItem>
 				</MenuGroup>
-			</Fragment>
+			</>
 		) }
 	</DropdownMenu>
 );