Improve list item styling

Author: reygcalantaol

composer.json

@@ -1,6 +1,6 @@
 {
   "name": "ziorwebdev/wordpress-blocks",
-  "version": "1.2.12",
+  "version": "1.2.13",
   "description": "A collection of custom Gutenberg blocks designed to extend the WordPress block editor with icons, dynamic data, and flexible content composition.",
   "type": "library",
   "autoload": {

composer.lock

@@ -0,0 +1,10 @@
+.wp-block-zior-icon-list-item {
+    display: flex;
+    align-items: center;
+    gap: 12px; // spacing between icon and content
+    margin-top: 0;
+
+    >.wp-block-zior-icon-picker {
+        flex-shrink: 0; // prevent shrinking
+    }
+}

dist/blocks/view.min.css

@@ -1,169 +0,0 @@
-@use "../icon/icon-with-bg.scss" as *;
-@use "../icon/icon-without-bg.scss" as *;
-
-.wp-block-zior-icon-picker {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
-
-	padding-left: 0;
-	padding-right: 0;
-	// Some themes set text-indent on all <ul>
-	text-indent: 0;
-	// Some themes give all <ul> default margin instead of padding.
-	margin-left: 0;
-
-	// Unset background colors that can be inherited from Global Styles.
-	background: none;
-
-	// Some themes add underlines, false underlines (via shadows), and borders to <a>.
-	.wp-zior-icon a,
-	.wp-zior-icon a:hover {
-		text-decoration: none;
-		border-bottom: 0;
-		box-shadow: none;
-	}
-
-	.wp-zior-icon {
-		svg {
-			width: 1em;
-			height: 1em;
-		}
-
-		span:not(.screen-reader-text) {
-			margin-left: 0.5em;
-			margin-right: 0.5em;
-			font-size: 0.65em;
-		}
-	}
-
-	// Icon sizes.
-	// Small.
-	&.has-small-icon-size {
-		font-size: 16px; // 16 makes for a quarter-padding that keeps the icon centered.
-	}
-
-	// Normal/default.
-	&,
-	&.has-normal-icon-size {
-		font-size: 24px;
-	}
-
-	// Large.
-	&.has-large-icon-size {
-		font-size: 36px;
-	}
-
-	// Huge.
-	&.has-huge-icon-size {
-		font-size: 48px;
-	}
-
-	// Center flex items. This has an equivalent in editor.scss.
-	// It also needs to override some of the default classes usually applied to the centering class.
-	// align left must not be set, because this is the default (flex-start).
-	&.aligncenter {
-		justify-content: center;
-		display: flex;
-	}
-
-	&.alignright {
-		justify-content: flex-end;
-	}
-}
-
-.wp-block-zior-icon {
-	/* display: block; */
-	border-radius: 9999px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
-
-	@media not (prefers-reduced-motion) {
-		transition: transform 0.1s ease;
-	}
-
-	// Dimensions.
-	height: auto;
-
-	a {
-		align-items: center;
-		display: flex;
-		line-height: 0;
-	}
-
-	&:hover {
-		transform: scale(1.1);
-	}
-}
-
-// This needs specificity because themes usually override it with things like .widget-area a.
-.wp-block-zior-icon-picker .wp-block-zior-icon.wp-zior-icon {
-	display: inline-block;
-	margin: 0;
-	padding: 0;
-
-	.wp-block-zior-icon-anchor {
-
-		&,
-		&:hover,
-		&:active,
-		&:visited,
-		svg {
-			color: currentColor;
-			fill: currentColor;
-		}
-	}
-}
-
-// Provide colors for a range of icons.
-:where(.wp-block-zior-icon-picker:not(.is-style-logos-only)) {
-	// Generic items such as mail, feed, etc.
-	@include icon-with-bg;
-}
-
-// Treatment for logos only style.
-// The specificity for this selector has not been reduced to 0-1-0 as per
-// global styles variation selectors as the lack of background should be
-// enforced for this block style.
-:where(.wp-block-zior-icon-picker.is-style-logos-only) {
-	.wp-zior-icon {
-		background: none;
-
-		// Make these bigger.
-		svg {
-			width: 1.25em;
-			height: 1.25em;
-		}
-	}
-
-	@include icon-without-bg;
-}
-
-// Treatment for pill shape style.
-.wp-block-zior-icon-picker.is-style-pill-shape {
-	.wp-zior-icon {
-		width: auto;
-	}
-}
-
-// The following rules have their selector specificity set to 0-1-0 to
-// facilitate theme.json styling of the inner icon block padding.
-:root :where(.wp-block-zior-icon-picker .wp-zior-icon a) {
-	padding: 0.25em;
-}
-
-:root :where(.wp-block-zior-icon-picker.is-style-logos-only .wp-zior-icon a) {
-	padding: 0;
-}
-
-:root :where(.wp-block-zior-icon-picker.is-style-pill-shape .wp-zior-icon a) {
-	padding-left: calc((2/3) * 1em);
-	padding-right: calc((2/3) * 1em);
-}
-
-// Ensure the Snapchat label is visible when no custom
-// icon color or background color is set.
-.wp-block-zior-icon-picker:not(.has-icon-color):not(.has-icon-background-color) {
-	.wp-zior-icon-snapchat {
-		.wp-block-zior-icon-label {
-			color: #000;
-		}
-	}
-}

resources/blocks/icon-list-item/style.scss

@@ -1,4 +1,5 @@
 @use "./blocks/icon-picker/style.scss" as *;
 @use "./blocks/add-to-cart/style.scss" as *;
 @use "./blocks/product-rating/style.scss" as *;
+@use "./blocks/icon-list-item/style.scss" as *;
 @use "common.scss" as *;