Merge pull request #1660 from Automattic/fix/varia-issue-1597

Varia: Adds support for left, center and right aligned lists.

varia/sass/blocks/list/_editor.scss

@@ -1,14 +1,24 @@
-.block-library-list {
-	ul,
-	ol {
-		margin: #{map-deep-get($config-global, "spacing", "vertical")} 0;
-		padding-left: #{2 * map-deep-get($config-global, "spacing", "horizontal")};
+ul,
+ol {
+	margin: #{map-deep-get($config-global, "spacing", "vertical")} 0;
+	padding-left: #{2 * map-deep-get($config-global, "spacing", "horizontal")};
+
+	// Utility classes
+	&.aligncenter {
+		list-style-position: inside;
+		padding: 0;
+	}
+
+	&.alignright {
+		list-style-position: inside;
+		text-align: right;
+		padding: 0;
 	}
+}
 
-	li {
-		> ul,
-		> ol {
-			margin: 0;
-		}
+li {
+	> ul,
+	> ol {
+		margin: 0;
 	}
 }

varia/sass/blocks/list/_style.scss

@@ -3,6 +3,18 @@ ol {
 	@include font-family( map-deep-get($config-list, "font", "family") );
 	margin: 0;
 	padding-left: #{2 * map-deep-get($config-global, "spacing", "horizontal")};
+
+	// Utility classes
+	&.aligncenter {
+		list-style-position: inside;
+		padding: 0;
+	}
+
+	&.alignright {
+		list-style-position: inside;
+		text-align: right;
+		padding: 0;
+	}
 }
 
 ul {
@@ -13,11 +25,6 @@ ol {
 	list-style-type: decimal;
 }
 
-li > ul,
-li > ol {
-
-}
-
 dt {
 	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 	font-weight: bold;

varia/style-editor.css

@@ -754,14 +754,27 @@ object {
 	margin: 0;
 }
 
-.block-library-list ul,
-.block-library-list ol {
+ul,
+ol {
 	margin: 32px 0;
 	padding-left: 32px;
 }
 
-.block-library-list li > ul,
-.block-library-list li > ol {
+ul.aligncenter,
+ol.aligncenter {
+	list-style-position: inside;
+	padding: 0;
+}
+
+ul.alignright,
+ol.alignright {
+	list-style-position: inside;
+	text-align: right;
+	padding: 0;
+}
+
+li > ul,
+li > ol {
 	margin: 0;
 }
 

varia/style.css

@@ -1952,6 +1952,19 @@ ol {
 	padding-left: 32px;
 }
 
+ul.aligncenter,
+ol.aligncenter {
+	list-style-position: inside;
+	padding: 0;
+}
+
+ul.alignright,
+ol.alignright {
+	list-style-position: inside;
+	text-align: right;
+	padding: 0;
+}
+
 ul {
 	list-style-type: disc;
 }