Clean up List block inspector (#64025)

* tweak inspector controls

* block description, background default false

* test

* use reverse order label

* clean block color support

Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

docs/reference-guides/core-blocks.md

@@ -410,7 +410,7 @@ Display a list of your most recent posts. ([Source](https://github.com/WordPress
 
 ## List
 
-Create a bulleted or numbered list. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/list))
+An organized collection of items displayed in a specific order. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/list))
 
 -	**Name:** core/list
 -	**Category:** text
@@ -420,7 +420,7 @@ Create a bulleted or numbered list. ([Source](https://github.com/WordPress/guten
 
 ## List item
 
-Create a list item. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/list-item))
+An individual item within a list. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/list-item))
 
 -	**Name:** core/list-item
 -	**Category:** text

packages/block-library/src/list-item/block.json

@@ -6,7 +6,7 @@
 	"category": "text",
 	"parent": [ "core/list" ],
 	"allowedBlocks": [ "core/list" ],
-	"description": "Create a list item.",
+	"description": "An individual item within a list.",
 	"textdomain": "default",
 	"attributes": {
 		"placeholder": {
@@ -25,8 +25,8 @@
 		"color": {
 			"gradients": true,
 			"link": true,
+			"background": true,
 			"__experimentalDefaultControls": {
-				"background": true,
 				"text": true
 			}
 		},

packages/block-library/src/list/block.json

@@ -5,7 +5,7 @@
 	"title": "List",
 	"category": "text",
 	"allowedBlocks": [ "core/list-item" ],
-	"description": "Create a bulleted or numbered list.",
+	"description": "An organized collection of items displayed in a specific order.",
 	"keywords": [ "bullet list", "ordered list", "numbered list" ],
 	"textdomain": "default",
 	"attributes": {

packages/block-library/src/list/ordered-list-settings.js

@@ -13,25 +13,10 @@ import {
 const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => (
 	<InspectorControls>
 		<PanelBody title={ __( 'Settings' ) }>
-			<TextControl
-				__nextHasNoMarginBottom
-				label={ __( 'Start value' ) }
-				type="number"
-				onChange={ ( value ) => {
-					const int = parseInt( value, 10 );
-
-					setAttributes( {
-						// It should be possible to unset the value,
-						// e.g. with an empty string.
-						start: isNaN( int ) ? undefined : int,
-					} );
-				} }
-				value={ Number.isInteger( start ) ? start.toString( 10 ) : '' }
-				step="1"
-			/>
 			<SelectControl
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
-				label={ __( 'Numbering style' ) }
+				label={ __( 'List style' ) }
 				options={ [
 					{
 						label: __( 'Numbers' ),
@@ -57,9 +42,26 @@ const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => (
 				value={ type }
 				onChange={ ( newValue ) => setAttributes( { type: newValue } ) }
 			/>
+			<TextControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				label={ __( 'Start value' ) }
+				type="number"
+				onChange={ ( value ) => {
+					const int = parseInt( value, 10 );
+
+					setAttributes( {
+						// It should be possible to unset the value,
+						// e.g. with an empty string.
+						start: isNaN( int ) ? undefined : int,
+					} );
+				} }
+				value={ Number.isInteger( start ) ? start.toString( 10 ) : '' }
+				step="1"
+			/>
 			<ToggleControl
 				__nextHasNoMarginBottom
-				label={ __( 'Reverse list numbering' ) }
+				label={ __( 'Reverse order' ) }
 				checked={ reversed || false }
 				onChange={ ( value ) => {
 					setAttributes( {

packages/block-library/src/list/test/edit.native.js

@@ -289,9 +289,7 @@ describe( 'List block', () => {
 			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
-		const reverseButton = screen.getByLabelText(
-			/Reverse list numbering\. Off/
-		);
+		const reverseButton = screen.getByLabelText( /Reverse order\. Off/ );
 		fireEvent.press( reverseButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();