Changeset 10440 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/style.scss

Timestamp:

11/11/2020 04:23:45 PM (4 years ago)

Author:

ryelle

Message:

Plugin Directory: Show available block names, icons, and descriptions.

Props michael-arestad for design.
Fixes #5411.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/style.scss (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/style.scss

@@ -119 +119 @@
         #admin {
             display:block !important;
+        }
+    }
+
+    .plugin-blocks-list {
+        list-style: none;
+        margin-left: 0;
+
+        .plugin-blocks-list-item {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            margin-bottom: ms(2);
+        }
+
+        .block-icon {
+            display: inline-block;
+            margin-right: ms(0);
+            padding: ms(1);
+            width: 3.5rem; // 56px
+            height: 3.5rem; // 56px
+            border: 1px solid $color__border;
+            border-radius: 2px;
+
+            &.dashicons {
+                color: inherit; // Prevent rating color being applied to star icons
+            }
+
+            svg {
+                width: 16px;
+                height: 16px;
+                fill: currentColor;
+            }
+        }
+
+        .block-title {
+            align-self: center;
+            font-weight: bold;
+        }
+
+        .has-description {
+            .block-icon {
+                grid-row: 1 / span 2;
+            }
+
+            .block-title {
+                margin-bottom: ms(-8);
+            }
         }
     }