diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js
index bdc7fe3f28826..2a328b461ca2b 100644
--- a/packages/block-library/src/list/edit.js
+++ b/packages/block-library/src/list/edit.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -5,12 +10,7 @@ import { __ } from '@wordpress/i18n';
 import { createBlock } from '@wordpress/blocks';
 import { RichText, InspectorControls } from '@wordpress/block-editor';
 import { Fragment } from '@wordpress/element';
-import { BaseControl, PanelBody, ToggleControl } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import ListTypePicker from './list-type-picker';
+import { BaseControl, PanelBody, ToggleControl, SelectControl } from '@wordpress/components';
 
 export default function ListEdit( {
 	attributes,
@@ -22,29 +22,6 @@ export default function ListEdit( {
 } ) {
 	const { ordered, values, reversed, start, type } = attributes;
 
-	const listTypes = [
-		{
-			name: __( 'Decimal' ),
-			type: '1',
-		},
-		{
-			name: __( 'Lower alpha' ),
-			type: 'a',
-		},
-		{
-			name: __( 'Upper alpha' ),
-			type: 'A',
-		},
-		{
-			name: __( 'Lower roman' ),
-			type: 'i',
-		},
-		{
-			name: __( 'Upper roman' ),
-			type: 'I',
-		},
-	];
-
 	return (
 		<Fragment>
 			<RichText
@@ -57,7 +34,7 @@ export default function ListEdit( {
 				reversed={ reversed }
 				type={ type }
 				wrapperClassName="block-library-list"
-				className={ className }
+				className={ ordered ? classnames( className, 'ol-type-is-' + type ) : className }
 				placeholder={ __( 'Write list…' ) }
 				onMerge={ mergeBlocks }
 				unstableOnSplit={
@@ -86,11 +63,18 @@ export default function ListEdit( {
 				ordered &&
 				<InspectorControls>
 					<PanelBody title={ __( 'Ordered List Settings' ) }>
-						<ListTypePicker
-							listTypes={ listTypes }
+						<SelectControl
+							label={ __( 'List Type' ) }
 							value={ type }
-							onChange={ ( newType ) => {
-								setAttributes( { type: newType } );
+							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' ) } >
diff --git a/packages/block-library/src/list/editor.scss b/packages/block-library/src/list/editor.scss
index ed923d986c76c..7159abfb7dc34 100644
--- a/packages/block-library/src/list/editor.scss
+++ b/packages/block-library/src/list/editor.scss
@@ -4,82 +4,20 @@
 	margin-left: 1.3em;
 }
 
-.editor-styles-wrapper .block-library-list ol[type="1"] {
-	list-style: decimal;
-}
-
-.editor-styles-wrapper .block-library-list ol[type="a"] {
-	list-style: lower-alpha;
-}
-
-.editor-styles-wrapper .block-library-list ol[type="A"] {
-	list-style: upper-alpha;
-}
-
-.editor-styles-wrapper .block-library-list ol[type="i"] {
-	list-style: lower-roman;
-}
-
-.editor-styles-wrapper .block-library-list ol[type="I"] {
-	list-style: upper-roman;
-}
-
-.components-list-type-picker__buttons {
-	max-width: $sidebar-width - ( 2 * $panel-padding );
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.components-list-type-picker__custom-input {
-	.components-range-control__slider + .dashicon {
-		width: 30px;
-		height: 30px;
-	}
-}
-
-.components-list-type-picker__dropdown-content .components-button {
-	display: block;
-	position: relative;
-	padding: 10px 20px 10px 40px;
-	width: 100%;
-	text-align: left;
-
-	.dashicon {
-		position: absolute;
-		top: calc(50% - 10px);
-		left: 10px;
+.editor-styles-wrapper .block-library-list ol {
+	&.ol-type-is-1 {
+		list-style: decial;
 	}
-
-	&:hover {
-		@include menu-style__hover;
+	&.ol-type-is-a {
+		list-style: lower-alpha;
 	}
-
-	&:focus {
-		@include menu-style__focus;
+	&.ol-type-is-A {
+		list-style: upper-alpha;
 	}
-}
-
-.components-list-type-picker__buttons .components-list-type-picker__selector {
-	border: 1px solid;
-	background: none;
-	position: relative;
-	width: 110px;
-
-	@include input-style__neutral();
-
-	&:focus {
-		@include input-style__focus();
+	&.ol-type-is-i {
+		list-style: lower-roman;
 	}
-
-	&::after {
-		@include dropdown-arrow();
-		right: 8px;
-		top: 12px;
-		position: absolute;
+	&.ol-type-is-I {
+		list-style: upper-roman;
 	}
 }
-
-.block-editor__container .components-popover.components-list-type-picker__dropdown-content.is-bottom {
-	z-index: z-index(".block-editor__container .components-popover.components-list-type-picker__dropdown-content.is-bottom");
-}
diff --git a/packages/block-library/src/list/list-type-picker.js b/packages/block-library/src/list/list-type-picker.js
deleted file mode 100644
index 9fdd3144d1bc7..0000000000000
--- a/packages/block-library/src/list/list-type-picker.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { Dashicon, BaseControl, Button, Dropdown, NavigableMenu } from '@wordpress/components';
-
-function ListTypePicker( {
-	listTypes = [],
-	onChange,
-	value,
-} ) {
-	if ( ! listTypes.length ) {
-		return null;
-	}
-
-	const currentType = listTypes.find( ( listType ) => listType.type === value );
-	const currentListTypeName = ( currentType && currentType.name );
-
-	return (
-		<BaseControl label={ __( 'List Type' ) }>
-			<div className="components-list-type-picker__buttons">
-				{ ( listTypes.length > 0 ) &&
-					<Dropdown
-						className="components-list-type-picker__dropdown"
-						contentClassName="components-list-type-picker__dropdown-content"
-						position="bottom"
-						renderToggle={ ( { isOpen, onToggle } ) => (
-							<Button
-								className="components-list-type-picker__selector"
-								isLarge
-								onClick={ onToggle }
-								aria-expanded={ isOpen }
-								aria-label={ sprintf(
-									/* translators: %s: list type name */
-									__( 'List Type: %s' ), currentListTypeName
-								) }
-							>
-								{ currentListTypeName }
-							</Button>
-						) }
-						renderContent={ () => (
-							<NavigableMenu>
-								{ map( listTypes, ( { name, type } ) => {
-									const isSelected = ( value === type || ( ! value && name === 'decimal' ) );
-
-									return (
-										<Button
-											key={ name }
-											onClick={ () => onChange( type ) }
-
-											role="menuitemradio"
-											aria-checked={ isSelected }
-										>
-											{ isSelected && <Dashicon icon="saved" /> }
-											<span className="components-list-type-picker__dropdown-text-size" >
-												{ name }
-											</span>
-										</Button>
-									);
-								} ) }
-							</NavigableMenu>
-						) }
-					/>
-				}
-
-			</div>
-
-		</BaseControl>
-	);
-}
-
-export default ListTypePicker;
diff --git a/packages/block-library/src/list/save.js b/packages/block-library/src/list/save.js
index 67ebde7c0ab91..44177f6768d7b 100644
--- a/packages/block-library/src/list/save.js
+++ b/packages/block-library/src/list/save.js
@@ -8,6 +8,6 @@ export default function save( { attributes } ) {
 	const tagName = ordered ? 'ol' : 'ul';
 
 	return (
-		<RichText.Content tagName={ tagName } value={ values } reversed={ reversed } start={ start } type={ type } multiline="li" />
+		<RichText.Content tagName={ tagName } value={ values } reversed={ reversed } start={ start } type={ type } className={ ordered ? 'ol-type-is-' + type : undefined } multiline="li" />
 	);
 }
diff --git a/packages/block-library/src/list/style.scss b/packages/block-library/src/list/style.scss
new file mode 100644
index 0000000000000..b3fef90fb3e06
--- /dev/null
+++ b/packages/block-library/src/list/style.scss
@@ -0,0 +1,17 @@
+ol {
+	&.ol-type-is-1 {
+		list-style: decial;
+	}
+	&.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;
+	}
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 83588d4f223dd..132856c2046e7 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -24,6 +24,7 @@
 @import "./text-columns/style.scss";
 @import "./verse/style.scss";
 @import "./video/style.scss";
+@import "./list/style.scss";
 
 // Class names are doubled to increase specificity to assure colors take effect
 // over another base class color.