Table of Contents: Update toolbar controls (WordPress#71587)

* Make list type control consistent with List block

* Update test fixtures

Co-authored-by: mikachan <[email protected]>
Co-authored-by: MaggieCabrera <[email protected]>

Author: mikachan

docs/reference-guides/core-blocks.md

@@ -958,7 +958,7 @@ Summarize your post with a list of headings. Add HTML anchors to Heading blocks
 -	**Experimental:** true
 -	**Category:** design
 -	**Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** headings, maxLevel, onlyIncludeCurrentPage
+-	**Attributes:** headings, maxLevel, onlyIncludeCurrentPage, ordered
 
 ## Tag Cloud
 

packages/block-library/src/table-of-contents/block.json

@@ -22,6 +22,10 @@
 		},
 		"maxLevel": {
 			"type": "number"
+		},
+		"ordered": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {

packages/block-library/src/table-of-contents/edit.js

@@ -20,10 +20,16 @@ import {
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { renderToString } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 import { store as noticeStore } from '@wordpress/notices';
-import { tableOfContents as icon } from '@wordpress/icons';
+import {
+	tableOfContents as icon,
+	formatListBullets,
+	formatListBulletsRTL,
+	formatListNumbered,
+	formatListNumberedRTL,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -43,13 +49,19 @@ import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
  * @param {HeadingData[]}                props.attributes.headings               The list of data for each heading in the post.
  * @param {boolean}                      props.attributes.onlyIncludeCurrentPage Whether to only include headings from the current page (if the post is paginated).
  * @param {number|undefined}             props.attributes.maxLevel               The maximum heading level to include, or null to include all levels.
+ * @param {boolean}                      props.attributes.ordered                Whether to display as an ordered list (true) or unordered list (false).
  * @param {string}                       props.clientId                          The client id.
  * @param {(attributes: Object) => void} props.setAttributes                     The set attributes function.
  *
  * @return {Component} The component.
  */
 export default function TableOfContentsEdit( {
-	attributes: { headings = [], onlyIncludeCurrentPage, maxLevel },
+	attributes: {
+		headings = [],
+		onlyIncludeCurrentPage,
+		maxLevel,
+		ordered = true,
+	},
 	clientId,
 	setAttributes,
 } ) {
@@ -86,27 +98,48 @@ export default function TableOfContentsEdit( {
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const headingTree = linearToNestedHeadingList( headings );
 
-	const toolbarControls = canInsertList && (
+	const toolbarControls = (
 		<BlockControls>
 			<ToolbarGroup>
 				<ToolbarButton
-					onClick={ () =>
-						replaceBlocks(
-							clientId,
-							createBlock( 'core/list', {
-								ordered: true,
-								values: renderToString(
-									<TableOfContentsList
-										nestedHeadingList={ headingTree }
-									/>
-								),
-							} )
-						)
+					icon={ isRTL() ? formatListBulletsRTL : formatListBullets }
+					title={ __( 'Unordered' ) }
+					description={ __( 'Convert to unordered list' ) }
+					onClick={ () => setAttributes( { ordered: false } ) }
+					isActive={ ordered === false }
+				/>
+				<ToolbarButton
+					icon={
+						isRTL() ? formatListNumberedRTL : formatListNumbered
 					}
-				>
-					{ __( 'Convert to static list' ) }
-				</ToolbarButton>
+					title={ __( 'Ordered' ) }
+					description={ __( 'Convert to ordered list' ) }
+					onClick={ () => setAttributes( { ordered: true } ) }
+					isActive={ ordered === true }
+				/>
 			</ToolbarGroup>
+			{ canInsertList && (
+				<ToolbarGroup>
+					<ToolbarButton
+						onClick={ () =>
+							replaceBlocks(
+								clientId,
+								createBlock( 'core/list', {
+									ordered,
+									values: renderToString(
+										<TableOfContentsList
+											nestedHeadingList={ headingTree }
+											ordered={ ordered }
+										/>
+									),
+								} )
+							)
+						}
+					>
+						{ __( 'Convert to static list' ) }
+					</ToolbarButton>
+				</ToolbarGroup>
+			) }
 		</BlockControls>
 	);
 
@@ -118,6 +151,7 @@ export default function TableOfContentsEdit( {
 					setAttributes( {
 						onlyIncludeCurrentPage: false,
 						maxLevel: undefined,
+						ordered: true,
 					} );
 				} }
 				dropdownMenuProps={ dropdownMenuProps }
@@ -210,16 +244,19 @@ export default function TableOfContentsEdit( {
 		);
 	}
 
+	const ListTag = ordered ? 'ol' : 'ul';
+
 	return (
 		<>
 			<nav { ...blockProps }>
-				<ol>
+				<ListTag>
 					<TableOfContentsList
 						nestedHeadingList={ headingTree }
 						disableLinkActivation
 						onClick={ showRedirectionPreventedNotice }
+						ordered={ ordered }
 					/>
-				</ol>
+				</ListTag>
 			</nav>
 			{ toolbarControls }
 			{ inspectorControls }

packages/block-library/src/table-of-contents/list.tsx

@@ -14,10 +14,12 @@ export default function TableOfContentsList( {
 	nestedHeadingList,
 	disableLinkActivation,
 	onClick,
+	ordered = true,
 }: {
 	nestedHeadingList: NestedHeadingData[];
 	disableLinkActivation?: boolean;
 	onClick?: ( event: MouseEvent< HTMLAnchorElement > ) => void;
+	ordered?: boolean;
 } ): ReactElement {
 	return (
 		<>
@@ -42,11 +44,13 @@ export default function TableOfContentsList( {
 					<span className={ ENTRY_CLASS_NAME }>{ content }</span>
 				);
 
+				const NestedListTag = ordered ? 'ol' : 'ul';
+
 				return (
 					<li key={ index }>
 						{ entry }
 						{ node.children ? (
-							<ol>
+							<NestedListTag>
 								<TableOfContentsList
 									nestedHeadingList={ node.children }
 									disableLinkActivation={
@@ -58,8 +62,9 @@ export default function TableOfContentsList( {
 											? onClick
 											: undefined
 									}
+									ordered={ ordered }
 								/>
-							</ol>
+							</NestedListTag>
 						) : null }
 					</li>
 				);

packages/block-library/src/table-of-contents/save.js

@@ -9,17 +9,21 @@ import { useBlockProps } from '@wordpress/block-editor';
 import TableOfContentsList from './list';
 import { linearToNestedHeadingList } from './utils';
 
-export default function save( { attributes: { headings = [] } } ) {
+export default function save( {
+	attributes: { headings = [], ordered = true },
+} ) {
 	if ( headings.length === 0 ) {
 		return null;
 	}
+	const ListTag = ordered ? 'ol' : 'ul';
 	return (
 		<nav { ...useBlockProps.save() }>
-			<ol>
+			<ListTag>
 				<TableOfContentsList
 					nestedHeadingList={ linearToNestedHeadingList( headings ) }
+					ordered={ ordered }
 				/>
-			</ol>
+			</ListTag>
 		</nav>
 	);
 }

test/integration/fixtures/blocks/core__table-of-contents.json

@@ -15,7 +15,8 @@
 					"link": "#heading-id-2"
 				}
 			],
-			"onlyIncludeCurrentPage": false
+			"onlyIncludeCurrentPage": false,
+			"ordered": true
 		},
 		"innerBlocks": []
 	}

test/integration/fixtures/blocks/core__table-of-contents__empty.json

@@ -4,7 +4,8 @@
 		"isValid": true,
 		"attributes": {
 			"headings": [],
-			"onlyIncludeCurrentPage": false
+			"onlyIncludeCurrentPage": false,
+			"ordered": true
 		},
 		"innerBlocks": []
 	}