Squash for easier merge:

f6ad4f07e6a1c8d99e55aa7acb01cf8ef1dfddd7 (HEAD -> update/list-block, Jackie6/update/list-block) Add id to BaseControl
212cab106044c4d7300d9441e48241b911db0bcb Fix unit test and e2e test
421a198bf58431c91b4c09d6ee45ba932762cb15 Refine the type definition of start and reversed
4172707059558ba9fc47d9557457e0b8e441f050 Fix typo
21ed1dbeb7881a9a5a6eea85fb3293e9d6ba0d5a Update CSS styles
925f1ab1ed073b31358a129c62abd56021e14c38 Update list type style and remove description
ef0aca95cb88203ceff78b81473e37ad8fc22714 Allow the start to be NaN
495166d3fc14591ceb88597915a19e976b2ebbeb Change to check strict equality
216ca51cfacfc174ca00d9669b88b53eaa6d0356 Fix the accidental change of travis yml
8e31259624ece930c385bf9cb7a28046505c7aff Change local state to attributes
09199ff9516aab099e47ed6e61fd4e2fadfdb95b Add list type, start, reversed settings

assets/stylesheets/_z-index.scss

@@ -97,6 +97,7 @@ $z-layers: (
 	// Shows above edit post sidebar; Specificity needs to be higher than 3 classes.
 	".block-editor__container .components-popover.components-color-palette__picker.is-bottom": 100001,
 	".block-editor__container .components-popover.components-font-size-picker__dropdown-content.is-bottom": 100001,
+	".block-editor__container .components-popover.components-list-type-picker__dropdown-content.is-bottom": 100001,
 	".edit-post-post-visibility__dialog.components-popover.is-bottom": 100001,
 
 	".components-autocomplete__results": 1000000,

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

@@ -331,6 +331,10 @@ 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,
+			type,
 			// From experimental filter. To do: pick props instead.
 			...experimentalProps
 		} = this.props;
@@ -400,6 +404,9 @@ class RichTextWrapper extends Component {
 									aria-autocomplete={ listBoxId ? 'list' : undefined }
 									aria-owns={ listBoxId }
 									aria-activedescendant={ activeId }
+									start={ start }
+									reversed={ reversed }
+									type={ type }
 								/>
 							}
 						</Autocomplete>

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

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

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

@@ -1,32 +1,52 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 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,
+	BaseControl,
+	PanelBody,
+	ToggleControl,
+	SelectControl,
+} from '@wordpress/components';
 import {
 	__unstableIndentListItems as indentListItems,
 	__unstableOutdentListItems as outdentListItems,
 	__unstableChangeListType as changeListType,
 	__unstableIsListRootSelected as isListRootSelected,
 	__unstableIsActiveListType as isActiveListType,
 } from '@wordpress/rich-text';
+import { Fragment } from '@wordpress/element';
+import { withInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { name } from './';
 
-export default function ListEdit( {
+function ListEdit( {
 	attributes,
 	setAttributes,
 	mergeBlocks,
 	onReplace,
 	className,
+	instanceId,
 } ) {
-	const { ordered, values } = attributes;
+	const { ordered, values, reversed, start, type } = attributes;
 	const tagName = ordered ? 'ol' : 'ul';
+	const startValueId = `block-list-startValue-input-${ instanceId }`;
 
 	const controls = ( { value, onChange } ) => {
 		if ( value.start === undefined ) {
@@ -111,7 +131,7 @@ export default function ListEdit( {
 		</>;
 	};
 
-	return (
+	return <>
 		<RichText
 			identifier="values"
 			multiline="li"
@@ -126,8 +146,54 @@ export default function ListEdit( {
 			__unstableOnSplitMiddle={ () => createBlock( 'core/paragraph' ) }
 			onReplace={ onReplace }
 			onRemove={ () => onReplace( [] ) }
+			start={ start }
+			reversed={ reversed }
+			type={ type }
 		>
 			{ controls }
 		</RichText>
-	);
-}
+		{
+			ordered &&
+			<InspectorControls>
+				<PanelBody title={ __( 'Ordered List Settings' ) }>
+					<SelectControl
+						label={ __( 'List Type' ) }
+						value={ type ? type : '1' }
+						options={ [
+							{ label: 'Decimal', value: '1' },
+							{ label: 'Lower alpha', value: 'a' },
+							{ label: 'Upper alpha', value: 'A' },
+							{ label: 'Lower alpha', value: 'i' },
+							{ label: 'Upper alpha', value: 'I' },
+						] }
+						onChange={ ( nextType ) => {
+							setAttributes( { type: nextType } );
+						} }
+					/>
+					<BaseControl label={ __( 'Start Value' ) } id={ startValueId } >
+						<input
+							type="number"
+							onChange={ ( event ) => {
+								setAttributes( { start: parseInt( event.target.value, 10 ) } );
+								if ( isNaN( parseInt( event.target.value, 10 ) ) ) {
+									setAttributes( { start: null } );
+								}
+							} }
+							value={ start ? start : '' }
+							step="1"
+						/>
+					</BaseControl>
+					<ToggleControl
+						label={ __( 'Reverse List' ) }
+						checked={ reversed }
+						onChange={ ( ) => {
+							setAttributes( { reversed: ! reversed } );
+						} }
+					/>
+				</PanelBody>
+			</InspectorControls>
+		}
+	</>;
+};
+
+export default withInstanceId( ListEdit );

packages/block-library/src/list/editor.scss

@@ -3,3 +3,21 @@
 	padding-left: 1.3em;
 	margin-left: 1.3em;
 }
+
+.editor-styles-wrapper .block-library-list ol {
+	&.ol-type-is-1 {
+		list-style: decimal;
+	}
+	&.ol-type-is-a {
+		list-style: lower-alpha;
+	}
+	&.ol-type-is-A {
+		list-style: upper-alpha;
+	}
+	&.ol-type-is-i {
+		list-style: lower-roman;
+	}
+	&.ol-type-is-I {
+		list-style: upper-roman;
+	}
+}

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

@@ -4,10 +4,10 @@
 import { RichText } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { ordered, values } = attributes;
+	const { ordered, values, reversed, start, type } = 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 } type={ type } className={ ( ordered && type ) ? 'ol-type-is-' + type : undefined } multiline="li" />
 	);
 }

packages/block-library/src/list/style.scss

@@ -0,0 +1,17 @@
+ol {
+	&.ol-type-is-1 {
+		list-style: decimal;
+	}
+	&.ol-type-is-a {
+		list-style: lower-alpha;
+	}
+	&.ol-type-is-A {
+		list-style: upper-alpha;
+	}
+	&.ol-type-is-i {
+		list-style: lower-roman;
+	}
+	&.ol-type-is-I {
+		list-style: upper-roman;
+	}
+}

packages/block-library/src/style.scss

@@ -23,6 +23,7 @@
 @import "./text-columns/style.scss";
 @import "./verse/style.scss";
 @import "./video/style.scss";
+@import "./list/style.scss";
 
 // The following selectors have increased specificity (using the :root prefix)
 // to assure colors take effect over another base class color, mainly to let

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

@@ -116,6 +116,18 @@ 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;
+		}
+
+		if ( this.props.type !== nextProps.type ) {
+			this.editorNode.type = nextProps.type;
+		}
+
 		const { removedKeys, updatedKeys } = diffAriaProps( this.props, nextProps );
 		removedKeys.forEach( ( key ) =>
 			this.editorNode.removeAttribute( key ) );