Add list start, reversed settings (in progress)

packages/block-editor/src/components/rich-text/index.js

@@ -331,6 +331,9 @@ class RichTextWrapper extends Component {
 			identifier,
 			// eslint-disable-next-line no-unused-vars
 			instanceId,
+			// To do: find a better way to implicitly inherit props.
+			start,
+			reversed,
 			// From experimental filter. To do: pick props instead.
 			...experimentalProps
 		} = this.props;
@@ -400,6 +403,8 @@ class RichTextWrapper extends Component {
 									aria-autocomplete={ listBoxId ? 'list' : undefined }
 									aria-owns={ listBoxId }
 									aria-activedescendant={ activeId }
+									start={ start }
+									reversed={ reversed }
 								/>
 							}
 						</Autocomplete>

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

@@ -12,6 +12,12 @@
 			"selector": "ol,ul",
 			"multiline": "li",
 			"default": ""
+		},
+		"start": {
+			"type": "number"
+		},
+		"reversed": {
+			"type": "boolean"
 		}
 	}
 }

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

@@ -3,8 +3,18 @@
  */
 import { __, _x } from '@wordpress/i18n';
 import { createBlock } from '@wordpress/blocks';
-import { RichText, BlockControls, RichTextShortcut } from '@wordpress/block-editor';
-import { Toolbar } from '@wordpress/components';
+import {
+	RichText,
+	BlockControls,
+	RichTextShortcut,
+	InspectorControls,
+} from '@wordpress/block-editor';
+import {
+	Toolbar,
+	TextControl,
+	PanelBody,
+	ToggleControl,
+} from '@wordpress/components';
 import {
 	__unstableIndentListItems as indentListItems,
 	__unstableOutdentListItems as outdentListItems,
@@ -25,7 +35,7 @@ export default function ListEdit( {
 	onReplace,
 	className,
 } ) {
-	const { ordered, values } = attributes;
+	const { ordered, values, reversed, start } = attributes;
 	const tagName = ordered ? 'ol' : 'ul';
 
 	const controls = ( { value, onChange } ) => {
@@ -111,7 +121,7 @@ export default function ListEdit( {
 		</>;
 	};
 
-	return (
+	return <>
 		<RichText
 			identifier="values"
 			multiline="li"
@@ -126,8 +136,41 @@ export default function ListEdit( {
 			__unstableOnSplitMiddle={ () => createBlock( 'core/paragraph' ) }
 			onReplace={ onReplace }
 			onRemove={ () => onReplace( [] ) }
+			start={ start }
+			reversed={ reversed }
 		>
 			{ controls }
 		</RichText>
-	);
+		{ ordered &&
+			<InspectorControls>
+				<PanelBody title={ __( 'Ordered List Settings' ) }>
+					<TextControl
+						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
+						label={ __( 'Reverse List Numbering' ) }
+						checked={ reversed || false }
+						onChange={ ( value ) => {
+							setAttributes( {
+								// Unset the attribute if not reversed.
+								reversed: value || undefined,
+							} );
+						} }
+					/>
+				</PanelBody>
+			</InspectorControls>
+		}
+	</>;
 }

packages/block-library/src/list/save.js

@@ -4,10 +4,16 @@
 import { RichText } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { ordered, values } = attributes;
+	const { ordered, values, reversed, start } = attributes;
 	const tagName = ordered ? 'ol' : 'ul';
 
 	return (
-		<RichText.Content tagName={ tagName } value={ values } multiline="li" />
+		<RichText.Content
+			tagName={ tagName }
+			value={ values }
+			reversed={ reversed }
+			start={ start }
+			multiline="li"
+		/>
 	);
 }

packages/rich-text/src/component/editable.js

@@ -116,6 +116,14 @@ export default class Editable extends Component {
 			this.editorNode.className = nextProps.className;
 		}
 
+		if ( this.props.start !== nextProps.start ) {
+			this.editorNode.setAttribute( 'start', nextProps.start );
+		}
+
+		if ( this.props.reversed !== nextProps.reversed ) {
+			this.editorNode.reversed = nextProps.reversed;
+		}
+
 		const { removedKeys, updatedKeys } = diffAriaProps( this.props, nextProps );
 		removedKeys.forEach( ( key ) =>
 			this.editorNode.removeAttribute( key ) );