Featured Image Block: Refactor setting panel (WordPress#67456)

* Refactor setting panel of featured image block control * Fix link target attribute reset Co-authored-by: akasunil <[email protected]> Co-authored-by: fabiankaegy <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]>
carstingaxion · Dec 14, 2024 · 183d93a · 183d93a
1 parent 85912cb
commit 183d93a
Showing 1 changed file with 67 additions and 10 deletions.
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
@@ -11,11 +11,12 @@ import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	ToggleControl,
-	PanelBody,
 	Placeholder,
 	Button,
 	Spinner,
 	TextControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -38,6 +39,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import DimensionControls from './dimension-controls';
 import OverlayControls from './overlay-controls';
 import Overlay from './overlay';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
@@ -183,6 +185,8 @@ export default function PostFeaturedImageEdit( {
 		setTemporaryURL();
 	};
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	const controls = blockEditingMode === 'default' && (
 		<>
 			<InspectorControls group="color">
@@ -201,9 +205,18 @@ export default function PostFeaturedImageEdit( {
 				/>
 			</InspectorControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							isLink: false,
+							linkTarget: '_self',
+							rel: '',
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
 						label={
 							postType?.labels.singular_name
 								? sprintf(
@@ -213,11 +226,42 @@ export default function PostFeaturedImageEdit( {
 								  )
 								: __( 'Link to post' )
 						}
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-						checked={ isLink }
-					/>
+						isShownByDefault
+						hasValue={ () => !! isLink }
+						onDeselect={ () =>
+							setAttributes( {
+								isLink: false,
+							} )
+						}
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={
+								postType?.labels.singular_name
+									? sprintf(
+											// translators: %s: Name of the post type e.g: "post".
+											__( 'Link to %s' ),
+											postType.labels.singular_name
+									  )
+									: __( 'Link to post' )
+							}
+							onChange={ () =>
+								setAttributes( { isLink: ! isLink } )
+							}
+							checked={ isLink }
+						/>
+					</ToolsPanelItem>
 					{ isLink && (
-						<>
+						<ToolsPanelItem
+							label={ __( 'Open in new tab' ) }
+							isShownByDefault
+							hasValue={ () => '_self' !== linkTarget }
+							onDeselect={ () =>
+								setAttributes( {
+									linkTarget: '_self',
+								} )
+							}
+						>
 							<ToggleControl
 								__nextHasNoMarginBottom
 								label={ __( 'Open in new tab' ) }
@@ -228,6 +272,19 @@ export default function PostFeaturedImageEdit( {
 								}
 								checked={ linkTarget === '_blank' }
 							/>
+						</ToolsPanelItem>
+					) }
+					{ isLink && (
+						<ToolsPanelItem
+							label={ __( 'Link rel' ) }
+							isShownByDefault
+							hasValue={ () => !! rel }
+							onDeselect={ () =>
+								setAttributes( {
+									rel: '',
+								} )
+							}
+						>
 							<TextControl
 								__next40pxDefaultSize
 								__nextHasNoMarginBottom
@@ -237,9 +294,9 @@ export default function PostFeaturedImageEdit( {
 									setAttributes( { rel: newRel } )
 								}
 							/>
-						</>
+						</ToolsPanelItem>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			</InspectorControls>
 		</>
 	);