From 1284a267773e62af50cb02f20de47fa7d9041b25 Mon Sep 17 00:00:00 2001
From: Sukhendu Sekhar Guria <sukhendu.guria@rtcamp.com>
Date: Mon, 13 Jan 2025 13:36:07 +0530
Subject: [PATCH] Table of Contents Block: Refactor settings panel to use
 ToolsPanel (#67964)

* Table of Contents Block: Refactor settings panel to use ToolsPanel

* Fix: Add dropdown menu props to ToolsPanel component

* Update translated string to avoid 'toggle'

* Update toolpanel settings

Co-authored-by: Sukhendu2002 <sukhendu2002@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
---
 .../src/table-of-contents/edit.js             | 57 ++++++++++++-------
 1 file changed, 38 insertions(+), 19 deletions(-)

diff --git a/packages/block-library/src/table-of-contents/edit.js b/packages/block-library/src/table-of-contents/edit.js
index 394ff2666067d4..1b1da0f3d78baa 100644
--- a/packages/block-library/src/table-of-contents/edit.js
+++ b/packages/block-library/src/table-of-contents/edit.js
@@ -10,11 +10,12 @@ import {
 } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import {
-	PanelBody,
 	Placeholder,
 	ToggleControl,
 	ToolbarButton,
 	ToolbarGroup,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { renderToString } from '@wordpress/element';
@@ -29,6 +30,7 @@ import { tableOfContents as icon } from '@wordpress/icons';
 import TableOfContentsList from './list';
 import { linearToNestedHeadingList } from './utils';
 import { useObserveHeadings } from './hooks';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 /** @typedef {import('./utils').HeadingData} HeadingData */
 
@@ -79,7 +81,7 @@ export default function TableOfContentsEdit( {
 	);
 
 	const { replaceBlocks } = useDispatch( blockEditorStore );
-
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const headingTree = linearToNestedHeadingList( headings );
 
 	const toolbarControls = canInsertList && (
@@ -108,25 +110,42 @@ export default function TableOfContentsEdit( {
 
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Settings' ) }>
-				<ToggleControl
-					__nextHasNoMarginBottom
+			<ToolsPanel
+				label={ __( 'Settings' ) }
+				resetAll={ () => {
+					setAttributes( {
+						onlyIncludeCurrentPage: false,
+					} );
+				} }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					hasValue={ () => !! onlyIncludeCurrentPage }
 					label={ __( 'Only include current page' ) }
-					checked={ onlyIncludeCurrentPage }
-					onChange={ ( value ) =>
-						setAttributes( { onlyIncludeCurrentPage: value } )
-					}
-					help={
-						onlyIncludeCurrentPage
-							? __(
-									'Only including headings from the current page (if the post is paginated).'
-							  )
-							: __(
-									'Include headings from all pages (if the post is paginated).'
-							  )
+					onDeselect={ () =>
+						setAttributes( { onlyIncludeCurrentPage: false } )
 					}
-				/>
-			</PanelBody>
+					isShownByDefault
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Only include current page' ) }
+						checked={ onlyIncludeCurrentPage }
+						onChange={ ( value ) =>
+							setAttributes( { onlyIncludeCurrentPage: value } )
+						}
+						help={
+							onlyIncludeCurrentPage
+								? __(
+										'Only including headings from the current page (if the post is paginated).'
+								  )
+								: __(
+										'Include headings from all pages (if the post is paginated).'
+								  )
+						}
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
 		</InspectorControls>
 	);