carstingaxion · pull · Dec 13, 2024 · Dec 13, 2024 · Dec 13, 2024 · Dec 13, 2024
diff --git a/docs/tool/manifest.js b/docs/tool/manifest.js
@@ -18,6 +18,7 @@ const componentPaths = glob( 'packages/components/src/*/**/README.md', {
 		'packages/components/src/menu/README.md',
 		'packages/components/src/tabs/README.md',
 		'packages/components/src/custom-select-control-v2/README.md',
+		'packages/components/src/badge/README.md',
 	],
 } );
 const packagePaths = glob( 'packages/*/package.json' )

diff --git a/packages/block-editor/src/components/audio-player/index.native.js b/packages/block-editor/src/components/audio-player/index.native.js
@@ -17,7 +17,7 @@ import { View } from '@wordpress/primitives';
 import { Icon } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { audio, warning } from '@wordpress/icons';
+import { audio, cautionFilled } from '@wordpress/icons';
 import {
 	requestImageFailedRetryDialog,
 	requestImageUploadCancelDialog,
@@ -167,7 +167,7 @@ function Player( {
 					<View style={ styles.subtitleContainer }>
 						{ isUploadFailed && (
 							<Icon
-								icon={ warning }
+								icon={ cautionFilled }
 								style={ {
 									...styles.errorIcon,
 									...uploadFailedStyle,

diff --git a/packages/block-editor/src/components/contrast-checker/index.native.js b/packages/block-editor/src/components/contrast-checker/index.native.js
@@ -13,7 +13,7 @@ import { speak } from '@wordpress/a11y';
 import { __ } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { Icon, warning } from '@wordpress/icons';
+import { Icon, cautionFilled } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
@@ -52,7 +52,7 @@ function ContrastCheckerMessage( {
 
 	return (
 		<View style={ styles[ 'block-editor-contrast-checker' ] }>
-			<Icon style={ iconStyle } icon={ warning } />
+			<Icon style={ iconStyle } icon={ cautionFilled } />
 			<Text style={ msgStyle }>{ msg }</Text>
 		</View>
 	);

diff --git a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap
@@ -89,7 +89,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
           <Svg
             height={16}
             style={{}}
-            viewBox="-2 -2 24 24"
+            viewBox="0 0 24 24"
             width={16}
             xmlns="http://www.w3.org/2000/svg"
           >

diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
@@ -58,7 +58,7 @@ import {
 	useCallback,
 	useMemo,
 } from '@wordpress/element';
-import { cover as icon, replace, image, warning } from '@wordpress/icons';
+import { cover as icon, replace, image, cautionFilled } from '@wordpress/icons';
 import { getProtocol } from '@wordpress/url';
 // eslint-disable-next-line no-restricted-imports
 import { store as editPostStore } from '@wordpress/edit-post';
@@ -665,7 +665,10 @@ const Cover = ( {
 					style={ styles.uploadFailedContainer }
 				>
 					<View style={ styles.uploadFailed }>
-						<Icon icon={ warning } { ...styles.uploadFailedIcon } />
+						<Icon
+							icon={ cautionFilled }
+							{ ...styles.uploadFailedIcon }
+						/>
 					</View>
 				</View>
 			) }

diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
@@ -9,7 +9,11 @@ import {
 	InspectorControls,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const TEMPLATE = [
@@ -46,18 +50,36 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							showContent: false,
+						} );
+					} }
+				>
+					<ToolsPanelItem
+						isShownByDefault
 						label={ __( 'Open by default' ) }
-						checked={ showContent }
-						onChange={ () =>
+						hasValue={ () => showContent }
+						onDeselect={ () => {
 							setAttributes( {
-								showContent: ! showContent,
-							} )
-						}
-					/>
-				</PanelBody>
+								showContent: false,
+							} );
+						} }
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open by default' ) }
+							checked={ showContent }
+							onChange={ () =>
+								setAttributes( {
+									showContent: ! showContent,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<details
 				{ ...innerBlocksProps }

diff --git a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
@@ -132,7 +132,7 @@ exports[`File block renders file error state without crashing 1`] = `
         <Svg
           height={24}
           style={{}}
-          viewBox="-2 -2 24 24"
+          viewBox="0 0 24 24"
           width={24}
           xmlns="http://www.w3.org/2000/svg"
         >

diff --git a/packages/block-library/src/loginout/edit.js b/packages/block-library/src/loginout/edit.js
@@ -1,38 +1,68 @@
 /**
  * WordPress dependencies
  */
-import { PanelBody, ToggleControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 export default function LoginOutEdit( { attributes, setAttributes } ) {
 	const { displayLoginAsForm, redirectToCurrent } = attributes;
 
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							displayLoginAsForm: false,
+							redirectToCurrent: true,
+						} );
+					} }
+				>
+					<ToolsPanelItem
 						label={ __( 'Display login as form' ) }
-						checked={ displayLoginAsForm }
-						onChange={ () =>
-							setAttributes( {
-								displayLoginAsForm: ! displayLoginAsForm,
-							} )
+						isShownByDefault
+						hasValue={ () => displayLoginAsForm }
+						onDeselect={ () =>
+							setAttributes( { displayLoginAsForm: false } )
 						}
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display login as form' ) }
+							checked={ displayLoginAsForm }
+							onChange={ () =>
+								setAttributes( {
+									displayLoginAsForm: ! displayLoginAsForm,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
 						label={ __( 'Redirect to current URL' ) }
-						checked={ redirectToCurrent }
-						onChange={ () =>
-							setAttributes( {
-								redirectToCurrent: ! redirectToCurrent,
-							} )
+						isShownByDefault
+						hasValue={ () => ! redirectToCurrent }
+						onDeselect={ () =>
+							setAttributes( { redirectToCurrent: true } )
 						}
-					/>
-				</PanelBody>
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Redirect to current URL' ) }
+							checked={ redirectToCurrent }
+							onChange={ () =>
+								setAttributes( {
+									redirectToCurrent: ! redirectToCurrent,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<div
 				{ ...useBlockProps( {

diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
@@ -22,10 +22,10 @@ import { useState, useRef } from '@wordpress/element';
 import {
 	Button,
 	Dropdown,
-	PanelBody,
-	PanelRow,
 	TextControl,
 	ToolbarButton,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
 import { useMergeRefs } from '@wordpress/compose';
@@ -195,8 +195,20 @@ const SocialLinkEdit = ( {
 				</BlockControls>
 			) }
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<PanelRow>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( { label: undefined } );
+					} }
+				>
+					<ToolsPanelItem
+						isShownByDefault
+						label={ __( 'Text' ) }
+						hasValue={ () => !! label }
+						onDeselect={ () => {
+							setAttributes( { label: undefined } );
+						} }
+					>
 						<TextControl
 							__next40pxDefaultSize
 							__nextHasNoMarginBottom
@@ -210,8 +222,8 @@ const SocialLinkEdit = ( {
 							}
 							placeholder={ socialLinkName }
 						/>
-					</PanelRow>
-				</PanelBody>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<TextControl

diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
@@ -22,9 +22,10 @@ import {
 import {
 	MenuGroup,
 	MenuItem,
-	PanelBody,
 	ToggleControl,
 	ToolbarDropdownMenu,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { check } from '@wordpress/icons';
@@ -198,24 +199,52 @@ export function SocialLinksEdit( props ) {
 				</ToolbarDropdownMenu>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							openInNewTab: false,
+							showLabels: false,
+						} );
+					} }
+				>
+					<ToolsPanelItem
+						isShownByDefault
 						label={ __( 'Open links in new tab' ) }
-						checked={ openInNewTab }
-						onChange={ () =>
-							setAttributes( { openInNewTab: ! openInNewTab } )
+						hasValue={ () => !! openInNewTab }
+						onDeselect={ () =>
+							setAttributes( { openInNewTab: false } )
 						}
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open links in new tab' ) }
+							checked={ openInNewTab }
+							onChange={ () =>
+								setAttributes( {
+									openInNewTab: ! openInNewTab,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						isShownByDefault
 						label={ __( 'Show text' ) }
-						checked={ showLabels }
-						onChange={ () =>
-							setAttributes( { showLabels: ! showLabels } )
+						hasValue={ () => !! showLabels }
+						onDeselect={ () =>
+							setAttributes( { showLabels: false } )
 						}
-					/>
-				</PanelBody>
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show text' ) }
+							checked={ showLabels }
+							onChange={ () =>
+								setAttributes( { showLabels: ! showLabels } )
+							}
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			{ colorGradientSettings.hasColorsOrGradients && (
 				<InspectorControls group="color">