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 (6 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);
+                        }
                 }
         }