Update CSS styles

WordPress · Apr 25, 2019 · 88dc84c · 88dc84c
1 parent 06398ea
commit 88dc84c
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 189 deletions.
diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js
@@ -1,16 +1,16 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 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
@@ -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
diff --git 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
@@ -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
@@ -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.