[pull] trunk from WordPress:trunk

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

@@ -9,7 +9,8 @@ import clsx from 'clsx';
 import { createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	PanelBody,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	TextControl,
 	TextareaControl,
 	ToolbarButton,
@@ -161,71 +162,110 @@ function getMissingText( type ) {
 function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
 	const { label, url, description, title, rel } = attributes;
 	return (
-		<PanelBody title={ __( 'Settings' ) }>
-			<TextControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize
-				value={ label ? stripHTML( label ) : '' }
-				onChange={ ( labelValue ) => {
-					setAttributes( { label: labelValue } );
-				} }
+		<ToolsPanel label={ __( 'Settings' ) }>
+			<ToolsPanelItem
+				hasValue={ () => !! label }
 				label={ __( 'Text' ) }
-				autoComplete="off"
-				onFocus={ () => setIsLabelFieldFocused( true ) }
-				onBlur={ () => setIsLabelFieldFocused( false ) }
-			/>
-			<TextControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize
-				value={ url ? safeDecodeURI( url ) : '' }
-				onChange={ ( urlValue ) => {
-					updateAttributes(
-						{ url: urlValue },
-						setAttributes,
-						attributes
-					);
-				} }
+				onDeselect={ () => setAttributes( { label: '' } ) }
+				isShownByDefault
+			>
+				<TextControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					label={ __( 'Text' ) }
+					value={ label ? stripHTML( label ) : '' }
+					onChange={ ( labelValue ) => {
+						setAttributes( { label: labelValue } );
+					} }
+					autoComplete="off"
+					onFocus={ () => setIsLabelFieldFocused( true ) }
+					onBlur={ () => setIsLabelFieldFocused( false ) }
+				/>
+			</ToolsPanelItem>
+
+			<ToolsPanelItem
+				hasValue={ () => !! url }
 				label={ __( 'Link' ) }
-				autoComplete="off"
-			/>
-			<TextareaControl
-				__nextHasNoMarginBottom
-				value={ description || '' }
-				onChange={ ( descriptionValue ) => {
-					setAttributes( { description: descriptionValue } );
-				} }
+				onDeselect={ () => setAttributes( { url: '' } ) }
+				isShownByDefault
+			>
+				<TextControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					label={ __( 'Link' ) }
+					value={ url ? safeDecodeURI( url ) : '' }
+					onChange={ ( urlValue ) => {
+						updateAttributes(
+							{ url: urlValue },
+							setAttributes,
+							attributes
+						);
+					} }
+					autoComplete="off"
+				/>
+			</ToolsPanelItem>
+
+			<ToolsPanelItem
+				hasValue={ () => !! description }
 				label={ __( 'Description' ) }
-				help={ __(
-					'The description will be displayed in the menu if the current theme supports it.'
-				) }
-			/>
-			<TextControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize
-				value={ title || '' }
-				onChange={ ( titleValue ) => {
-					setAttributes( { title: titleValue } );
-				} }
+				onDeselect={ () => setAttributes( { description: '' } ) }
+				isShownByDefault
+			>
+				<TextareaControl
+					__nextHasNoMarginBottom
+					label={ __( 'Description' ) }
+					value={ description || '' }
+					onChange={ ( descriptionValue ) => {
+						setAttributes( { description: descriptionValue } );
+					} }
+					help={ __(
+						'The description will be displayed in the menu if the current theme supports it.'
+					) }
+				/>
+			</ToolsPanelItem>
+
+			<ToolsPanelItem
+				hasValue={ () => !! title }
 				label={ __( 'Title attribute' ) }
-				autoComplete="off"
-				help={ __(
-					'Additional information to help clarify the purpose of the link.'
-				) }
-			/>
-			<TextControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize
-				value={ rel || '' }
-				onChange={ ( relValue ) => {
-					setAttributes( { rel: relValue } );
-				} }
+				onDeselect={ () => setAttributes( { title: '' } ) }
+				isShownByDefault
+			>
+				<TextControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					label={ __( 'Title attribute' ) }
+					value={ title || '' }
+					onChange={ ( titleValue ) => {
+						setAttributes( { title: titleValue } );
+					} }
+					autoComplete="off"
+					help={ __(
+						'Additional information to help clarify the purpose of the link.'
+					) }
+				/>
+			</ToolsPanelItem>
+
+			<ToolsPanelItem
+				hasValue={ () => !! rel }
 				label={ __( 'Rel attribute' ) }
-				autoComplete="off"
-				help={ __(
-					'The relationship of the linked URL as space-separated link types.'
-				) }
-			/>
-		</PanelBody>
+				onDeselect={ () => setAttributes( { rel: '' } ) }
+				isShownByDefault
+			>
+				<TextControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					label={ __( 'Rel attribute' ) }
+					value={ rel || '' }
+					onChange={ ( relValue ) => {
+						setAttributes( { rel: relValue } );
+					} }
+					autoComplete="off"
+					help={ __(
+						'The relationship of the linked URL as space-separated link types.'
+					) }
+				/>
+			</ToolsPanelItem>
+		</ToolsPanel>
 	);
 }
 

packages/block-library/src/spacer/controls.js

@@ -10,10 +10,11 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
-	PanelBody,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { View } from '@wordpress/primitives';
@@ -94,28 +95,54 @@ export default function SpacerControls( {
 } ) {
 	return (
 		<InspectorControls>
-			<PanelBody title={ __( 'Settings' ) }>
+			<ToolsPanel
+				label={ __( 'Settings' ) }
+				resetAll={ () => {
+					setAttributes( {
+						width: undefined,
+						height: '100px',
+					} );
+				} }
+			>
 				{ orientation === 'horizontal' && (
-					<DimensionInput
+					<ToolsPanelItem
 						label={ __( 'Width' ) }
-						value={ width }
-						onChange={ ( nextWidth ) =>
-							setAttributes( { width: nextWidth } )
+						isShownByDefault
+						hasValue={ () => width !== undefined }
+						onDeselect={ () =>
+							setAttributes( { width: undefined } )
 						}
-						isResizing={ isResizing }
-					/>
+					>
+						<DimensionInput
+							label={ __( 'Width' ) }
+							value={ width }
+							onChange={ ( nextWidth ) =>
+								setAttributes( { width: nextWidth } )
+							}
+							isResizing={ isResizing }
+						/>
+					</ToolsPanelItem>
 				) }
 				{ orientation !== 'horizontal' && (
-					<DimensionInput
+					<ToolsPanelItem
 						label={ __( 'Height' ) }
-						value={ height }
-						onChange={ ( nextHeight ) =>
-							setAttributes( { height: nextHeight } )
+						isShownByDefault
+						hasValue={ () => height !== '100px' }
+						onDeselect={ () =>
+							setAttributes( { height: '100px' } )
 						}
-						isResizing={ isResizing }
-					/>
+					>
+						<DimensionInput
+							label={ __( 'Height' ) }
+							value={ height }
+							onChange={ ( nextHeight ) =>
+								setAttributes( { height: nextHeight } )
+							}
+							isResizing={ isResizing }
+						/>
+					</ToolsPanelItem>
 				) }
-			</PanelBody>
+			</ToolsPanel>
 		</InspectorControls>
 	);
 }

packages/edit-site/src/components/sidebar-navigation-item/style.scss

@@ -18,6 +18,7 @@
 	&[aria-current="true"] {
 		background: $gray-800;
 		color: $white;
+		font-weight: $font-weight-medium;
 	}
 
 	// Make sure the focus style is drawn on top of the current item background.

packages/editor/src/components/post-card-panel/index.js

@@ -6,6 +6,7 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalText as Text,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
@@ -25,6 +26,7 @@ import { unlock } from '../../lock-unlock';
 import PostActions from '../post-actions';
 import usePageTypeBadge from '../../utils/pageTypeBadge';
 import { getTemplateInfo } from '../../utils/get-template-info';
+const { Badge } = unlock( componentsPrivateApis );
 
 /**
  * Renders a title of the post type and the available quick actions available within a 3-dot dropdown.
@@ -109,11 +111,11 @@ export default function PostCardPanel( {
 					className="editor-post-card-panel__title"
 					as="h2"
 				>
-					{ title }
+					<span className="editor-post-card-panel__title-name">
+						{ title }
+					</span>
 					{ pageTypeBadge && postIds.length === 1 && (
-						<span className="editor-post-card-panel__title-badge">
-							{ pageTypeBadge }
-						</span>
+						<Badge>{ pageTypeBadge }</Badge>
 					) }
 				</Text>
 				<PostActions

packages/editor/src/components/post-card-panel/style.scss

@@ -9,7 +9,6 @@
 		&.editor-post-card-panel__title {
 			@include heading-medium();
 			margin: 0;
-			padding: 2px 0;
 			display: flex;
 			align-items: center;
 			flex-wrap: wrap;
@@ -34,19 +33,11 @@
 		margin-bottom: $grid-unit-10;
 	}
 
+	.editor-post-card-panel__title-name {
+		padding: 2px 0;
+	}
+
 	.editor-post-card-panel__description {
 		color: $gray-700;
 	}
 }
-
-.editor-post-card-panel__title-badge {
-	background: $gray-100;
-	color: $gray-800;
-	padding: 0 $grid-unit-05;
-	border-radius: $radius-small;
-	font-size: 12px;
-	font-weight: 400;
-	flex-shrink: 0;
-	line-height: $grid-unit-05 * 5;
-	display: inline-block;
-}

packages/fields/src/fields/page-title/view.tsx

@@ -5,12 +5,15 @@ import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import type { Settings } from '@wordpress/core-data';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import type { CommonPost } from '../../types';
 import { BaseTitleView } from '../title/view';
+import { unlock } from '../../lock-unlock';
+const { Badge } = unlock( componentsPrivateApis );
 
 export default function PageTitleView( { item }: { item: CommonPost } ) {
 	const { frontPageId, postsPageId } = useSelect( ( select ) => {
@@ -27,11 +30,11 @@ export default function PageTitleView( { item }: { item: CommonPost } ) {
 	return (
 		<BaseTitleView item={ item } className="fields-field__page-title">
 			{ [ frontPageId, postsPageId ].includes( item.id as number ) && (
-				<span className="fields-field__page-title__badge">
+				<Badge>
 					{ item.id === frontPageId
 						? __( 'Homepage' )
 						: __( 'Posts Page' ) }
-				</span>
+				</Badge>
 			) }
 		</BaseTitleView>
 	);

packages/fields/src/style.scss

@@ -3,5 +3,4 @@
 @import "./fields/featured-image/style.scss";
 @import "./fields/template/style.scss";
 @import "./fields/title/style.scss";
-@import "./fields/page-title/style.scss";
 @import "./fields/pattern-title/style.scss";

storybook/preview.js

@@ -108,6 +108,9 @@ export const parameters = {
 		sort: 'requiredFirst',
 	},
 	docs: {
+		controls: {
+			sort: 'requiredFirst',
+		},
 		// Flips the order of the description and the primary component story
 		// so the component is always visible before the fold.
 		page: () => (